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

Scaling your Frontend

jarkko
November 10, 2012

Scaling your Frontend

Graphics in the era of retina screens.

Presented in the Treweb 12 | 2 in Tampere.

jarkko

November 10, 2012
Tweet

More Decks by jarkko

Other Decks in Design

Transcript

  1. RUN

  2. SKI

  3. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13”

    WHY? YOUR GRAPHICS WILL LOOK LIKE SHIT
  4. iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13”

    WHY? BUT I HATE APPLE, WHY SHOULD I CARE?
  5. “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
  6. “Always target high- density displays by default, don’t make it

    an afterthought” – Thomas Fuchs retinafy.me
  7. IN JAVASCRIPT function isRetina(){ return (('devicePixelRatio' in window && devicePixelRatio

    > 1) || ('matchMedia' in window && !matchMedia("(-moz-device-pixel- ratio:1.0)").matches)) } from retinafy.me
  8. 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
  9. 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>
  10. Picturefill Meanwhile... Still relies on Javascript ...and lots of image

    versions ...and possibly specialized server-side support
  11. 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/
  12. 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
  13. 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/[email protected]') 0 0 repeat; } }
  14. 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
  15. SVG

  16. 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
  17. 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