Designing the Hi-DPI Web

Transcript

1. DESIGNING THE
   HI-DPI WEB
   

   View Slide

2. DAVID DEMAREE
   hello my name is
   @ddemaree on your favorite
   social network
   

   View Slide

3. W H A T I S
   “HI-DPI”
   

   View Slide

4. Hi-DPI device characteristics
   A high density display
   Typically > 160 pixels per inch
   Scaled UI graphics
   

   View Slide

5. View Slide

6. SCREEN
   

   View Slide

7. SCREEN
   demaree.me/hdweb
   1024 px
   CSS
   

   View Slide

8. Scaling factor
   Ratio of screen pixels to CSS pixels
   on a single dimension
   height: 2px
   width: 2px
   CSS Standard (1x)
   Android
   ‘hdpi’ (1.5x)
   ‘Retina’/
   ‘xhdpi’ (2x)
   

   View Slide

9. height: 2px
   width: 2px
   CSS
   There is no such thing as half a
   screen pixel, therefore artwork
   is blended/scaled on Android
   

   View Slide

10. View Slide

11. View Slide

12. Retina “disasters”
    

    View Slide

13. View Slide

14. Rasterized text
    Image buttons
    Blurry photo
    

    View Slide

15. View Slide

16. Fine detail + dark/black background = fuzzy rendering at 2x
    

    View Slide

17. View Slide

18. Rendered using Cufon
    (HTML5 Canvas)
    

    View Slide

19. Why you should
    support hi-DPI devices
    
    

    View Slide

20. Future friendly
    

    View Slide

21. Future friendly
    Fit & finish
    

    View Slide

22. Future friendly
    Fit & finish
    Clearer text/graphics aid
    usability
    

    View Slide

23. 
    Future friendly
    Fit & finish
    Clearer text/graphics aid
    usability
    

    View Slide

24. Why you might not
    support hi-DPI devices
    
    

    View Slide

25. 
    Bandwidth
    

    View Slide

26. 
    Bandwidth
    Legacy browser/device
    support
    

    View Slide

27. 
    Bandwidth
    Legacy browser/device
    support
    Your site looks good
    enough at 1x
    

    View Slide

28. HI-DPI RULES OF THUMB
    

    View Slide

29. CSS & web fonts
    where possible
    HI-DPI RULES OF THUMB
    

    View Slide

30. CSS & web fonts
    where possible
    SVG or icon fonts
    where appropriate
    HI-DPI RULES OF THUMB
    

    View Slide

31. CSS & web fonts
    where possible
    SVG or icon fonts
    where appropriate
    Responsive images
    as needed
    HI-DPI RULES OF THUMB
    

    View Slide

32. CSS3
    

    View Slide

33. CSS3 colors (rgba, hsla) 9+ ✓ ✓ ✓ ✓ ✓ ✓
    Border radius 9+ ✓ ✓ ✓ ✓ ✓ ✓
    Multiple backgrounds 9+ ✓ ✓ ✓ ✓ ✓ ✓
    Box shadow 9+ ✓ ✓ ✓ ✓ ✓ ✓
    2D/3D transforms 9+ ✓ ✓ ✓ ✓ ✓ 2D only
    Text shadow 10+ ✓ ✓ ✓ ✓ ✓ ✓
    Gradients 10+ ✓ ✓ ✓ ✓ ✓ ✓
    Border images ✓ ✓ ✓ ✓ ✓ ✓
    Text stroke ✓ ✓ ✓ ✓
    Masks ✓ ✓ ✓ ✓
    iOS
    CSS3 Browser Support
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. Full CSS3 support (Chrome) No/limited support (IE 7-8)
    

    View Slide

