The basics of a mobile-friendly website

A mobile-friendly website is key for success.

According to Statcounter, 56.5% of all global web traffic is done via mobile devices as of March 2022. This means the majority of people viewing your website are likely doing it via a mobile device. Because of that, you’ll need to make sure to give mobile users the best experience they can on your site. Thankfully, there are ways to make your site mobile-friendly and several ways to check how your website looks on mobile devices, making this less painful than it may seem.

Audio: Listen to this article.

If you think it’s OK that your users go through a mobile-unfriendly design, you might want to think again. Google uses the mobile version of a site when it indexes and ranks sites, so having a clean and presentable mobile design is key for your SEO.

What makes a site mobile-friendly?

Responsive designs help make a website mobile-friendly. These designs change how they look based on the site of a user’s screen so a page is always readable and easy to look at, no matter the size of a screen. This is particularly important for mobile devices, as they encompass a variety of screen sizes. Responsive designs have become standard for website design, so if your company’s site was made over the last five or 10 years, it’s likely responsive.

Media queries are the most common tools used to make a site mobile-friendly. They are code that changes how parts of a site are designed based on the size of the screen. For example, if someone is browsing a site with a screen that is under 768 pixels wide, a mobile query can be used to change elements so they appear correctly on a screen that’s under 768 pixels.

Checking how your site looks on mobile

Before doing anything else, it’s a good idea to check how your site looks on mobile devices.

The first way is the easiest: Simply take out your phone and/or tablet and view your website. Browsing your website for a bit will let you see any major mobile design errors.

However, there are some things a simple glance-over won’t catch. For a more detailed and objective look, you can utilize Google Lighthouse. Lighthouse is a website analysis tool built into Chrome that gives a detailed breakdown of, among other things, any mobile issues your site may have. It can identify things, such as tap targets being too small, that you could overlook if you simply viewed your website with your mobile devices. 

If you don’t have a mobile device nearby, you can also use Chrome to see how your website looks on different phones and tablets. To do this:

1. Right-click on a website while in Chrome.
2. Select the “Inspect” option in the menu that appears.

Your website will appear on the left-hand side of the page in the “Inspect” section. You can have the website view emulate how it would look on popular phones and tablets by clicking on the upper left-hand corner of the “Inspect” area and selecting the phone or tablet you want the view to look like. Once that’s done, you can browse the site and spot any issues.

Getting into the habit of checking your site on mobile

A good idea when working on your website is to check how a page looks on mobile if you’re making significant changes to it or making a new one. It’s best to catch issues early before they fester and spread to other parts of your site, such as a page with mobile issues being used to create another page.

Some content management systems, such as HubSpot, have a “mobile preview” option, simplifying the checking process as you work on a new page or revised content. For WordPress users, design plugins like Elementor have mobile preview options that let you quickly see changes as you work.

Time for a redesign?

If your website has a lot of issues on mobile, it might be time for a redesign. The time and money you spend fixing a site design would be better spent doing a complete redesign that has none of the issues your current site has.

Does your company need help with a mobile-friendly redesign? Contact us, and we’ll be happy to get you started on a great redesign that’s mobile-friendly!

Clients love Jacob’s speed. Jacob is an inbound marketing-certified webmaster. He earned an integrated communications degree from Florida State College at Jacksonville. Jacob joined Axia PR as an intern in August 2015 and earned his way into a critical role at our PR agency.