5 Golden Rules of Mobile Website Design

5 Golden Rules of Mobile Website Design (Source:

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.

5 Golden Rules of Mobile Website Design

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.

5 Golden Rules of Mobile Website Design

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.

5 Golden Rules of Mobile Website Design

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.

5 Golden Rules of Mobile Website Design

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.

5 Golden Rules of Mobile Website Design

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!


Jason Finn

Founder & Chief Geek

Jason has nearly 20 years of consulting experience, predominantly in the technology space. Most recently he was the COO and Director of Technology for Rich Casto & Company, a national training and consulting organization in the real estate industry.
As a consultant for IBM, PricewaterhouseCoopers LLP, and Envision Consulting Group (now IMS Health), Jason has served clients of all sizes, including Big Pharma, Fortune 500, and Global 1000 companies:

  • Allstate Insurance Company
  • AOL (America Online)
  • Astellas Pharmaceuticals
  • Eli Lilly and Company
  • Ford Motor Credit
  • Wockhardt USA (formerly Morton Grove Pharmaceuticals)
  • Norwich Union
  • PNC Bank
  • Reynolds and Reynolds

Sarunas Budrikas

Creative Director

Sarunas is a web design and development expert with hundreds of successful projects in his portfolio. He is passionate about delivering extraordinary user experiences for every client and consistently goes above and beyond everyone’s expectations. As an SEO expert and strategist, he can optimize your website, or app, to get the most out of it, day in and day out. Sarunas holds a degree in Electrical Engineering from Kaunas Technology University, in Lithuania. Sarunas now lives in Chicago, and calls it home.

Alexandra Olsavsky

Client Experience Specialist

Alex specializes in content generation and social media promotion for Geek | Chicago clients, helping to solidify their presence in the online community. This includes blog writing, graphic design, co-ordination and design of weekly newsletters, and active engagement on Facebook, Twitter, Google+, and LinkedIn. Outside of Geek, Alex is a classically-trained soprano who professionally performs around the city of Chicago (most recently with the Chicago Baroque Band, and with the Rolling Stones for their "50 and Counting" tour).