Responsive Web Design: Menu Vs. Sidebar

wiztools_navigation_responsive

You may have noticed various websites changes its design according to different screen sizes. Such a magic is possible because of the responsive web design concept. Major websites on the internet today are responsive. One of the most common reasons for RWD is to make the same content available for their users without any complex change in a code and no matter from where they are accessing.

Many times the @media queries is enough to handle the RWD but in some cases, you may need a script. Today we are going to consider WizTools.org as an example to understand the Menu Vs. Sidebar in responsive design.

wiztools_two_columns_desktop
Two Column Structure and Sections Identified for Responsive Design

As you can see in the above screenshot, WizTools.org has two column layout structure with header and footer sections.

The Menu

The navigation or menu is an important section, which allows user to navigate through a site. Therefor it should have implemented the best possible way for tablet and mobiles.

Desktop View (header)

wiztools_navigation_after
Desktop - Header and Menus

Toggle is the most popular way to convert the menu responsively. You can write JavaScript for it. We need a trigger to make hide/show DIV logically. However, WizTools.org has been developed using Bootstrap framework and the navigation has coded with navbar component. But it really depends on the project's requirement, whether you should go with a framework or not.

Related Reading:

Mobile View (header)

wiztools_navigation_responsive_expanded
Expanded Menu

The Sidebar

Now let's focus on the sidebar. If you can notice on the site, the sidebar has collapsible panel (for desktop view) with a set of links. Of course, this is somewhat similar to the menu (for smaller screens) but the only thing here different is that it is not a part of the header. It is part of the content area (main area between header & footer sections).

Bootstrap converts everything in stack format, if we have Bootstrap grid being used. The same we have with Wiztools.org and below is a screenshot what we had before implemented a custom solution for responsive sidebar. The sidebar was landed after the main content area section.

wiztools_two_columns_responsive
Two Column Layout - Responsive Behavior (Earlier)

If we think from UX perspective, links at the bottom of the page, doesn't make sense. As a better solution, it was decided to have a trigger (span) to show/hide a sidebar for smaller screens from the left of the screen smoothly. It had implemented with PageSlide jQuery plugin.

Final Result

wiztools_two_columns_responsive_sidebar
Two Column Layout – Responsive Behavior (Now)

Conclusion

If you have a short timeline, plugin can help to finish the task quickly. But in future if you need to extend the functionality of the same plugin, you might stick. And using of plugin downgrade your skills too. I would suggest to go with custom JavaScript or jQuery script with your own logic.

If you are a front end developer, you might have different thoughts and idea. Don't hesitate, shoot a comment below.

I am shortly planning for an article - how to optimize a code for a jQuery plugin. Kindly subscribe for regular updates or connect socially.

Special thanks to Subhash Chandran (founder of WizTools.org) for letting us use his website as an example in this article.