How to Build a Mobile-Friendly Site: Best Practices + Examples

A mobile-friendly site provides the best possible experience for mobile users. Try these best practices to optimize your site for mobile devices.

Nearly 55% of global website traffic and over 60% of organic search traffic come from mobile devices.

Yet 20% of the top-rated brands still do not have mobile-friendly sites. Even worse: when it comes to small business sites, only 9% are optimized for mobile.

A mobile-friendly site used to be a convenient, competitive advantage. Now, it’s a necessity if you want to stay relevant and competitive.

Let’s dive into why you need a mobile-friendly site and how to optimize your site for mobile with insights from our very own Sam Yadegar, HawkSEM CEO.

Audits help identify problems or shortcomings with the current version of your website, including mobile-friendliness. (Image: Unsplash)

What is a mobile-friendly site?

A mobile-friendly site functions and displays well on mobile devices. Smartphones and tablets have smaller screen sizes, so businesses need to adapt their site content and interface so it’s easy to read and navigate on mobile.

Best practices for a mobile-friendly site

Now that you know what a mobile site is, let’s dive into how to optimize your site for mobile devices.

Here are the best practices for building a mobile-friendly site:

1. Perform a comprehensive audit
2. Choose an ideal mobile-friendly solution
3. Optimize website speed
4. Compress images & multimedia content
5. Optimize page content to fit all device screens
6. Code in HTML5
7. Avoid pop-ups
8. Be strategic about button size and placement
9. Use a large, readable font
10. Make links easier to tap by spacing them apart
11. Use short lead forms
12. Test site on mobile devices regularly

1. Perform a comprehensive audit

Audits help identify problems or shortcomings with the current version of your website, including mobile-friendliness.

You can use the results to come up with a plan for optimizing your site.

An audit will also generate a broad range of important and insightful metrics, including the number of mobile users visiting your site.

You can use Google Analytics to audit your website by following this command path: Google Analytics > Audience > Mobile > Overview/Devices. Google Search Console will notify you of Mobile Usability errors, and Google has its own Mobile-Friendly Test tool as well.

Additionally, you can opt for premium third-party tools. If you don’t have the time or bandwidth to take on an audit, you could look into partnering with an agency that can recommend customized solutions based on the results.

Audit steps include:

• Review your mobile experience with a device simulator on your desktop, or just use your actual phone.
• Start with the homepage then move to top landing pages and follow your website’s hierarchy and structure.
• Take screenshots and notes of any broken images or links, and consider the user’s experience. Can they find info fast? Is the page too long? What action do you want them to take on this small screen?
• Prioritize universal fixes, then dig into smaller errors to gauge the extent of the work that needs to be done.

Once you complete the audit, it’s wise to plan on performing regular audits at least once a year. This way, you can ensure everything is still optimized and operating accordingly. Regular audits will also be helpful when it comes to keeping up with Google’s dynamic updates.

Pro tip: In Google Analytics, you can view data like bounce rate per device category and type, pages per session, and average session duration. These KPIs will let you know if users are engaging well via mobile.

2. Choose an ideal mobile-friendly solution

There are four main solutions to choose from when making your website mobile-friendly:

Responsive web design

Responsive web design is the most popular solution, primarily because of convenience.

This design type entails embedding a code that automatically adjusts the site’s contents to fit individual users’ devices. This includes rearranging content and resizing fonts to fit small screens.

With mobile web design, nothing else changes, including the original URL, and this solution is easy to maintain. However, the site’s response may be somewhat limited compared to other solutions.

Dynamic serving

Dynamic serving involves detecting a user agent (mobile, tablet, or desktop) and generating a customized page with HTML and CSS optimized for use with that particular device.

This solution’s main advantage is that you can display heavy content (such as videos or high-resolution images) on your mobile pages. However, this solution can be costly to implement. Additionally, accuracy in detecting the user agent depends on your solution provider’s competence and quality.

Mobile version

This solution involves creating a separate mobile website with separate content independent of the main desktop website. Mobile users are automatically redirected to the mobile version using a separate mobile domain name.

This solution isn’t recommended much anymore, as a separate mobile site is a no-no for mobile-first indexing. Another shortcoming of creating a mobile version is its limited content.

