How to Make Your Website Mobile-Friendly: 11 Steps to Enhance User Experience

Okay, so this is the first step, and it’s a big one: choose a mobile responsive theme or template!
Because having a mobile-responsive design is so important, it’s something that pretty much every top website builder has covered across each of its templates. For example:

Squarespace – has water-tight mobile-responsiveness, and would be our top choice if you’re building a site from scratch and view mobile experience as a top priority.

Wix – all templates are mobile-responsive, but always be sure to check in the mobile view as you go. Because Wix sites are so customizable, sometimes big changes don’t translate so seamlessly, and you’ll have to do some tweaking.

If you’re building a site using a CMS system, such as WordPress, make sure the theme you choose to build your site from is mobile-responsive – or if you’ve already built a site, switch to one that is!

Just search ‘responsive theme’ in WordPress’ own theme library, or on a third party site like Themeforest. Make sure you read reviews, and if possible, take a look at any sites that are using this theme from your mobile to gauge the experience for yourself.

You’ve chosen a lovely responsive theme or template, so now you’re all set, right? Wrong!

Switching to the right template or theme is a big step, but it’s only one of several you should take to perfect that mobile experience.

Now, it’s time to take a look at the automated mobile view of your website and strip it back:

Distill Your Offer

Work out the main goal of the page you’re on, and don’t hesitate to make this a lot more prominent on your mobile version.

Take a look at this example from Trainline:

The homepage is designed to encourage users to search for train tickets, and this form takes center stage on the mobile version. On the desktop version, this would seem too pushy, but on a mobile version, it works.

Avoid Large Chunks of Text

The copy on your website should be short and sweet at the best of times (with the exception of blog posts, like this one!), but on mobile this becomes all the more important. Take a read over our tips for writing for the web, and take your virtual scissors to any long chunks of text.

Shorten Forms

Filling in long forms is a chore at the best of times, but on a mobile? On the move? Forget it! Long forms will lose you readers faster than you can say ‘this is a required field’. Make sure every form you’re displaying on mobile is only asking for information that’s absolutely essential.

Making your website as light as possible is always a good idea – but what exactly does that mean? Well, each element on your website carries a virtual ‘weight’ – whether that’s a video or an image which has a file size, or code which needs to be loaded each time the website is clicked on.

Google has been very clear about the fact that website speed is a crucial ranking factor, meaning slow (a.k.a. ‘heavy’) websites will lose out to the competition on the search engine results pages (SERPs).

When it comes to mobile, this is all the more important. If you’ve ever tried to load a webpage somewhere remote, only to watch each element fall into place painfully slowly, you’ll understand why.

So, what can you do about it?

Compress Your Images

When you’re uploading any image to your site – mobile or desktop version – it’s vital that you optimize images by compressing them. You do this using a free online tool, such as kraken.io. This greatly reduces the file size of your images, without compromising on the image quality.

Host Your Videos with a Third Party

By uploading your videos to a third party then embedding them on your site, it means the virtual ‘weight’ of these videos is largely kept to that chosen site, rather than to yours.

Wistia is a popular platform for this, but YouTube also works – you’ll just want to make sure you’re switching off autoplay, so that an unrelated video doesn’t play after yours. To do this, simply:

• Go to your WordPress page or post
• Find the embedded code and click on the ‘text’ tab
• Find the part that says src=”youtubeurlhere”
• Add ?autoplay=0&rel=0 after youtubeurlhere
• The code should now read src=”youtubeurlhere?autoplay=0&rel=0″
• Hit ‘Update’ and you’re good to go

You can also optimize videos for your website to keep things running quickly and smoothly.

Flash is often used to create animations, but it generally isn’t supported by mobile devices, so is best avoided altogether.

Pretty much every website uses buttons to link through to other sections, or to forms. But a ‘good’ button can quickly become a ‘bad’ button on mobile if it’s in the wrong place, or is the wrong size.

Think about how you hold and use your phone. Chances are you’re using your thumbs for pretty much everything, meaning anything you can’t reach with your thumb becomes a total pain.

Here’s where you should aim to place calls to action (CTAs) on a mobile site:

