Documentation › Responsive Grid Considerations

Responsive Grid Considerations

Switching on the responsive grid feature in Grid Mode will do a lot for making your website display better on mobile devices than without it. However, as you’re planning your visitors’ mobile experience, keep these things in mind.

Breakpoints

Each block has a Responsive Control sub-tab in the options panel. Using the settings there, you can define some breakpoints where the arrangement of your layout’s elements adjust for different screen widths. You can leave things up to the responsive grid, but if you feel comfortable dealing with breakpoints and you know which devices your audience will most commonly be using to visit your site, you may want to take the time to define the experience for each screen size.

Block Arrangement

When a Headway-driven site is viewed on a small screen, blocks are stacked in their usual left-to-right order. As a result, if you have any sidebars to the left of your content block, they will appear above your content when viewed on a mobile device. It’s probably not optimal for mobile visitors to have to scroll past your widgets before they can get to the content. When you’re arranging your blocks in Grid Mode, keep the mobile experience in mind. If your design (or your client) calls for a sidebar to appear to the left of the content, you may want to add a breakpoint and switch on the “Hide This Block” option¬†for that left block so it won’t appear for mobile visitors. (Just be sure nothing highly important is in that hidden sidebar.)

Responsive Navigation and Search

For the navigation block, the options panel contains the Responsiveness sub-tab. Enabling the Responsive Select option changes the navigation block from a set of links to a modal dialog menu. If your menu has only three or four items, it may not be a problem to leave this setting disabled. But if your menu has many items, and especially if your menu is above the main content of the page, consider switching this setting on to reduce scrolling. Further, if you include the search field in your navigation block, it will not appear when Responsive Select is enabled. You may want to have your search field in its own custom code block.

Mobile Media Queries

If you’re comfortable with mobile media queries and you need to tweak Headway’s rendering of your site for mobile, you can add media queries in the Live CSS Editor. It isn’t recommended that you do extensive styling this way, though, because the mobile device has to download all that additional code.

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress