VISUALLY SPACED

Another blog for Beacon Technologies

Lately we have been utilizing a drawer style navigation in our designs to provide a better user experience in our websites. The request for quite a bit of content in the drop downs themselves (mega drop downs that span the full width of the site no matter which tab you have clicked) in some of our more complex higher-ed sites also creates the problem of covering up the content of the site and proving tricky when the site responds to mobile screen sizes. Putting the navigation in a sliding drawer is proving to be a unique solution that translates beautifully to mobile in responsive design.

If you look on Mashable, a popular news article site, the nav drawer does not shift the page down, but is a full width mega drop down menu. Compare to theUniversity of Wyoming, a site recently developed by Beacon, which has a drawer based nav.

Whether or not this is the right nav for your site will probably be based upon a lot of factors like what type of content is in your drop downs and what type on content is on your homepage. If you have a lot of content in your navigation it may be worth while to put that navigation in a slider so that the homepage remains visible, even when the navigation is open. Also, you need to think about what your navigation does on mobile devices and tablets and how to best integrate this with your drop downs. Mashable.com serves up a different navigation for it’s tablet users, for example, simplifying the menu, so they put it in a side drawer. On the higher ed sites we develop here at Beacon, we need to provide a consistent navigation for users on every type of device, so we might use a similar drawer on both mobile and desktop, but just change the navigation to stack taller on smaller devices and open and close subsections. This also can allow us to integrate deeper navigational tiers in the main nav on mobile devices so we can keep the content area cleaner and simpler.

This solution can be elegant and it even translates very well to touch devices that do not have the ability to open menus on-hover. This keeps the experience more consistent through all the screen sizes by utilizing an on-click drawer.

Ultimately decisions like these need to be made on a case by case basis.

Responsive website design will take over the internet, it’s inevitable. It’s a beautiful answer to the question of how to make content on the internet appropriate for a wide array of devices and screen sizes. With each new design and development approach comes a whole new set of standards.

Often the best way to deal with the menu in responsive design is to either stack it, creating an array of buttons or hide it in a drawer. Hiding the menu always seemed like it would compromise usability to me, but I’ve now accepted it as a reasonable way to deal with the main navigation of a site when it gets down to being displayed on a small screen size. Consider this, the menu isn’t always needed for navigation, especially with the type of casual browsing someone may be doing from a mobile phone (while bored, waiting in line, at Starbucks).

Now that this technique is becoming standard, a universal icon is emerging to represent that menu that you instantly recognize. I present to you:

November’s blog for Beacon Technologies

This seems to be the icon that is being most commonly used so far and seems to be quickly becoming a universally recognized symbol for a flyout navigation.

A few other options exist, however.

A menu in a standard type of drop down like shown above is not a bad option. But I think because that type of drop down is often used for many other areas (like contact forms) it isn’t immediately recognized as a main navigation and may confuse some users.

The grid icon is also sometimes seen and it’s commonly used to represent the menu in apps because they often utilize and icon based grid navigation. But for websites with text link navigations this symbol doesn’t directly relate.

I think it’s interesting how design is responding to responsive websites and creating graphics to suit it’s needs. Time will tell if the three line icon will become a true standard or if more innovative ways of showing navigations will arise.