Get Free Quote
« How the FTC’s New... | Blog home | Happy Holidays from... »
December 17, 2014

6 Mobile-Friendly Navigation Best Practices

  • Print Friendly

Editor’s update (July 2015): In April 2015, Google made a pre-announced update to the algorithm that ranks mobile search results. A website’s mobile friendliness is a confirmed ranking signal for mobile search rankings. Take note and make your website mobile friendly with the help of the following article.
A story problem:
Joe is in a taxi trying to buy a Christmas present for his favorite second aunt twice removed. He’s on your website. The car is moving 31 miles per hour. How can you help him find the perfect gift?

Create a touchscreen-friendly mobile navigation that makes it easy for your personas (including Joe) to find what they need on the go.

Excellent! We’re on the right track. Now… how does one do that?

This blog post introduces six mobile-friendly navigation best practices that can help you make life easier for Joe and your other mobile customers. Note that all of the mobile navigation tips mentioned in this article are equally applicable to separate mobile sites, responsive designs and sites that dynamically serves web pages. (Not sure what that means, or which mobile platform is best for you? Read A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Sites.)

6 Mobile-Friendly Navigation Best Practices

1. List Your Most Important Pages First

Joe doesn’t have a lot of time — or patience. How can you help him get to the right place faster?

Before you can kick-off step one you’ll need to do some mobile site soul searching. What are your most important pages? What are the top category pages outlined in your siloing strategy? What are the most common actions your mobile users take? What pages of your website most effectively satisfy your user’s mobile needs?

When it comes to mobile users, quicker is always better. Listing your most important content categories and mobile calls to action first helps improve user experience by giving the user a more direct path to what they need.

2. Keep Mobile Navigation Short and Sweet

Joe’s iPhone 6 is only 750 pixels wide in portrait mode.

Designing mobile navigation means designing for a small screen size. With limited above-the-fold real estate available, there’s limited room for clutter. Get right to the point then cut the fat.

Ask yourself, what links need to be included to help your user complete priority tasks? What elements from the desktop navigation aren’t relevant in the mobile environment?

To save your user from decision paralysis, we recommend you aim to limit your mobile navigation to 4-8 items. Your mobile navigation is not the place to link to every page in your site.

To keep it short and sweet, you may even consider adding a top-of-page logo that navigates to the homepage and leaving the Home button out of your navigation all together.


Bruce Clay, Inc. simplifies a complex multi-tier desktop navigation for mobile.

Some mobile navigations require multi-level navigation to aid user experience. This is more common with ecommerce websites. If you must go there, keep it as simple as possible and never add more than two levels of dropdown functionality.

If your navigation is very short and sweet, consider using a static navigation that runs across the top of your design, like we see on the GameStop mobile site:


GameStop uses a static navigation that runs across the top of their mobile site.

If your navigation must include more items, an off-screen toggle menu that reveals a vertically-oriented navigation is the best option. A navigation that requires horizontal scrolling is a big mobile-friendly no-no.


To best serve its users, The Atlantic offers a long toggle menu that requires vertical scrolling. The red line indicates what you can see above-the-fold (before scrolling).

3. Make your Navigation Intuitive

Joe works hard enough; your navigation should not be work.

To make your navigation intuitive, menu language should always be written in a way that lets the user know what to expect. It should be clear what the item does if it’s a dropdown, and exactly where it goes if it’s a link.

If you are using symbols to convey information to your users, make sure they are clear, conventional symbols. For instance, if your menu items dropdown, use an intuitive symbol like a plus sign (+) or an arrow ( >) to let your user know a click will reveal more options. Another example would be to use a magnifying glass to indicate a search feature.

If you are using an off-screen toggle menu, use three stacked lines – as seen in the example below – to help the user locate and access your menu.


REI (left) and the Los Angeles Times (far right) use clear, conventional symbols to indicate toggle menus and dropdowns within multi-tier navigation.

The goal here is for your navigation to make life easier by limiting thinking, scrolling, clicking.

4. Be Thoughtful About Fonts and Contrast

Joe shouldn’t have to zoom to read any of the text on your mobile website, including the text within your navigation. Tiny text that requires zooming creates a poor user experience and both Joe and his friends Google and Bing really don’t like poor user experiences.

All of the text on your mobile site needs to be large enough to be read on a variety of devices without zooming. This principal needs to be a top mobile-friendly priority.

To make your navigation text easy to read, choose a taller font that naturally adds a little extra space between letters. Some common fonts that device manufacturers and users approve of include Arial, Helvetica, Courier, Georgia, Times New Roman, and Trebuchet MS.

Your font size and style will depend on your brand’s style guide and what works best for your unique demographic. For instance, millennials may not struggle with smaller, condensed fonts as much as an older demographic would. For this one there isn’t a one-size-fits-all recommendation. What’s important is that every word on your mobile site can be read easily without zooming. If you want to take the technical route, Google recommends you use a base font of 16 CSS pixels that scales across various devices. Another option is to perform user testing to see first-hand whether your font is tripping up users.

