Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design (reprise)

Ec9306df417149a7e1e23806a3f7ec60?s=47 Andy Croll
January 16, 2012

Responsive Web Design (reprise)

Given at PHP Meetup 11 Jan 2012

Updated slides

Ec9306df417149a7e1e23806a3f7ec60?s=128

Andy Croll

January 16, 2012
Tweet

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?