WordCamp Detroit - Responsive Web Design

D529f2403e21f08bfa16365bdf032f81?s=47 Brad Parbs
October 06, 2012

WordCamp Detroit - Responsive Web Design

320px and Up – Responsive Web Design, what is it, the benefits, a background on it, how to get started, and things to watch out for while developing sites that work on any mobile phone, tablet, desktop, and more.

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

October 06, 2012
Tweet

Transcript

  1. Responsive Design Primer Saturday, October 6, 12

  2. Brad Parbs Plugin Developer Worked on over 100 WP sites

    C ore contributor for 3.5 wrote the book “How to be Awesome” just discovered effects in Keynote WordPress Designer Saturday, October 6, 12
  3. @BradParbs BradParbs.com Brad@Parbs.me Saturday, October 6, 12

  4. Who are you? * Run a WordPress Blog * Created

    a business site * Know nothing about WP * PHP Guru or CSS Master * John Stamos I love WordPress! Someone who needs to use responsive design! Saturday, October 6, 12
  5. Why do we need Responsive Design? Over 1.2 billion mobile

    web users In the USA, 25% only use a mobile device Saturday, October 6, 12
  6. Well, that’s nice. But I don’t care about stats. Responsive

    design is the future. Saturday, October 6, 12
  7. What makes up a theme? Saturday, October 6, 12

  8. Saturday, October 6, 12

  9. the magic of CSS! Saturday, October 6, 12

  10. A little history on website design Saturday, October 6, 12

  11. “Building a website with tables is like building a website

    in Excel. Using a spreadsheet. It’s dumb. Really dumb.” -Bill C osby (not really) Saturday, October 6, 12
  12. 100% Flash sites Saturday, October 6, 12

  13. fluid grid systems Saturday, October 6, 12

  14. responsive design! Saturday, October 6, 12

  15. Saturday, October 6, 12

  16. https://status.heroku.com/ http://www.bostonglobe.com/ Saturday, October 6, 12

  17. http://robot-or-not.com/ http://colly.com/ Saturday, October 6, 12

  18. http://thinkvitamin.com/ http://www.pelicanfly.co.uk/ Saturday, October 6, 12

  19. http://stuffandnonsense.co.uk/projects/320andup/ http://hellofisher.com/ Saturday, October 6, 12

  20. So what actually makes up RWD? 1. Fluid/Flexible Grid System

    2. Responsive/Adaptive media 3. Media Queries! Saturday, October 6, 12
  21. flexible grid system Breaks the site content in blocks that

    can be moved around. Sized using ‘ems’ or percentages NOT pixel widths. pxtoem.com Figure out your widths: Saturday, October 6, 12
  22. adaptive media Images and Videos that resize themselves wordpress.org/extend/plugins/wp-fluid-images/ WP

    Fluid Images Responsive Video Embeds wordpress.org/extend/plugins/responsive-video-embeds/ FitVids for WordPress wordpress.org/extend/plugins/fitvids-for-wordpress/ Saturday, October 6, 12
  23. media queries CSS that gets applied for specific cases C

    an target device widths, rotation, etc Reformat sites and move things around Saturday, October 6, 12
  24. http://brrad.com/queries clear your floats change font size float things left

    change your nav Saturday, October 6, 12
  25. Saturday, October 6, 12

  26. Saturday, October 6, 12

  27. Saturday, October 6, 12

  28. Saturday, October 6, 12

  29. everything float: left; Saturday, October 6, 12

  30. everything float: left; margins, padding, width adjusted Saturday, October 6,

    12
  31. float: right; float: left; Saturday, October 6, 12

  32. Saturday, October 6, 12

  33. Saturday, October 6, 12

  34. how the #%&! do I test on all of these?

    Saturday, October 6, 12
  35. Some things to think about... * L ook at stats,

    optimize for those devices first * Simplify your site for all devices, desktop, and mobile * Don’t be afraid to go test at the AT&T store Saturday, October 6, 12
  36. always strive to make your site beautiful, no matter what

    Saturday, October 6, 12
  37. Struggling with integrating this? Ask for help on WordPress.org Talk

    to people here! L ook how other themes do it Google! Saturday, October 6, 12
  38. More useful plugins! wordpress.org/extend/plugins/responsive-select-menu/ Responsive Select Menu WP Orbit Slider

    wordpress.org/extend/plugins/wp-orbit-slider/ Meteor Slides wordpress.org/extend/plugins/meteor-slides/ Saturday, October 6, 12
  39. Things to think about Saturday, October 6, 12

  40. So, let’s recap. Media queries rock! L ots of cool

    plugins out there to help Responsive web design is the way to go Your site can work anywhere & everywhere John Stamos loves WordPress Saturday, October 6, 12
  41. @BradParbs BradParbs.com Brad@Parbs.me Go make your site responsive right meow!

    Slides: brrad.com/wcdetroit Saturday, October 6, 12