Technology
WordCamp Detroit 2012: Getting Started with Responsive Design
At his Getting Started with Responsive Design talk at WordCamp Detroit, Brad Parbs discussed how to get started in responsive design, highlighted main components, discussed layouts, and shared WordPress plugins to use with your responsive design.
Presentation Slides
If you haven't started doing responsive design, now's the time to start. ~bradparbs #wcdetroit
Responsive Web Design
- 1. Fluid/flexible grid system
2. Responsive/adaptive media
3. Media queries 
So far, cameos from John Stamos, Vince (the Shamwow guy) and Bill Cosby in this preso. #wcdetroit Billy Mays would approve.
BostonGlobe.com is example of large news site that is using Responsive Design. ~ via @bradparbs at #WCDetroit- Fluid/flexible grid system
Pixtoem.com - converts pixels to ems for you
Adaptive images
Responsive Video Embeds
WP Fluid Videos
FitVids
Media queries
* Use to reformat and move things around
* Most of the time you'll change your floats, font-sizes, navigation
* Before you write media queries, think about where you want to place content blocks. How Do You Test for Devices?
- No way to test for all rendering devices.
* Go visit an ATT or Verizon store, and try your site out on all their devices.
* Actually, learn who your audience is.
* Look at your stats. Test out on those devices.
* Think about what's actually important.
Always strive to make your site beautiful. Take great care with your mobile site, because people will spend a lot of time with it. Spend actual time, do a mockup for each viewport you want to support. - RT @WordCampDetroit: If you haven't started doing responsive design, now's the time to start. @bradparbs #wcdetroit
- Responsive design isn't just mobile and tablet, its also widescreen. #wcdetroit instagr.am/p/Qc3JphIB7r/
- @bradparbs says that @theandystratton once went into a Verizon store & loaded his website on all devices to test his design. #wcdetroit
@bradparbs Good stuff! I'm a graphic designer just getting into WP and this is exactly the type of thing I was hoping to learn #WCDetroit- @bradparbs You just blew my mind with the inspect element settings. You win a free building tour ;) #WCdetroit
Final Takeaways
- * Responsive web design is the way to go.
* Media queries rock. They can do anything.
* Don't invent the wheel. There's lots of WordPress plugins out there. - Thank you @bradparbs for your talk about responsive web design - and all the great resources. #wcdetroit
