$30 off During Our Annual Pro Sale. View Details »

Responsive Web Design: Clever Tips and Techniques

Vitaly Friedman
November 29, 2012

Responsive Web Design: Clever Tips and Techniques

Responsive web design challenges web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Vitaly Friedman

November 29, 2012
Tweet

More Decks by Vitaly Friedman

Other Decks in Design

Transcript

  1. Responsive Design:
    Clever Tips and Tricks
    Vitaly Friedman
    28/11/2012 @ FOWD, Prague

    View Slide

  2. Vitaly Friedman, editor-in-chief
    and co-founder of SmashingMag

    View Slide

  3. View Slide

  4. This talk is about RWD techniques.

    View Slide

  5. And simple, clever tricks and ideas.
    This talk is about RWD techniques.

    View Slide

  6. And simple, clever tricks and ideas.
    This talk is about RWD techniques.
    And (a bit) about our 2012 redesign.

    View Slide

  7. Responsive Web
    Design (Extended)

    View Slide

  8. The dangerous thing is not that
    machines might start thinking like
    humans, but that humans might start
    thinking like machines.
    — Sydney J. Harris

    When Sydney J. Harris said that, he meant
    human society and our understanding of
    computers. But it can relate to what we do as
    we'll. When we think about the Web, what do

    View Slide

  9. We are blinded by chrome. When it
    comes to RWD, we think about layouts,
    and often we should, but we have to
    keep in mind that we are not rectangle
    artists. we explore solutions to
    problems. Browsers think in boxes, but
    humans shouldn't.

    View Slide

  10. Wir denken dass das Web so aussieht.
    Als Designer sehen wir uns oft als Pixel-Pusher
    oder Rectangle Zeichner. So sieht das Web aber
    nicht aus
    When it comes to responsive design, we think
    about layouts, and sometimes we should, but we
    have to keep in mind that we aren’t rectangle
    artists. We explore solutions to problems.

    View Slide

  11. A fluid, unpredictable, chaotic,
    interconnected environment
    with plenty of right and wrong
    solutions. I always feel weird
    about blog posts on why RWD is
    a wrong technique, or HTML5/
    native is a wrong solution. The
    Web isn’t black and white, it’s
    rich, extremely diverse and it
    requires pragmatic thinking.

    View Slide

  12. Responsive Web Design is an
    appropriate tool for this “fluid” Web.

    View Slide

  13. It’s a new mindset that requires us to
    rethink and extend our practices.

    View Slide

  14. Content
    Choreography

    View Slide

  15. “Media queries can be used to do
    more than patch broken layouts:
    with proper planning, we can
    begin to choreograph content
    proportional to screen size,
    serving the best possible
    experience at any width.
    — Trent Walton

    View Slide

  16. View Slide

  17. View Slide

  18. Content Choreography
    • From the technical standpoint, arrangement
    of boxes is often implemented using Flexbox.
    @media screen and
    (max-width: 33.236em) {
    #main { display: flex; }
    #main > nav,
    #main > aside { flex: 1; }
    #main > article { flex: 2; }
    #main > nav { order: 0; }
    #main > article { order: 1; }
    #main > aside { order: 2; }

    View Slide

  19. View Slide

  20. We can manipulate
    experiences to make
    them genuine across
    different viewports —
    be it desktop, mobile or
    anything else.

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. Resolution
    Independence

    View Slide

  29. Resolution Independence
    • High pixel density displays prompt us to
    create future-proof solutions for graphics.
    • Creating multiple assets for the same
    graphics (not photos) isn’t future-proof.
    • Two options: SVG and Icon Fonts.

    View Slide

  30. • HTML:

    Share
    Print

    • CSS:
    .actions a { font-size: 1em; /* Sprite: 30x160px */
    background-image: url('sprite.png'); }
    .actions .a-share {
    background-position: 10px 0; }
    .actions .a-print {
    background-position: 10px -40px; }
    PNG sprites

    View Slide

  31. • HTML:

    Share

    • CSS:
    body { font-size: 100%; } /* = 16px by default */
    .actions a { font-size: 1em;
    background-image: url('sprite.svg');
    background-size: 1.875em 10em; }
    .actions .a-share {
    background-position: 0.625em 0; }
    SVG sprites

    View Slide

  32. Resolution Independence (SVG)
    • SVG files are usually larger and browsers
    need more time to rasterize and display them.
    • Good SVG support: Chrome 4+, Safari 4+,
    FF4+, Opera 9.5+, IE9+, mobile browsers.
    • For legacy browsers (and Android 2.3)
    we need PNG-fallback with Conditional
    Comments (IE<9) or Modernizr.

    View Slide

  33. • HTML:
    Share
    • CSS:
    @font-face { font-family: 'Icon Font';
    src: url('icon-font.eot');
    src: local('☺');
    url('icon-font.woff') format('woff'),
    url('icon-font.ttf') format('truetype'),
    url('icon-font.svg') format('svg'); }
    .icon { font-family: 'Icon Font'; font-size: 20px; }
    .share:before { content: "s"; }
    Icon Fonts

    View Slide

  34. • HTML:
    Share
    History
    • CSS:
    .icon:before {
    content: attr(data-icon);
    /* Optional color definition */
    }
    Icon Fonts

    View Slide

  35. Resolution Independence
    (Web Fonts)
    • There are many comprehensive Web fonts:
    Entypo and FontAwesome are free.
    • Excellent support: everywhere but Opera
    Mini and Android 2.1.
    • Build custom, small “bundles” with Fontello
    (combines popular open-source fonts).

    View Slide

  36. View Slide

  37. Compressive
    Images

    View Slide

  38. Compressive Images
    • To display photos properly on high pixel
    density displays, we don’t need hi-res images.
    • If a JPG image has relatively small dimensions,
    we can use a workaround to keep its size small.
    • Solution: given a “normal” image resolution,
    double it and use minimal JPEG compression.

    View Slide

  39. “...Given two identical images that
    are displayed at the same size on a
    website, one can be dramatically
    smaller than the other in file size
    if it’s highly compressed and
    dramatically larger in dimensions
    than it is displayed.
    — Daan Jobsis

    View Slide

  40. 600×400px file, 0% JPEG compression,
    displayed in 600×400 (file size 7 Kb)

    View Slide

  41. 600×400px file, 0% JPEG compression,
    displayed in 300×200 (file size 7 Kb)

    View Slide

  42. 600×400px file (7 Kb)
    ________________________________
    0% JPEG compression
    displayed in 300×200
    300×200px file (21 Kb)
    _________________________________
    80% JPEG compression
    displayed in 300×200

    View Slide

  43. View Slide

  44. View Slide

  45. Conditional
    Loading

    View Slide

  46. “If you [...] had to choose between
    employing media queries to make
    the design look good on a mobile
    device or optimizing the site for
    performance, you would be better
    served by making the desktop site
    blazingly fast.
    — Jason Grigsby

    View Slide

  47. Conditional CSS
    • We ask browsers to load assets progressively —
    and only when they can be displayed.
    • Idea: if a CSS media query was fired, catch it
    with JavaScript and load additional assets.
    • CSS:
    @media all and (min-width: 45em) {
    body:after {
    content: 'desktop';
    display: none;
    }
    }

    View Slide

  48. Conditional CSS
    • JS:
    var size =
    window.getComputedStyle(document.body,':after').get
    PropertyValue('content');
    if (size == 'desktop') {
    // Load some more content.
    }
    • CSS:
    @media all and (min-width: 45em) {
    body:after {
    content: 'desktop';
    display: none;
    }
    }

    View Slide

  49. Conditional CSS (Example)
    • CSS:
    @media all and (min-width: 45em) {
    body:after {
    content: 'desktop';
    display: none;
    }
    }
    • HTML:

    data-medium="tablet-friendly-version.jpg"
    data-large="desktop-friendly-version.jpg" />

    View Slide

  50. Conditional CSS (Example)
    • JavaScript:
    var size =
    window.getComputedStyle(document.body,':after').get
    PropertyValue('content');
    if (size == 'desktop') {
    $('img').each(function(index) {
    var large = $(this).data('large');
    $(this).attr('src',large);
    }
    }
    if (size == 'tablet') {...

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. Lazy Loading
    JS, Social Buttons

    View Slide

  55. Gmail’s Lazy Loading
    • Latency is the time between when a browser
    requests a resource from a server and when it
    starts to receive the server’s response.
    • On mobile, latency is a major UX killer. For a
    1Mb page with 85 requests per page, it is 4.5s!
    • JavaScript is expensive; parsing takes time and
    blocks the rendering of the page. Usually you
    don’t need all JavaScript right away.

    View Slide

  56. Gmail’s Lazy Loading
    • Idea: let browsers download all of the JS right
    away, but evaluate it “on demand”, i.e. when
    users need a particular feature.
    • Much of the downloaded JS is commented out,
    and when needed uncommented and eval-ed.
    • Gmail’s case:
    200 Kb of JS -> 2600 ms page load
    200 Kb of JS (lazy loaded) -> 240 ms page load

    View Slide

  57. Gmail’s Lazy Loading
    • <br/>// Make sure you strip out (or replace) comment<br/>blocks in your JavaScript first.<br/>/* JavaScript of lazy module */<br/>
    <br/>function lazyLoad() {<br/>var lazyElement = document.getElementById('lazy');<br/>var lazyElementBody = lazyElement.innerHTML;<br/>var jsCode = stripOutCommentBlock(lazyElementBody);<br/>eval(jsCode); }<br/>
    Lazy Load

    View Slide

  58. View Slide

  59. The Two-Click Social Widget
    • Load social widgets only when user explicitly
    chooses to take that action to share content.
    • Idea: load small social icons by default, and
    load the FB, Twitter and G+ widgets on click.
    • Cuts down on bandwidth and on latency.
    (FB button alone weighs 120 Kb + 4 requests).

    View Slide

  60. View Slide

  61. View Slide

  62. Protecting image/
    video aspect ratios

    View Slide

  63. Protecting Image Aspect Ratios
    • When max-width: 100%; is applied to an
    image with width and height attributes
    defined in HTML, image rescales incorrectly.
    • Solution: add height: auto; for images to
    which max-width: 100% is applied.
    • CSS:
    img, video { max-width: 100%; height: auto; }

    View Slide

  64. Intrinsic Ratio For Videos
    • To ensure the intrinsic 4:3 or 16:9 ratios for
    videos, we create a box with the proper ratio,
    then stretch the video inside to fit the
    dimensions of the box.
    • HTML:



    View Slide

  65. Intrinsic Ratio For Videos
    • CSS:
    .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-top: 25px; /* player chrome */
    padding-bottom: 56.25%; /* 9:16 = 0.5625 */
    height: 0; }
    .element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: teal; }

    View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. Responsive Videos
    • We can serve different video files to different
    devices by using media attribute on the
    video attribute.
    • Supported in the latest versions of Chrome,
    Opera, Safari, FF 15+, IE9+, mobile browsers.

    View Slide

  70. Responsive Videos
    • HTML:

    media="all and (max-width: 480px),
    all and (max-device-width: 480px)">
    media="all and (max-width: 480px),
    all and (max-device-width: 480px)">




    View Slide

  71. Vertical media
    queries & splitting

    View Slide

  72. Vertical Media Queries
    • min-height and max-height are useful for
    adjusting the font-size, padding, margin and
    cropping images.
    • Beware of h/v-media queries collisions when
    resizing the browser. Things might easily
    get out of control.

    View Slide

  73. View Slide

  74. View Slide

  75. Media Queries Splitting
    • In development, we can use a breakpoint-
    based organization for CSS (“min-width”):
    0-up.css, 450-up.css, 720-up.css etc.
    • We can also set breakpoints 1px apart and
    split styles instead of overriding from one
    media query to the next (“min/max-width”):
    base.css, 0-449.css, 450-719.css etc.

    View Slide

  76. Media Queries Splitting
    • In practice, it’s often a good starting point to
    work with em media queries right away.
    0-up.css, 25em-up.css, 35em-up.css etc.
    • If it’s not an option, it’s a good idea to convert
    px to em for production code to improve
    maintenance and avoid zooming issues.

    View Slide

  77. View Slide

  78. View Slide

  79. Debugging
    Media Queries

    View Slide

  80. “Designing for the Web is like
    visualizing a tesseract. We build
    experiences by manipulating their
    shadows.
    — Tim Brown

    View Slide

  81. Debugging Media Queries
    • Due to lack of convenient tools, debugging
    RWD often feels like groping in the dark.
    There are some popular techniques though.
    • Setting the body bg color to different colors for
    each breakpoint. Also box-sizing: border-box.
    • The * technique for testing for optimal
    measure in the browser.

    View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. People like to test a number
    of metrics to see why people
    are not * staying on a site. I
    think sometimes we spend
    so much time focusin* g on
    analytics that we have no...
    *
    *

    View Slide

  86. People like to test a number
    of metrics to see why people
    are not * staying on a site. I
    think sometimes we spend
    so much time focusin* g on
    analytics that we have no...
    *
    *

    View Slide

  87. View Slide

  88. View Slide

  89. Typography-Out Approach is an option
    for building responsive websites.

    View Slide

  90. Typography-Out
    Approach

    View Slide

  91. View Slide

  92. We prepared a series of
    moodboards to further
    explore the idea we had,
    especially to find
    elements that a new,
    content-heavy layout
    could use.

    View Slide

  93. We focused
    specifically on
    macro- and
    microtypography as

    View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. View Slide

  98. View Slide

  99. Our design process was defined by one
    major constraint: perfect measure.

    View Slide

  100. If we could adequately typeset an article and
    thus establish the general context of the
    design, everything else would follow. [...]
    The key attribute for achieving perfect
    typesetting was perfect measure: a good
    average between 45 and 90 characters per
    line—on all screen resolutions.
    — Elliot Jay Stocks, “Smashing Book 3”

    View Slide

  101. So we started looking for typefaces that would best express our
    new vision, values and our deisgn persona...and oh boy were we
    excited. We felt like a kid in a candy store... until we had to be
    thrown into cold shower.
    With the abundance of rich typefaces on the Web, we excitedly
    jumped into the myriad of possibilities. We experimented with
    literally dozens of typefaces from several type foundries in various
    pairings: we considered Centro Sans and Centro Serif, Meta and
    Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few.
    We observed how they looked at different font sizes and how well
    they worked together. We examined how well they appeared in bold
    and italic and in headings and body copy, as well as how they worked
    in less obvious contexts such as image captions.

    View Slide

  102. View Slide

  103. Typefaces should be optimized for
    long reading on (many) screens and
    fit various contexts.

    View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. We started out with setting up a couple of demo pages for
    typography, including links, italics, bold.
    With all design distractions removed, we could pay a great
    deal of technical attention to the type once we set up our
    basic styles. How legible is this typeface at a particular size?
    How well does it perform on Windows? Is there a superior
    version from an alternative font delivery network that
    perhaps uses PostScript outlines for display sizes?
    Focusing on these fine details is much easier when you’re
    looking purely at the type and nothing else.
    Because there’s a lot going on visually on Smashing
    Magazine—screenshots, buttons and noisy ads—a sans-serif
    felt like a more sensible, uncluttered route for body copy. In
    fact, it was difficult to imagine a serif typeface being used for
    code-heavy articles in the coding section.

    View Slide

  108. Sorry, Proxima Nova rendering is
    incorrect on this screenshot, but we
    lost the original files. :-)

    View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. We started from mobile, and worked
    our way upwards to desktop views.

    View Slide

  118. View Slide

  119. View Slide

  120. Navigation changes: we
    used two markups: one
    with select, another
    with a nested unordered
    list. and switches them
    on and off with CSS.
    The keywords were carefully
    chosen and tested.
    We kned that it would take too
    much space, but we decided to test
    it and it performed fairly well.
    We’ve developed a toggle menu here
    as well, it is currently in the queue
    for testing. We had drop-down...
    initially here...

    View Slide

  121. View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. We never targeted specific devices—
    and introduced media queries
    whenever it felt natural to do so.

    View Slide

  126. Responsive design affects viewports
    and media, including print.

    View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. Responsive
    Design Patterns

    View Slide

  131. Responsive Design Patterns
    • Responsive design affects all design assets:
    layout, images, type, navigation, tables,
    calendars, galleries, forms, maps, ads...
    • Offline access and mobile UX enhancements
    complement RWD very well (e.g. HTML5
    localStorage, GeoLocation, Telephone links).

    View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  143. Responsive Design Patterns
    • Media queries aren’t supported in Android
    2.1 native client, Gmail app on all platforms,
    Win Mobile 6.1 & Phone 7, BlackBerry OS 5.
    • Also, Webmail services tend to ignore media
    queries and overwrite them with their custom
    CSS code.

    View Slide

  144. View Slide

  145. http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/

    View Slide

  146. View Slide

  147. There are still many
    unsolved problems.

    View Slide

  148. There are still many
    unsolved problems.
    Web forms
    Images
    Performance
    Consistency
    Maintenance
    Debugging

    View Slide

  149. The Very Final
    Conclusion

    View Slide

  150. View Slide

  151. View Slide

  152. View Slide

  153. www.smashingbook.com

    View Slide

  154. www.the-mobile-book.com

    View Slide

  155. View Slide

  156. Thank You
    For Your Attention!
    @smashingmag

    View Slide

  157. Image credits
    • Front cover: Geometric Wallpapers
    by Simon C Page (http://simoncpage.co.uk/
    blog/2012/03/ipad-hd-retina-wallpaper/)
    • Homer Simpsons: http://smashed.by/homer,
    http://smashed.by/crazy-homer

    View Slide