11 Important Tips for Creating a Mobile-Friendly Website
Optimize your site for mobile users… or get left in the dust.
Mobile search is changing the way we browse the internet.
It plays an important role in driving in-store commerce, cross-device conversions, and website visibility.
And, mobile search continues to grow year after year:
- Custora shows that e-commerce transactions on mobile devices continue to rise—29% of all e-commerce sales occur on smartphones as of April
- ComScore‘s latest report shows 65% of all digital media time was spent on mobile devices in 2015.
- And, according to Google, 94% of people with smartphones use their phones to find local information—and 77% of those searches occur within close proximity to a desktop.
Google recently followed up its 2015 mobile-friendly algorithm update—Mobilegeddon—with a second mobile-focused update. This new update delivers more of what you might expect: mobile-friendly websites get a boost to SERP ranking, while non-optimized sites will have decreased search priority on all mobile devices.
In other words, it’s more important than ever to make your website mobile friendly.
So, where do you start?
There’s a lot to think about when it comes to creating a mobile-friendly website, which is why I’ve compiled this list of 11 tips to make your website mobile-friendly.
Let’s get into it.
1) Improve your site’s speed
Optimizing your load time is ground zero when it comes to good web design. If your site doesn’t load within four seconds, this is where you need to start. Improving your site’s speed will help your website’s performance across ALL platforms.
The usual culprit behind a slow website is a poor hosting solution. Your website may also be suffering from a cluttered theme, un-optimized images, redundant code, poor browser caching, or too many redirects and broken links. One or many of these elements could be slowing your site to a crawl, so it’s worth checking out Moz’s post on page speed to diagnose your website.
You can test your site’s speed using this free tool from Pingdom.
2) Use responsive design
Responsive web design renders the display of your website differently depending on screen size, which means desktop, tablet, mobile, and non-visual browser users all see a page that looks designed for their device.
Responsive design serves the same HTML code on the same URL to all devices and uses CSS to adjust the content to fit the screen size. You can use the viewport meta tag to tell the browser how to scale content.
Your meta tag should be added to the head of the document and should look something like this:
Google also supports two other mobile configuration techniques:
Dynamic serving generates a new HTML version of your page for each device, though your URL remains the same. Google may not be able to tell that your page is mobile-friendly, because the altered HTML content for mobile users is “hidden” from Googlebot. To remedy this, you’ll need to send a hint request using the Vary HTTP header.
Here’s an example from the Google Developers Blog:
Separate URLs serve different code to mobile and desktop devices. For example, a desktop user might visit “www.example.com” whereas a mobile user would access “m.example.com” for the same content. This setup is fine, as long as the relationship between the two URLs is made clear using rel=”canonical” and rel=”alternate” elements.
Here’s an example from the Google Developers Blog.
On the desktop page add an HTML annotation linking to the mobile page:
And on the mobile page add the annotation:
Note that having separate URLs will also require you to include annotations in your sitemap.
While Google supports all three different mobile site configurations, they recommend using responsive design. Not only does it make it easier for you to maintain your content, but it also makes it easier for your users to share and link the content through a single URL.
3) Make mobile navigation easy
When making your website mobile-friendly, your main goal should be to streamline your customers’ experience.
That means, you need to keep navigation simple and intuitive, make your layout naturally fit the viewing device, and reduce the number of steps they need to take in order to accomplish a goal.
One common method to ease mobile navigation is to feature a bottom/top fixed menu bar. This will often include a quick way to view your profile, see favorited content, and access the shopping cart or call to action, depending on the services you offer.
Another method that was once considered a huge web design faux pas is actually gaining popularity with mobile users: the “hamburger menu.” This little menu hides your navigation options behind a commonly recognizable symbol (three horizontal lines), resulting in a less cluttered screen for better UX.
The bottom line is that your website experience needs to feel natural and intuitive whether users are visiting from their desktops or from their smartphones.
In fact, making your mobile experience easy for customers is Google’s number one tip for building a site for mobile devices.
4) Focus on titles and meta descriptions
Place heavy emphasis on your titles and meta descriptions to ensure that they deliver a complete understanding of what your content is about.
Keep your URLs, titles, and meta descriptions as concise and accurate as possible.
Note that Google recently increased the width of organic search results from 500px to 600px, giving you a little more room to play with. For the best results across all devices, try to stay under these thresholds:
- Title length: 70 characters
- Meta description: 170 characters
5) Use Schema.org snippets
Snippets at the top of the page get noticed, especially on mobile where less information is displayed on screen. Schema.org is a collaborative effort by Google, Microsoft, Yahoo, and Yandex to better understand your content and provide the best search results possible.
By adding Schema markup to your HTML, you’ll get richer snippets displayed beneath your page title. These might include reviews, star ratings, publication dates, product details, event information, and more. According to Moz, Schema.org’s structured data has no clear effect on your rankings, but there is some evidence that more detailed listings enjoy higher click-through rates.
You can generate your own Schema markup code by using Google’s Structured Data Markup Helper.
6) Make your mobile site “fat finger” friendly
My favorite tip on Moz’s list of mobile optimization tips is to “Design for the fat finger.”
Touch screen navigation and tiny viewing platforms demand some departures from our traditional sleek and minimalist desktop design. If your buttons are intrusive, too big, or too small, you risk annoying users through accidental clicks.
As a rule of thumb, buttons should stay in the vicinity of 44px by 44px and font size should be at least 14px. This will minimize the number of accidental clicks and mis-clicks, and it means your users won’t have to zoom to read your content.
7) Use high-quality images
High-resolution images used slow mobile websites to a crawl, but today there’s a variety of ways to facilitate site speed without losing image quality. And, because all modern smartphones have high-resolution screens, your mobile users will certainly notice if you’ve skimped on image quality.
If you’re using responsive web design, your website should already scale images using a code that looks like this:
This code rescales images so that the image size never exceeds the viewing screen’s borders.
You can also use the more advanced <picture> element to dictate which images load on which devices, whether or not different versions of an image load depending on whether the device is in landscape or portrait orientation, and how large the image is on various devices.
Here’s a basic example of a code that would load a smaller image
<source srcset=”small.jpg” media=”(max-width: 768px)”>
<img srcset=”example.jpg” alt=”Example image”>
Note that there are also various plugins available to help you compress images without losing quality, such as WP-SmushIt for WordPress users.
8) Avoid common mobile mistakes
Committing some common mistakes could cost you, especially if they result in a lousy user experience.
Your website might be demoted in rankings and (if it’s REALLY bad) it could even be flagged with a warning in mobile search results!
Here are some mistakes you should avoid:
- Unplayable content – Flash still isn’t supported on many mobile devices, so it’s best to avoid it altogether. Fortunately, HTML5 has some standard tags you can use to include videos that should be playable across all devices. If you want to include animated content or animations, you can easily create these in HTML5 using Google Web Designer.
- Faulty redirects – One of the reasons Google recommends using responsive web design is because separate URLs might result in incorrectly redirected pages. For example, if your website redirects mobile users to your mobile homepage regardless of which page they requested, that’s a faulty redirect.
- Mobile-only 404 errors – Never show mobile users a 404 error for a page that exists for desktop users. Worst case scenario, if a mobile version of the queried page doesn’t exist, redirect your users to the equivalent desktop page.
- Pop-up ads – Interstitials and pop-up ads that cover the entire screen of a mobile site are quite common, but in some cases these highly disrupt UX and may even cause indexing issues. Any banner that’s difficult to close or that prevents a user from completing tasks should be avoided.
If you want to see more common mistakes, check out this list on the Google Developers Blog.
9) Optimize for local search
If your business has a brick-and-mortar location, make sure that mobile visitors can easily find it.
Your business’s name, address, and phone number should be easily accessible to all visitors and standardized across all pages of your website. Local SEO optimization should feature prominently in your meta description and structured data, so that potential customers can find you before they ever click on your link in their search results.
10) Test to see if your site is mobile-friendly
When all is said and done, the only way to make sure your mobile site feels as good as you think it does is to test it.
You want to make sure it’s responsive across every page, for every user, on any device.
As Hootsuite’s Kristina Cisnero says, “test it out on an iPhone, an Android, a Windows phone, and different tablets. Test every page, user action, buttons; and while you’re testing, it’s always important to put yourself in the position of the user.”
11) Consider if Google AMP is right for your website
Finally, with all this talk of making a mobile-friendly website, I’d be remiss if I didn’t touch on the new trend touching down in the world of mobile search: Google AMP.
The AMP—or Accelerated Mobile Pages—Project debuted in early 2016 and promises to provide users with the fastest mobile experience yet. By reducing web pages to a stripped down version of HTML, AMP-optimized pages result in 4x faster load times and 10x less data usage.
Of course, because AMP pages have very limited functionality, it certainly isn’t right for every page. It’s main utility right now lies with delivering instant news articles. Whether or not AMP has a significant impact on other websites remains to be seen.
Like it or not, the majority of the users visiting your site are probably mobile users.
If your site isn’t mobile-friendly and isn’t optimized for the best experience possible, you’re missing a huge opportunity to appeal to new customers and win new leads. No matter what service you offer, mobile-optimization is a must.
If you don’t know whether your website is mobile-friendly or not, it’s easy to find out. Just take the Mobile-Friendly Test to see where you can improve.
Did I miss anything? Do you have another tip to add? Please leave a note in the comments section.
And don’t forget, if you learned something, share it:
To connect with Ben, tweet @BeTopLocal or contact him at Be Top Local.