Checklist for Making Your Website Mobile-Friendly

About 57% of Internet users now prefer access through their mobile devices, not PC. And let's take into account that Google now uses mobile-first indexing for over half of the pages shown in search results globally. All of this means that it's time for mobile SEO. Here is a quick checklist for making your website mobile-friendly by Margaret Reid from The WordPoint.

1. Eliminate Dual Websites

In the past, businesses frequently designed a separate website for mobile users. They would then query the user's session to determine which site to use. In some cases, they would even ask the user to choose whether or not they would be routed to the desktop or mobile site.

This practice is outdated, and Google frowns upon it. If you are using this method, it's time to move to a single website solution. You'll see improved search engine results, and you'll no longer need to make decisions about what content to exclude from your mobile site.

Fortunately, not only does Google support a single URL vs. an M dot URL along with a standard URL, they actively advise webmasters on how to accomplish this. The steps include creating the responsive website, and then configuring redirects so that users attempting to navigate to your mobile URL are routed to your new responsive site.

2. Google Prefers Responsive Design

Not only does Google favor this method, but it's also the most popular and most accessible to maintain. Responsive design means creating a website that adapts itself to any device and screen size. The benefits of responsive design include:

• Flexible Layouts
• Lower Maintenance Efforts and Costs
• Faster Development
• Lower Bounce Rates
• Increased Mobile Traffic

However, responsive design is not your only option. You can use dynamic serving. It means using the same URL for all versions of your website, but using a separate HTML structure depending on the user's device. The key benefit of dynamic serving is that you can create a truly unique user experience for each device. The downside is that the development process is significantly more involved.

A final option is to create a mobile app. It is, again, more expensive than responsive design. It also requires you to convince users of the benefits of downloading and installing yet another app. There are also higher development and maintenance costs associated with mobile app development.

On the other hand, there are undeniable benefits. Mobile apps perform better. You can also build in functionality that you just cannot with a mobile-friendly website. Finally, there are definite branding benefits to developing a mobile app. Your brand name and logo will likely be in the user's field of vision quite frequently if your app is installed on their phone.

3. Use Structured Data

If you want search engines to understand your content, you should use structured data. Google recently has announced the following advice for the mobile-oriented websites:

To make sure that you've implemented structured data for the mobile version check the source code when you simulate a mobile device, or use the HTML generated with the mobile-friendly testing tool.

4. Embed a Viewport Meta Tag

The viewport is the visible area of a web page. This changes from device to device. Initially, the only way to deal with various screen sizes is to set this manually. By using a viewport meta tag, you can create a website that can handle multiple devices.

Consider adding the user scalable value of 1.0. This will allow users the ability to zoom in and out. So it is necessary to add a viewport meta tag to each page:

It gives users more control over their experience. Using this value, you can also contribute to your site being user accessible.

5. Avoid Flash: Enable JavaScript, CSS, or Image Files

Flash is a significant resource drain for mobile devices. It sucks battery power. It doesn't work on Apple devices. There are also performance issues. Users are also advised to block websites using flash or to approach them with caution because of known security issues with flash.

While avoiding flash is essential, it's also significant that your website enables JavaScript. Make sure that Javascript, CSS, and image files on your site are available for Google. To do this, you can use Google Search Console – 'View as Googlebot.'

6. Pay Special Attention to Choices Such as Button Size and Fonts

The choices you make here make a big difference in the user's overall experience on your website. Current recommendations include:

• Using a font size of at least 14 PX for Mobile and 11 Points for iOS
• Making buttons at least 44 PX by 44 PX
• Tightening the leading when compared to desktop
• Using whitespace for readability
• Sticking with a single typeface
• Favoring left side alignment

Unless you have a good reason for deviating from established design rules, it is usually best to stick with standard conventions. For example, high contrast buttons are usually reserved for positive actions, low contrast for negative, and medium contrast for neutral actions.

7. Choose High-Resolution Images

When you use great images, you contribute to better mobile user experience. Your goal should be to use images with double the resolution that you would on the desktop. All visual assets that you use on your mobile sites should be high res.

And one more tip – eliminate using pop-ups. They disturb users and Google doesn't appreciate them.

8. Be Mindful of Performance

If your website is slow to load on a mobile device, you're going to see negative SEO consequences. In addition to this, it degrades the user experience. You can improve load speed by shrinking images, reducing the amount of content on each page, and using a caching plugin.

Here are some other ways to get peak performance out of your mobile site:

• Reduce the number of redirects or avoid them altogether
• Optimize your CSS
• Improve your service response time to boost both mobile and desktop performance
• Reduce file size with GZIP

If you think your mobile site is fast enough, or that this isn't something to worry about, here are some statistics to consider.

• 53% of users will abandon a page that takes longer than three seconds to load
• Mobile website delays cause a significant amount of stress
• 35% of purchases are done over mobile devices
• Mobile websites get more traffic than apps
• But apps convert more customers
• 80% of the top performing sites on Alexa are using adaptive design

These statistics shouldn't be taken to mean that you should adopt these practices. However, they do illustrate nicely how much mobile web performance is a consideration in successful website design. To check loading speed, you can test your site with Google PageSpeed Insights, GTMetrix or Netpeak Spider.

Read more in our post 'How to Speed up Your Website with Netpeak Spider'

9. Prioritize The Information People Need

Mobile users are on the go and often need actionable information as quickly as they can get it. Here's an example.

Imagine that you own a restaurant. Think about the needs and expectations of a desktop user compared to a mobile user. The desktop user likely has more time to browse. They might be interested in reviewing the nutrition information of your menu items or reading about your dedication to the farm to table philosophy.

Now, contrast that with the needs and expectations of a mobile user. They are more likely to be looking for information such as your contact number, hours of operation, even a link to your online reservation system.

Take this into consideration when you design your website so that your mobile users can find what they need quickly and easily.

10. Gauge The Mobile Friendliness of Your Existing Website

Is your website as mobile-friendly as you think? Google's Mobile-Friendly Test can help you to determine that. To use the tool, simply enter the URL of your website. When Google processes your site, it will show you precisely how it looks to Google through the lens of mobile devices. You'll also see any mobile usability problems that exist.

There are other tools you can use as well. The World Wide Web Consortium offers the Mobile OK checker. The tool provides a report with the overall ranking that uses a 0 (not mobile-friendly) to 100 (very mobile-friendly) scale. Additionally, there is a guide you can follow to get your website optimized for mobile, as well as some other tools to try as well.

Ultimately the only sure way to know your website is mobile-friendly is to test it. It means testing during initial development and through maintenance and upgrades. If possible, test your site using as many possible devices as you can. Then, on each device, test the functionality of your website using every browser available.

You will want to check to ensure that:

• Pages load quickly
• Navigation works smoothly and is intuitive
• Text and images are perfect

If you aren't able to access all of the mobile devices you would like for testing, there are mobile emulators that you can use. Just be aware that these don't perform exactly the same. Still, they are a better alternative to not testing at all.

Final Thoughts

Your website must provide a high performing and exceptional user experience for mobile users. So make sure to:

• Use structured data
• Embed a viewport meta tag
• Avoid Flash
• Enable JavaScript, CSS, and images
• Optimize your loading speed
• Work on the design and information on the website
  

By applying the tips above, you can create a mobile-friendly website that leads to improved SEO, more traffic, and better user satisfaction. It can lead to higher conversion rates, fewer bounces, and more return visits.