Obviously these slides are better with me ranting over them, but people have asked...

1. Responsive Web Design
A new web standard
Andy Croll • 6th July 2011

2. Who is this idiot?
Andy Croll
@andycroll
“Between jobs”
Previously wego.com, viki.com & various consulting gigs

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

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

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

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

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

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

9. What does it look like?
blog.andycroll.com

10. What does it look like?
getdenso.com

11. What does it look like?
winnielim.com

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

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

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

15. & respond.js

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

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

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

19. @andycroll
andycroll.com
Available For Work