Mobilized Header & Footer

We’ve been working a lot on building responsive sites lately. Sites which are flexible to the device they may be viewed upon, and change accordingly. For many reasons, it’s good to start small and work up to a full “desktop” version and this means it is vital we consider the site on smaller devices early in the process.

Once we had produced wireframes for a recent project, I set about producing a prototype to see how the design would work across a range of screen sizes. The desktop site follows a very conventional layout but I was keen to see how we could best optimize the header and footer for those on mobiles or tablets.

Improving navigation

I had seen a technique used on Mark Boulton’s Five Simple Steps website to turn the primary navigation into a dropdown menu for mobiles (resize your browser to test!). Samuel Cotterall also wrote a script called touchdown.js to add this functionality.

Both these examples target a single set of links and make the navigation easier to use on a mobile device. In my example, I thought we could make better use of screen space and improve usability a bit further by grouping both sets of links together in the header (and footer). With some modification of Sam’s script I came up with the following:

View the demo or view on Github

The code that pulls this together is detailed at the above links. I also added a show/hide toggle for the Search box, a common feature on mobile websites these days where finding information quickly is paramount.

Not necessarily ground-breaking, but a neat solution which you might want to consider in your project. I can see it being extremely useful if you have a large footer with lots of columns / links you wish to group together.

If you have any questions or comments hit me up on twitter.