One of the most the most exciting features of Headway Themes 3.0.5 is the responsive options you have available at your finger tips. You no longer have to install a plugin and create separate mobile site for your mobile visitors. With a few clicks you can make your site mobile friendly! We’re going to spend the next couple of minutes seeing how easy it is to make your Headway Themes powered website mobile friendly. And the great part of it is that is really only two steps you need to do to get your site in order!
The first step is to load up the Visual Editor’s Grid Mode (link requires login). Once you get into the Visual Editor, all you have to do is click the ‘Enable Responsive Grid’ checkbox under Responsive Grid in the Panel. There’s also an option to disable the Wrapper Margin for Smartphones, but we’ve already went ahead and checked that by default. You’ll want to take a look at the site though on those devices to see if you need this unchecked. When you’re finished click save and you’re set!
Next click the ‘View Site’ link next to where the Visual Editor says what page you’re currently editing. You can now resize your browser and see how the site changes with before your eyes! This is the same type of thing that will happen on a mobile device! The way this works is with the use of media queries. To get an idea of what media queries are I’ve included a few links for you. My favorite one actually shows you what sites look like at various stages.
Now this is great and for probably 80-90% of the use cases this is the only step you need to do. But as you remember, I said there was 2 steps. So we’ll move on to step 2.
Alright, so step two is actually a single or multiple step process. When building this responsive feature into Headway Base, we wanted to make sure that you had more control of what the site did when it was viewed on a mobile browser. So we built in what I think is the best thing about our responsive feature.
You should already be familiar with how blocks work and how each block on a layout has options. Well in the Options panel for each block, you are able to select if you want the block to be hidden when the responsive grid takes shape. This is particularly helpful if you have say a 3 column layout where the two outside columns are widget areas. With the way that the responsive grid feature works, it’s going to take the left most block in a row and make that the top. So in this case, your middle column, the content block, is going to be place underneath a widget block. What would happen if you didn’t enable ‘Responsive Grid Block Hiding’ on the widget block is that your users would have to scroll through your list of widgets first, and then get to the content.
Of course this is just one example, but I’m sure there are others. For instance, you might want to be able to show only certain blocks/content to visitors that access your site from a desktop computer. This would now be a cool way to make sure that happens. And it’s very easy to do!
Once you’ve determined which blocks on the layout you want to hide with the responsive grid, just save the layout and you’re set. You will however, have to do this for multiple pages if you want to hide specific blocks on other pages.
But wait! I want my mobile users to still access the real site?!? That’s great! We also built in a way that when the responsive grid feature is activated, a link will appear in the footer block (so make sure you have a footer block on all of your pages!) that will allow them to ‘turn-off’ the responsive grid and view the site normally!
So there you have it! A kick-butt feature for all you mobile friendly designers/developers out there that want to make sure your site looks good on a mobile device! You can easily enable the Responsive Grid feature and really make your site stick out when your visitors are looking at it on their favorite mobile devices!