Responsive Web Design

1,643 views

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,643
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web DesignA new web standardAndy Croll • 6th July 2011
  2. 2. Who is this idiot?Andy Croll@andycroll“Between jobs”Previously wego.com, viki.com & various consulting gigs
  3. 3. Why?The web is not print.Never has been.
  4. 4. We used to get away with it “Best in Internet Explorer” 800×600 → 1024×768 Ubiquitous 960px grids
  5. 5. These were the only screens we hadbut my weren’t they lovelyCirca 2002
  6. 6. The “post PC”worlda.k.a. Phones are asimportant
  7. 7. Not just about the tiny pocket screensAlthough I’m as guilty of this as the next designerThere’s No Need
  8. 8. It’s not...m.yoursitehere.comA specific touch optimized interfaceThe awful bloody onswipe thing (although WordPress TwentyEleven is responsive)
  9. 9. What does it look like? blog.andycroll.com
  10. 10. What does it look like? getdenso.com
  11. 11. What does it look like? winnielim.com
  12. 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. 13. Supported?All “modern” browsers& Mobile WebkitShit browsers? JS-fallback.
  14. 14. Mobile firstThere’s advantages in driving your design as wellThe Next 1 Billion People Online Will Be Accessing From Their Phones
  15. 15. & respond.js
  16. 16. It’s not the only solutionBut think about the amount of work an adaptive orresponsive approach is compared to complete re-engineering.Adaptive? Responsive? Flexible grids?
  17. 17. Get this bookabookapart.com@beepThe other books are greattoo.
  18. 18. And while you’re buying books...Get HARDBOILEDA Manifesto As Much A Tutorial
  19. 19. @andycrollandycroll.comAvailable For Work

×