Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordCamp Phoenix 2013 - Intro to Responsive Design

D529f2403e21f08bfa16365bdf032f81?s=47 Brad Parbs
January 18, 2013
740

WordCamp Phoenix 2013 - Intro to Responsive Design

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

January 18, 2013
Tweet

Transcript

  1. Intro to Responsive Design Saturday, January 19, 13

  2. Brad Parbs C ore contributor for 3.5 C o-founder of

    Snow Day Created theWPclass.com Have plugins on WP.org Open Source & Startup Fanatic WC: MKE Organizer Saturday, January 19, 13
  3. @BradParbs brrad.com Brad Parbs.me @ Github.com/BradP Saturday, January 19, 13

  4. @BradParbs brrad.com Brad Parbs.me @ Github.com/BradP Saturday, January 19, 13

  5. Who are you? Saturday, January 19, 13

  6. Who are you? * Run a WordPress Site Saturday, January

    19, 13
  7. Who are you? * Run a WordPress Site * Created

    a Business Site Saturday, January 19, 13
  8. Who are you? * Run a WordPress Site * Created

    a Business Site * Know nothing about WP Saturday, January 19, 13
  9. Who are you? * Run a WordPress Site * Created

    a Business Site * Know nothing about WP * PHP Guru or CSS Master Saturday, January 19, 13
  10. Who are you? * Run a WordPress Site * Created

    a Business Site * Know nothing about WP * PHP Guru or CSS Master * John Stamos I love WordPress! Saturday, January 19, 13
  11. Who are you? * Run a WordPress Site * 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, January 19, 13
  12. Why do we need Responsive Design? Saturday, January 19, 13

  13. Why do we need Responsive Design? Over 1.2 billion mobile

    web users Saturday, January 19, 13
  14. Why do we need Responsive Design? Over 1.2 billion mobile

    web users In the USA, 25% only use a mobile device Saturday, January 19, 13
  15. Well, that’s nice. But I don’t care about stats. Saturday,

    January 19, 13
  16. Well, that’s nice. But I don’t care about stats. Responsive

    design is the future. Saturday, January 19, 13
  17. What makes up a theme? Saturday, January 19, 13

  18. Saturday, January 19, 13

  19. Saturday, January 19, 13

  20. Saturday, January 19, 13

  21. Saturday, January 19, 13

  22. Saturday, January 19, 13

  23. Saturday, January 19, 13

  24. the magic of CSS! Saturday, January 19, 13

  25. the magic of CSS! Saturday, January 19, 13

  26. the magic of CSS! Saturday, January 19, 13

  27. A little history on website design Saturday, January 19, 13

  28. “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, January 19, 13
  29. 100% Flash sites Saturday, January 19, 13

  30. fluid grid systems Saturday, January 19, 13

  31. responsive design! Saturday, January 19, 13

  32. Saturday, January 19, 13

  33. Saturday, January 19, 13

  34. https://status.heroku.com/ http://www.bostonglobe.com/ Saturday, January 19, 13

  35. http://robot-or-not.com/ http://colly.com/ Saturday, January 19, 13

  36. http://thinkvitamin.com/ http://www.pelicanfly.co.uk/ Saturday, January 19, 13

  37. http://stuffandnonsense.co.uk/projects/320andup/ http://hellofisher.com/ Saturday, January 19, 13

  38. So what actually makes up RWD? Saturday, January 19, 13

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

    Saturday, January 19, 13
  40. So what actually makes up RWD? 1. Fluid/Flexible Grid System

    2. Responsive/Adaptive media Saturday, January 19, 13
  41. So what actually makes up RWD? 1. Fluid/Flexible Grid System

    2. Responsive/Adaptive media 3. Media Queries! Saturday, January 19, 13
  42. flexible grid system Breaks the site content in blocks that

    can be moved around. Sized using ‘ems’ or percentages NOT pixel widths. Saturday, January 19, 13
  43. 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, January 19, 13
  44. adaptive media Images and Videos that resize themselves Saturday, January

    19, 13
  45. 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, January 19, 13
  46. media queries CSS that gets applied for specific cases C

    an target device widths, rotation, etc Reformat sites and move things around Saturday, January 19, 13
  47. http://brrad.com/queries Saturday, January 19, 13

  48. Saturday, January 19, 13

  49. Saturday, January 19, 13

  50. Saturday, January 19, 13

  51. Saturday, January 19, 13

  52. everything float: none; Saturday, January 19, 13

  53. margins, padding, widths adjusted Saturday, January 19, 13

  54. float: right; float: left; Saturday, January 19, 13

  55. Saturday, January 19, 13

  56. Saturday, January 19, 13

  57. L et’s get SASSy Saturday, January 19, 13

  58. L et’s get SASSy Saturday, January 19, 13

  59. L et’s get SASSy @mixin respond($media) { @if $media ==

    handhelds { @media only screen and (max-width: $break-small) { @content; } } @else if $media == tablet { @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; } } @else if $media == desktop { @media only screen and (min-width: $break-large) { @content; } } } Saturday, January 19, 13
  60. L et’s get SASSy @mixin respond($media) { @if $media ==

    handhelds { @media only screen and (max-width: $break-small) { @content; } } @else if $media == tablet { @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; } } @else if $media == desktop { @media only screen and (min-width: $break-large) { @content; } } } @include respond(handhelds) { // do some awesome SASS styles here } Saturday, January 19, 13
  61. how the #%&! do I test on all of these?

    Saturday, January 19, 13
  62. how the #%&! do I test on all of these?

    Saturday, January 19, 13
  63. 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, January 19, 13
  64. always strive to make your site beautiful, no matter what

    Saturday, January 19, 13
  65. Struggling with integrating this? Ask for help on WordPress.org Talk

    to people here! L ook how other themes do it Google! Saturday, January 19, 13
  66. 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, January 19, 13
  67. Things to think about Saturday, January 19, 13

  68. So, let’s recap. Saturday, January 19, 13

  69. So, let’s recap. Your site can work anywhere & everywhere

    Saturday, January 19, 13
  70. So, let’s recap. Responsive web design is the way to

    go Your site can work anywhere & everywhere Saturday, January 19, 13
  71. So, let’s recap. Media queries rock! Responsive web design is

    the way to go Your site can work anywhere & everywhere Saturday, January 19, 13
  72. 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 Saturday, January 19, 13
  73. 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, January 19, 13
  74. @BradParbs Brrad.com Brad@Parbs.me Go make your site responsive right meow!

    Slides: brrad.com/phx Saturday, January 19, 13