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.

Let’s Dig a Little Deeper

• 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

• 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

• 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!