It’s difficult to incorporate all content from the main desktop website. Plus, these sites are often harder to manage compared to other solutions.

App

When it comes to choosing an app, the type is key. There are web apps that operate like regular sites to reach users on any device through their browser.

However, you lose the option to include push notifications, which are often a huge part of a business app’s success.

A native or mobile app offers a lot of benefits, such as unparalleled user engagement.

Mobile apps are also excellent for branding, as the design is customized specifically for mobile users. And advanced algorithms offer customization for individual users.

Lastly, you can use device features like push notifications, offline browsing, GPS, cameras, and more.

The downside: A mobile app is generally more expensive than other mobile solutions. And more than half of smartphone users don’t bother downloading their favorite store’s app.

For these reasons, mobile apps are often used as a complementary solution for these other mobile solutions.

Pro tip: Progressive web apps (PWAs) are a hybrid solution that manages to incorporate all the advantages of both app types without falling prey to their flaws. They allow users to navigate to the PWA from their browser like a web app but also save it to their device like a native mobile app.

Making your website mobile-friendly has gone from a nice-to-have to a necessary marketing component. (Image: Unsplash)

3. Optimize website speed

The faster your website loads, the better experience you can provide for users of all different devices. Start by choosing a web hosting provider that’s reliable and fast.

Here are some additional ways to improve mobile site speed:

• Compress images and multimedia
• Host any video content on a third-party platform
• Use a content delivery network (CDN)
• Enable browser caching to store larger files locally on the user’s browser
• Identify and eliminate unnecessary plugins
• Identify and remove unnecessary JavaScript
• Minify CSS and JavaScript files

Yadegar also recommends removing unnecessary animations, reducing menu items, and reducing content that isn’t relevant on mobile.

4. Compress images & multimedia content

Mobile devices have a smaller bandwidth than desktops, which means that large image files will take longer to load.

And the longer the page takes to load, the higher the chances of users leaving the site.

But that doesn’t mean that your mobile site has to be boring or ugly.

“One of the biggest mistakes I see people make when it comes to creating a mobile-friendly site is losing all aesthetically pleasing visuals that are on the desktop site,” says Yadegar.

“You can still thrive with visuals on mobile to keep users engaged. If you’re running the right tech stack, it shouldn’t really hinder page speed either.”

Compressing images allows you to minimize the file size without compromising image quality. When you do this, the amount of data that needs to load for the user to view the multimedia content is reduced, which increases the site speed.

Use a tool like TINYPNG to reduce the file size. And make sure you’re using image formats like JPEG 2000, AVIF, and WebP, which have much faster load times than JPEG and PNG.

National Geographic is a great example of a site that uses a lot of beautiful, high-quality images without compromising mobile load times:

5. Optimize page content to fit all device screens

A mobile-friendly website will often have all the same page elements as the desktop version, except they are optimized to fit different screen sizes.

Here’s an example of the desktop version of an article on CNN’s website:

And here is the mobile version:

While the image and the text are the same, the size and placement of the page elements are different. The desktop version has navigational links at the top (“Markets,” “Tech,” etc.) While the mobile version requires you to click on the menu button in the top left corner to access navigational options.

The desktop version has additional content and ads to the right of the article. And the mobile version puts these elements at the end of the article so as not to disturb the mobile user’s reading experience.

“Pay attention to the sizing and positioning of elements while making sure they are responsive in design to accommodate multiple device screens,” Yadegar advises.

Identify and consider getting rid of any images, graphics, or animations that may not be essential to the mobile version of the site. Make sure that the images and text you use on the page are easy to read from a mobile phone.

Also, avoid using walls of text on web pages. While it may look more manageable on a larger desktop screen, long blocks of text can be harder to read and scroll through on a mobile device.

6. Code in HTML5

Adobe Flash is great for animations. However, it’s not supported by mobile. Instead of Flash, use HTML5.

HTML5 gives developers more control over their website performance. It allows them to create responsive websites that can provide the same browsing experience across devices.

Just some of the benefits of HTML5 include mobile optimization, faster page loading times, better multimedia support, and compatibility across browsers.

7. Avoid pop-ups

Pop-ups can be a great way to get the visitor’s attention and capture lead information on desktop computers. However, they don’t work well on mobile devices.

