Building websites for HiDPI devices

Presented at front end meetup Singapore

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