Web414 - Responsive Web Design

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