5 Best Practices for Good Mobile Design

With mobile queries exceeding desktop searches in recent years, e-commerce stores should work on consistently optimizing mobile sites.

Web design guidelines for mobile sites work differently from desktop versions. To increase overall conversions, below are five best practices for good mobile design:

Optimize the File Size

Optimized images greatly affect mobile user experience and ranking of web pages on search engines. Slow-loading pages irritate visitors and usually result in shopping cart abandonment and high bounce rates.

There are two factors that affect file size: quality and resolution. Reducing quality settings decreases the images’ sharpness while a mismatch of the image file size and image holder can distort the image.

What to Do

Use image optimizer tools like TInyJPG and ImageOptim to reduce file sizes before uploading them on web pages.

Construct a Mobile-Responsive Website

Designing a responsive website is considered one of the best practices for creating a good mobile design. Having a responsive website means the website adjusts dynamically depending on the device the customer uses. There are a few things to keep in mind when talking about responsiveness:

• Image size: choose images that look sharp on all devices
• Layout: ensure that content is arranged in the right order and is easy to navigate, both on desktop or mobile
• Animation, Video, and Javascript: it is best to reserve these elements on the desktop version of the website

Use Accordions

Displaying all content into a single column can make the content seem longer. Browsing on mobile becomes difficult for visitors as they go through large amounts of text and images when they are searching for certain information.

To resolve this issue, use accordions. Accordions are containers that hold content and can either be expanded or collapsed.

What to Do:

Communicate with your web developer to implement the accordion design element into your mobile site.

Set Up Links for Phone Numbers and Addresses

Mobile optimization creates a streamlined experience for mobile visitors.  For brick and mortar stores, phone numbers and addresses are crucial touchpoints. Make it easy for customers to reach local businesses by creating easy access to “Contact Us” details.

What to Do:

Make the phone number a clickable link. Also make the physical address clickable, which transports the visitor to Google or Facebook map applications.

Design Mobile-Friendly Forms

Filling out long forms on mobile is an awful experience,  not to mention it can be pretty taxing to the thumbs.

One solution to this issue is to decrease the number of form fields. A reduction of form fields creates a perception of reduced effort that the customers need to make. It makes the whole experience a little less daunting and it allows for gathering lead data in little bits from visitors, potentially reducing the bounce rate. Just make sure to collect the visitor’s email address for future use.

What to Do

You can also restructure the forms into multiple steps. Doing it this way can help increase your mobile conversions.  To illustrate, if you have 12 fields, you can break it down by having only 4 fields on the first step. When users complete the first step and click on the submit button, they go to the next page to fill out the next 4 fields, and so on.

In case there are lots of required details on the form, narrow it down by removing unnecessary fields or combining multiple form fields into a single field, for example, creating a “full name” field instead of “first name” and “last name” fields.