When building your new WordPress website, you’ll want 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 building and development phase.
Checking the mobile and tablet versions of your website on a desktop computer is easier and allows you to test things, make changes quicker, and see edits instantly.
Many people think that how their website looks on mobile doesn’t matter, however, think again!
Having a website that looks good on mobile is essential nowadays, 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
This means two things:
- At least half of your traffic will access your website on mobile
- Google ranks your website based on mobile responsiveness
You could assume your website is responsive because you’re using 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.
Keep in mind that mobile previews aren’t 100% accurate and perfect as there are many types 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, as most people around the world use them:
Method 1 – Use the WordPress 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.
Keep in mind that the blue pencil icons only show in the WordPress theme customizer – they don’t actually appear 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 tablet or iPad, 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 mobile:
And here’s how it looks on tablet or iPad:
As you can see, this method is quite helpful to check changes when you’re working on your website, especially if it’s not yet live or under maintenance mode.
Method 2 – Use Google Chrome developer tools
The 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 tool panel, click the Toggle Device Toolbar icon to switch to the mobile view:
The preview of your website will automatically shrink to fit a mobile screen size, and the behavior of your website will adjust as if it were 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 a mobile phone and you can use it to test swiping up and down and clicking on various parts of 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 screen movements.
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 functionality.
Final words
Since more than 50% of website traffic come from mobile, it’s important your website is responsive so your mobile users can easily navigate around.
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. Let’s face it, if your
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, there are tons of premium themes and plugins that let you add specific functionality and create elements for mobile users that behave differently than for 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, make sure to optimize your WordPress 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 your WordPress website performance, make sure to check it out.
