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.

152 total views
As seen on
  1. Presentation Slides

  2. Responsive Web Design

  3. 1. Fluid/flexible grid system
    2. Responsive/adaptive media
    3. Media queries
  4. Fluid/flexible grid system

    Pixtoem.com - converts pixels to ems for you

    Adaptive images
    Responsive Video Embeds
    WP Fluid Videos

    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.
  5. How Do You Test for Devices?

  6. 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. 
  7. Final Takeaways

  8. * 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.