Responsive Development

Responsive Development

Slides from my talk on responsive development at the Nashville Google Developer Group & Nashville Mobile Development Group.

E7d267d701125e7eb3c746e642685579?s=128

Colin Lord

April 29, 2014
Tweet

Transcript

  1. DEVELOPMENT RESPONSIVE

  2. None
  3. None
  4. None
  5. None
  6. m.lukebryan.com mobile.thebandperry.com iphone.garthbrooks.com

  7. WHAT’S WRONG WITH MOBILE SITES? HARD TO MAINTAIN SEARCH PENALTIES

  8. MOST MOBILE SITES DON’T REDIRECT

  9. RESPONSIVE CODE FIXES ALL THESE ISSUES ONE CODE BASE PHONES

    TABLETS SMALL MONITORS BIG MONITORS
  10. TWO MINUTE CRASH COURSE The Basics Are Simple! h1 {

    color: blue; } @media all and (max-width: 766px) { h1 { color: red; } } MOBILE DESKTOP
  11. www.BRADPAISLEY.COM LIVE DEMO!

  12. USE SASS OR LESS IT STARTS SIMPLE…THEN GETS DAUNTING QUICKLY

    MOBILE FIRST DON’T TRY TO RECYCLE 3 Things To Make It Easier
  13. RESPONSIVE OR ADAPTIVE? Most people use these terms incorrectly

  14. MAXIMUM WIDTHS Don’t forget about these!

  15. USE SVG INSTEAD OF JPG OR PNG SVGs look perfect

    on all screens with no extra work
  16. CROSS BROWSER & CROSS DEVICE TESTING Don’t Skip This Step!

    TEST ON REAL DEVICES AS MUCH AS POSSIBLE.
  17. CROSS BROWSER & CROSS DEVICE TESTING Don’t Skip This Step!

  18. THE ELEPHANT IN THE ROOM

  19. TAKEAWAYS 1 Mobile-first design. Mobile-first development. 2 3 4 Adaptive

    is an easier path than responsive. Use real devices as much as possible. Pick one: responsive or legacy IE. But never both.
  20. LET’S CHAT colin.lord@modea.com @colinlord