Six Mobile First Design Best Practices for 2018

2018 kicked off the transition to mobile-first indexing for SEO and mobile first design. While Google’s bots will still review your desktop page, they will start with your mobile presence and expand from there. The days of having a less-than-optimal mobile site are over, as customers and crawlers expect your mobile website to be just as good, if not better than your desktop option.

Despite this knowledge, many small businesses are struggling to catch up. Clutch reports that only 71% of small businesses have websites as of March 2017. Of those websites, only 72% are mobile-friendly or mobile optimized.

To address the demand for mobile-optimized content, businesses on a budget and strategic companies are investing in mobile first designs. A mobile first design focuses on the smartphone experience, with the desktop experience taking a backseat. This is a reverse from the traditional method, where the desktop pages were first.

Mobile and desktop websites are similar, but mobile sites require specific features to maximize their use and search optimization. Follow these trends when developing your mobile-first web presence.   

Understand How Users Touch Their Screens

A few years ago, web designers followed a well-meaning but incorrect chart on how smartphone users touch their phones. The theory was based on the idea that most people hold their phones a specific way and only move their thumbs:

incorrect hand holding smartphone

However, social scientists and developers have realized that mobile users hold their phones in variety of ways. You can read more about this research on the UX Matters blog, but the general concept is that phone users touch more of the screen than you might think. For example, 50% of users cradle their phones with both hands, and most people change their holding position without realizing it. A few examples of how people hold their phones include:

users hold smartphones

If you’re concerned about whether or not your user will be able to see the most important information or navigate your website, create two designs and A/B test your options. You can also invest in eye-tracking and heatmap tools to see how customers react to your pages.


Standardize Click-to-Call Buttons

Customers expect an easy experience on your website, and you have a chance to meet these expectations with your mobile first design. Click-to-call buttons make it easier for users to reach your customer service team or call to schedule an appointment or place an order.

Along with click-to-call, there are other icons that your customers expect. Make sure your users can quickly click to Google and Apple maps is they need directions to your location. You should also add app APIs for social media, so the whole mobile experience isn’t disrupted if they want to check something on Facebook or look up your brand on Yelp.

Many content management systems like WordPress make it easy to add these widgets, so there’s no excuse for leaving them out of your mobile first design.


Test Alternatives to the Hamburger Menu

As more companies invested in mobile website content, the “hamburger menu,” slowly took over the web. This is what some developers call the three lines in the top corner that resemble and hamburger and open a drop-down menu. While you may find that this form of web-design works for your business, there are other alternatives that your customers may appreciate.

For reference, when Spotify ditched the hamburger menu in May of 2016, a 30% increase in navigation clicks, and Facebook reported a similar increase in traffic.

As a general rule of thumb, if your website has four or fewer navigation tabs, you don’t need a hamburger menu. Of course, you can also A/B test two different menu options to see which ones your audiences prefer and base your mobile first design off of those results.

Feature Your Product Photos

Whether you run an eCommerce business or just want to bring more people through the door, your mobile website can benefit from large, professional product photos. According to a May 2016 study by Nielsen on what internet users look for in mobile pages, the most important factor in mobile shopping (at 62%)  is the ability to clearly see photos. This was followed by having clear product descriptions, easy to find reviews, and being able to compare products. If your website lacks any of these features, then it will likely drive more people away than convince them to convert.  

Nielsen study mobile ecommerce use


Invest in Location and Personalization Tools

Customers expect the same experience they get on desktop websites in their mobile search. While you may have sacrificed certain tools and plugins to increase mobile website speed a few years ago, that’s completely unacceptable now. Mobile technology has caught up where it is possible to have both a fast and useful website.

Consumer data reflects this information. A recent report by Google in early 2018 found that 66% of customers are more likely to make purchases from brands that personalize the shopping experience. For eCommerce companies, this means remembering the customer and providing relevant suggestions or add-ons. For brick and mortar brands, this means using the customer’s location to show the nearest store. Some companies might add both of these features to give their customers options.  

You can’t manage a bare-bones mobile site while dozens of features live on the desktop anymore. Your mobile-first approach will force you to focus on developing with the smartphone user’s need in mind.

Make the Checkout Process Quick and Painless

You face an uphill battle with the abandon cart rates on your website. While the average abandon cart rate for most websites hovers around 69-74%, the average cart abandon rate for mobile devices is 86%. Part of this is because people feel more comfortable switching to desktop to complete a purchase, and part of this is because customers grow frustrated with a poor checkout experience.

You can grow your online eCommerce brand with an easy-to-use checkout process. Aone-page autofill form can help people breeze through the buying process and complete their purchase.

Additionally, consider investing in tools like PayPal, Apple Pay, and Android Pay to move the process along. As of June 2016, 73% of Apple users have made purchases using Apple Pay and 24% make purchases once per week or more. There are similar statistics for Android and Samsung users, and these trends are likely to increase over time.

If you want customers to buy your products online, you have to make it easy to complete the purchase.   


Let Professionals Optimize Your Mobile First Design

The actual design process is only the first part of website creation. The next steps include SEO optimization and traffic driving through digital marketing. That’s where we come in. To learn more about our optimization services and eCommerce consulting services, contact us for a free consultation of your domain.