The Site That Smiles Back: A Beginner’s Guide to Mobile-Friendly Websites
Did you know that Google doesn’t rank the desktop version of your site anymore?
Google’s latest initiative to improve mobile usability, Mobile-First, arrived in March 2021 and is here to stay for the foreseeable future.
Mobile-First means that your site’s rankings are only coming from the mobile version of your site, and guess what? If the mobile version sucks, you’re not going to rank well.
An advanced internet marketing agency, EverSpark is here to help. In this blog, you’ll learn exactly what Google looks for when judging whether or not a site is mobile-friendly. You’ll learn some tips to do a 360 from your current user-hostile site, and get some inspiration for designing your site going forward. Let’s get started.
What does mobile-friendly look like?
Before we dive in, let’s make sure you’re familiar with the term “mobile-friendly.” A mobile-friendly site appears just as well on a mobile device as it does on a desktop. It’s easy to navigate, easy to read, and quick to load.
If a user is unable to access the information or service they’re looking for due to your website’s poor design, long loading time, or garbled content, they’ll likely leave your site for a competitor’s.
You don’t want that to happen, because if one user noticed your site’s mobile weaknesses, we can guarantee that other users will. That’s because in 2020, 55% of all online traffic came from mobile devices. If your website isn’t optimized for cell phones and tablets, you’d better get to work.
Let’s break down what a mobile-friendly website looks like.
In the context of website design, “responsive” means that a website is able to adjust its content to match the size of the screen. For example, an iPhone 6 can’t display as much content as an iPad, so it’s important that your website responds to a variety of screen sizes and devices.
Here’s an example:
First of all, we need to establish a baseline. The above image is how The Atlanta Journal-Constitution website appears on a desktop screen. Now let’s compare desktop and mobile versions.
The photo on the left is a rendering of The Atlanta Journal-Constitution’s homepage displayed on an iPad. The photo on the right is the same homepage displayed on an iPhone 6/7/8 Plus.
As you can see, the iPad version has the full menu displayed at the top of the screen, while on the iPhone, a user can access the menu by clicking on the three lines on the top left. The iPad also displays more headlines than the iPhone version; to see the Politics, Local News, and Georgia News sections on the iPhone, the user would need to scroll down.
So there are a few differences, but overall, the website gets its message across. Users can easily find information and they can access the menu on all devices. The design isn’t overly distracting, and it’s obvious that it’s the same website from one device to the next.
That’s an example of a well-optimized, responsive website; let’s take a look at a not-so-optimized one.
Looking at the desktop version of their homepage, you wouldn’t expect Audi to have poor mobile design. But expectations don’t always match reality.
Come on Audi, you can do better than this.
The image on the left is a rendering of the homepage on an iPad and the image on the right on an iPhone 6/7/8 Plus. On the iPhone, the cover image is mostly cut off, and on the iPad, it isn’t displayed at all. The user can’t tell what the homepage is even depicting on the iPad; users are left wondering, “The next chapter in what?”
On the iPhone, the copy and logo are cut off, and although the menu is easily accessible on both devices, the poor design leaves an overall bad impression.
Since mobile screens (phones, tablets) are significantly smaller than desktop screens, they have far less space to entice customers (or clients) and get their point across as simply as possible.
Nowhere is this more apparent than with a menu (a food menu or, for our lawyer friends, a practice area menu).
Menus that would otherwise appear orderly on desktop can frankly come across as a trainwreck on mobile devices. Take a look at the Domino’s website below (both images are renderings of an iPhone 6/7/8 Plus screen):
Yeah, we don’t know what’s going on here either. The images are tiny, there’s a gaping white space before the fold, there’s so much to look at that it’s difficult to concentrate on one thing, and you basically have to go on a treasure hunt to find the full menu (it’s a clickable banner tucked away inconspicuously on the last photo). Not great.
Papa John’s, on the other hand, has a much simpler, easily digestible design (ha). The focus image is tantalizing, the menu is easily accessed in two places at the top of the screen, and you have four clear options: look at the menu, view specials, sign in to your account, and start your order. Simple.
As a law firm, your clients rely on you for answers and resources. No matter how much effort you put into mobile design, they’ll inevitably have questions.
Don’t make clients spend time searching through dozens of pages to find an answer to their question. Make your customer service initiatives plain from the get-go. For many lawyers, that means an Ngage live chat service.
Ngage is the most popular live software service in the country, and it’s easily added to your mobile website design. Take a look at this lawyer’s website (displayed on an iPhone 6/7/8 Plus):
This rendering puts attorney-client communication front and center. With a visible call button and a pop-up live chat window, clients are instantly met with the opportunity for engagement. If they don’t want to talk just yet, they can easily exit the live chat window, and it won’t pop up again for the remainder of their session.
Why do mobile-friendly websites matter?
The better question is: how do they not matter? Your site must be compatible with mobile devices if you want to succeed in an ever-expanding digital world. In the wake of the coronavirus pandemic, mobile experience is even more important, and clients are going to notice if you haven’t put the effort into optimizing your online presence.
If you hadn’t noticed, the mobile experience isn’t just a here-today, gone-tomorrow trend. Impact estimates that by 2025, approximately 73% of internet users will access the web solely via mobile devices.
If that’s not enough to kick you into action, consider these reasons for making a mobile-friendly website:
Mobile-First Indexing is the New Norm
Last year, Google executive John Mueller confirmed that mobile-first indexing would take precedence over desktop-only sites. The change was coined Mobile-First and rolled out in March 2021.
Mobile-First means that ranking signals will now come from the mobile version of your site instead of the desktop version. On top of that, desktop-only sites will be dropped completely from Google’s index. Meaning they won’t rank. Meaning you might as well have no site.
Mobile Content is More Easily Shared
Facebook, Twitter, email, text – the content-sharing possibilities are endless on a mobile device. With the click of a button, clients can recommend your firm to family and friends, who in turn are more likely to recommend your firm to their family and friends, and so on.
Not to mention, your firm gets exposure when a client shares a piece of your content on their social media page. Sure, clients can share content on desktop, but mobile has a stronger impact.
Better User Experience
In the digital world, few things are more frustrating than a website that takes forever to load, doesn’t respond to your clicks (no matter how hard you tap the screen), and is so unorganized you can’t make head or tails of what’s going on.
Trust us – a website well-optimized for mobile devices will help you obtain and hold on to clients. A website that isn’t optimized for mobile devices is far more likely to frustrate users and cause them to leave.
Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.
Websites that meet clients’ needs encourage trust and accountability between the client and the owner of the website. Trust inspires loyalty, and loyalty leads to better client retention.
How to Make a Mobile-Friendly Website
1. Take the Mobile-Friendly Test
You won’t know what to fix if you don’t know what’s broken. Thankfully, Google Search Console has a free, easy-to-use tool that’ll show you exactly how friendly your website is for mobile users.
Enter your website’s URL into the mobile-friendly test bar. Search Console can identify usability errors on your site, including:
- Incompatible plugins
- Undefined viewport property
- Unoptimized content-to-screen size
- Too-small text
After testing, you’ll know exactly what to fix, and you can go about making changes – if you’re a website developer. If not, hire an advanced SEO marketing company and get started on building an informationally-enticing, visually appealing website.
2. Fix Broken Links and Incorrect Redirects
A broken link (dead link) is a link on a page that is either no longer accessible or can’t be found by the user. You’ve probably run into them before – 404 Page Not Found, 400 Bad Request, and Bad Code: Invalid HTTP Response Code are all error codes that could result from a broken link.
Links can “break” for any number of reasons, but some of the most common include:
- URL structure recently changed (if the URL changes without being redirected, a 404 code will result)
- Links to content have been deleted or moved
- The external site is no longer available
Broken links can negatively affect your SEO because Google can’t crawl pages that don’t exist or appear low-quality. If you care about increasing the quality of your site, you should fix any broken links as soon as possible.
3. Eliminate Intrusive Interstitials
You might not know what the term “intrusive interstitial” means, but we can guarantee you find them annoying. An intrusive interstitial is basically a pop-up or banner that appears on a website, their purpose being to advertise their product or service and disrupt the user’s motive of reading the page.
Here are some of Google’s own examples of intrusive interstitials:
If your site still features these kinds of pop-ups, you’re probably not getting that much website traffic. That’s because in 2017, Google introduced a penalty against these user-hostile sites.
Google still allows a few specific types of interstitials, which you’ve almost certainly seen these around. These include cookie notifications, age verification, and banners that take up a minimal amount of space, not the majority or entire screen as seen above.
4. Improve Mobile Usability
Here’s a great way to make your website mobile-friendly: make it accessible. You don’t want to use the same font size in mobile design as you would on a desktop; it just doesn’t translate, and if people can’t see your content, they’ll leave.
As the size of the device decreases, the font size should increase to allow maximum visibility. Generally, 16px is an acceptable size; iPhones will zoom in if the font is smaller than 16px.
Another thing to consider: tap target size. Don’t feel bad if you can’t tap a link on a page because your finger is too big: you don’t have gargantuan fingers, the website’s tap target size is probably too small.
Web.dev recommends 48px as the minimum tap target size on a properly configured website. Anything less than that may cause users frustration, making it more likely that they’ll leave.
Make a Mobile-Friendly Website with EverSpark
Here’s the truth: you can’t get away with having a desktop-only site anymore. By 2025, nearly 73% of internet users will access the web via mobile devices only. If your site isn’t set up to attract that traffic, you’ll have a hard time earning clients.
Thankfully, EverSpark can help. We run a full gamut of services to turn mobile-hostile sites into mobile-friendly ones. With our knowledge, experience, and expertise, we’ll turn your site into a force to be reckoned with. Call us today to learn more about our website design for SEO.