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

Web414 - Responsive Web Design

Brad Parbs
September 13, 2012

Web414 - Responsive Web Design

Brad Parbs

September 13, 2012
Tweet

More Decks by Brad Parbs

Other Decks in Technology

Transcript

  1. Responsive
    Design
    Thursday, September 13, 12

    View full-size slide

  2. Brad Parbs
    Designer/Developer
    Worked on over 100 WP sites
    6 Plugins on WordPress.org
    wrote the book “How to be Awesome”
    WordPress Fanatic
    Thursday, September 13, 12

    View full-size slide

  3. Brad Parbs
    Designer/Developer
    Worked on over 100 WP sites
    6 Plugins on WordPress.org
    wrote the book “How to be Awesome”
    just discovered effects in Keynote
    WordPress Fanatic
    Thursday, September 13, 12

    View full-size slide

  4. @BradParbs
    BradParbs.com
    [email protected]
    GitHub.com/bradp
    Thursday, September 13, 12

    View full-size slide

  5. Who are you?
    Thursday, September 13, 12

    View full-size slide

  6. Who are you?
    * Run a cool website
    Thursday, September 13, 12

    View full-size slide

  7. Who are you?
    * Run a cool website
    * Make websites
    Thursday, September 13, 12

    View full-size slide

  8. Who are you?
    * Run a cool website
    * Make websites
    * Only came for pizza
    Thursday, September 13, 12

    View full-size slide

  9. Who are you?
    * Run a cool website
    * Make websites
    * Only came for pizza
    * PHP Guru or CSS Master
    Thursday, September 13, 12

    View full-size slide

  10. Who are you?
    * Run a cool website
    * Make websites
    * Only came for pizza
    * PHP Guru or CSS Master
    * John Stamos
    I love
    RWD!
    Thursday, September 13, 12

    View full-size slide

  11. Who are you?
    * Run a cool website
    * Make websites
    * Only came for pizza
    * PHP Guru or CSS Master
    * John Stamos
    I love
    RWD!
    Someone who needs
    to use responsive design!
    Thursday, September 13, 12

    View full-size slide

  12. Why do we need Responsive Design?
    Thursday, September 13, 12

    View full-size slide

  13. Why do we need Responsive Design?
    Over 1.2 billion
    mobile web users
    Thursday, September 13, 12

    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
    Thursday, September 13, 12

    View full-size slide

  15. Well, that’s nice.
    But I don’t care
    about stats.
    Thursday, September 13, 12

    View full-size slide

  16. Well, that’s nice.
    But I don’t care
    about stats.
    Responsive design is the future.
    Thursday, September 13, 12

    View full-size slide

  17. What makes up a website?
    Thursday, September 13, 12

    View full-size slide

  18. the magic of CSS!
    Thursday, September 13, 12

    View full-size slide

  19. the magic of CSS!
    Thursday, September 13, 12

    View full-size slide

  20. the magic of CSS!
    Thursday, September 13, 12

    View full-size slide

  21. A little history on website design
    Thursday, September 13, 12

    View full-size slide

  22. “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)
    Thursday, September 13, 12

    View full-size slide

  23. 100% Flash sites
    Thursday, September 13, 12

    View full-size slide

  24. fluid grid systems
    Thursday, September 13, 12

    View full-size slide

  25. responsive design!
    Thursday, September 13, 12

    View full-size slide

  26. Thursday, September 13, 12

    View full-size slide

  27. https://status.heroku.com/
    http://www.bostonglobe.com/
    Thursday, September 13, 12

    View full-size slide

  28. http://robot-or-not.com/
    http://colly.com/
    Thursday, September 13, 12

    View full-size slide

  29. http://thinkvitamin.com/
    http://www.pelicanfly.co.uk/
    Thursday, September 13, 12

    View full-size slide

  30. http://stuffandnonsense.co.uk/projects/320andup/
    http://hellofisher.com/
    Thursday, September 13, 12

    View full-size slide

  31. So what actually makes up RWD?
    Thursday, September 13, 12

    View full-size slide

  32. So what actually makes up RWD?
    1. Fluid/Flexible Grid System
    Thursday, September 13, 12

    View full-size slide

  33. So what actually makes up RWD?
    1. Fluid/Flexible Grid System
    2. Responsive/Adaptive media
    Thursday, September 13, 12

    View full-size slide

  34. So what actually makes up RWD?
    1. Fluid/Flexible Grid System
    2. Responsive/Adaptive media
    3. Media Queries!
    Thursday, September 13, 12

    View full-size slide

  35. flexible grid system
    Breaks the site content in blocks that can be moved around.
    Sized using ‘ems’ or percentages NOT pixel widths.
    Thursday, September 13, 12

    View full-size slide

  36. 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:
    Thursday, September 13, 12

    View full-size slide

  37. adaptive media
    Images and Videos that resize themselves
    http://fitvidsjs.com/
    FitVids.js
    Thursday, September 13, 12

    View full-size slide

  38. media queries
    CSS that gets applied for specific cases
    C
    an target device widths, rotation, etc
    Reformat sites and move things around
    Thursday, September 13, 12

    View full-size slide

  39. http://brrad.com/queries
    clear your floats
    change font size
    float things left
    change your nav
    Thursday, September 13, 12

    View full-size slide

  40. Thursday, September 13, 12

    View full-size slide

  41. Thursday, September 13, 12

    View full-size slide

  42. Thursday, September 13, 12

    View full-size slide

  43. Thursday, September 13, 12

    View full-size slide

  44. everything float: left;
    Thursday, September 13, 12

    View full-size slide

  45. everything float: left;
    margins, padding,
    width adjusted
    Thursday, September 13, 12

    View full-size slide

  46. float: right;
    float: left;
    Thursday, September 13, 12

    View full-size slide

  47. Thursday, September 13, 12

    View full-size slide

  48. Thursday, September 13, 12

    View full-size slide

  49. how the #%&! do I test on all of these?
    Thursday, September 13, 12

    View full-size slide

  50. how the #%&! do I test on all of these?
    Thursday, September 13, 12

    View full-size slide

  51. 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
    Thursday, September 13, 12

    View full-size slide

  52. always strive to make your site
    beautiful, no matter what
    Thursday, September 13, 12

    View full-size slide

  53. Struggling with integrating this?
    Ask for help online!
    Talk to someone here at Web414!
    L
    ook how other sites do it
    Google!
    Thursday, September 13, 12

    View full-size slide

  54. More useful things!
    http://tinynav.viljamis.com/
    TinyNav
    Twitter Bootstrap
    http://twitter.github.com/bootstrap/
    Zurb Foundation
    http://foundation.zurb.com/
    Thursday, September 13, 12

    View full-size slide

  55. Things to
    think about
    Thursday, September 13, 12

    View full-size slide

  56. So, let’s recap.
    Thursday, September 13, 12

    View full-size slide

  57. So, let’s recap.
    Your site can work anywhere & everywhere
    Thursday, September 13, 12

    View full-size slide

  58. So, let’s recap.
    Responsive web design is the way to go
    Your site can work anywhere & everywhere
    Thursday, September 13, 12

    View full-size slide

  59. So, let’s recap.
    Media queries rock!
    Responsive web design is the way to go
    Your site can work anywhere & everywhere
    Thursday, September 13, 12

    View full-size slide

  60. So, let’s recap.
    Media queries rock!
    L
    ots of cool things out there to help
    Responsive web design is the way to go
    Your site can work anywhere & everywhere
    Thursday, September 13, 12

    View full-size slide

  61. So, let’s recap.
    Media queries rock!
    L
    ots of cool things out there to help
    Responsive web design is the way to go
    Your site can work anywhere & everywhere
    John Stamos loves Responsive Web Design
    Thursday, September 13, 12

    View full-size slide

  62. @BradParbs
    BradParbs.com
    [email protected]
    Go make your site
    responsive
    right meow!
    Slides:
    brrad.com/web414rwd
    Thursday, September 13, 12

    View full-size slide