Best practices for designing effective mobile websites

Here at Zipline Interactive we develop a lot of mobile websites. Early in the days of the mobile web, we were fortunate enough to have clients willing to allow us to push the envelope, creating mobile experiences long before it was a mainstream practice. Through the experience of developing more than 150 mobile websites, we have learned a great deal about planning and designing mobile website solutions, and we would like to share some useful tips based on this experience.

Back on January 1st, 2009, I posted a groundbreaking article on my personal blog discussing how to design websites for mobile phones. This highly technical article still holds the top spot in Google search for the phrase “How to design websites for mobile phones”, and averages about 50,000 unique views per month. This article, while excellent in its time, is now in many ways outdated. The mobile web evolves at amazingly fast pace, and our goal with this article is to provide readers with sustainable best practices that can be used to build effective mobile websites that can become long-term business tools.

Design the mobile experience for the user

User experience is by far the most critical piece of designing a mobile website. Depending on your industry or application, when a user is browsing your mobile website, they will generally have standard goals in mind. In addition, as the website owner you will have goals in mind for the user, things you would like them to accomplish, things you know they would like to accomplish. Make it easy for them to reach these goal areas. There is no need to hide important components. Review your analytics, discover what users are looking for when browsing your website on mobile devices and make it shockingly easy for them to find this information.

Example: We work with a number of ski associations to help them market regional ski areas. In analyzing the website statistics for these associations, we discovered that more than 70% of total traffic during the winter comes from skiers checking current mountain conditions. When we designed the new mobile experience for the Ski Washington Association, we created a homepage that contains real-time weather icons for each mountain, instead of resort logos or marketing information. This strategy makes it dead simple for users to quickly and regularly check the current ski conditions, and it helped to raise the number of returning mobile visits by more than 500%. The important thing to note here is that the mobile experience varies drastically from the desktop experience. Both utilize similar branding, and offer robust information, they are just designed to provide the user with what they are looking for quickly when browsing from a certain device type.

Allow the user to view the full website

While it is great to use data to create a helpful user experience for mobile users, it is also important to provide users with the ability to browse the full website if they desire. It is impossible to predict the needs of all user types, and providing users with the ability to easily toggle between the traditional website and the mobile website helps to ensure that all users can reach their desired information.

Design the mobile experience for fat fingers

Regardless of the device type, iPad or iPhone, Android or Windows Mobile, users will be interacting with their fingers. Make buttons, links, icons, and other UI components requiring interaction large enough for a user to easily click. In addition, provide whitespace around each link, navigation point, or icon to help ensure that the user doesn’t inadvertently touch the wrong item. Clicking links that were not intended to be clicked can be a way to quickly frustrate users.

Limit file size and clutter

One of the best things about designing mobile websites is that while there are many, many, many, different devices types, nearly all smartphones have decent support for HTML5 and CSS3. Familiarize yourself with the techniques available on your chosen device types and use them to limit the number of images required by your design. While mobile device speeds have increased a great deal in the last 4 years, it is still important to make your mobile experience light and efficient. Good design is definitely possible, but do your best to optimize for the many users who may be accessing your content on slower mobile networks.

Plan the experience for the screen size

There are a number of methods for building mobile websites. A popular and effective technique is called a responsive design. This strategy allows an organization to have a single website that works on all device types. The website will scale naturally to fit any screen size, and often Javascript or other techniques will be used to show or hide information depending on the size of the screen. In other cases, as is the case with Facebook, a unique version of the experience is created for each general device size. We have found responsive design works well for websites that are more simple in scope from a functionality standpoint while creating custom user experiences is much more effective in situations with complex functionality requirements. The key takeaway is that you want an experience tailored to the user screen size, you don’t want to shoehorn a tablet user into an experience designed for a mobile phone. Test and make sure that your mobile experience looks good and works for users on phones, small tablets, large tablets, and desktop computers. It is impossible to predict what new devices will come in the future, but if your experience works for all of these device types it should provide a decent user experience on the devices to come in the near future.

Mobile users scan content instead of read it

This is not just true of mobile users, traditional website user are guilty of this as well. When interacting with your website via mobile, users will often be in a hurry or on the go. These users are trying to quickly and efficiently locate information. Use large headlines, brief amounts of copy, and images to help direct users to the information they are seeking. Remember the user is reading your content on a device that is considerably smaller than they would be with your traditional website. Make it quick and easy for these users to find the information they are looking for by scanning headlines, don’t force them to dig.

Make your content big enough to read

It is no secret that mobile devices have small screens, and we have discussed that a few times in this article. Make your headlines large so users can scan them, but also make your body copy large so that users don’t need to zoom in to read your content. There is nothing more frustrating than struggling to read content once you have found it.

Conclusion

While these are all great tips, they are not all inclusive. There are many things to consider when creating a mobile website. The most important thing you should do when creating a mobile website is think. Think about the user, the business objectives, and how people will interact with the experience, and then create something targeted to achieve those goals. Use your website analytics to understand your users, the devices they use, and the information they consume on those devices, and then create something that they can easily navigate, touch, and use.