NOTE 4/20/2015: Genesis child themes are now mobile-responsive, so if you are a Genesis user you shouldn’t need this tutorial. Actually, most WordPress themes created in the past 2 years are responsive. You might be better off just updating your theme, which is what I did for CBI once Lifestyle Pro came out.
I love the Genesis Theme Framework (not an affiliate link) by StudioPress. Sometimes I love to hate it, because I have to figure out how to do something in Genesis that I already know how to do in, say Twenty Eleven or any other “standard” WordPress theme, but it’s worth figuring out the idiosyncrasies. Using any framework means less labor for a designer: the creators of the framework are responsible for keeping it up to speed with WordPress updates and features. Genesis itself has some lovely built-in features, like SEO titles and per page/per post layout options. And there are all those nice child themes bundled up in the developer package to mine for elements of a new theme.
There’s just one little problem with the way that Genesis creates its home page layouts: widgets. A Genesis magazine layout is made up entirely of dynamic content, with the different areas populated by the Genesis Featured Page and Genesis Featured Post widgets. They are marvelously flexible things (and there’s even a Genesis Featured Widget Amplified plugin that displays custom post types and custom taxonomies), and once you’ve mastered adding widgetized areas to a home.php file, you can save yourself hours of coding custom loops by using them.
Here’s an example, using the Lifestyle Theme, from the client site that inspired me to write this post:
From the back end, the main content area looks like:
The sidebar and the footer are also full of widgets.
The Lifestyle theme is easy to set up and rearrange, and even more flexible thanks to the Dynamic Widgets plugin. Widgets are a great feature of WordPress and using them to build home page designs makes Genesis more user-friendly.
But it turns out that widgets don’t play nicely with mobile plugins, and therefore mobile plugins don’t like Genesis.
I hadn’t realized this at first, because I myself am a dumbphone user. I’d asked the client to check on the appearance of the site on a mobile device, but it turns out my main contact there didn’t have a smartphone either, so she had to ask a third person, and the response wasn’t entirely clear. Another visitor to the site actually asked “Why do I see a calendar?” Only when I borrowed my husband’s iPhone did I understand what this person had seen, and only after a lot of hunting around did I realize why.
This is what WP Mobile Detector was showing to those with iPhones (and iPads: it wasn’t making a distinction):
This is not the site’s home page: it’s the blog index. This was confusing enough for me to find; I can completely understand why the typically non-technical member of Congregation Beth Israel Connecticut might think it was an event calendar. (There is one of those on the site, but this is not it.)
I went looking at other mobile plugins. StudioPress mentions the Wapple Architect Mobile Plugin for WordPress on their FAQ page, but while that at least displays the regular site to iPads (which really don’t need any special design concessions), it still couldn’t recognize the home page content, though I was able to customize the menu. (It supposedly displays a sidebar and lets you choose widgets, but that feature did not work properly.)
I also looked at MobStac WordPress Mobile, which did both the best and worst jobs of displaying content comprehensively, since it completely ignored the category exclusion rules set up to keep the events listings and newsletters off the main blog page. And I tried WPtouch, but to configure that properly you need to spend a lot of time creating custom icons, and it still wouldn’t create the home page I needed. I took a look at OnSwipe, but that says in its FAQ that it doesn’t display widgets, so that wasn’t going to be of any use to me. I even started looking at premium plugins like iThemes Mobile, but wasn’t convinced—and not authorized by the client to spend money, either.
Trolling around in the StudioPress support forums was not terribly satisfactory. There were a couple of recommendations (from the same person) for the pro version of WPtouch. And then, finally, a link to a tutorial from Smashing Magazine called “How to Use CSS3 Media Queries to Create a Mobile Version of Your Website.”
Now, CBI was not paying me to design a mobile theme, which is why I didn’t just develop one in the first place. (That, and I’m fairly new to responsive design: see the previous post.) They’re a non-profit on a tight budget, and if a free mobile plugin had worked, it would have been good enough for their purposes. Based on my experience with other sites, I assumed (very, very dangerous thing to do), that a mobile plugin would work for them. It wouldn’t, and I’d promised them a mobile-ready site.
Besides, the instructions seemed so simple. I suggest you read the entire article, but here’s the short form for converting your old stylesheet for mobile devices.
- Save a copy of your style.css file as small-device.css. Remember to rename the file within the comments.
- Open the file in a text editor. Search for the word “float.” If it applies to a div, replace “left” or “right” with “none.”
- Look for a “width” property on those divs. Set it to “auto.”
- Set the base font size to 100% and convert the remaining font sizes to ems or %. You will probably want to increase font sizes, particularly in menus and search box. You could skip this step and still have something more usable than the plugins are giving you, though.
- Upload the small-device.css file to your child theme directory (in my case this was wp-content/themes/lifestyle)
- Open your functions.php file and add the following lines at the end:
add_action('wp_head','mobile_styles'); /** * Add mobile stylesheet * */ function mobile_styles() { <link href="<?php bloginfo('stylesheet_directory');?>/small-device.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"/> }
Doing this took me about an hour, including reading the tutorial and figuring out how to put the stylesheet link into the functions.php file. (That info comes from a StudioPress tutorial on adding a print stylesheet.) I spent another hour or so today mucking about with the menu and the header and the fonts. The site has a fairly long menu, and I didn’t like the way it looked stacked. I’m not completely happy with my current solution of dividing it into three columns, since the drop-down menus now also divide up that way, but I think it’s an improvement. I created a new, taller subnav background image and increased the menu font size and line height to make it easier to use. I also set the description display to “none” in order to have the site name displayed more readably. (I had tried to use a different header image, but couldn’t figure out how to override the custom header choice in the theme options.)
The result is not pixel-perfect, but every single element of the original home page is there and working, from the image slider to the featured video.
You can visit http://bethisraelwesthartford.org on any device with a screen 480 pixels or smaller to check it out for yourself.
(Edit 2015: Not any more: you will see the new mobile-responsive site at http://cbict.org.)
Those of you who have more experience than I do with responsive design can doubtless make suggestions for improvement.
Meanwhile, anyone using a Genesis theme can quickly create a mobile-friendly version of the site. Given that, I would expect StudioPress to be able to release a spiffier version of this small-device.css file for each child theme, quite easily, at the next update, if not to start making all the new themes responsive out of the box. Unlike me, their designers know their themes, and their framework, backwards and forwards, and wouldn’t have to spend as much time tinkering while adjusting things.
I’ve been able to use WPTouch without much customization or problems (although I wouldn’t call it super easy to set up), but I know it’s not a perfect solution. This looks fairly easy to do and keeps the look of the site consistent across devices. I’ll have to try it!
Springbox makes an Adobe Air app called Mobilizer to help you test your site on a few different mobile devices…it’s free and seems to work pretty well. Might be easier than borrowing hubby’s phone. ;)
Hubby isn’t actually using his phone, but the wi-fi on iPhones is really slow, and I should probably test against other mobile browsers.
The time involved in WPtouch is for creating custom icons, without which your site looks pretty boring if made of pages.
Thanks Sallie,
Nice job on converting the code to mobile and sharing with me. I was looking for a Thesis mobile hook or Studio Press code for mobilizing sites without using WPtouch or paying a monthly fee.
It’s nice to know about widgets, float, text sizing to 100% and em as well as making some text bigger so users can see it easier.
@ClayFranklin
Great article – came here from your post on LinkedIn. I just started playing around with eleven40 (which I keep wanting to call “eleventy10”) to get a feel for how the responsive design aspects of the theme work. I appreciate having another source to refer to when working with Genesis. Thanks!
You’re welcome, and I’m very glad to see the StudioPress team starting to produce responsive themes. There’s also a plugin in the works (not from StudioPress) to make any theme responsive. I’m interested to see how well it works when it appears.
Thanks for info.. But now i’m more confused. Bucause i’m using News2.0 child theme.
Great article :)
I use everytime the Genesis responsive slider is the best slider.
Nice tutorial but I am looking for all screen sizes but your tutorial is just for 480 px screens
To do that, you need to write a full set of media queries into your theme. The technique is the same–I think StudioPress has a brief tutorial on the topic of Genesis and responsiveness–but it’s more time-consuming to add multiple breakpoints. At the time I wrote this article, I wanted something quick and dirty, or at least quick. Since then, responsive design has developed increasing sophistication, and I’ve learned more about it. We just did a meetup about responsive design in April. You might want to take a look at the slides.
Hi Sallie
I just followed your instructions and was able to get mine to look pretty good on the iPhone. But one thing concerns me. I tested your site and mine in this tool http://mattkersley.com/responsive/ and it doesn’t seem to display to great in resolutions lower than 480. Even though it looks great on my phone, I wonder how it looks on other devices.
Thanks for taking time to do this!
Well, the mobile theme I made is not actually a responsive theme, which would require media queries for several different sizes of screen. That would definitely take more than an hour to code.
I confess I still use a dumbphone, so I have no idea how many people are using screens at a resolution of 320px, for instance. You need to look at your own analytics and see how many of your users are mobile users.
Fortunately, many of the newer Genesis themes ARE responsive, as are many newer WordPress themes from other theme shops, so there’s a decent range to choose from now.
Yep. I eventually went with Prose instead. It’s responsive and looks better. Thanks!
Hi,
Very useful tip indeed. However, according to the article in smashingmagazine, you can also use this code
in the header without adding a new function to function.php for showing up the new CSS file. Isn’t that so?
In a Genesis child theme, there may or may not be a header.php file to add any code to. (Your code didn’t actually come through–I think WordPress stripped it out.) In an ordinary theme, yes, you can just add the call to the header file.
Anybody having trouble mobilizing the Serenity child theme? I thought it was a responsive theme from the box but it is not displaying properly. Thanks for your help,
Miguel
Serenity doesn’t show on the StudioPress site as responsive. You will have to code that one yourself, or choose a different theme.
Apparently there will be several new responsive child themes released along with Genesis 2.0, but that is waiting on WordPress 3.6, which has been delayed…a long time.
Great article, i have bookmark this.
What an excellent guide, Sallie. I just received an email from the Google Webmaster Tools team saying that my site is not mobile friendly and I should take proper steps to make it responsive on mobile devices. Glad to have found your tutorial, I’m running Genesis and surely gonna make these changes right away. Thanks a lot, buddy :)
Hi Sallie,
thanks for this explanation.
I tried to follow it, but I got stuck with the code that needs to be added to the functions.php.
Even my editor marks the last bracket there.
See here in the website link above
Did it work for others like this?
Has anything changed since then?
Using the code like this my website loses all format and just shows ugly text arrangements without any color.
Hi, Juan.
It’s possible something got lost in translation when I switched sites–I will have to check the code display. However, this tutorial is out of date because all the new Genesis child themes are already mobile-responsive.