When building your new website, you need to preview the mobile version to see how it looks on mobile devices. Of course, you can use your mobile phone to see how your website looks on a mobile device, but this usually doesn’t help during the development phase. Checking your mobile version on a desktop computer is easier, and it allows you to test things, make changes quicker, and see them instantly.
You might think how your website looks on mobile doesn’t matter. Think again!
Having a website that looks good on mobile is essential, especially for these two reasons:
- Over 50% of your website visitors will access your website from a mobile phone (while around 3% come from a tablet)
- Google is using the mobile-first index as one of the most critical factors in their ranking algorithm
Of course, suppose you use a responsive WordPress theme. In that case, it automatically scales appropriately for mobile devices, but we still recommend checking how it looks on various mobile devices to make sure it displays correctly. Apart from that, you might want to build multiple versions of key landing pages that are specifically optimized for mobile users and increase reach that way.
This article will show you two methods on how to test your website on mobile using your desktop computer.
Please note that mobile previews aren’t 100% accurate and perfect as there are tons of different screen sizes and multiple browsers your website visitors can connect to your website from. The ultimate test is always to check your website on an actual mobile device and see how it looks. We recommend the following two devices (their latest iterations) as most people use these:
- Apple iPhone
- Samsung Galaxy
Method 1 – Use WordPress’s Theme Customizer
WordPress automatically provides a way to preview the mobile version of your website using the WordPress Theme customizer feature.
Log in to your WordPress Dashboard, and head to Appearance > Customize screen:
You will then see a WordPress theme customizer that allows you to change various options related to your theme. The options on the left might vary depending on the theme you’re using.
Please note that the blue pencil icons only show in the theme customizer – they’re not present on your live website.
To check how your website looks on a mobile phone, click the phone icon in the bottom-left corner:
If you want to see how your website looks on a tablet device, click the icon next to it:
When you click the mobile phone icon, the WordPress theme customizer will automatically show how your website looks on a mobile phone:
And here’s how it looks on a tablet device:
As you can see, this method is quite helpful to check changes when you’re working on your website, if it’s not yet live and under maintenance mode.
Method 2 – Use Google Chrome DevTools
Google Chrome browser comes with a collection of developer tools that allow you to perform various checks on your website, including a preview of a mobile device version. Open the Google Chrome browser on your desktop computer, and visit the website you want to check out (it could be your website or even your competitors).
Next, right-click on the page and click the Inspect option:
You will see a new panel open on the right-hand side of your browser that shows your website’s HTML code:
In the top-left corner of the developer tools pane, click the Toggle Device Toolbar icon to switch to the mobile view:
The preview of your website will automatically shrink to the mobile screen size, and the behavior of your website will adjust to being used on a mobile device:
If you move your mouse cursor over your website on the left, you’ll see a circle icon instead of the arrow:
This circle mimics the touchscreen on the mobile phone, and you can use it to test swiping up and down and clicking on various items on your website. If you hold down the Shift key on your keyboard, click and move your mouse, and it will simulate the zoom-in/out pinching.
Lastly, if you check the options above your mobile website preview, you’ll see controls that allow you to see how your website looks on various screen sizes. Additionally, it lets you test your website performance on different mobile internet connections, and you can rotate your mobile screen to test the functionality.
Since more than 50% of visitors come from a mobile device – your website must be responsive so your mobile users can easily navigate it. Also, remember, Google is now using a mobile-first index, which means your website has to be mobile-responsive and load fast in order to rank on Google search results. However, only having a responsive website isn’t enough, as mobile users require different things than desktop users.
For example, if you use lead generation forms on your website – they should be set up differently for mobile users. Forms shouldn’t require too many details that are hard to fill in on a mobile phone keyboard, so ideally – you should only require an email address. Additionally, you need to make sure they’re pretty and easy enough to close if the visitor doesn’t feel inclined to fill them or join your programs.
Also, tons of premium themes and plugins allow you to add specific functionality and create elements specifically for mobile users that behave differently than desktop users. Additionally, you can use dedicated page builder plugins such as Beaver Builder, Divi, Elementor to help you out as they allow you to customize your landing pages in mobile view.
Here’s a list of useful plugins you can use to add functionality to your mobile website:
- Call Now Button – Allows your visitors to quickly call you with one tap of a custom button on your website.
- Favicon by RealFaviconGenerator – Allows you to generate different favicons for different mobile devices.
- Max Mega Menu – Allows you to create beautiful and functional menus solely for your mobile users.
Lastly, please optimize your website as much as possible to make sure it’s fast on mobile devices. We have created an article with tips on how to improve website performance on mobile, make sure to check it out.