Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing the Hi-DPI Web

David Demaree
October 06, 2012

Designing the Hi-DPI Web

On optimizing web sites and apps for next-generation displays and the post-pixel future. Presented at ChicagoWebConf 2012 at 1871 in Chicago, IL.

David Demaree

October 06, 2012
Tweet

More Decks by David Demaree

Other Decks in Design

Transcript

  1. DESIGNING THE
    HI-DPI WEB

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. SCREEN
    demaree.me/hdweb
    1024 px
    CSS

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. Retina “disasters”

    View full-size slide

  9. Rasterized text
    Image buttons
    Blurry photo

    View full-size slide

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

    View full-size slide

  11. Rendered using Cufon
    (HTML5 Canvas)

    View full-size slide

  12. Why you should
    support hi-DPI devices

    View full-size slide

  13. Future friendly

    View full-size slide

  14. Future friendly
    Fit & finish

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  17. Why you might not
    support hi-DPI devices

    View full-size slide


  18. Bandwidth
    Legacy browser/device
    support

    View full-size slide


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

    View full-size slide

  20. HI-DPI RULES OF THUMB

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. .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 full-size slide

  27. bit.ly/sassintro

    View full-size slide

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

    View full-size slide

  29. #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 full-size slide

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

    View full-size slide

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

    View full-size slide

  32. Sites we like

    View full-size slide

  33. Challenges
    ⚠

    View full-size slide

  34. Challenges
    Serving multiple font formats
    ⚠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. ⚠
     ▻
    ☁   



    
    

    ⬇
    ␡

    Icon glyphs from SS Standard & SS Social by Symbolset

    View full-size slide



  39. 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 full-size slide


  40. Delete this expense

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

  46. “Capital D, link”

    View full-size slide

  47. Adobe Illustrator CS6

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. #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 full-size slide

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

    View full-size slide

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

    View full-size slide

  53. RESPONSIVE
    IMAGES

    View full-size slide

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

    View full-size slide

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

    View full-size slide



  56. 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 full-size slide



  57. 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 full-size slide



  58. 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 full-size slide



  59. 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 full-size slide

  60. #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 full-size slide

  61. What are our
    options today?

    View full-size slide

  62. Just serve one resolution

    View full-size slide

  63. Different kinds of images
    require different solutions

    View full-size slide

  64. resolutions
    Different kinds of images
    require different solutions

    View full-size slide

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

    View full-size slide

  66. 1280×486px photo looks okay on Retina

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. 210px Gravatar photo @2x

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. CSS @media queries

    View full-size slide

  73. #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 full-size slide

  74. #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 full-size slide

  75. #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 full-size slide

  76. #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 full-size slide

  77. @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 full-size slide

  78. .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 full-size slide

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

    View full-size slide

  80. HTML + JavaScript

    View full-size slide

  81. // 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 full-size slide

  82. 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 full-size slide

  83. github.com/scottjehl/picturefill

    View full-size slide

  84. 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 full-size slide

  85. No silver bullets

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. 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 full-size slide

  90. DAVID DEMAREE
    BYE my name WAs
    ✉
    

    [email protected]
    @ddemaree
    log.demaree.me
    typekit.com
    html.adobe.com

    View full-size slide