Responsive Web Design - WordCamp Grand Rapids

WordCamp Grand Rapids 2012 - Responsive Web Design.

Transcript

1. responsive web design Brad Parbs 320px and Up! Friday, August 17, 12
2. who am i? brad@bradparbs.com @bradparbs bradparbs.com internet rockstar; Brad parbs github.com/bradp find me online Friday, August 17, 12
3. why do we need responsive web design? Friday, August 17, 12
4. show me the stats! Friday, August 17, 12
5. “There are almost 1.2 billion mobile Web users in the world.” Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1 Friday, August 17, 12
6. “There are almost 1.2 billion mobile Web users in the world.” Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1 (That’s 17% of the World’s population.) Friday, August 17, 12
7. Just in the united states, 25% of people are mobile-only Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1 Friday, August 17, 12
8. Just in the united states, 25% of people are mobile-only Global mobile statistics 2012 Part B: Mobile Web; mobile broadband penetration; 3G/4G subscribers and networks. - mobithinking.com - June 2012 - http://brrad.com/rwdstats1 25% Friday, August 17, 12
9. your users might use any number of devices Friday, August 17, 12
10. a little history table-based layouts (eww) absolute positioning with css fluid grid systems Adaptive/responsive design mobile first / retina ready responsive design Friday, August 17, 12
11. so what exactly is responsive design? 1. flexible grid system 2. flexible images/media 3. media queries! Friday, August 17, 12
12. flexible grid system Text breaks the site layout into modules that can be reformatted and moved around sized using ems or percentages so we’re not locked into a fixed pixel- width Friday, August 17, 12
13. flexible images the secret: also maybe but you could also Friday, August 17, 12
14. but what about retina devices? http://brrad.com/retinaimages you have two different size images, check who is viewing, if they are a retina device, replace the images with some javascript magic, basically follow zippykid’s guide! Friday, August 17, 12
15. media queries Friday, August 17, 12
16. Friday, August 17, 12
17. general tips if it doesnt fit on a small device, and you want to hide it, do you even need it? navigation works great as a dropdown on small devices make everything beautiful and amazing Friday, August 17, 12
18. mobile first or desktop first? progressive enhancement or graceful degredation? what we actually mean: Friday, August 17, 12
19. resources twitter bootstrap http://twitter.github.com/bootstrap zurb foundation http://foundation.zurb.com media query snippets http://brrad.com/queries bones - responsive wordpress framework http://themble.com/bones/ Reverie - responsive wordpress framework http://themefortress.com/reverie/ Friday, August 17, 12
20. http://html9responsiveboilerstrapjs.com/ H9RBS.js (v0.0001) is a flexible, dependency- free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds. Friday, August 17, 12
21. questions? Friday, August 17, 12
22. slides: brrad.com/wcgrslides questions: tweet me - @bradparbs need joomla work or marketing? check out SavvyPAnda.com Friday, August 17, 12