Not sure if your text is easy to read? Run your site through Google’s Mobile Friendly Test Tool.

5. Design for Touch

Joe is self-conscious enough; don’t design a navigation that makes his fingers feel fat.

Your tablet and smartphone users rely on touchscreens to get them around websites. While a pointy mouse arrow allows users to precisely select items in tight spaces, the average finger requires about 44 pixels, left to right and up and down. This is because of the size of the finger tip, as well as the less-than-perfect precision that comes with touchscreen selection (many users don’t hit the button exactly where they are aiming).

Build navigation buttons with a target smaller than 40 pixels and your user experience plummets as visitors end up slop navigating to the category above or below the one they want.

Since users are so very bad at hitting their tap mark much of the time, it can also help to incorporate touch feedback into your navigation. Your feedback could be a color change, a blink of color, a font change, or another visual cue. Even if it’s subtle, this feedback can improve user experience by helping to reassure users that they’ve selected the right item.


Both the Los Angeles Times (left) and Search Engine Land (right) incorporate color-change touch feedback into their mobile navigation.

If you are using multi-tier navigation, it’s also important that you make sure your dropdowns are touch to activate – not mouse over. Clearly, hover navigations work just fine in the desktop experience where hovering is a possibility, but it will leave mobile users stuck.

Another touch-friendly option is to design a supplementary navigation that uses images and exaggerated graphic buttons. This type of navigation can be a great homepage asset that gets your visitor headed in the right direction quickly. It’s important to note that this should only be a supplemental option used alongside a toggle navigation or a static top navigation. You need to have a consistent navigation that the user can access at the top of every page. While you may be able to include this graphic navigation at the bottom of your mobile pages, it’s not optimal or practical to use these big graphic buttons as your primary navigation.


In addition to a toggle menu, ModCloth uses a graphic navigation on their mobile homepage.

6. Design for the Multi-Screen Mobile User

Chances are good Joe has — or will — visit your website using multiple devices over a short period of time. To help him feel confident he’s in the right place it’s smart to give your mobile and desktop sites a consistent visual theme, but your mobile navigation and your desktop navigation do not have to be — and usually should not be — identical twins.

While the colors, fonts and themes you use for your mobile and desktop navigation should remain consistent, the similarity may end there.

Your mobile navigation needs to help users navigate around your website and accomplish tasks. Consider the content your smartphone users need and the tasks they are looking to accomplish then build your mobile navigation specifically for your mobile user.

What mobile-specific calls to action need to be built into your navigation to aid user experience? Does it make sense to include a Call button or a store locator?

Remember: space is limited, mobile needs are unique, and on-the-go patience is minimal.


Firestone uses a mobile-user specific navigation that is not identical to their desktop navigation.

Mobile-Friendly is Customer-Friendly

Creating a mobile-friendly navigation means creating a customer-friendly navigation that gets your personas moving in the right direction right away. Build an intuitive navigation that is easy to use and Joe will be headed toward conversion happiness in no time; build a navigation that is frustrating or confusing and he’ll be headed back to the search results and straight toward someone else’s website.

To keep Joe and the rest of your inbound traffic smiling, make your mobile-friendly navigation:

✔ Short and sweet whenever possible
✔ Easy to read
✔ Task-oriented
✔ Prioritized with what’s most important listed first
✔ Accessible and placed consistently across all pages
✔ Clear, straightforward and expected
✔ Vertical if scrolling is required (never use horizontal scrolling!)
✔ Easy on the eyes
✔ Finger-friendly

For information on how to optimize your pages for speed and mobile SEO, we recommend starting with these resources:


  • Print Friendly

