Responsive Web Design (reprise)

Given at PHP Meetup 11 Jan 2012

Updated slides

Transcript

1. Andy Croll • 11th Jan 2012 Responsive Web Design A new web standard
2. Who is this idiot? Andy Croll @andycroll CTO at impulseflyer.com Designer & Rails Guy (gasp!) Previously wego.com, viki.com & various consulting
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. Circa 2002 These were the only screens we had but my weren’t they lovely
6. The “post PC” world a.k.a. Phones are as important (and tablets) (and kindle fires)
7. There’s No Need Not just about the tiny pocket screens Although I’m as guilty of this as the next designer
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? winnielim.com
11. And when you apply serious budget? bostonglobe.com
12. Many more mediaqueri.es
13. 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!!! */ }
14. Supported? All “modern” browsers & Mobile Webkit Shit browsers? JS- fallback.
15. The Next 1 Billion People Online Will Be Accessing From Their Phones Mobile first There’s advantages in driving your design as well
16. & respond.js
17. 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?
18. Get this book abookapart.com @beep The other books are great too.
19. A Manifesto As Much A Tutorial And while you’re buying books... Get HARDBOILED
20. Looking For People @andycroll andycroll.com I’m hiring. Who isn’t?