Andy Croll • 6th July 2011

Responsive Web DesignA new web standard

Who is this idiot?Andy Croll@andycroll

“Between jobs”

Previously wego.com, viki.com & various consulting gigs

Why?The web is not print.

Never has been.

We used to get away with it“Best in Internet Explorer”

800×600 → 1024×768

Ubiquitous 960px grids

Circa 2002

These were the only screens we hadbut my weren’t they lovely

The “post PC” worlda.k.a. Phones are as important

There’s No Need

Not just about the tiny pocket screensAlthough I’m as guilty of this as the next designer

It’s not...m.yoursitehere.comA specific touch optimized interfaceThe awful bloody onswipe thing (although WordPress TwentyEleven is responsive)

What does it look like?

blog.andycroll.com

What does it look like?

getdenso.com

What does it look like?

winnielim.com

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!!! */}

Supported?All “modern” browsers

& Mobile Webkit

Shit browsers? JS-fallback.

The Next 1 Billion People Online Will Be Accessing From Their Phones

Mobile firstThere’s advantages in driving your design as well

& respond.js

It’s not the only solutionBut think about the amount of work an adaptive or responsive approach is compared to complete re-engineering.

Adaptive? Responsive? Flexible grids?

Get this bookabookapart.com

@beep

The other books are great too.

A Manifesto As Much A Tutorial

And while you’re buying books...Get HARDBOILED

Available For Work

@andycrollandycroll.com