Responsive Web Design

Given at WebSG • 6th July 2011

A brief primer of responsive web-design

Transcript

1. Andy Croll • 6th July 2011 Responsive Web Design A new web standard
2. Who is this idiot? Andy Croll @andycroll “Between jobs” 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
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? 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. The Next 1 Billion People Online Will Be Accessing From Their Phones Mobile first There’s advantages in driving your design as well
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. A Manifesto As Much A Tutorial And while you’re buying books... Get HARDBOILED
19. Available For Work @andycroll andycroll.com