23 responses to “6 Mobile-Friendly Navigation Best Practices”

  1. Melissa writes:

    Excellent tips for mobile friendly sites. A good user experience is what web designers strive for.

  2. Angelina Wright writes:

    Hi Chelsea,

    A really well-written and informative post on Mobile-Friendly Navigation Best Practices. Thanks.

  3. Chelsea Adams writes:

    Hi, Angelina!

    Glad the article was helpful! Thanks for the read. Curious where you’re at in your mobile process; are you working on a mobile design, working with clients, or just interested because, frankly, it’s interesting…?

  4. Angelina Wright writes:

    Hi Chelsea,

    Thanks for the reply. Actually I love marketing, and these days mobile marketing and design is a hot topic. :)

  5. Chelsea Adams writes:


    “These days mobile marketing and design is a hot topic.” You’ve got that right! It’s incredible all the resource time Google has been dedicating to create documentation that teach mobile optimization (and design) best practices. Have you seen these Google resources?

    Mobile-Friendly Website Guide:

    Mobile Playbook (for executives):

    Mobile-Friendly Test Tool:

    Google Chrome Mobile Device Test Tool:

  6. HighEndResults writes:

    Great tips here! Flexibility should be practice in businesses and that includes providing a mobile-friendly navigation for better UE. :)

  7. Ashok writes:

    Quite a well-written as well as beneficial article on Mobile-Friendly Direction-finding Guidelines. Cheers.

  8. Chelsea Adams writes:

    Thanks, Ashok! Glad the content worked for you :)

  9. Alex writes:

    I definitely agree. Search engine optimization is also about create good experiences and that means easy navigation, site speed and legible content on mobile.

  10. Partha Sarathi Dutta writes:

    Nice post!

    However, my #7.. Test, test, and test >> You cannot make it perfect however the goal should be – building an app or website as perfect as possible from both technically and non-technically. For that, you must conduct some extensive study of your target audience – individuals or communities.


  11. Chelsea Adams writes:

    Yes, Partha!! Testing would be an excellent seventh addition to this list. I strongly believe that UX testing and user research needs to be at the heart of everything we do — from web design to writing meta descriptions to content marketing. At the end of the day it’s real people who you need to lead down your conversion funnels; it doesn’t matter how great your in-house team thinks your design is if your target audience think it’s too complicated/confusing/boring/etc.

    Thanks for chiming in. *Thumbs up*

  12. Sneha Singhvi writes:

    Nice advice! I think, above outlined six points are good enough for mobile optimization to it’s maximum output. Design, Fonts, Contrast and navigation simultaneously form the suitable and perfect right matched value of mobile devices. Thanks for this relevant post.

  13. Anand writes:

    Great piece Chelsea. I can’t believe the number of online stores that get the first two points wrong. What this means for me as a user is that I have to often type out what I want on the tiny search field and I have never been good with mobile keyboards. It’s a pretty frustrating experience.

  14. Chelsea Adams writes:

    Agree, Anand! Let’s be honest — no one is good with mobile keywords. That’s why we have autocorrect — and even that tool can be a nightmare. I always want results immediately when I’m searching on my mobile phone; a navigation that gets me there with a click is ideal, whereas a search menu that requires me to use my fat fingers is a less-than-ideal plan B… especially if the search function isn’t sophisticated enough to recognize what I am asking for despite typos.

    Thanks for reading!

  15. Camilla Nira writes:

    Lately the best solution is to use jquery.mobilemenu.js. It converts your menu to an pull down menu which is much better for mobile devices then a css pull down menu which can become unmanageable fast.

  16. Chelsea Adams writes:

    Excellent tip, Camilla! Thanks for jumping in!

  17. Harsh Mehra writes:

    Mobile optimised website making is a good practice for web developers. because more than 75% of peoples using smartphone to interact with any type of website. whether it is health, computer and shopping related it doesn’t matter.

  18. Chris Phillips writes:

    This is exactly what I needed. We are working on updating our mobile site for real estate searches in Indy and needed some direction. I haven’t seen the pixel information for touch screen use before but I have noticed that issue on several local competitor sites so I found that especially helpful. I was amazed at how many customers use their mobile device to search for real estate (Photos are the most valuable content for real estate listings and I would have thought the experience using a mobile device would be negative and cause less traffic but about half of our visitors are using mobile – never would have guessed that until we started tracking) Thanks for the article Chelsea

  19. Chelsea Adams writes:

    I love comments like this, Chris!! Success! I am so glad that the information in this post was just what the doctor ordered. I, too, was having trouble finding a go-to resource that clearly outlined mobile navigation best practices — including pixel dimensions for finger-friendly tap zones — so, to solve the problem, I decided to write my own guide. (If you want something done right, do it yourself, right?) Helping people solve problems is the best part of my job; thanks for making my Tuesday, Chris!

  20. Pooja Yadav writes:

    Thanks for the post. Always on the look out for any good mobile practices, thanks for the posting.

  21. Chelsea Adams writes:

    Hi, Pooja! A hearty thank YOU for reading; glad to hear these mobile navigation tips are working for you.

  22. dapa writes:

    Awesome work Chelsea, I suppose this is even more apparent with Google’s soon to be released mobile-friendly algo tweak.

    Would you change anything you’ve said based on that?

  23. Chelsea Adams writes:


    Yes! This article is extremely relevant in light of Google’s recent mobile algorithm announcement. Would I change anything to better cater to the mobile algo? No! The mobile navigation best practices outlined in this blog post are all aimed at helping webmasters create mobile experiences that are quick, intuitive and user-friendly. Make your mobile experience speedy and user-focused/friendly and you’ll be in Google’s good graces, as well as the good graces of the mobile-friendly algorithm.

Get Started
Learn SEO

Be a Blog Subscriber

Save a trip! Get Bruce Clay's latest digital marketing strategy delivered to your inbox for free.

We respect your privacy and never share your email address

Free Executives Guide To SEO
By continuing to use the site, you agree to the use of cookies. AcceptDo Not Accept