Scaling your Frontend

Graphics in the era of retina screens.

Presented in the Treweb 12 | 2 in Tampere.

Transcript

1. FRONTEND Jarkko Laine graphics in the era of retina screens YOUR SCALING
2. @JARKKO
3. RUN
4. SKI
5. BIKE
6. COFFEE
7. WHAT?
8. RETINA
9. RETINA HIGH DPI ≈ in Apple-speak, 2 x normal DPI
10. RETINA HIGH DPI ≈ generally anything >1.5 x normal
11. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY?
12. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY? YOUR GRAPHICS WILL LOOK LIKE SHIT
13. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY? BUT I HATE APPLE, WHY SHOULD I CARE?
14. WHY? NOKIA N770 in 2005 225dpi on a 4-inch screen
15. WHY? NEXUS ONE 254 dpi
16. WHY? NEXUS S 316 dpi
17. WHY? NEXUS 7 216 dpi
18. WHY? EVEN LAPTOPS Samsung Series 9 prototype
19. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY? HIGH IS THE NEW LOW
20. “Given that it’s clearly not possible to support all current and future pixel densities explicitly, it’s better to try to target the highest density as a default” – Thomas Fuchs retinafy.me
21. “Always target high- density displays by default, don’t make it an afterthought” – Thomas Fuchs retinafy.me
22. HOW?
23. HOW? It depends.
24. DETECTING A HIGH- DPI SCREEN
25. IN JAVASCRIPT function isRetina(){ return (('devicePixelRatio' in window && devicePixelRatio > 1) || ('matchMedia' in window && !matchMedia("(-moz-device-pixel- ratio:1.0)").matches)) } from retinafy.me
26. IN CSS: MEDIA QUERIES @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { /* your retina rules here */ } from retinafy.me
27. HOW? Text just works. *mostly
28. HOW? Photos
29. Photos One day... <picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"> </picture> W3C
30. http://www.flickr.com/photos/nzdave/2238376926/
31. Photos One day... <img src="image.jpg" srcset="med-1.jpg 1x, med-2.jpg 2x, small-2.jpg 200w 320h"> WHATWG
32. The Apple Way Meanwhile... Just load the 2x version with Javascript
33. The Apple Way Meanwhile... Uses extra bandwidth Slower to load the 2x version
34. Picturefill Meanwhile... <div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <div data-src="small.jpg"></div> <div data-src="small.jpg" data-media="(min-device-pixel-ratio: 2.0)"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="medium_x2.jpg" data-media="(min-width: 400px) and (min-device-pixel- ratio: 2.0)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="large_x2.jpg" data-media="(min-width: 800px) and (min-device-pixel- ratio: 2.0)"></div> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </noscript> </div>
35. Picturefill Meanwhile... Only loads the correct version
36. Picturefill Meanwhile... Still relies on Javascript ...and lots of image versions ...and possibly specialized server-side support
37. Thijs Method Meanwhile... Only serve the 2x version And size it correctly using CSS http://www.fngtps.com/2012/reasonable-ways-to-use-high-resolution-images-on-retina- displays/
38. Thijs Method Meanwhile... “Needlessly” loads the 2x version even for low-DPI screens.
39. Thijs Method Meanwhile... But...
40. Thijs Method Meanwhile... You can use vastly higher compression without losing quality with HiDPI images
41. Thijs Method Meanwhile... http://blog.netvlies.nl/design-interactie/retina-revolution/
42. Thijs Method Meanwhile... Caveats with large JPGs e.g. 2MP on iOS 4 and 5 Larger ones will be downsampled Artefact issues sometimes with IE9
43. HOW? Backgrounds
44. body { background-size: 100px 100px, 100% 100%; background: url('images/bg.png') 0 0 repeat; } @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { body { background: url('images/bg@2x.png') 0 0 repeat; } }
45. HOW? UI Elements
46. UI Elements Consider using CSS whenever possible Gradients Rounded corners Drop shadows
47. UI Elements Consider using CSS whenever possible Retina-readiness for free
48. UI Elements If you still need bitmaps Use PNG, not JPG Either larger version and scale down with CSS Or two versions and media queries
49. UI Elements If you still need bitmaps ...maybe you don’t after all
50. SVG
51. SVG The ugly duckling of graphics
52. SVG Vector-based TEH SCALES „
53. SVG XML-based DOM Style with CSS „ Manipulate with JS
54. SVG Old skool In the works since 1999
55. SVG Had a great future Until got swallowed by the Flash clusterfuck
56. The return of SVG Inline in HTML5 Very good browser support* *Still need fallback for Android 2 and IE < 9 Output directly from your graphics app
57. The return of SVG raphaël.js
58. The return of SVG d3.js
59. SVG CAVEATS Can be CPU-intensive Still might need fallbacks Sometimes larger than equiv. bitmap
60. ICON FONTS Nice hack Only one color per glyph No per-density special cases Hard to debug Still might be better than scaled-up bitmap icons
61. CREDITS Thomas Fuchs: retinafy.me
62. PLUG forgottensvg.com
63. THANK YOU! ?