In April of 2015, Google made a huge decision to boost rankings for mobile friendly web sites. This meant that web designers and developers everywhere had even more pressure to adopt mobile friendly design practices, so that their web site deployments would meet this requirement and thus improve their clients’ web presence. Watermelon Web Works is no exception, and all of our web deployments include great attention to detail when it comes to mobile responsive development on your WordPress site.
This not only means that we carefully ensure web content works on all mobile devices, but that the navigation elements on any site we deploy work for any device and any screen size. The best practice is to use semantic HTML markup to build a navigation system for a desktop view, that when shown on a smaller screen, automatically adjusts to display the navigation in a way that works on tablets, phablets, and phones, without making any changes to the actual markup. How is this accomplished?
Media Queries
Media Queries are deployed in a websites styling instructions. They do two things:
- Determine the width and height of any screen (called a viewport)
- Apply styles based on the determined viewport size
Media queries simplify the process of deploying mobile content by establishing ranges of sizes (also called breakpoints) such that the code never changes, only the styles attached change. This allows a website to move away from having to use a different URL for mobile content.
With media queries, sites no longer need to detect the device itself with complicated scripts, it merely has to implement rules for device viewports, simplifying the design process significantly. Gone are the days of complex browser and device detection. Media queries solve that with grace, even if a user has limited script support, or an unusual screen width and height.
Media queries are also quick to deploy, particularly for static page elements like navigation, site logo, sidebars, widgets, etc. One rule can be implemented for these items and will immediately take effect throughout the entire site. This makes creating new elements responsive easier too, because you can just assign them identifiers (or classes) that will automatically pick up the new styles.
This is all great, but navigation systems can get very complex on a site with a lot of content. What are some best practices and styles for media queries and navigation elements on a mobile site?
The Hamburger Menu
The Hamburger menu is at once ubiquitous and controversial, with good reason; it is the defacto standard for mobile device navigation. This is good because most users are aware that this type of menu is in fact a menu; there is little confusion of it’s purpose. Designers are increasingly dissatisfied with the normalcy of this design, however, and as such there is much debate as to whether or not is is truly the best way for mobile navigation to be accomplished on mobile devices. Which of course brings us to many other alternatives.
Scrollable Tabs
Scrollable tabs are a good compromise from desktop to mobile navigation layouts, since they don’t hide the entire menu, and have been in use for many years on many mobile operating systems. They do not hide the menu items in the same way the hamburger does, it merely hides it offscreen, allowing the user to scroll horizontally through the navigation options. It benefits from being somewhat ubiquitous as well, so that there is generally not much user confusion by comparison to the hamburger.
Flyouts
Flyouts are some kind of merger between hamburger and desktop layouts, as they can work well on both, due to their stacking layout designs. This layout is not very confusing, nor does it hide very much information from the user, but if your navigation system is too large this could quickly become restricting.
Carousel
Carousels are similar to scrollable tabs, but are generally used in more media heavy applications like apps, music players, and the like. If your site content speaks to this kind of visual navigation appeal, then it may be a no-brainer to use this type of layout. These types of navigation tools are largely relegated to content rather than navigation, but it is certainly a good choice depending on the design.
Floating Buttons
Floating buttons are becoming popular particularly with very visual-heavy websites and apps. Applications that use map data, visual data displays like graphs and charts, media players, and other visual applications can use these navigational tools with great effect. They take up a lot of real estate however, so should be chosen carefully with regard to the more typical navigational styles.
In the end, your website design will really inform the nature of your navigation, and while you can start with navigation and follow up with content design, you may find that there is a delicate compromise you must undertake during the design and development process that ultimately helps your navigation take shape for your users. Leveraging these tools and the ease of styling on all devices with media queries, your developer at Watermelon Web Works can assist you with designing the perfect tool for enabling your users to find exactly what they need on your WordPress site.