How to make mobile friendly site?

Q: We know that mobile search will increase this year. I am thinking of creating a mobile friendly version of my desktop website, however, confused on how to make the navigation friendly for the visitors. Do you have some tips to share?

A: Google has recently sent notifications to non-mobile friendly websites to fix their mobile usability issues. So, there are chances that a new Google mobile algorithm may arrive soon.

To make search easier for customers, you need to make navigation mobile-friendly. Let’s discuss what all you can do:

Listing most important pages first

Figure out what are the most important pages and the top category pages in your Silos strategy. Also, determine the most common actions your mobile users take and the pages of the website that will satisfy the needs of the users.

Quicker is always better for mobile users.Listing the most important content categories and mobile CTAs will give a more direct path to the users and enhancing their experience.

Keeping the navigation short

Design the mobile navigation for a small screen. It should have a limited above the fold content and try to get to the point. Asking yourself, what links should be included to help user complete a task will be a great idea.

I recommend that you should limit your mobile navigation from 4-8 items and remember that mobile is not the place to pass a link to every page on the website.

If you have an eCommerce website, it will have a multi-level navigation. Better to keep it simple and not adding more than two levels in the dropdown functionality.

In case the navigation is short, you can use a static navigation running across the top of the design. Or if there is a need to include more items to the navigation, consider having an off-screen toggle menu with a vertically oriented navigation. A horizontal scrolling does not work good for big mobile friendly websites.

Paying attention to fonts

Your visitor should not feel the need of zooming the text to read it. The font should be clear and large enough to be read on different mobile devices without zooming. I suggest using a taller font that will add a little extra space between letters. Times New Roman, Trebuchet MS, Georgia work great.

Designing for touch

Most of the smartphone users have touchscreen devices. The average finger requires around 44 pixels up and down & left to right, so a pointy mouse arrow will allow users to select items in tight spaces. I recommend building navigation buttons smaller than 40 pixels. Also incorporate a touch feedback into the navigation. This could be in terms of color change, font change, or any other visual cue but will help the user in knowing that he/she has selected the right item.

Designing for multi-screen mobile users

There are chances that users may access your website from different mobile devices. So, be consistent in terms of having same visual theme on mobile & desktop versions but your mobile & desktop navigation should not be identical. Always remember that the space is limited on mobile as well as the needs are unique on mobile & the patience is minimal.

A mobile friendly website is a customer friendly website. Build an intuitive navigation that is short, easy to read, task oriented, prioritized, accessible, easy on the eyes, and finger friendly.