Randy Rayess
In a world where 60 percent of internet access is mostly mobile, offering the right user experience on websites can be a challenge. With too much to fit on such small real estate, designers need to implore on the possible ways of making mobile sites intuitive, usable and easily navigable. Responsive web designs (RWD) give you the opportunity to think innovatively about traditional navigation approaches. The web is now replete with great examples of responsive patterns. Here are 7 tips to help you select the pattern that works best for your website.
Tip #1 : Know Your Needs – See if the Long Scroll Works for You
Do you really want your users to navigate through all those links and pages? How about just reducing, re-arranging or combining content into long-scroll pages? Scrolling through long pages comes as a natural gesture to mobile users as compared to tapping on menu items. You can find some great examples of deep scroll sites like Whiteboard and Made by Hand.
Pro tip: Viljami wrote a JS plugin sometime back to help you design long scrolls for smaller devices. You can find it on Github.
However, going for a simple scroll website isn’t as simple as it sounds. You will need to identify the elements which will never scale well like giant images, unoptimized PDF docs, tables etc. If possible, don’t include them.
Tip #2 : Retain only high priority content
Ensure that content with the most impact is on the top to grab attention. Check MRY ‘s creative portfolio that plays out beautifully even on small screens without compromising on details like key projects that quickly find a place on the top every time one goes to their site.
Barack Obama’s political campaigning site is another great example, with a clear focus on donations and volunteer support.
Tip # 3: Pick the Right Color Palette
A clean navigation layout needs clear colors to work for it. Not Complex has chosen a plain white horizontal background for the navigation menu, which converts into a well laid out vertical menu in the mobile version. The contrast directs the user on how to move around the site and makes it easier on the eyes.
Hicks Design has also made a clever use of colors for their website. What seems like a random color encoding of different portfolio items on the desktop version, is really a clever way to turn tiles into clickable buttons in the mobile version. This is taking advantage of the fact that colored areas clearly tell the users where they need to tap on the site. This makes up for imprecise finger taps on mobile devices.
Tip #4: Pick the Right Navigation Patterns for Your Site
An ideal navigation pattern showcases 80 percent of your content within the first one minute spent on the screen. Keep in mind that it takes only 3 to 4 seconds for a bad navigation pattern to make a viewer leave. Block, multi-toggle, menu overlay, off-canvas flyout and drop down are some of the most popular navigation patterns used across the web.
Polaroid and Love&Luxe use the entire homepage as a menu (block), displaying their menu items as large blocks. This method works exceptionally well for photographers, creative agencies or even individuals who wish to showcase their creative work or service portfolio. On the other hand, Sony and LASSONDE SCHOOL OF ENGINEERING AT YORK UNIVERSITY use the multi-toggle way of navigation as they have a lot of content to display which demands for websites with extensive menus and sub-menus. Smashing Magazine, however, chose to keep it simple using a drop-down menu.
Top brands like Starbucks, Bootstrap and Zurb use the menu overlay method because it saves vertical space and helps users focus on what’s important. Arshiya Parab, UX Head, Venturepact tells us why menu overlay is the most widely used navigation style- “Hiding all the menu items using an overlay made the search box more prominent on the site. This invariably helped us improve user engagement.” Designers who are keen on providing the best touch-friendly user experience to their users, can learn from Facebook‘s mobile site with a menu that works like an off-canvas flyout.
Tip # 5: Think of the Footer as a Pivotal Element
The footer is commonly forgotten, mainly because it’s the last thing anyone ever sees on a website. But that’s true only with the desktop. Most navigation on a smartphone is done using the thumb. The thumb can manage to sweep the whole screen, but its comfort zone lies in the bottom third of the screen. Most mobile OS toolbars and navigation icons are also placed in this area of the screen. That’s why the footer is a pivotal element to consider while designing for a responsive website.
Here is an example from the Media Queries and Pears, which bring all the menu items as a simple nest at the bottom.
It is also a good idea to have a secondary navigation or key call to actions in the footer. Backlog does this beautifully. While placing key options under a menu icon, they shifted the social media icons and CTAs in the footer.
Tip # 6: Ditch Navigation, Add Search
If you thought it’s mandatory to have navigation in a site, think again! You can adopt many other alternatives. Just let your creative juices flow! Adding search is the simplest way of bidding adieu to navigation. This works exceptionally well with large sites, which include thousands of links. It’s a great way of hiding complexity from users. Take a cue from Harvard University’s site. It has a prominent search box for users who know what they are looking for as well as a some links in the bottom redirecting users to important sections of the site.
Tip #7 : Use Visuals to Help Users Navigate Better
Visuals are another way of helping your users navigate easily. Take, for instance, the Mobile Web Best Practices website. It’s desktop version has a clear navigation menu wherein different links have names as well as icons to identify them. To emphasize further, the categories are repeated under the header. In the mobile version, the top nav bar disappears, and users have to use the big icons to navigate the site. This is smart, as on a smaller real estate like mobile or tablet, visuals speak louder than words!
In Summary..
CSS is a powerful tool to manage a page layout as often as you need. So, the possibilities of navigation are virtually endless. A designer can even pick two or three navigation patterns to go with a mix and match approach, especially for a site with a lot of content and a complex navigation style.
