Slide 1

Slide 1 text

Andy Croll • 11th Jan 2012 Responsive Web Design A new web standard

Slide 2

Slide 2 text

Who is this idiot? Andy Croll @andycroll CTO at impulseflyer.com Designer & Rails Guy (gasp!) Previously wego.com, viki.com & various consulting

Slide 3

Slide 3 text

Why? The web is not print. Never has been.

Slide 4

Slide 4 text

We used to get away with it “Best in Internet Explorer” 800×600 → 1024×768 Ubiquitous 960px grids

Slide 5

Slide 5 text

Circa 2002 These were the only screens we had but my weren’t they lovely

Slide 6

Slide 6 text

The “post PC” world a.k.a. Phones are as important (and tablets) (and kindle fires)

Slide 7

Slide 7 text

There’s No Need Not just about the tiny pocket screens Although I’m as guilty of this as the next designer

Slide 8

Slide 8 text

It’s not... m.yoursitehere.com A specific touch optimized interface The awful bloody onswipe thing (although WordPress TwentyEleven is responsive)

Slide 9

Slide 9 text

What does it look like? blog.andycroll.com

Slide 10

Slide 10 text

What does it look like? winnielim.com

Slide 11

Slide 11 text

And when you apply serious budget? bostonglobe.com

Slide 12

Slide 12 text

Many more mediaqueri.es

Slide 13

Slide 13 text

How? @media only screen and (min-width: 768px) { /* Your CSS goes here for iPad and up */ } @media only screen and (max-width: 320px) { /* Your CSS goes here for portrait phones */ } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { /* Retina Display!!! */ }

Slide 14

Slide 14 text

Supported? All “modern” browsers & Mobile Webkit Shit browsers? JS- fallback.

Slide 15

Slide 15 text

The Next 1 Billion People Online Will Be Accessing From Their Phones Mobile first There’s advantages in driving your design as well

Slide 16

Slide 16 text

& respond.js

Slide 17

Slide 17 text

It’s not the only solution But think about the amount of work an adaptive or responsive approach is compared to complete re- engineering. Adaptive? Responsive? Flexible grids? What to do with images? Javascript? Performance?

Slide 18

Slide 18 text

Get this book abookapart.com @beep The other books are great too.

Slide 19

Slide 19 text

A Manifesto As Much A Tutorial And while you’re buying books... Get HARDBOILED

Slide 20

Slide 20 text

Looking For People @andycroll andycroll.com I’m hiring. Who isn’t?