Mobile Website Design Guidelines

Is your mobile website a beautiful bouquet of information or is it an overgrown garden that's difficult to navigate? If you can provide your online customers with a convenient and easy way to make a purchase while they are lying upside down on the couch, or waiting for the bus (or even waiting on the toilet 😳), then everyone will benefit from your well-functioning mobile website.

Here are a few design guidelines to ensure your mobile website is a beautiful experience and not a hot mess:

1. Audit your website

Explore the site through a mobile device to experience it yourself and check for any pain points. The best mobile design should be easy to scroll through, with no need for pinching or zooming to see the information. The text should be easy to read (size, contrast, font) and photos/icons can be utilized to convey ideas instead of blocks of text. Click through all of your links and pages, and go through the checkout process so you understand the customer's journey on your website.

2. Make sure your website is responsive

Your website should be able to adjust its layout based on the screen size of the device in use - including smartphones and tablets. Shopify, Squarespace, and Wix will automatically create a responsive version for mobile. When making edits to your website, always double-check your mobile version to ensure a smooth experience for all users.

3. Check for readability

If they are not responsive, text, and images or banners with text, could appear too small to read on a mobile device. Consider those with visual impairments: along with text size, contrast and fonts can also make text unreadable. The font size of your website should be easy to read on a mobile device without needing to zoom in. Use a font size of at least 14px and ensure that there is enough contrast between the font and the background. You can also use web fonts (like Google Fonts) to make your website more visually appealing.

4. Optimize Images

For a quick loading website, make sure your images are optimized for web use. If your website takes more than 5 seconds to load then you're likely going to lose visitors before they can even begin. Consider that not everyone has access to high speed internet, and that a fast-responding website is much more effective.

5. Reconsider pop-ups and interstitials

Sometimes your cute popup is actually really tricky to close on a mobile device, especially if there is a tiny little X that the user needs to click. Pop-ups and interstitials can be annoying for this reason - try to avoid using them or at least ensure that they are easy to close with a quick press of a thumb. You could also use other forms of advertising, such as banner ads or native advertising.

6. Contact Information 

More often than not when someone is visiting your site from a mobile device they are looking for a quick bit of information: your phone number, hours of operation, booking link etc. Make sure your contact information is easy to find on mobile. Having it in the footer menu is helpful because most people assume it's there and head straight to the bottom.

And finally... learn from others' mistakes

Take note as you explore other mobile sites - what drives you crazy when you're shopping online on your mobile device?

By following these mobile website design guidelines you can ensure that your website is not only best optimized for any mobile device, but also provides a seamless user experience for your visitors. Remember to test your website on different devices and screen sizes to ensure that it looks great and functions correctly!

Need help with your mobile website design? Book a free consultation with Grow and Behold Digital and start working with a team that’s dedicated to your online success.