Navigation is one of the most vital components of a well-designed responsive website. After all, if users can’t easily get to where they want to go, your bounce rate stats will not be pretty.
That being said, responsive navigation is also a quite complex and hotly debated subject. There are several possible implementations and varying degrees of evidence of how user-friendly they are.
With that in mind, let’s take a look at some WordPress themes and plugins that are using different types of responsive navigation. We’ll cover the different navigation types, explore their benefits and discuss the types of sites they are best suited for.
The ‘Hamburger’ Menu
The most common type of navigation you’ll find on mobile-friendly websites, the so-called Hamburger menu appears as a simple, humble icon. Its three horizontal lines resemble the popular sandwich – thus the nickname. When tapped (or clicked), the menu reveals itself in a nice and neat accordion layout underneath.
The appeal of the Hamburger menu is its utter simplicity and its ability to save precious screen real estate. For example, take a look at the houzez theme’s implementation:
On the image to the left, you’ll find the menu’s icon sitting there in the blue header on the upper left of the site. The image to the right shows the menu in action. It’s a hierarchal menu that contains multiple levels of navigation. Simply tap your choice to see the items underneath.
This is a typical implementation of a Hamburger menu and is suited for just about any type of website. With that being said, there is some debate about the effectiveness of the Hamburger as a UI choice. The main argument is – does the typical user even know what it’s for?
It’s a good point. That little icon all by itself may not be the most intuitive design element – especially for users who aren’t very tech-savvy. Take a look at what the Merchandiser theme does to make things a bit more obvious:
While they use the same icon, adding the word “Menu” to it certainly makes things easier to figure out. Taking it one step further is the Bolts theme, which adds some contrast to the navigation area to better ensure that it can’t be missed:
While the classic Hamburger menu may look simple, there are more complexities to this little icon than meets the eye. The navigation style itself works wonderfully. As with everything in web design, the key is in its implementation.
The best policy here is to ensure that the menu stands out and can be easily found by users. It’s never a bad idea to make things as clear as possible so as not to confuse anyone.
Off-Canvas Menu
This method of responsive navigation includes a menu that “slides out” (typically from the left side) when activated via a button. In that way, it mimics the behavior of many mobile apps and is familiar to users.
Again, you’ll often see Off-Canvas menus integrated with the aforementioned “Hamburger” icon, as it is here in the Woohoo theme:
Tapping that tasty icon (left image) allows an attractive menu to slide out (right image). Notice that the icon in the right image becomes an “X” when the menu is activated, illustrating how to remove it from view. Also worth noting is the inclusion of a search bar, which adds even more utility for users.
Just like our Hamburger example above, Off-Canvas menus handle multi-level navigation with ease. In this case, icons are placed to the right of navigational items that contain more levels underneath.
The Infinite theme is a bit different in that it both slides out from the right and makes more use of contrast to differentiate the navigation from other content:
One of the benefits of Off-Canvas menus is that you can use them in very creative ways for more than just your standard navigation. Take, for example, the Forester theme. It’s a magazine-styled theme that makes use of a sidebar. Typically on mobile devices, a sidebar might be pushed to the bottom of a long page or eliminated altogether.
Forester features a neat implementation of an Off-Canvas menu to reveal that sidebar on mobile devices:
The desktop version (left image) contains a sidebar where featured articles and other useful widgets appear. On mobile (right image), the sidebar is revealed only by activating the Hamburger icon on the upper right of the screen. A scroll bar is added for convenience.
That versatility is a great strength of an Off-Canvas menu and is a reason why they are being used quite frequently these days.
Toggle Menu
Think of the Toggle menu as the Hamburger’s close cousin. While both essentially take your existing menu and create an accordion-style navigation that displays when active, the Toggle is usually a bit different in its placement. Instead of moving to an upper corner like the Hamburger does, a Toggle menu is often in the very same spot as the desktop navigation.
The Logistic Business theme illustrates this quite well:
The mobile version on the right shows the navigation just under the header – just like the desktop version on the left. What’s nice about this setup is that frequent users of the site won’t get lost when looking for navigation on the mobile side. That consistency is excellent for usability.
For a slightly different take, check out the placement of the menus for the Jabberjaw theme:
The desktop version features a menu to the right of the logo. Again, the mobile version keeps this placement consistent with no unexpected behavior.
Finally, a very creative implementation from the Writer theme:
What’s different about Writer is that the mobile menu on the right shows the current page. Then, when activated, it displays a full menu underneath. The menu serves a dual purpose and is a little more obvious than a standard Hamburger menu.
The Toggle menu could be a great option for a site whose visitors will check in on both desktop and mobile devices. For example, perhaps a membership site where users check in from home and the road. The consistency of the layout will benefit frequent visitors.
Overlay Menu
The Overlay menu style is one that will either fully or partially cover the user’s screen to display navigation. Overlay menus can sometimes be found on both the desktop and mobile versions.
The Ri Solaris theme displays a standard menu on the desktop version but switches over to an Overlay for mobile visitors:
The left image shows the standard mobile look of the theme. On the right, the menu has been activated. Notice how it fills up the entire screen. There is virtually no trace of the site underneath.
While this can certainly be an attention grabber for smaller menus, Overlays really shine when it comes to long menus. The Bricks theme displays a great example here:
The menu on the right actually goes past the initial viewport of the mobile device’s screen. The menu gives you the ability to scroll down to find what you’re looking for.
But, if you’re looking for something a little bit unique, check out what the Peter theme can do with an Overlay menu:
Take note of what’s happening on the right, when the menu has been activated. The bold background photo remains in place, but the content has been pushed down to make room for the Overlay menu. This adds some visual flair to the menu but removes the distraction.
Websites with large amounts of navigation may want to consider an Overlay menu. Their ability to hide all other distractions can be a huge help in reducing clutter and making navigation more user-friendly.
WordPress Responsive Navigation Plugins
If you already have a website and are just looking to add responsive navigation, there are some outstanding plugins available to help you do just that.
- Flexible Mega Menu: Flexible Mega Menu helps you create a beautiful, responsive menu for your WordPress website. It features over 300 built in styles, allows for vertical or horizontal orientation, lets you use icons and/or thumbnail images and lets you set a breakpoint for displaying the mobile menu.
- Rain: Rain specializes in creating attractive Off-Canvas menus. Included are 20 navigation animations, 17 submenu animations, 3 layouts, 28 skins and the ability to add WordPress widgets to your menu. You can use icons with your menu items and limit the menu to only specific pages if you wish.
- MDF Megamenu: MDF Megamenu is quite flexible, allowing you to create variations of the Hamburger, Off-Canvas and Overlay menu. There are 20 animations, icons, ability to set menu widths, use widgets in your menus, use different trigger behaviors (hover or click) and the ability to add content to your menu via the WordPress WYSIWYG editor.
- Navi: Navi provides a way to create full-screen Overlay menus in WordPress. The great feature here is the ability to customize the menu to your exact specifications. You can choose a position for the menu, a menu icon, animations, background images, colors and even the opacity of the menu.
- OKLE: OKLE will help you create fully-responsive vertical menus. There are 3 different layouts, 14 skins, FontAwesome icons, ability to use widgets and display menus on specific pages.
Choosing the Right Style
Deciding on which mobile navigation style to implement on your site can be agonizing for some and an afterthought to others. It is, however, an important decision.
There are lots of different opinions floating around about which setup is best. But it really comes down to what type of site you have and the type of content you have.
If your website is just in the building phase, then you might have a little bit more freedom in how you implement your mobile navigation. An existing website may or may not have some limitations depending on how it was built.
Regardless, the goals here are to ensure mobile navigation is:
- Easy for users to locate and understand.
- Organized so that users don’t have to search around for the content they want.
- Look like a natural extension of your site’s desktop theme.
Visual Cues
Many of the themes and plugins above allow for the use of visual cues such as icons. This can be a great way to get a simple point across of what the user can expect when visiting a new page. And, if you use the icons in your desktop navigation as well, there is a consistency there that can really help guide users regardless of device.
Also consider using more than just a Hamburger icon. Even if it’s simply placing the word “Menu” next to the icon, that helps make things more obvious.
Keep it Light
While you can have many nested levels of navigation, that’s not always the best choice for a mobile website. Try to organize your menu in a way that helps users get to where they need to go without overwhelming them. This should also apply to the website’s structure as well.
Be Consistent
I know – I’ve been hammering away at consistency! The reason is that a lack of consistency can really make things tough on users. Even something as simple as using the same color scheme on desktop and mobile navigation can make a difference. While not every desktop feature is right to bring over to mobile devices, bring the ones over that make sense and keep a level of familiarity.
While bringing responsive navigation to your WordPress website requires some strategy, it is quite easy to implement. Using a responsive WordPress theme gives you a great start. But, even if you aren’t in the market for a theme, there are a variety of plugins that can turn your existing menu into a responsive one.
With so many web users now visiting on smartphones and tablets, expecting them to use your old, desktop navigation is simply no longer a viable option. And, because there are so many great resources like the ones covered above, there’s no reason not to cater to mobile users.
Featured Image: PureSolution
The post Exploring the Current Responsive Navigation Trends in WordPress appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2dinkbA
envato.com coupon
Tidak ada komentar:
Posting Komentar