Responsive Design for Genesis Child Themes

With the exponential increase of mobile device and tablet users, the concept of responsive web design is becoming more relevant to what we do here at StudioPress. While there are some plugins that exist which make a theme “mobile”, we decided to take matters into our own hands.

While I was in San Francisco this summer for WordCamp, I had the pleasure of attending a session called Responsive Web Design given by Sara Cannon. (Follow her at @saracannon.)

There’s no denying the longterm effects that mobile devices will have on web design. Sara happens to think so as well:

Your site is about your content. With mobile devices, iPads, phones, gaming consoles, etc: people can access your content many different ways and formats. How can we maintain some control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform?

Moving Towards Responsive Design

That being said, we will be moving towards a responsive design approach with Genesis and our child themes. When Genesis 1.8 is released, the default parent theme will already have it. If you want to check it out, you can visit the Sample theme demo to see how it looks on mobile devices as well as reduced screen resolutions.

If you’re looking for immediate gratification, you can check out the Driskill theme developed by Bill Erickson – which is the first responsive theme made available on the Marketplace.

Over the course of time, we’ll be updating our existing themes to take advantage of this feature. With the release of our new themes, we’ll also be incorporating responsive design into them. You can see a sample of how the updated Agency theme will look with responsive design.

Sample Shots from the iPhone

Responsive Design - HeaderResponsive Design - PostResponsive Design - CommentsResponsive Design - Footer

Sample Shots from the iPad

Responsive Design - TopResponsive Design - Bottom