The first and most important rule for designing a mobile website is that a mobile website should be different from a desktop website, not an exact copy.
Creating a desktop replica is not only a disservice to mobile customers, but to computer users as well:
“The desktop user interface platform differs from the mobile user interface platform in many ways, including interaction techniques, how people read, context of use, and the plain number of things that can be grasped at a glance. This inequality is symmetric: mobile users need a different design than desktop users. But, just as much, desktop users need a different design than mobile users.” – Jakob Nielsen, April 10, 2012
Mobile websites have a different set of goals and functionalities. Mobile users interact differently with devices and have a different set of expectations.
Use these basic guidelines for designing an effective mobile UX:
Don’t cut content – Prioritize it.
Mobile users expect to find the same information from their mobile device as their desktop; therefore, content should remain the same regardless of device type.
Mobile users typically do not browse websites, but instead use them to find specific information. Eliminating information can lead to frustration and an overall poor user experience. Instead, prioritize the information for which mobile users are most likely to search and list important pages first. Determine importance through website analytics, user research, and customer feedback. Additionally, when writing and choosing content for mobile users, focus attention to essential items and defer secondary information to secondary pages.
Determine and employ the shortest amount of steps possible for the mobile user to get from entry point to purchase or other key information.
Trimming mobile navigation to 4-8 steps prevents the user from experiencing decision paralysis and increases conversions.
Design for touch, not clicks.
Platform UX interactions dictate that a mobile website’s buttons, links, and navigation be tapable and “fat finger friendly” versus clickable by a precise computer mouse.
With enough spacing (about 44 pixels) and precision forgiveness, smartphone and tablet users can successfully navigate a mobile website without making incorrect selections, zooming in for choices, or experiencing incorrect responses to TouchEvents.
Leverage mobile-only functionality.
Unlike desktop websites, mobile websites allow new opportunities due to built-in phone functionalities.
Mobile-only advantages include direct dialing, text messaging, and geolocation services. These capabilities offer businesses powerful opportunities to more quickly easily connect with their customers, communicate promotional offers, and promote products and services while adding value to mobile users.
Be selective with fonts and graphics.
While it is important to maintain consistent branding from a desktop to mobile website, ideally everything on a mobile website should be read easily without zooming. Fonts best accomplishing this include, but are not limited to: Arial, Helvetica, Courier, Georgia, Times New Roman, and Trebuchet MS.
Consider your primary audience when determining readability of your mobile website across several devices. For example, millennials may find a smaller font easier to read than an older audience. Test the mobile-friendliness of a website with this Google Developer tool.
Just as navigation should be simplified, so too should graphics. Fewer graphics maximizes loading time and mobile space availability.
There are many best practices for designing an effective mobile user experience. Increase conversions with a mobile website that:
- Offers the same information as its desktop counterpart.
- Prioritizes important information.
- Simplifies navigation.
- Is “finger-friendly” and designed for touch (not clicks).
- Allows users to access mobile features, like “Tap to Call,” GPS and SMS.
- Is easy to read.
- Is fast to load.