WordCamp Phoenix 2013 - Intro to Responsive Design

Transcript

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. Saturday, January 19, 13
    

    View Slide

19. Saturday, January 19, 13
    

    View Slide

20. Saturday, January 19, 13
    

    View Slide

21. Saturday, January 19, 13
    

    View Slide

22. Saturday, January 19, 13
    

    View Slide

23. Saturday, January 19, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

30. fluid grid systems
    Saturday, January 19, 13
    

    View Slide

31. responsive design!
    Saturday, January 19, 13
    

    View Slide

32. Saturday, January 19, 13
    

    View Slide

33. Saturday, January 19, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View 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 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 Slide

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

    View Slide

48. Saturday, January 19, 13
    

    View Slide

49. Saturday, January 19, 13
    

    View Slide

50. Saturday, January 19, 13
    

    View Slide

51. Saturday, January 19, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. Saturday, January 19, 13
    

    View Slide

56. Saturday, January 19, 13
    

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

74. @BradParbs
    Brrad.com
    Brad@Parbs.me
    Go make your site
    responsive
    right meow!
    Slides:
    brrad.com/phx
    Saturday, January 19, 13
    

    View Slide