WordCamp Providence - Responsive Web Design

Responsive Design Primer: Want to learn what Responsive Design is? Learn the history of web design, what RWD is, why you should care, how you can get started using it, and some great tips for anyone who uses WordPress.

Transcript

1. Responsive Design Primer Saturday, October 27, 12
2. Brad Parbs Plugin Developer Worked on over 100 WP sites C ore contributor for 3.5 wrote the book “How to be Awesome” WordPress Designer Saturday, October 27, 12
3. @BradParbs BradParbs.com Brad BradParbs.com @ Saturday, October 27, 12
4. Who are you? * Run a WordPress Blog * 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, October 27, 12
5. Why do we need Responsive Design? Over 1.2 billion mobile web users In the USA, 25% only use a mobile device Saturday, October 27, 12
6. Well, that’s nice. But I don’t care about stats. Responsive design is the future. Saturday, October 27, 12
7. What makes up a theme? Saturday, October 27, 12
8. Saturday, October 27, 12
9. the magic of CSS! Saturday, October 27, 12
10. A little history on website design Saturday, October 27, 12
11. “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, October 27, 12
12. 100% Flash sites Saturday, October 27, 12
13. fluid grid systems Saturday, October 27, 12
14. responsive design! Saturday, October 27, 12
15. Saturday, October 27, 12
16. Saturday, October 27, 12
17. https://status.heroku.com/ http://www.bostonglobe.com/ Saturday, October 27, 12
18. http://robot-or-not.com/ http://colly.com/ Saturday, October 27, 12
19. http://thinkvitamin.com/ http://www.pelicanfly.co.uk/ Saturday, October 27, 12
20. http://stuffandnonsense.co.uk/projects/320andup/ http://hellofisher.com/ Saturday, October 27, 12
21. So what actually makes up RWD? 1. Fluid/Flexible Grid System 2. Responsive/Adaptive media 3. Media Queries! Saturday, October 27, 12
22. 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, October 27, 12
23. 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, October 27, 12
24. media queries CSS that gets applied for specific cases C an target device widths, rotation, etc Reformat sites and move things around Saturday, October 27, 12
25. http://brrad.com/queries clear your floats change font size float things left change your nav Saturday, October 27, 12
26. Saturday, October 27, 12
27. Saturday, October 27, 12
28. Saturday, October 27, 12
29. Saturday, October 27, 12
30. everything float: none; Saturday, October 27, 12
31. everything float: left; margins, padding, width adjusted Saturday, October 27, 12
32. float: right; float: left; Saturday, October 27, 12
33. Saturday, October 27, 12
34. Saturday, October 27, 12
35. how the #%&! do I test on all of these? Saturday, October 27, 12
36. 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, October 27, 12
37. always strive to make your site beautiful, no matter what Saturday, October 27, 12
38. Struggling with integrating this? Ask for help on WordPress.org Talk to people here! L ook how other themes do it Google! Saturday, October 27, 12
39. 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, October 27, 12
40. Things to think about Saturday, October 27, 12
41. 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, October 27, 12
42. @BradParbs BradParbs.com Brad@BradParbs.com Go make your site responsive right meow! Slides: brrad.com/pvd Saturday, October 27, 12