The average business website can take 8-12 weeks to build. Afterwards, content updates and search engine optimization occurs for many hours, week after week. A website may get a design update after a year or two to change the look and feel of it, or to slight tweaks to match the company's new brand.

But what about the website when browsed on a mobile device? If you haven't given the mobile experience the same loving care as your SEO or the desktop experience as a whole, there couldn't be a better time to do so.

A report from Reuters forecasts that 75% of Internet use in 2017 will happen on a mobile device. However, for those that encounter any trouble accessing a site on mobile, Google states that 61 percent of users are unlikely to return. What's more, 40% percent will visit a competitor’s site instead.

Now, don't forget about tablet devices, especially for ecommerce businesses. Tablet devices have the highest observed add-to-cart rates of 8.58% on ecommerce websites, according to Smart Insights.

In order to make sure that the three-quarters of your users on mobile are able to browse your website well (and not lose 61% of them) read on to learn how to upgrade your mobile experience.

 

Experience the website yourself on a mobile device.

A man visits a doctor and says, "Doc, you gotta help me. My arm hurts when I swing it around like this." The doctor replies, "Stop swinging your arm around like that."

This suggestion may come as no surprise, but often times things that we know we should do, don't get done. You don't have to share with us, but how much time have you spent on your website on a mobile phone? Have you navigated to pages across your site and taken a number of different paths to get there?

Make your company's website your next stop on your phone after reading this article. Grab a piece of paper to jot down notes on things that need to change. Put yourself in the shoes of a first-time visitor and imagine what links and buttons they would tap and what pages they'd want to see. Try getting a content offer on your phone to evaluate the form filling experience and content delivery after submission.

Here's a short list of things to check when evaluating your mobile website experience: 

  • Does anything prevent you from viewing the content?

  • Can you read the content easily without zooming?

  • Can you click on CTAs and menu items to navigate from page to page?

  • Is anything bothersome or distracting (rolling gifs and auto-playing video, popups that you can't get out of, or images that take up too much real estate) on a smaller screen?

  • Are you able to successfully fill out a form on a landing page and receive the content offer?

  • Are there any assets like videos or images that seem to take a long time to load or don't load at all?

Test different pages, write down what needs to be changed, and share with your team to get the changes made in a timely fashion.

Make sure your website is mobile-friendly.

After seeing it for yourself, check your website with tools that can uncover some issues that are seemingly undetectable during your self-check. Development tools on a mobile device often require downloading an additional app and are not nearly as comprehensive as a desktop browser's development tools.

While there are plenty of tools available for testing your mobile website, we recommend using both of these free tools to ensure that your mobile experience is performing well:

Mobile-Friendly-Test---Google-Chrome.png
 

Website Grader is going to evaluate your website across five different categories: overall, performance, mobile, SEO, and security.

The mobile category will help you understand how your website performs on a mobile device and even show you potential problems in other areas like page speed and page size, either of which could have a negative impact on your mobile experience. 

Have you ever wanted to see what Google "sees" on your website for search engine results? The Mobile-Friendly Test will check to make sure all resources load properly on a mobile device and also show you a preview of exactly how Google views your website.

The Website Grader and Mobile-Friendly Test, free tools from HubSpot and Google respectively, are as easy to use as typing in your website URL. Both tools are chock-full of additional resources once you get your website results, so be sure to try both! 

Use smart content to craft a better forms for the mobile user.

By 2020, mobile transactions will account for 49% of ecommerce ($252 billion) due to its 17% compound annual growth rate (Forrester). Yet, Google has observed that 40% of people who research a purchase on a smartphone make the purchase, or complete the transaction, on a computer.

Why are so many users turning to a desktop to finalize a sale? A study from Facebook suggests a number of poor interactions that drive people to use a laptop or desktop computer over a mobile device to buy:

  • 55% of respondents reported that it devices with a bigger [computer] screen is easier to use for transactions.

  • 56% of respondents stated that it is easier to see all available products on a larger screen.

  • 27% of respondents found comparing products and getting sufficient purchase information difficult on a small screen.

  • 26% of respondents had experienced difficulty in entering their data on a smartphone.

In sum, the poor form submission and checkout process is a painful experience not to be repeated by 40% of users. Design a great mobile form submission experience by having: legible form labels, easy-to-tap submit buttons, visually marked required fields, and most importantly, shorter form lengths on mobile compared to the desktop experience.

Professional and Enterprise HubSpot Marketing accounts can go a step further for the mobile user by creating a smart form. A smart form is added by clicking the "smart" icon on a landing page. You can set up a smart rule that serves up an entirely different form for your mobile users.

smart_icon-form.png

Not familiar with building smart forms for a mobile device? Get step-by-step instructions.

As always, lead generation forms should only ask enough information of the user to begin a dialog. Filling out a lengthy form is a daunting task for the mobile user with much more room for user error. Since the mobile user is more likely to abandon the website when problems arise, you could miss out on a number of conversions because of a bad form submission experience.

Add Google AMP to your blog posts.

Accelerated Mobile Pages (AMP) is a Google-backed, open source project on a mission to speed up the internet on mobile devices. With the average website taking 19 seconds to load, there's plenty of room for improvement.

Screenshot_20161115-111944png.png

In fact, 53% of mobile users abandon a mobile site if it takes longer than three seconds to load (DoubleClick by Google). Fortunately, AMP-enabled pages will be delivered to the mobile user in a second or less.

Google will highlight AMP-enabled pages in mobile search results, like the example here. Additionally, Google will display a carousel of top stories (at the top of search results) for mobile users.The carousel of news stories will only feature AMP-enabled pages, which can help your posts find their way to the top of mobile search results.

Once this is enabled, your fast-loading blog posts will be good for the mobile reader's experience and search engine results, since page load speed is a ranking factor in Google's search engine.  

Enabling Google AMP on your blog will be is simple as checking a box in the blog content settings, as shown below.

enable-google-amp.png

 

Do you have some mobile design strategies that you'd like to share? Let us know in the comments below!

download your free marketing personalization ebook

Originally published Nov 17, 2016 5:38:38 PM, updated December 01 2017