Mobile Website Best Practices
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!
