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

Comments

  1. Sweet, I was hoping for info about this today.

    I guess this means 1.8 will *not* go live today?

    Any other guidance for someone willing to work with pretty much any theme & will be doing a site today?

  2. Very cool, Brian! I was just wondering about this a few days ago, since I just bought the Pro Plus Pkg. Really looking forward to the 1.8 update now!

  3. I sat in on Sara’s session at WordCamp SF, and we’ve had a number of discussions and demos on responsive design at the OC WordPress Meetup. I haven’t created my own responsive design… yet. But I’m excited about the potential and looking forward to working to using this concept on a future project.

    I still think there is a place for device-specific designs in certain cases, but most businesses don’t have the resources to build and support for multiple devices. Responsive design still requires more work than a “fixed” design, but less than supporting multiple, unique designs for a variety of devices.

    • I was surprised at how little work it actually required to pull this off. Thanks to a few pointers from Bill Erickson, I was able to get this accomplished with minimal CSS.

  4. That’s awesome news, Brian! Genesis rocks ever more :-)
    I have one question though, is there already a css styling concept included for the submenu items? I mean when you hover over it (with mouse on desktop), because replacing the hover effect for mobile outfits seems currently a challange for me…

  5. To make all the new and available child themes to be responsive is an awesome effort.

    StudioPress is the only theme shop I am fully satisfied with and recommend to my friends and clients.

  6. Brian, Im so pleased to see that Genesis Framework is planning for responsive design practices to include mobile formatting. Wow! Great news. Just another testament to the creative genius behind Studio Press! Thank you for everything you do to help advancements in web design and wordpress engagement!

  7. Yes, mobile visitors are very important and I’m greatful to Genesis for taking this next step.

  8. Great!! Keep up the good work!

  9. very nice!

  10. I’ve been looking at various responsive designs. To me one of the coolest design features I’ve seen is the ability of photo’s and videos to scale with the screen size. As a media producer I gotta tell you that this features rocks.

    • Thanks Marc – really appreciate hearing that. We’re doing our best to provide a solution for mobile/responsive circumstances that continues to showcase the integrity of the theme design.

  11. Great news, Brian. An increasing number of news consumers come to our sites via mobile browsers. Having a Genesis theme that naturally adapts to a phone or tablet screen would be better than relying on third-party plugins.

  12. Very nice! I’ve been meaning to dip my toe into responsive design, so it will be great to have something already there I can use as a template.

  13. Glad to see you’re looking ahead on this.

  14. Thanks for the update on this Brian. To have this built into the StudioPress CSS’ is a great step and another selling point that again shows a quality product. Cheers.

  15. Great news, and super timely! Had just been wondering if you would be doing something with Genesis. Especially since it seems the way I’m going with more of my clients, Genesis and yet wanting to design responsively. Only wish your nav completely collapsed on the min width version. Have you checked out what they did at Boagworld’s redesign?

  16. My girlfriend bought Agency. Will she get an upgraded version of this?

  17. Is the css at the bottom of the file where you recommend placing it? Or is that to let us review the addons easily?

    Thanks for the example… I suppose we better start updating our themes!

  18. Very nice, I can’t wait to start updating the current themes I’m using. Well done as always.

  19. Great to see things moving this direction :). Any idea how fast the existing themes can/will be updated once 1.8 comes out?

    I will be looking for a theme with post format and portfolio support also…any idea which themes that fit the bill might be updated soonest? Tapestry?

  20. So happy to hear this!!! Been thinking I should re-write my own theme to be responsive but haven’t had the time yet. I’m glad to hear we’re all heading in the same direction.

  21. While attending our annual REALTOR conference in Anaheim the guys at Zeek Interactive were showing us how this works. This will be awesome.

  22. It would be best for developers if these mobile themes worked properly when user agent is set in Safari to iPhone.

  23. Hey Brian,

    I love that Genesis is going responsive by default.. cool stuff. If that’s the case I can wait till the end of the month to put together my new site.

    I do have one question/suggestion. In the demo when viewing the columns. When you re-size your browser they squish together remaining in 3 columns. Typically when viewing the 1140grid system, or any of the other responsive frameworks available, it will go from 3 columns to 2 columns down to one for a smartphone for example. Basically I am asking if you have plans to update the columns css?

  24. Brian,
    This is great news! I am happy to be using a WordPress framework that is so well managed.
    It would also be really cool to have the ability to reduce the number of menu and submenu items for mobile so the stack is not too tall at the top of the screen.
    Thanks again for keeping Genesis up-to-date!
    Amy

  25. I have big plans for converting seven sites to a modified Lifestyle over the next few months, so I hope that one is high up on the to-do list… (hint hint) (ork ork)

  26. This looks like excellent news. The WP plugins for touch devices are all very well, but inevitably either end up with all sites looking the same or having two themes to maintain and update. This way seems far better.

    Question: if we’re building child themes in the meantime, either by adapting an existing theme or from scratch, are there any practices we should be adhering to so that it’s an easy upgrade/transition once your code is finalised and released?

    • Yes, I am wondering this too. I often modify the CSS to make a completely new design, but try to stick with the Genesis classes and ids. But are there things I should be making note of to not mess it up when the themes go responsive? Also, do you have tips for getting our sites to be responsive before you release the official new, upgraded themes? Will you have a separate mobile.css (or something similar) file that we can modify?

  27. This is exciting news, Brian.

    (ps: I’m working with Sara on planning our local WordCamp (Birmingham). Excited about seeing who attends and what I’ll learn!!)

  28. So glad to hear this, almost made a switch to another company until I heard this thank you for staying on top of what is going on in the world.

  29. Finally you have solved the puzzle. I was struggling for a long time to make my blog handheld friendly!

  30. What about using Wapple? I saw that recommended in the FAQ but haven’t got around to trying it out yet? Or does this update do away with the need for “mobile” plugins?

    • I don’t know much about Wapple, but have heard a number of decent things about WP Touch. When we update each theme, the mobile capability it should have should be a way better experience than using any of the mobile plugins.

      • WP Touch is good. But has the disadvantages as mentioned above, i.e. you still have two themes to maintain and your mobile site ends up looking like everyone else’s mobile site.

        So, the Genesis solution should be far better.

        Ermm.. any chance of a quick note on my query above re: building child themes in the meantime? :-)

        • Thanks Brian (both of you lol)

          I much like the idea of sticking with Genesis!! I don’t want my site to look like everyone else’s mobile version either!

          And would love to know the answer to Brian J’s question too!

          Quote: Question: if we’re building child themes in the meantime, either by adapting an existing theme or from scratch, are there any practices we should be adhering to so that it’s an easy upgrade/transition once your code is finalised and released?

  31. Brian,
    The theme looks great on an iPad, and the menu is easy to use, but on an android nexus phone I couldn’t access the nested menus, and the margins around images were off balance.
    I’m excited for responsive design in Genesis and curious how this might effect existing child themes I have built.

  32. Looking forward to Mobile Friendly Themes as this is what my web design clients are looking for.
    A built in solution is much better than using a plugin.
    Thanks for keeping up with the technological changes.

  33. This is great news. I, too, was looking for a way to convert a few themes into responsive ones. Thanks for keeping up with the latest standards and practices.

  34. I would like to recommend that you check out Matt Kersley’s responsive menu.

    demo:
    http://mattkersley.com/demos/responsive_menu/

    github code:
    https://github.com/mattkersley/Responsive-Menu

    It uses much less space and is attractive. I’m afraid my clients will not go for the current mobile solution you show since it uses so much real estate. Another possibility might be to simply reduce to a *menu* button that opens down in the mobile, diminished width view.

    What do you think?

    • We’ve since updated the code in Agency to show a horizontal menu, versus a stacked menu. It’s probably a good idea for me to update the screenshots here in the post to reflect that.

      • I just went and looked at your demo link (above) to see if the menu had changed and I see that it has, but not the Agency demo. I’d love to see it somewhere in action. Is that where I should be looking, at the demo link above? My comment was from looking at your initial demo link when you wrote this post. I’d still like to see something more refined. This code will be in Genesis, not in the individual themes, correct? So, if I’d like to change the code for a more minimal mobile menu should I design a theme?

  35. Hi,
    wow, thanks…
    this is a really huge advancement in theme design,
    what an effort, to change all childs to ems and percents!

    As I do small business sites mobile acce4ss is important and I have been using mobile site plugins
    to acheive a mobile version on the run..
    However now tablets are really taking off and no one is really offering a solution…to many variables.

    I love that you guys are so progressive and keep innovating and changing…

    I checked some of the premium themes on themesforest, even ones written for mobile,
    and they are still in fixed widths and PX…
    Ive been playing around with different solutions but now I see the way SP is going I’m going to knuckle down and learn how to modify it easily for my purposes ( i know its easy, its me that has to learn :-) )

    One question.. now that we are going to percents and ems, is there any reason to stick to the 960px width as a base, is this a hangover from grid design, is genesis still based on a grid?
    just thinking that a base of 1000px would be much easier for dumbos like me to work out percent sizes etc…
    I use 1000px or even 1060px in some designs cause i just like wide sites!

    anyway Im really excited about using SP and genesis for everything and being able to sell clients on cross platform usability of sites without me having to spend sleepless nights tweeking and checking!

    thanks agin

    stuart

  36. I used my iPhone to view demo.studiopress.com and it still showing the full normal page, not as the example screenshots. What’s the trick?

  37. Has anyone looked at the layout in landscape on an iPhone? iPhone 4 specifically.
    The layout sets itself too wide. Is this an issue with the meta viewport missing the max scale?

    width=device-width,minimum-scale=1,maximum-scale=1

    Is this just an iPhone “feature” ?

    Android seems to adjust just fine in landscape.
    Thanks – can’t wait for this to be released now that WP 3.3 just dropped officially.

  38. Is there a way to get notification when ready? Can’t wait for a responsive news child theme!!!

  39. Hi Brian,
    I’m a month-old Pro Plus member – a newbie. I had debated with myself for weeks over whom I should go with for WordPress framework – StudioPress or the other guys. I love it!
    This news of yours on Responsive Design makes me even happier I went with the winning team of StudioPress!
    Now I have a question: I’m currently working on a site built on a copy of your Tapestry child theme. (I made a copy so I could do a little customization that wouldn’t get overwritten with an update).
    When Tapestry gets the Responsive Design update, will it be fairly simple to migrate those over to my child-copy theme?
    Cheers!
    Blake

  40. Hey Brian, what about marketplace child themes? Is that going to be up to the designer?

  41. Transmit Studio :

    Any idea when Agency will be updated to responsive?

  42. When will your “Backcountry” theme be updated for Responsive Design? I do not want to purchase it if it will not be updated soon. (I will choose another design.) Thanks!

  43. Do you have a list of child themes that have been updated to responsive? (I’m using both church and executive)

    Thanks,

    • As of right now it’s eleven40 and Generate.

    • From the official free themes “Copyblogger” child theme is also responsive and from the Marketplace themes it’s “Driskill”. So we have already 4 – but more will come soon, definitely, also from third-party developers. For example I will release my free Autobahn theme soon with responsive styles added and also all my further themes with responsive styles!

      When you look at the v1.8 sample child theme you can easily add the responsive stuff to mostly any existing child theme by adding the responsive css rules and adjusting them a bit. It’s no magic at all so you might really try that :-)

  44. Will there be a place where you list the updated themes as they come out. I am really looking forward to this since mobile is getting bigger and bigger. Thanks for doing this in the latest vs. of Genesis.