So now you’ve got your buttons in the right place, it’s time to make them the right size. That generally means you’ll need to enlarge them a little – it’s a lot harder to click accurately with a thumb than with a mouse, after all.

Speaking of how hard it is to click accurately with a thumb as opposed to with a mouse, that brings us nicely onto our next point: look at your links!

More specifically, you’ll want to check that any hyperlinks on your mobile site:

• Aren’t too close together, to avoid people clicking on the wrong one by accident.
• Link out to pages which are also mobile-optimized for a seamless user journey.

It’s recommended that you use a font size of at least 14px on desktop, but make sure you test out how it looks on your mobile version – chances are you may find it shows up a little small, and you’ll want to bump it up a bit.

Double check the readability of your font, too. It’s one thing to try a more experimental font on a desktop, but this move is unlikely to pay off on mobile. That said, you’ll want to keep fonts as ‘on brand’ as possible across all platforms.

When working on a mobile view of your site, you’ve got a much smaller area to play with. On a desktop, you can space out text with line breaks and images. On mobile, try bolding or capitalizing different lines of text instead to stop them from merging into one another.

Find Out More

Need a hand choosing the perfect font? Our guide of the Best Fonts for Websites shortlists our favorite typefaces, with tips for picking yours.

When used carefully, pop-ups can work really well on a desktop version of a site. You might have noticed they’re something we use on quite a few pages here on WBE.

But when it comes to mobile, pop-ups are best avoided. Not only do you have a smaller screen to deal with, but you can’t tailor the pop-up to trigger at key moments, such as when the user goes to exit your screen.

Filling out forms on mobile devices can be tricky when they aren’t optimized. This often leads to frustration and failure to complete. For many businesses, this can be devastating as valuable actions such as contact forms, lead generation forms, and even checkout pages are left abandoned.

Here are some best practices for ensuring forms work well on mobile devices:

1. Reduce the number of fields (if it isn’t essential, lose it)
2. Utilize input masks and auto-fill options to help speed up the processes
3. Provide clear error messages and validation feedback to help users identify where they have gone wrong and where they have input information correctly.

Website loading speed has a huge impact on user experience and your search engine performance. After all, nobody likes to wait an eternity for a webpage to load.

You can check your website load time using free tools such as Google’s PageSpeed Insights. If you find they are a little slow, here are some tips to help speed things up:

• Compress all the images you use, you can use a free online to do this
• Enable browser caching
• Minify CSS and JavaScript files

The best way to find out how mobile-friendly your mobile site is is to test it! You’ll want to do this in three different ways:

Run URLs Through Google’s Mobile-Friendly Tool

Google has a free mobile-friendly testing tool, which anyone can use to test how mobile friendly any given URL is – whether that’s a homepage (as below), or a page within your site.

Try Out Different Device Sizes from Your Desktop

A great way to check how responsive your site is is just to play around with the shape of the tab of your website that you have open. As you reduce the width of your tab, you should notice your site start to ‘contract’ and morph into the more mobile-friendly version.

To quickly test the look of anything on mobile, you can also right click on your webpage, select ‘Inspect’, and then click on the icon of two screens that appears in the toolbar across the top:

Thanks for sticking with us as we explained how to make your website mobile-friendly. Here’s those steps once again:

How To Make Your Website Mobile-Friendly:

1. Choose a mobile-responsive theme or template
2. Strip back your content
3. Make images and CSS as light as possible
4. Avoid Flash
5. Change button size and placement
6. Space out your links
7. Use a large and readable font
8. Eliminate pop-ups
9. Optimize forms and input fields
10. Optimize your website’s loading speed
11. Test regularly

The good news for most sites is that the bulk of the hard work will likely be done for you by your theme or template. That said, we think it’s worth making the extra tweaks outlined above to ensure your mobile users are getting a brilliant experience, rather than an acceptable one. After all, the stats say they’ll likely make up the majority of your users!

More information

• Want more information on designing mobile optimized websites? Check out our step-by-step guide on mobile-first design
• Want more design tips? Find out about dynamic content and how to use it
• Learn how you can use optimize voice search for your website and mobile users