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!

Leave a Reply

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

How can we help?

Start A Project

Handwriting Animation Tutorial

Demo: codepen.io/drewhagni/pen/wvQXKKW Prerequisites: GSAP (basic knowledge) Adobe Illustrator (intermediate knowledge) Required tools: Club Greensock Adobe Illustrator (or similar) Caveats: Text is not readable by bots as it is converted to SVG shapes Illustrator is the only program I’ve successfully done...

Read More