Responsive Web Design - WordCamp Grand Rapids

Responsive Web Design - WordCamp Grand Rapids

WordCamp Grand Rapids 2012 - Responsive Web Design.

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

August 18, 2012
Tweet

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