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!)

 

Spread the word!

17 Responses

  1. Hi, there!
    Responsive is a real treasure in Headway and it should be used from the first day since it was released as a feature. It makes Headway a much easier choice as a WP power tool of the day. So, thank you for promoting this feature. It is lifting up the design services we are trying to provide for the web into another scale.
     
    Just a thought, but may be it will be helpful if there are some posts or a video dedicated how to handle the responsive feature with a bit more details, for example how to make our hands dirty with some custom pixel adjustments for the different media screens and so on. …just a thought to promote better this feature in the community and for the new visitors interested in becoming part of it.
     
    Cheers, 
    Milena and Gerrit

    • headwaytoolbox says:

      @idesignstudio absolutely! I will certainly put something together.

      • mikkelbreum says:

        I’d love to see an example of 3-column layout with SIDEBAR | CONTENT | SIDEBAR, and how to place the middle columnt (content) first/on top on mobile/narrow screens.

  2. naweedshams says:

    Now only the menu needs to be improved in responsive view.
     
    If you compare it to pagelines, they have nice & simple drop down menu. Makes the experience a lot less easier.

  3. BappaSen says:

    Hello sir,
    I have made the responsive design option ok but it is not showing perfectly on the devises. So what can I do now? Please help me. I am in very need of it. Thank you

  4. JonathanMenon says:

    caitlinheadway Caitlin, did you ever put something like this together? If so, can you share the link? If not, can you please let me know? Thanks!

  5. Tiffaney says:

    Hi!

    Responsive grid was working and my site looked great on all devices. I was making some updates and now it’s not working.

    Responsive grid is still enabled and it works on other pages (trodo.org/boxleague).

    Any ideas?

    Thanks!

    • Clay Griffiths says:

      Hey Tiffany,

      It looks like it’s working to me!

      Are you still having issues with the responsive grid?

  6. Christian says:

    hey, we’re finding this function fantastically useful but how do you hide a #wrapper …? we can’t find that option in ‘config’

    cheers!

  7. wilburforce says:

    Is there a way to improve the navigation in mobile view. Most mobile/responsive designs I see now have a small box that on touch expands vertically to show the menus.
    Exactly like this site: http://blog.teamtreehouse.com/popular-web-design-trends-for-responsive-navigation
    Paul

  8. martin says:

    Is there a way to determine the order of the “block” when displayed on a mobile/tablet?

    • Clay Griffiths says:

      Martin,

      Unfortunately not at this time, but this is something we plan on adding in the future :-)

      Right now the responsive grid takes the document order of the blocks (from left to right, top to bottom). With that in mind, you can adjust the position of your blocks on the Grid and it will update for phones/tablets.

      Please let us know if you have any other questions.

      • christianpurefoy says:

        Hi Clay – love the design and we use it for our site BattaBox.com !

        But – is there a way of forcing our 3-column design into a 1-column on the ipad mini screen?? (1-column works fine with mobile devices but we want to expand it to ipads/tablets because our site looks too crushed otherwise.)

        Thanks!

      • christianpurefoy says:

        actually – don’t worry Clay – I found out how to do it!

        Download Headway 3.6.3 – and set the breakaway point in the wrapper! perfect – tks

Leave a reply

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

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