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

Scaling your Frontend

82476266af9d460415d8f1fc16bb54ed?s=47 jarkko
November 10, 2012

Scaling your Frontend

Graphics in the era of retina screens.

Presented in the Treweb 12 | 2 in Tampere.

82476266af9d460415d8f1fc16bb54ed?s=128

jarkko

November 10, 2012
Tweet

More Decks by jarkko

Other Decks in Design

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! ?