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

Building websites for HiDPI devices

Vinay M
March 23, 2013

Building websites for HiDPI devices

Presented at front end meetup Singapore

Vinay M

March 23, 2013
Tweet

More Decks by Vinay M

Other Decks in Technology

Transcript

  1. BUILDING WEBSITES FOR
    RETINA (HiDPI) DEVICES
    Vinay M
    www.artminister.com

    View Slide

  2. The web’s primary design principle is
    universality... it should be accessible from any
    kind of hardware that can connect to the
    Internet: stationary or mobile, small screen or
    large.
    — Tim Berners-Lee

    View Slide

  3. Pixel Density (PPI) of Devices
    Windows: ~96 DPI
    Mac: ~72 - 120 DPI
    Retina MBP: 220 DPI

    View Slide

  4. Pixel Density (PPI) of Devices
    Chromebook Pixel : 239 PPI

    View Slide

  5. HTC Jbutterfly
    Pixel Ratio: 3
    PPI: 440
    Samsung SIV
    Pixel Ratio: 2
    PPI: 441
    iPhone 5
    Pixel Ratio: 2
    PPI: 326
    Mobile Devices

    View Slide

  6. PPI (Pixels per inch)
    320+ PPI
    240 PPI
    160 PPI
    120 PPI
    Extra HiDPI
    Baseline for
    mobile devices

    View Slide

  7. CSS Pixels
    568 x 320
    Device Pixels @2X
    iPhone5: 1136 x 640

    View Slide

  8. Non-Retina HiDPI

    View Slide

  9. High DPI
    • Greater pixel density
    • Physical Resolution is higher (2x)
    • Content Resolution is constant
    • Content Scale is higher (2x)

    View Slide

  10. Device Independent Pixels
    • = CSS Pixels
    • CSS Pixels = Device Pixels/device-pixel-ratio

    View Slide

  11. What’s the problem
    IMAGES
    Images are not sharp on HiDPI devices

    View Slide

  12. How do we target devices
    • CSS
    • Javascript
    • Built-in browser features
    • Server side delivery of images

    View Slide

  13. CSS: device-pixel-ratio
    USE IT NOW

    View Slide

  14. CSS: device-pixel-ratio
    • Pros
    – Downloads the right image based on pixel-ratio
    • Cons
    – No support for
    – High DPI device will download large image on
    Low Bandwidth connection
    – Multiple Image versions

    View Slide

  15. CSS: IMAGE-SET
    • Only Supports Background Images
    • Chrome and Safari support
    ONLY CHROME & SAFARI, POLYFILL

    View Slide

  16. Browser features
    • Srcset
    • Polyfill: https://github.com/borismus/srcset-polyfill/
    No browser support yet. But its in the specs.
    http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
    POLYFILL

    View Slide


  17. • Still in the W3C first working draft
    • Polyfill: https://github.com/scottjehl/picturefill
    Source: http://responsiveimages.org
    POLYFILL

    View Slide

  18. Other Image Tweeks
    • Background-size:
    • Compress 2x images
    – Webp: https://developers.google.com/speed/webp/

    View Slide

  19. Javacript
    • Window.devicePixelRatio

    View Slide

  20. window.matchMedia
    • Media Queries in JS
    https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-
    queries-in-javascript/
    SAFARI, CHROME, FIREFOX MOBILE

    View Slide

  21. Server Side
    • CMS (Wordpress)
    • http://www.resrc.it :
    – Delivers the right image based on the screen
    size
    – Bandwidth Detection

    View Slide

  22. What if everyone has a HiDPI screen
    • Ultra High Definition (UHD)
    – 4k TVs
    – 8K - 7680×4320 Resolution
    • vw & vh units
    – 1 vw = 1/100 of viewport width
    • 2X the images everywhere ?

    View Slide

  23. Physical Units ?
    • Very hard to distinguish between devices
    – iPad 2 and iPad Mini
    – Phone to 7’’ tablets
    – 7’’ tablet to 10’’ tablet
    • Elements across devices are not of the same
    physical size
    – Use ?
    • Safari/Chrome does not support @media
    screen and (min-resolution :320dpi)

    View Slide

  24. To Consider for HiDPI
    • Eliminate Images + Use CSS3
    • Web fonts for icons
    • SVG
    • Use image-set and srcset
    • Use Viewport units – vw, vh

    View Slide

  25. Thank You
    • Slides: https://speakerdeck.com/artminister
    • Many thanks to
    – Micheal Cheng (@coderkungfu)
    – Hackerspace SG
    • Calling for speakers

    View Slide

  26. Other User groups and Resources
    • Talk.js
    http://www.meetup.com/Singapore-JS/events/99986652/
    • Singapore JS
    https://www.facebook.com/groups/488579174512027/
    • HTML5 Rocks SG
    http://www.meetup.com/HTML5Rocks-SG/
    • Webuild – http://webuild.sg

    View Slide