Responsive Web Design - WordCamp Chicago

Transcript

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