Responsive Design - Developer Version

Slimmed down version of a presentation given to http://www.charlotteux.org with a few adjustments for http://www.charlottefed.com so we could just review a meat 'n taters overview quickly and then dive into the code of the BarCamp Charlotte site.

You can find it on Github. https://github.com/bvandgrift/barcampclt

Transcript

2. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26 , 2011 RESPONSIVE WEB DESIGN DIGGING INTO DEVELOPMENT
3. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011
4. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011
5. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 MISTAKEN PERSONA
6. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 We have once again created a consensual hallucination. Just as we generated a mythical desktop user with the perfect viewport size, a fast connection and an infinite supply of attention, we have now generated a mythical mobile user who has a single goal and no attention span. - Jeremy Keith
7. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Embrace Flexibility
8. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 RESPONSIVE DESIGN
9. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 A design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user's needs. - Ethan Marcotte
10. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Flexible Grids
11. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Flexible Media
12. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Media Queries
13. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 THE HOLY WAR
14. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 One Web to Rule Them All
15. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Many Webs to...
16. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 It Depends
17. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 the audience It depends on...
18. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 business requirements It depends on...
19. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 time & technology constraints It depends on...
20. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 maintenance requirements It depends on...
21. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 politics It depends on...
22. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 CONTENT FIRST
23. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 1. Build your content
24. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 2. Add semantic structure
25. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 3. Add the presentation
26. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 4. Add the behavior
27. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Progressive Enhancement
28. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26, 2011 Tailor the approach to the project
29. CHARLOTTE FRONT-END DEVELOPERS BERMON PAINTER OCT 26 , 2011 FIN