Building websites for HiDPI devices

Presented at front end meetup Singapore

Transcript

1. BUILDING WEBSITES FOR RETINA (HiDPI) DEVICES Vinay M www.artminister.com
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
3. Pixel Density (PPI) of Devices Windows: ~96 DPI Mac: ~72 - 120 DPI Retina MBP: 220 DPI
4. Pixel Density (PPI) of Devices Chromebook Pixel : 239 PPI
5. HTC Jbutterfly Pixel Ratio: 3 PPI: 440 Samsung SIV Pixel Ratio: 2 PPI: 441 iPhone 5 Pixel Ratio: 2 PPI: 326 Mobile Devices
6. PPI (Pixels per inch) 320+ PPI 240 PPI 160 PPI 120 PPI Extra HiDPI Baseline for mobile devices
7. CSS Pixels 568 x 320 Device Pixels @2X iPhone5: 1136 x 640
8. Non-Retina HiDPI
9. High DPI • Greater pixel density • Physical Resolution is higher (2x) • Content Resolution is constant • Content Scale is higher (2x)
10. Device Independent Pixels • = CSS Pixels • CSS Pixels = Device Pixels/device-pixel-ratio
11. What’s the problem IMAGES Images are not sharp on HiDPI devices
12. How do we target devices • CSS • Javascript • Built-in browser features • Server side delivery of images
13. CSS: device-pixel-ratio USE IT NOW
14. CSS: device-pixel-ratio • Pros – Downloads the right image based on pixel-ratio • Cons – No support for <img > – High DPI device will download large image on Low Bandwidth connection – Multiple Image versions
15. CSS: IMAGE-SET • Only Supports Background Images • Chrome and Safari support ONLY CHROME & SAFARI, POLYFILL
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
17. <picture> • Still in the W3C first working draft • Polyfill: https://github.com/scottjehl/picturefill Source: http://responsiveimages.org POLYFILL
18. Other Image Tweeks • Background-size: • Compress 2x images – Webp: https://developers.google.com/speed/webp/
19. Javacript • Window.devicePixelRatio
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
21. Server Side • CMS (Wordpress) • http://www.resrc.it : – Delivers the right image based on the screen size – Bandwidth Detection
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 ?
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 <button style=“width: 2inch;”> ? • Safari/Chrome does not support @media screen and (min-resolution :320dpi)
24. To Consider for HiDPI • Eliminate Images + Use CSS3 • Web fonts for icons • SVG • Use image-set and srcset • Use Viewport units – vw, vh
25. Thank You • Slides: https://speakerdeck.com/artminister • Many thanks to – Micheal Cheng (@coderkungfu) – Hackerspace SG • Calling for speakers
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