38. .navigation-bar {
    background-color: #04aef4;
    background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%, #04aef4), color-stop(100%, #048ac2));
    background-image: -webkit-linear-gradient(top, #04aef4, #048ac2);
    background-image: -moz-linear-gradient(top, #04aef4, #048ac2);
    background-image: -ms-linear-gradient(top, #04aef4, #048ac2);
    background-image: -o-linear-gradient(top, #04aef4, #048ac2);
    background-image: linear-gradient(top, #04aef4, #048ac2);
    color: white;
    border-bottom: 1px solid #ccc;
    display: table;
    width: 100%;
    }
    Vendor prefixes
    You hate ‘em, right?
    

    View Slide

39. Use Sass
    

    View Slide

40. bit.ly/sassintro
    

    View Slide

41. #linear-gradient {
    @include background-image(linear-gradient(left top, white, #dddddd));
    }
    SASS + COMPASS
    

    View Slide

42. #linear-gradient {
    @include background-image(linear-gradient(left top, white, #dddddd));
    }
    SASS + COMPASS
    #linear-gradient {
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-
    stop(0%, #ffffff), color-stop(100%, #dddddd));
    background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
    background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
    background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
    background-image: linear-gradient(left top, #ffffff, #dddddd);
    }
    COMPILES TO CSS
    

    View Slide

43. WEB FONTS
    

    View Slide

44. Web font advantages
    Real, native browser text
    Scales to any size
    Robust cross-browser
    support
    

    View Slide

45. View Slide

46. BusyConf.com
    Simple receipt page made delightful
    through creative use of web fonts
    

    View Slide

47. Sites we like
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. Challenges
    ⚠
    

    View Slide

52. Challenges
    Serving multiple font formats
    ⚠
    

    View Slide

53. Challenges
    Serving multiple font formats
    Cross-platform rendering
    Font loading & fallbacks
    Licensing
    ⚠
    

    View Slide

54. Hundreds of commercial typefaces
    Licensing + CDN hosting included
    Unlimited websites +
    500,000 pageviews for $49/yr
    Also included with
    Adobe Creative Cloud membership
    

    View Slide

55. New free font service powered
    by Typekit technology
    Hundreds of free/open-source
    fonts, including Cooper Black
    No signup required
    Integrated into
    Edge Tools & Services
    Adobe Edge Web Fonts
    

    View Slide

56. ICON FONTS
    

    View Slide

57. ⚠
     ▻
    ☁   
    
    
    
    
    
    
    ⬇
    ␡
    
    Icon glyphs from SS Standard & SS Social by Symbolset
    

    View Slide

58. View Slide

59. View Slide

60. 
    
    No expenses found
    Try another category, perhaps?
    
    .blank-slate:before {
    color: #999;
    content: '\1F4E5'; /* Unicode code point */
    display: block;
    font-family: 'SSStandard'; /* Icon font */
    font-size: 300%;
    }
    

    View Slide

61. 
    Delete this expense
    
    

    View Slide

62. 
    Single color only
    font-family: ‘SSSocial’
    content: ‘flickr’
    

    View Slide

63. 
    Single color only
     
     
    font-family: ‘SSSocial’
    content: ‘flickr’
    

    View Slide

64. 
    Single color only
    font-family: ‘SSSocial’
    content: ‘flickr’
    Flickr’s actual logo is rendered in 2
    colors, which icon fonts don’t support
    

    View Slide

65. Accessibility
    Generated content is invisible to search engines, but not to assistive devices
    Inbox
    Inbox
    

    View Slide

66. Accessibility
    Generated content is invisible to search engines, but not to assistive devices
    Inbox
    Inbox
    This will be read by VoiceOver on iOS as:
    “Inbox Tray, Inbox.”
    

    View Slide

67. View Slide

68. “Capital D, link”
    

    View Slide

69. View Slide

70. View Slide

71. SVG
    

    View Slide

72. Adobe Illustrator CS6
    

    View Slide

73. SVG
    4 KB
    PNG @1x - 220×70px
    3 KB
    PNG @2x - 440×140px
    6 KB
    

    View Slide

74. iOS
    9–10 4.0
    SVG browser support
    2-3
    7-8
    ✓
    ␡ These browsers/devices will see no image,
    or else will need a bitmap fallback
    

    View Slide

75. #logo {
    /* 1x PNG for IE 7-8/Android 2-3 */
    background-image: url('/assets/logo.png');
    /* SVG for everyone else */
    background-image: url('/assets/logo.svg');
    }
    

    View Slide

76. View Slide

77. Same artwork, but 96 KB larger
    from inefficient SVG encoding
    

    View Slide

78. TIP: Use “SVG Tiny” profile when exporting artwork
    

    View Slide

79. RESPONSIVE
    IMAGES
    

    View Slide

80. The bad news
    There is no single
    solution (yet) for serving
    high-resolution images
    

    View Slide

81. Proposed web standards
    Easy, native responsive image support coming to a
    browser near you at some point
    

    View Slide

82. 
    
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    
    
    
    Proposed syntax
    Not implemented by any browser as of Oct 2012
    

    View Slide

83. 
    
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    
    
    
    Media query syntax
    Proposed syntax
    Not implemented by any browser as of Oct 2012
    

    View Slide

84. 
    
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    
    
    New image set syntax
    Proposed syntax
    Not implemented by any browser as of Oct 2012
    

    View Slide

85. 
    
    srcset="med-1.jpg 1x, med-2.jpg 2x">
    srcset="large-1.jpg 1x, large-2.jpg 2x">
    
    
    
    Proposed syntax
    Not implemented by any browser as of Oct 2012
    

    View Slide

86. #selector {
    background-image: url(no-image-set.png);
    background-image: -webkit-image-set(url(myimage.jpg) 1x,
    url(myimage-hires.jpg) 2x);
    /* other prefixes for -moz, -o and -ms go here */
    }
    Proposed image-set syntax
    Available today in Chrome, Safari 6, iOS 6
    

    View Slide

87. What are our
    options today?
    

    View Slide

88. Just serve one resolution
    

    View Slide

89. Different kinds of images
    require different solutions
    

    View Slide

90. resolutions
    Different kinds of images
    require different solutions
    

    View Slide

91. View Slide

92. Small, finely detailed logos look bad on
    Retina, especially on dark backgrounds
    

    View Slide

93. 1280×486px photo looks okay on Retina
    

    View Slide

94. Sample photo @ 1x
    1280×486
    = 193 KB
    

    View Slide

95. Sample photo @ 1x
    1280×486
    = 193 KB Sample photo @ 2x
    2560×972
    = 602 KB
    

    View Slide

96. 210px Gravatar photo @2x
    

    View Slide

97. 1x Gravatar
    58 KB
    2x Gravatar
    188 KB
    

    View Slide

98. 1x Gravatar
    58 KB
    2x Gravatar
    188 KB
    1.5x Gravatar
    117 KB
    

    View Slide

99. CSS @media queries
    

    View Slide

100. #logo {
     background-image: url(/assets/logo.png);
     background-size: 400px, 200px;
     }
     @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
     background-image: url("/assets/[email protected]");
     }
     }
     @media queries + background-size
     

     View Slide

101. #logo {
     background-image: url(/assets/logo.png);
     background-size: 400px, 200px;
     }
     @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
     background-image: url("/assets/[email protected]");
     }
     }
     @media queries + background-size
     background-size fixes the image at its 1x size (in CSS
     pixels), otherwise 2x versions would be twice as large.
     

     View Slide

