Responsive Development

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

Transcript

1. DEVELOPMENT RESPONSIVE
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