Save 37% off PRO during our Black Friday Sale! »

Web414 - Responsive Web Design

D529f2403e21f08bfa16365bdf032f81?s=47 Brad Parbs
September 13, 2012

Web414 - Responsive Web Design

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

September 13, 2012
Tweet

Transcript

  1. Responsive Design Thursday, September 13, 12

  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
  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
  4. @BradParbs BradParbs.com brad@parbs.me GitHub.com/bradp Thursday, September 13, 12

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

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

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

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

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

    websites * Only came for pizza * PHP Guru or CSS Master Thursday, September 13, 12
  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
  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
  12. Why do we need Responsive Design? Thursday, September 13, 12

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

    web users Thursday, September 13, 12
  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
  15. Well, that’s nice. But I don’t care about stats. Thursday,

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

    design is the future. Thursday, September 13, 12
  17. What makes up a website? Thursday, September 13, 12

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

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

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

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

  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
  23. 100% Flash sites Thursday, September 13, 12

  24. fluid grid systems Thursday, September 13, 12

  25. responsive design! Thursday, September 13, 12

  26. Thursday, September 13, 12

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

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

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

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

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

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

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

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

    2. Responsive/Adaptive media 3. Media Queries! Thursday, September 13, 12
  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
  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
  37. adaptive media Images and Videos that resize themselves http://fitvidsjs.com/ FitVids.js

    Thursday, September 13, 12
  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
  39. http://brrad.com/queries clear your floats change font size float things left

    change your nav Thursday, September 13, 12
  40. Thursday, September 13, 12

  41. Thursday, September 13, 12

  42. Thursday, September 13, 12

  43. Thursday, September 13, 12

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

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

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

  47. Thursday, September 13, 12

  48. Thursday, September 13, 12

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

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

    Thursday, September 13, 12
  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
  52. always strive to make your site beautiful, no matter what

    Thursday, September 13, 12
  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
  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
  55. Things to think about Thursday, September 13, 12

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

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

    Thursday, September 13, 12
  58. So, let’s recap. Responsive web design is the way to

    go Your site can work anywhere & everywhere Thursday, September 13, 12
  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
  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
  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
  62. @BradParbs BradParbs.com brad@parbs.me Go make your site responsive right meow!

    Slides: brrad.com/web414rwd Thursday, September 13, 12