102. #logo {
     background-image: url(/assets/logo.png);
     background-size: 400px, 200px;
     }
     @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
     background-image: url("/assets/[email protected]");
     }
     }
     @media queries + background-size
     Just like width breakpoints in a responsive grid,
     media queries establish pixel density breakpoints for
     replacing 1x images with higher-quality ones
     

     View Slide

103. #logo {
     background-image: url(/assets/logo.png);
     background-size: 400px, 200px;
     }
     @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
     #logo {
     background-image: url("/assets/[email protected]");
     }
     }
     @media queries + background-size
     

     View Slide

104. @media
     only screen and (-webkit-min-device-pixel-ratio: 2),
     only screen and ( min--moz-device-pixel-ratio: 2),
     only screen and ( -o-min-device-pixel-ratio: 2/1),
     only screen and ( min-device-pixel-ratio: 2),
     only screen and ( min-resolution: 192dpi),
     only screen and ( min-resolution: 2dppx) {
     /* Retina-specific stuff here */
     }
     It wouldn’t be CSS if there weren’t f$%&ing vendor prefixes
     

     View Slide

105. View Slide

106. .app-icon {
     background-image: url(icons.png);
     }
     @media screen and (min-device-pixel-ratio: 1.5) {
     .app-icon {
     background-image: url([email protected]);
     /* Size of 1x sprite set */
     background-size: 750px 144px;
     }
     }
     Responsive CSS sprites
     

     View Slide

107. .app-icon.logo {
     /* All other measurements in CSS px */
     background-position: -648px -90px;
     width: 82px;
     }
     Responsive CSS sprites
     

     View Slide

108. HTML + JavaScript
     

     View Slide

109. // Returns the scaling factor, e.g. 1.5 or 2
     if((window.devicePixelRatio === undefined ? 1 »
     : window.devicePixelRatio) > 1) {
     document.cookie='HTTP_IS_RETINA=1;path=/';
     }
     devicePixelRatio property
     Available in WebKit browsers + Opera
     Sets a cookie ‘HTTP_IS_RETINA’ if scaling factor > 1
     

     View Slide

110. Changes the src attribute of all
     tags inside a container
     Uses data attributes to track opt
     into replacement, track which
     images have been replaced
     Loads both 1x and 2x versions, with
     noticeable “flash of non-Retina
     content”
     Naïve JavaScript replacement
     on Apple.com
     

     View Slide

111. github.com/scottjehl/picturefill
     

     View Slide

112. Picturefill polyfills the proposed syntax
     using elements and JavaScript
     
     
     data-media="(min-device-pixel-ratio: 1.5)">
     data-media="(min-device-pixel-ratio: 2)">
     
     
     
     

     View Slide

113. No silver bullets
     

     View Slide

114. View Slide

115. Use the most appropriate strategy for
     each kind of image
     

     View Slide

116. Use the most appropriate strategy for
     each kind of image
     Whenever possible, use CSS
     

     View Slide

117. Use the most appropriate strategy for
     each kind of image
     Whenever possible, use CSS
     Try serving only one resolution
     

     View Slide

118. Use the most appropriate strategy for
     each kind of image
     Whenever possible, use CSS
     Try serving only one resolution
     Use Picturefill if true responsive images
     are needed
     

     View Slide

119. THANK YOU
     

     View Slide

120. DAVID DEMAREE
     BYE my name WAs
     ✉
     
     
     [email protected]
     @ddemaree
     log.demaree.me
     typekit.com
     html.adobe.com
     

     View Slide