Responsive Web Design: Clever Tips and Techniques

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