Having a mobile-friendly website is one of the most important factors to rank well on Google. In fact, at the end of 2019, 62% of Google’s organic search was on mobile. This means that spending time and resources on making your website 100% mobile-friendly is definitely worth it. Lots of web designers are even using a mobile-first approach now.
Nonetheless, it can be quite hard to achieve. Sometimes, you aren’t sure what should be done and how to do it. That’s why I wrote a blog post to highlight the most important points to focus on. Follow the 9 following tips, and you’ll have a mobile-friendly website in no time.
1. Keep it simple
The first tip is quite easy, really – just keep your website as simple as possible. Having a well-designed and straightforward website can help your viewers navigate. Ultimately, it will increase your conversion rate. Also, it makes it way more manageable when it is time to review and test if your website is mobile-friendly.
What do I mean by keeping it simple? First, avoid using very long paragraph of texts, it doesn’t look good on mobile. Also, remember that an image is worth a thousand words. A video, even more. Icons are awesome too.
Another thing to keep in mind is the use of columns in your layout. Automatically, on mobile, they will show columns separately from left to right. So, if you want to avoid spending a lot of time designing differently for both desktop and mobile, then avoid columns. Again, try to keep your website visually appealing, yet simple and straightforward.
2. Choose your theme carefully – in other words, choose a responsive theme
I don’t know if you are building a new website from scratch, or if you are simply trying to make your existing site more mobile-friendly. But, one of the most important things to consider to get a mobile-friendly website is the theme you are using.
Make sure your current or potential theme is responsive. This means that the layout elements will automatically adjust to fit the size of the user’s screen. That way, it will require less work for you to get a mobile-friendly website. You can find a list of mobile-friendly themes for WordPress here.
3. Make sure you can click on every button with your thumbs
This tip is all about user-experience. When a visitor navigates on your website from a phone, they want it to be easy. In other words, with their thumbs. So, if you have a button that is too far left, it will annoy the visitor. Avoid that by testing on multiple mobile devices that you can reach all buttons. Also, be sure the buttons are big enough and easy to click.
4. Make sure every button is a reasonable distance from text and other buttons
Talking about easy-to-click, another important mobile-friendly aspect to consider is the proximity of your buttons. Think about your visitors with large thumbs. Avoid having buttons too close to each other. That way, users won’t click on the wrong one by mistake.
5. Learn about UX/UI before designing
If it’s your first time designing a website, think about UX/UI. Read about these subjects or take an online course to get started. That way, you’ll be sure to design a mobile-friendly website that improves the user experience (UX) of your visitors. Taking the time to learn these disciplines will definitely be worth your time in the long run.
6. Use images that are mobile-friendly
In general, you’ll want to use the same images on your desktop and mobile views. This means that the pictures you use need to be mobile-friendly. Keep in mind that the screen of a desktop has a large width, but a small height. While a phone has a small width, but a large height. Therefore, you’ll want to avoid pictures with a large width on mobile; it won’t look good. Instead, use square images or images that have a small width. They can have a large height though so that you can scroll down (infographics are good).
7. Watch the size of your images
To rank well on Google, it’s important that your site loads fast. This always counts, but on mobile devices, users often have a slower internet connection. If you take a look at all the files your site is loading, you’ll probably see that images take up way more space than text. This doesn’t mean that you shouldn’t use images, that is not at all what I’m saying. But those high-resolution photos from your new smartphone’s super fancy camera take up way too much space. They can safely be scaled down to a lower resolution and quality without the user even noticing the difference.
8. Keep your forms simple and responsive
Most websites include lots of forms nowadays. For example, you’ll often have a form to sign up for your newsletter, or a contact form. In any case, having long forms doesn’t look good on mobile. Keep your forms simple, and only ask for the most important information. Also, be sure the contact forms you are using are responsive. If they are, the forms’ width will automatically adjust to fit the screen dimensions of the viewer.
9. Do lots of testing
There are many ways to test the mobile-friendliness of your website. Some require better IT skills than others. But, let’s take a look at a few ways to test. You should try doing these in order.
1. View and test on different mobile devices
On your laptop, you can view and test your website on different devices by enabling the responsive design mode. This changes the browser window to show the site on a mobile device, and lets you switch between some popular devices.
Be sure that your website looks good on all pages for different kinds of devices. Once you are done, you can use an online tool to test the mobile-friendliness.
2. Test the mobile-friendliness with online tools
An easy way to test if you have a mobile-friendly website is to use website.grader from HubSpot. It is straight forward to use and to understand. However, it is not the most elaborate tool. So, it won’t dig very deep, but it’s good to get started. Also, it requires only basic IT skills.
Another tool that is nice to use to get surface details is the Mobile-Friendly Test of Google. It will tell you the major points you need to work on. What’s nice about this tool is that it will link to online resources that can help you improve. Also, it’s how Google perceives your website. So, if you want to rank as well as possible it’s important to check it out.
3. Go deep with Google Lighthouse
Now, if you are skilled with IT, and you want to dig deeper, you can use Google Lighthouse. As it’s a quite sophisticated tool, I won’t explain how to use it here, but I encourage you to google it if that’s something that interests you. When you audit a web page with Google Lighthouse, you can have a precise and exhaustive list of issues ou need to work on to get a mobile-friendly website.
If you follow these 9 tips, you’ll get a mobile-friendly website without too much trouble. But in the end, the most important is to keep it simple and choose visual elements over text. If you expect/know that most of your users are on mobile, you can also think about using a mobile-first approach.
Finally, don’t forget to sign up for my newsletter by entering your email address below. That way, you’ll receive automatic notification emails when I publish new posts. Otherwise, like my Facebook page or connect with me on LinkedIn.
Erika Naud 