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

WordCamp Phoenix 2013 - Intro to Responsive Design

Brad Parbs
January 18, 2013
950

WordCamp Phoenix 2013 - Intro to Responsive Design

Brad Parbs

January 18, 2013
Tweet

Transcript

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  12. Why do we need Responsive Design?
    Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  16. Well, that’s nice.
    But I don’t care
    about stats.
    Responsive design is the future.
    Saturday, January 19, 13

    View full-size slide

  17. What makes up a theme?
    Saturday, January 19, 13

    View full-size slide

  18. Saturday, January 19, 13

    View full-size slide

  19. Saturday, January 19, 13

    View full-size slide

  20. Saturday, January 19, 13

    View full-size slide

  21. Saturday, January 19, 13

    View full-size slide

  22. Saturday, January 19, 13

    View full-size slide

  23. Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  29. 100% Flash sites
    Saturday, January 19, 13

    View full-size slide

  30. fluid grid systems
    Saturday, January 19, 13

    View full-size slide

  31. responsive design!
    Saturday, January 19, 13

    View full-size slide

  32. Saturday, January 19, 13

    View full-size slide

  33. Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  44. adaptive media
    Images and Videos that resize themselves
    Saturday, January 19, 13

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  47. http://brrad.com/queries
    Saturday, January 19, 13

    View full-size slide

  48. Saturday, January 19, 13

    View full-size slide

  49. Saturday, January 19, 13

    View full-size slide

  50. Saturday, January 19, 13

    View full-size slide

  51. Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Saturday, January 19, 13

    View full-size slide

  56. Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  64. always strive to make your site
    beautiful, no matter what
    Saturday, January 19, 13

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  67. Things to
    think about
    Saturday, January 19, 13

    View full-size slide

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

    View full-size slide

  69. So, let’s recap.
    Your site can work anywhere & everywhere
    Saturday, January 19, 13

    View full-size slide

  70. So, let’s recap.
    Responsive web design is the way to go
    Your site can work anywhere & everywhere
    Saturday, January 19, 13

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  74. @BradParbs
    Brrad.com
    [email protected]
    Go make your site
    responsive
    right meow!
    Slides:
    brrad.com/phx
    Saturday, January 19, 13

    View full-size slide