Slide 1

Slide 1 text

FRONTEND Jarkko Laine graphics in the era of retina screens YOUR SCALING

Slide 2

Slide 2 text

@JARKKO

Slide 3

Slide 3 text

RUN

Slide 4

Slide 4 text

SKI

Slide 5

Slide 5 text

BIKE

Slide 6

Slide 6 text

COFFEE

Slide 7

Slide 7 text

WHAT?

Slide 8

Slide 8 text

RETINA

Slide 9

Slide 9 text

RETINA HIGH DPI ≈ in Apple-speak, 2 x normal DPI

Slide 10

Slide 10 text

RETINA HIGH DPI ≈ generally anything >1.5 x normal

Slide 11

Slide 11 text

iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY? BUT I HATE APPLE, WHY SHOULD I CARE?

Slide 14

Slide 14 text

WHY? NOKIA N770 in 2005 225dpi on a 4-inch screen

Slide 15

Slide 15 text

WHY? NEXUS ONE 254 dpi

Slide 16

Slide 16 text

WHY? NEXUS S 316 dpi

Slide 17

Slide 17 text

WHY? NEXUS 7 216 dpi

Slide 18

Slide 18 text

WHY? EVEN LAPTOPS Samsung Series 9 prototype

Slide 19

Slide 19 text

iPhone 4+ Retina MBP 15” iPad “3”+ Retina MBP 13” WHY? HIGH IS THE NEW LOW

Slide 20

Slide 20 text

“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

Slide 21

Slide 21 text

“Always target high- density displays by default, don’t make it an afterthought” – Thomas Fuchs retinafy.me

Slide 22

Slide 22 text

HOW?

Slide 23

Slide 23 text

HOW? It depends.

Slide 24

Slide 24 text

DETECTING A HIGH- DPI SCREEN

Slide 25

Slide 25 text

IN JAVASCRIPT function isRetina(){ return (('devicePixelRatio' in window && devicePixelRatio > 1) || ('matchMedia' in window && !matchMedia("(-moz-device-pixel- ratio:1.0)").matches)) } from retinafy.me

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

HOW? Text just works. *mostly

Slide 28

Slide 28 text

HOW? Photos

Slide 29

Slide 29 text

Photos One day... W3C

Slide 30

Slide 30 text

http://www.flickr.com/photos/nzdave/2238376926/

Slide 31

Slide 31 text

Photos One day... WHATWG

Slide 32

Slide 32 text

The Apple Way Meanwhile... Just load the 2x version with Javascript

Slide 33

Slide 33 text

The Apple Way Meanwhile... Uses extra bandwidth Slower to load the 2x version

Slide 34

Slide 34 text

Picturefill Meanwhile...
A giant stone face at The Bayon temple in
Angkor Thom, Cambodia

Slide 35

Slide 35 text

Picturefill Meanwhile... Only loads the correct version

Slide 36

Slide 36 text

Picturefill Meanwhile... Still relies on Javascript ...and lots of image versions ...and possibly specialized server-side support

Slide 37

Slide 37 text

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/

Slide 38

Slide 38 text

Thijs Method Meanwhile... “Needlessly” loads the 2x version even for low-DPI screens.

Slide 39

Slide 39 text

Thijs Method Meanwhile... But...

Slide 40

Slide 40 text

Thijs Method Meanwhile... You can use vastly higher compression without losing quality with HiDPI images

Slide 41

Slide 41 text

Thijs Method Meanwhile... http://blog.netvlies.nl/design-interactie/retina-revolution/

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

HOW? Backgrounds

Slide 44

Slide 44 text

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; } }

Slide 45

Slide 45 text

HOW? UI Elements

Slide 46

Slide 46 text

UI Elements Consider using CSS whenever possible Gradients Rounded corners Drop shadows

Slide 47

Slide 47 text

UI Elements Consider using CSS whenever possible Retina-readiness for free

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

UI Elements If you still need bitmaps ...maybe you don’t after all

Slide 50

Slide 50 text

SVG

Slide 51

Slide 51 text

SVG The ugly duckling of graphics

Slide 52

Slide 52 text

SVG Vector-based TEH SCALES „

Slide 53

Slide 53 text

SVG XML-based DOM Style with CSS „ Manipulate with JS

Slide 54

Slide 54 text

SVG Old skool In the works since 1999

Slide 55

Slide 55 text

SVG Had a great future Until got swallowed by the Flash clusterfuck

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

The return of SVG raphaël.js

Slide 58

Slide 58 text

The return of SVG d3.js

Slide 59

Slide 59 text

SVG CAVEATS Can be CPU-intensive Still might need fallbacks Sometimes larger than equiv. bitmap

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

CREDITS Thomas Fuchs: retinafy.me

Slide 62

Slide 62 text

PLUG forgottensvg.com

Slide 63

Slide 63 text

THANK YOU! ?