The Responsive Grid and Headway 3
The Headway Responsive grid is one of the best, and possibly most under-utilized, features that Headway offers (in my opinion, at least.) Responsive web design isn’t just “the next big thing” – it’s the definitive direction that the web is moving, and if you aren’t going responsive, you’re getting behind.
Turn it On
Turning on Headway’s responsive grid is easy to do. Once the responsive grid is turned on under the Grid Mode Setup tab, Headway starts to do a few things automatically. Your website is compressed down into one column, and the blocks are rearranged vertically. The responsive grid reads your layout from left to right, top to bottom, the same way you read a book (and, yes, following a common design pattern because it’s how many visitors review a website!) That means usually your header is on top, followed by any other blocks in that area, and navigation, content, and sidebars. Headway also takes your navigation and rearranges it onto several lines depending on the available width, resizes images and (optionally) videos, and hides any blocks that you’ve designated as hidden.
How Does it Look?
To see the Headway grid in action, check out these two sites: I designed both. Rent a Geek Mom is a simple implementation of responsive design; I didn’t create any custom code or write any extra CSS, I just turned on the grid, hid a few blocks from mobile view, and voila! A responsive design. Siren Marine is an example of a custom-designed website that uses a lot of custom CSS, and the responsive view also uses a relatively small set of mobile-specific style rules.
Hide any Unnecessary Blocks
Responsive design is all about knowing what to show for mobile users, and what doesn’t matter or isn’t relevant or usable on a mobile interface. There may be blocks that don’t translate well to mobile; certain widgets inserted by a 3rd party plugin may not handle responsive design well, and you may decide to ditch the sidebar, or maybe your footer widget area isn’t critical for mobile visitors. Ditch it to make sure visitors can load your pages quickly, and scroll through to find the relevant content fast and easily.
Each block has an option under the Config tab to hide the block on mobile devices or tablets. In fact, you can even hide blocks on laptops/desktops, though this isn’t a recommended option unless you really know what you’re doing! Choose the appropriate options, save, and check your site out on your phone or using an online mobile emulator to see the results. You can also resize your browser window so it’s very narrow to see the results, too! (Note: This option does not appear until you enable the responsive grid!)