Navigation is one of the most important aspects of mobile website design. If your user is not easily able to find what they want, then don’t plan on them staying for long.

The first decision when designing your mobile website’s navigation is whether you want your content or navigation to take center stage. Depending on the type of website you are designing for you may require one or the other. As a general rule of thumb I would suggest having content take center stage if your user is looking for frequently updated information. So news sites and other websites that specialize in delivering content to their users should stick to content over navigation.

The next step is deciding where to put your navigation and if you are letting content take center stage, then how to get to it. On most mobile websites you will see a navigation layout that looks like the following

—————
Logo
—————
button
—————
button
—————
button
—————
footer
—————-

Another iteration of mobile navigation layout is using a grid of images like the following

Mobile website navigation

While these work great for some mobile websites , a more sophiscated approach is needed for mobile websites that are looking to deliver updating content to their user. If you are delivering content then your user is mostly likely going to want to see the content as soon as they arrive at your page and not a bunch of navigation options.

When allowing content to take center stage you are left with the decision of where to place your navigation and how to fit all of the relevant options while still allowing your content to shine. Trying to fit all of your navigation into a header or sidebar, like most desktop based websites do, is unrealistic as the needed options will most likely take up way too much space. One approach to fixing this is by having a button that links to a full screen navigation pop up. Youtube and ESPN both implemented this well and it allows them to have their content featured.

Another navigation feature to consider when designing for mobile web is where to direct your user when they get to the bottom of your page. If page views are an important factor for your business then implementing pivot points that allow users to further explore your website at the bottom of the page are a way for you to help drive up page views. Footer navigation can also be helpful for those looking for a quick way to jump around your website without having to first go to your menu popup.

Hopefully you took away some ideas for your mobile navigation design. Next week we’ll tackled responsive design and some of its benefits over adaptive mobile design.