Leverage Branding Triangle Email Icon Map Marker Icon Twitter Icon Instagram Icon LinkedIn Icon Facebook Icon Pinterest Icon Brand Strategy + Planning Icon Print Icon Digital Marketing Icon Search Icon Events Icon Social Icon eCommerce Icon Design + Development Icon Video Icon
Design

Mobile Website Best Practices

Headshot of the Author Laura Benson

By now I’m sure you’ve heard a million times – if your business doesn’t have a mobile website, you should. We’ve discussed the importance of being accessible on mobile – how you are missing out on a very large consumer segment if you aren’t, and given a number of statistics to support this claim.

So you’ve got a mobile or responsive website, now what?

It’s important to make sure your audience is getting the best possible user-friendly experience when visiting your site. A user-friendly experience means a user will stay on your site longer, easily find what they are looking for and come away with a positive experience. All of these things work in your favor toward earning you more business.

We’ve put together an infographic that highlights the top mobile website best practices, so you can make sure your mobile website does it right.

Make it thumb friendly

The site must be easy to navigate with the swipe of a thumb, and gestural motions must be intuitive

Speed is crucial

64% of website users expect websites to load in 4 seconds or less

Design with mobile in mind

Don’t simply scale down your desktop site. Have a mobile first strategy and think through the design specific to mobile devices.

Keep forms simple

Break forms down into simple steps and use a minimum number of input fields.

Make Contact and Search Easily Accessible

Be sure to use a click to call phone number and tap to email icon.

Let’s Dig a Little Deeper

Mobile speed is crucial

  • minimize http requests by concatenating and compressing css and js
  • load scripts asynchronously
  • reduce dependencies – fewer files to download means fewer HTTP requests and faster loading times
  • reduce image dimensions – on top of the extra download time, processing power and memory are used to resize high-resolution images
  • reduce client-side processing – rethinking the use of JavaScript and keeping it to a minimum are best

References:
Smashing Magazine

Google Analytics Speed Optimization Tool

Design with mobile in mind

  • make text easy to read without zooming – a minimum of 14px-16px is ideal, or get fancy and use em’s in coordination with media queries
  • make sure buttons and links are large enough to tap with a thumb – a minimum of 44px x 44px is ideal with roughly 10px of space surrounding the tappable area as well
  • keep it simple – exclude any unnecessary elements
  • images are saved @2x for retina display – use media queries and/or special scripts to load the correct image, the correct screen and device size
  • balance design elements to drive performance
    • stay away from too many large images
    • take advantage of css as much as possible instead of images
    • use icon or svg fonts instead of images as much as possible
  • site layout should be fluid (responsive) and adjust to all screen sizes for mobile, tablet, etc.
  • hover effects don’t exist in mobile so make sure links are obvious
  • clear brand awareness above the ‘fold’

References:
Apple, Adobe, mobilewebbestpractices.com

Keep forms simple

  • use the correct input types i.e. “tel”, “email”, etc. to get the correct keyboard for the user i.e. “tel” gives you a number pad instead of the qwerty keyboard
  • place labels above form inputs

Be sure to add your own tips in the comments section so we, and the community, can continue to improve our sites!

One Comment

  1. Anon November 6, 2014

    It’s also SUPER important for the mobile version of your website to have the option to change to desktop. I can’t tell you how many online businesses I WON’T use because I can’t use their full website on my iPad because they haven’t given me that option. An iPad is recognised as a mobile device and defaults to the mobile site when there’s one available, bit it isn’t necessary with such a large screen!

Leave a Reply

Your email address will not be published. Required fields are marked *

How can we help?

Start A Project

2022 Social Media Comparison Infographic

Last Updated: July 2022 Editor’s Note: We will attempt to keep this updated roughly every six months. Check back for updated statistics. Thanks to everyone who has contributed feedback to keep this graphic as accurate as possible. With all of...

Read More