5 Golden Rules of Mobile Website Design

Published on March 31, 2015

Did you know that 80% of Internet users are using their smartphones to search online?

Did you know that Google plans to use mobile friendliness to rank websites?

Creating a fantastic mobile website experience for your prospective clients is more important now than it has ever been. This algorithm change from Google will affect 40% of mobile search inquiries - a massive amount compared to the measly 12% which the former Panda updated impacted.

There will be "no degrees of mobile friendliness" according to a Search Engine Land article. This means your website will either get a "Yes, this website is mobile-friendly" or "No, this website is not mobile-friendly" response. Harsh? Absolutely.

(Obviously, want to be on the "Yes" side of this equation to ensure your website is coming up on mobile searches.)

So, how do you get ahead of the game and optimize your website for mobile devices? Here are some examples of great mobile websites, as recently detailed in Hubspot, and what advice you can take from them.

1. "Create Beauty in Simplicity" (Shutterfly)

Shutterfly is a service used to create photo books, personalized cards, and more. Having a good mobile experience is critical for this company, as more and more smartphone users are using their phone as their primary way to take photographs.

Their mobile website excels in ease-of-use and simplicity of display. Their menu buttons greet you upon first visit, allowing you to quickly select a subject to expand out. From there, appealing photos display Shutterfly at its best, under simple (yet visually appealing) text.

Load time on this mobile design is nearly instantaneous, and clearly illustrates their service at first glance.

The lessons?

• Establish a menu system that is easy to use and understand
• Use simple, direct language to articulate your services
• Use high-quality imagery add visual appeal

2. "Avoiding Endless Scrolling" (Amazon)

Amazon boasts a website with a wide variety of products for purchase.

It would be exceptionally easy for a mobile website like this to get unfortunately displayed in a long, text-based list, which easily succumbs to the endless scrolling trap. Not only does endless scrolling obscure your products, it deters mobile users out of sheer frustration.

Amazon avoids this by designing a mobile experience which allows users to simply swipe left to right look through all the different options. They also use categorical, menu-based sorting at the top of the screen, along with the necessary search bar or icon which is easily accessible at all times.

The lessons?

• Display product lists in a swipe left to right fashion, avoiding scrolling
• Create an always accessible menu with intuitive categorical sorting

3. "Complex Services Need a Simple User Experience" (Nationwide Insurance)

Nationwide Insurance has provides both insurance and financial services - both quite complex services, at their core. However, their mobile website design provides the opposite impression.

Simple user experience is the core of mobile website design, and Nationwide Insurance nailed it. Upon arriving to their mobile side, we see a clean, easy-to-access top-menu, a swipeable information sleeve, a place to enter in your zip code for a quote, and some intuitive categorical links for more information. That's it.

Are there limited options? Sure. However, the overall experience is much appreciated by users with small screens, and serves to lead customers in the right direction.

The Lessons?

• Consolidate complex information to the essentials
• Ease-of-use takes priority
• Create avenues for users to learn more, rather than displaying too much information on the home screen

4. "Use Scale and Color to Direct Audience" (Lean Labs)

Lean Labs, a Hubspot partner agency, creates a smooth and visually appealing experience for visitors by using design techniques to draw visitors to core company values.

They do this by strong use of imagery scale and color accents. They make great use of their color palate (evidently black, white, shades of grey, and red accents) to augment choice text and offerings.

The Lessons?

• Use clear, direct imagery at the appropriate scale for mobile viewing
• Optimize your brand colors (optimally 2-4 colors) to visually draw users' eyes to specific areas of the website

5. "Use Responsive Design for Platform Continuity" (Pharmacy Development Services)

Both the desktop and mobile version of Pharmacy Development Services' website are user friendly and simplistic, but what sets this mobile experience apart is that the website experience is essentially the same across devices.

This is thanks to an element that we like to call responsive design. Responsive design is a design that is adaptive cross-platform. There are many ways to develop a responsive design, and it can be a great time saving device for many companies when designed properly.

Another great element of this mobile website is its interactive capabilities with the "fill in the blank" technique. The form itself is really short and creates an easy-to-use platform for gaining responsiveness from visiting users.

The Lessons?

• Create a responsive website design for a cohesive website experience
• Use short forms to boost website interactions

Looking to optimize your website for mobile viewing, but aren't sure where to start? Don't hesitate to send us an email or give us a call with your questions!