Pop-ups are harder to view on smaller screens, and users may accidentally click on them, taking them to a new page. They can also be more difficult for mobile users to close because the X may not be visible on the mobile device.

It’s best to avoid the use of pop-ups on mobile devices altogether. They can be annoying for mobile users to navigate, which can cause them to leave your site.

However, if you must use pop-ups, make sure they are easy to close from a smaller device screen. Or consider using other site elements like a top banner to draw attention to your calls-to-action (CTAs) as Casper does on its mobile site:

8. Be strategic about button size and placement

Buttons that are too small or difficult to click on mobile screens will result in potential customers giving up and leaving your site. If you want to create a mobile responsive site, you need to be strategic about the button size and placement on the page so users can easily click on it.

Most people on mobile devices use their thumbs for scrolling, so buttons should be large enough to deliberately click on with the thumb.

Buttons should also clearly indicate where they lead. Make sure the call-to-action is clear, and the text on the buttons is large enough to read from a smaller screen.

Making buttons stand out on the page with a CTA that’s easy to read will help improve conversions.

Below is a great example from Nike’s mobile site. The button is large enough to click on with the thumb, and the text is large enough to read on a smaller screen size.

The color black makes the button stand out from the white background. And with a CTA like “Shop,” it’s clear where the button will take you.

9. Use a large, readable font

While stylized cursive fonts may be aesthetically pleasing and can look great on big laptop screens, they can be quite difficult to read when scaled down on a smaller screen.

Plus, using a custom font can prompt site visitors to have to download new fonts, which slows down load times.

Instead, choose a standard font that’s easy to read at any size. Fonts like Arial, Calibri, or Open Sans may not be as visually appealing as some more creative fonts. But they are easy to read and don’t require any additional downloads.

Consider font sizes on your site as well. The ideal font size for the main body text is 16 pixels. Text like captions and labels can be 2 pixels smaller than body text.

Pro tip: Different fonts can be easier or harder to read at different sizes. Test both fonts and sizes by reading the text on a mobile device. If you find anything difficult to decipher, change the font or sizing until it’s easy to read.

10. Make links easier to tap by spacing them apart

Just like buttons, you need to make sure any links on the page are easy for someone to click on from a smaller device screen. To help make it easier for mobile users to click on your page links, make sure there is enough space in between the links.

With enough space, you can help ensure that users are clicking on the link they want to instead of accidentally clicking on the wrong URL.

In general, try to only link to other mobile-friendly pages. If the page you link to isn’t mobile responsive, it can negatively impact the user experience.

11. Use short lead forms

Make sure any forms on your site are short. Forms that are too long are inconvenient on any device, but especially on mobile where it can be more challenging to fill out form fields.

This landing page on Marie Forleo’s mobile site is an excellent example of what a mobile form should look like. It has just two fields to fill out. And the CTA button to submit the form is large and clearly states what happens next.

12. Test site on mobile devices regularly

Test your site regularly to make sure it continues to work well on mobile devices. Open and navigate the site on both Android and iOS devices to test the user experience.

Google offers a free tool called Lighthouse that you can use to audit mobile performance. Access Lighthouse in Chrome DevTools, and run an audit to get a mobile performance report.

Why having a mobile responsive website matters

Since mobile now surpasses desktop in global internet usage, it should come as no surprise that search engine giant Google has prioritized the mobile user experience.

With mobile-first indexing, Google’s web crawlers prioritize indexing the mobile version of your website over the desktop version. And this has a significant impact on search engine optimization (SEO).

In other words, if your site isn’t optimized for mobile devices, this can negatively impact your search rankings.

Beyond SEO, having a mobile responsive website is important for the user experience. Businesses want their site users to be able to find the information they’re looking for and take action.

If your site takes too long to load or is difficult to read on a smaller device screen, visitors will navigate away from your site. (And may even visit a competitor!)

The takeaway

Making your website mobile-friendly has gone from nice-to-have to a must-have for your marketing.

Between mobile-first indexing and the majority of searches happening via smartphones, those who provide a sub-par mobile user experience simply won’t see the success of sites that do. All the more reason to take the time to make sure your site is mobile-friendly – sooner rather than later.

Need help making sure your site is optimized for mobile? Reach out to our team.

This article has been updated and was originally published in August 2020.