Is My Website Mobile-Friendly?

Checking whether you have a mobile friendly view or not is easy – Google has a Google mobile site test called Webmaster Tool to do exactly that, and it’s accessible right here.

All you need to do is insert the URL of your web page and click on the ANALYZE button.

Google’s test will then analyze your website and display the result.

Analyzing your web page might take awhile…

You’ll see something like this if your web page isn’t mobile-friendly, Google will even list down why your web page isn’t mobile-friendly and suggest solutions for it:

Your mobile website design will look like this when mobile-friendly:

Why is being Mobile-Friendly Important?

In 2018, the percentage of users that are accessing the internet through some sort of mobile device is increasing consistently while the percentage of desktop users are heading in the opposite direction.

Just look at the graph below and you’ll have a clear picture of the trend, and it doesn’t take much to figure that one day, mobile users will outnumber desktop users by a lot.

Data from January 2017 to August 2018 shows how important a mobile-friendly website is.

Tips to Optimize Your Website for Mobile

1) Use Media Queries

I know, this sounds like you’re going to talk to a reporter or something – but the ‘media’, in this case, is the content that you’re delivering to a user.

Media queries allow you to ask a device what size it is, then direct the browser to display things following the set of CSS that you have set.

Media queries are a key part of most mobile-friendly sites, but you’ll need to be sure that the system is properly configured for all devices currently in use – not just the two or three most popular. Make sure you actually look at the list or have some kind of ongoing subscription that gets the information for you.

2) Use Frameworks like Bootstrap

Bootstrap is a front-end framework for your site designed to quickly and automatically scale your web page to any device. Using a pre-built system is much easier than trying to code every possible combination by yourself – and it’s much less of a headache as well.

However, you will need to check any framework you’re using for full compatibility with your existing site and goals. The more custom coding and functions your site has, the more difficult it may be to ensure everything works properly on a mobile device – don’t be afraid to call in an expert if you really need the help.

3) Don’t Disable the Submit Button

Mobile devices are popular, but many of them still aren’t entirely reliable – and this can be a headache for users who click a ‘Submit’ button only to have their connection drop out and see the button disable itself so they can’t try again. Trying to prevent repeat submissions is an admirable goal, but the realities of mobile connections means it’s not good to prevent them in this way.

4) Use a Responsive Theme on CMS

Responsive themes – such as those from Somothemes – make it easier to ensure a high-quality display for your users. This is something that many companies overlook when they’re trying to become mobile-friendly, and they shouldn’t – because what your users experience is far more important than how easy something is to code.

Moderne theme from Somothemes

Ideally, you’ll be able to get the best of both worlds – and responsive themes are outstanding for casual sites that don’t need a whole lot of customization in order to succeed.

5) Use Percentages

In the past, most people thought about pictures in terms of pixels – but the widely different resolutions on mobile devices mean that having a single size for images is an inherently bad idea. It just doesn’t work – so don’t do it.

Instead, configure things like images to have a certain specific width on the page – typically 100% unless you have a reason to do otherwise. This helps to provide a consistent viewing experience on many different devices and ensure that each image offers as much impact as possible.

6) Focus on Simple Designs

One major way mobile users differ from desktop users is their preference for simple site designs. This is a practical matter as much as anything else – things that are large and complicated will all but inevitably become slow on a mobile device, and one of their main demands is instant delivery of the content they want.

Simple designs also make it easy to keep their attention on the content you want them to see – mobile users often have notoriously short attention spans, and there’s definitely a point where keeping things simple can be more valuable than investing in an elaborate, complex theme.

7) Make Sure You Didn’t Block Javascript, CSS, or Image Files

Java is not a flawless system, but it is widely used – and together with CSS and image files, it’s one of the backbones of a responsive, mobile-friendly site.

One of your main goals here is trying to make your website universally compatible. It should display on practically any device that people would care to view it on, and for the most part, that means using software and coding that are universally accepted. The more specialized something is, the less likely your site will be compatible.

8) Optimize Image Size

When you’re dealing with mobile devices, the goal is to create images that have the smallest possible file size while still looking crisp and clear on whatever screen it’s being viewed on. This is because the bandwidth of mobile devices are much smaller compared to desktop’s and causes longer loading time.

So if you need your users to download a 1MB jpeg file just so they can see a thumbnail-sized image, they’re going to be frustrated and leave your site.

Remember, mobile friendliness isn’t just about having a nice site design – it’s about improving the user’s experience, and the load times they go through are a major part of that experience. Shrinking the file sizes uses less of their data (if they’re on a limited plan), helps load the page faster, and generally contributes to a positive image of your site.

9) Don’t Use Flash

Broadly speaking, mobile devices do not support Flash. The reasons for this are less important than the reality – if your website is still relying on Flash, then it’s not going to display properly on any mobile device.

Flash is an obsolete technology and nobody loves Flash, even on desktop. Even if you think you need to use Flash, you could find other technology that could replace Flash, so to be smart and safe, do not use Flash.

Switch to a compatible technology like HTML instead – and remember that if you want to do something complicated on a mobile device, it’s best to relegate it to the realms of apps.

10) Use Standard Fonts

Custom, creative fonts can help a website look nice, but mobile users don’t want to be constantly prompted to download new fonts to their phone – in fact, it’s more likely that they’d instantly reject any such request and navigate to a different website instead.

Fortunately, most of today’s devices come with a wide variety of fonts pre-installed, and chances are you’ll be able to use these when designing your site. There’s one more thing to note, though – some fonts are easier (or harder) to read at different sizes, so be sure you check the readability of your font before you’re done with your updates.

Final Advice

Finally, we have one more design tip to share with you: remember your directions. The average desktop is a horizontal screen – sure, we may scroll up and down, but it’s wide.

Mobile phones, on the other hand, are tall and narrow – so the width of your content is an important consideration. Whether you’re creating drop-down menus, adding pictures, or playing a video, always remember the direction of the device and how people will view the content.

And if all else fails, there’s no shame in relying on some professionals to fix your website to make it mobile-friendly. This might require some investment, but with the increasing amount of mobile users and Google’s updated algorithm, you could say that it’s a calculated and worthy investment to make.

Download The Complete Guide To Creating A Mobile-Friendly Website

Winnie is an aspiring copywriter & internet marketer in the vast world of digital marketing. She's as curious as she can be; constantly hunting for answers to her questions, never saying no to new experiences. When she's not spending her time typing up a storm, she is at home keeping up with her never-ending movie marathon & books.