It doesn’t matter if you are designing websites for clients or managing your WordPress website yourself, it is important to understand how it looks on a mobile device.
Most likely, you have a mobile device that you can use to check your website. It’s not convenient to constantly go back to your phone when you are working on your desktop or laptop.
Even if your website looks great on your phone there are many other phones and tablets that can do the same. It doesn’t mean that it will look good on your phone, but it does not necessarily mean that it will be compatible with every screen size, browser, or operating system.
How can you preview WordPress websites on mobile devices? This guide will show you how to quickly test your website for mobile use without ever leaving your computer.
Why is it so important to test the mobile version of your site?
A few years ago, mobile devices outnumbered desktop computers in web browsing. In the first quarter 2021 mobile devices made up 54.8% global web traffic, while tablets and smartphones took 57.37% market share globally in the last year.
Mobile use is dominating desktop use in some regions. Mobile has a market share of 77% in India.
Google began penalizing sites that do not provide a great user experience on their mobile devices in response to the growing use of mobile internet.
Over the years, there have been many algorithm updates to improve the mobile search experience. Google switched to a mobile-first approach in 2015 with the ” Mobilegeddon” upgrade.
The first step in making sure your WordPress site is mobile-friendly is choosing a responsive theme.
The block editor gives users more control over formatting individual pages. It is important to test how your website looks on mobile devices every time you add content.
Method 1: Use the built-in WordPress Mobile Preview
Before you publish your WordPress pages or posts, you can always preview them. Did you know that your website can be viewed on mobile devices?
Two places are available to access a mobile preview of WordPress:
- The post and page editors (not always exact)
- The WordPress customizer
WordPress Page Editor Preview
Let’s take a look at the mobile preview within the Post and Page editors. Click the “Preview” button next to the “Publish” or “Update” buttons.
Before clicking, please choose “Tablet” from the drop-down menu.
This will instantly adjust the page editor’s size. This is an estimate of the content and it may not be exact, especially if you use custom blocks or externally loaded CSS.
In this example, you can see that the editor simply resized the blocks so they fit on a smaller screen. The text has been wrapped.
But if you view the live site on a smaller screen, you will see that it does not look like this. Instead, responsive design settings are used to rearrange blocks and resize text.
This is how it looks on a smaller screen.
The lesson: Don’t trust the mobile preview of the Post and Page editors. This is a fairly new feature that has been available since WordPress 5.5 was released in mid 2020. The mobile page preview should be improved in the near future.
WordPress Customizer Preview
The preview in WordPress Customizer is even better. Let’s take another look.
Go to Appearance > Customize from your WordPress dashboard to access the WordPress mobile preview.
It will show you a preview of your site and let you see how any changes to the style affect its appearance. Navigate to any page of your site, and scroll up or down as if you were viewing the live version.
You can switch between different device views to see how your site looks on different screen sizes by using the icons at bottom of the customization menu.
The default setting is to use a desktop computer, with a tablet in the middle and a smart phone on its right.
This is the quickest and easiest way to view the mobile version of your website. It’s located within the WordPress dashboard, and can be accessed in just a few clicks
This will give you the same view that you’d get if you resized your browser window. This doesn’t show you exactly how your website will look and behave on every device.
You can also view your site on three different screen sizes. There are many screen sizes and resolutions available for mobile devices.
The original proposal by the WordPress core developer team stated that only three options were available by default and that they are intentionally ambiguous. The intent is not to make a website look different on specific devices.
The WordPress customizer can only be used with themes that support it. You can’t use the WordPress customizer if your theme doesn’t support it.
Viewing the Mobile Preview in WordPress Page Builders
If you’re using a visual page builder like Divi, Elementor, Visual Composer, etc. Most of them have tools that allow you to preview the mobile version of the site and see how responsive it looks on different screen sizes.
To see how to preview and edit your WordPress site on mobile devices, refer to the instructions provided by the builder.
Method 2: Using Developer View in Chrome
Some browsers include built-in device simulations. Chrome is one of most used browsers. You can use it to see how your site will look on different devices at different resolutions.
Chrome’s device view is far more advanced than WordPress’ mobile preview. You can switch between the most popular devices and see what your site looks like when you zoom in or rotate the screen. You can even simulate a throttled mobile internet connection.
Although this preview gives you more options than the built-in WordPress mobile preview it is still not a good representation of how your site will look.
You will only be able get an idea of the site’s appearance in Chrome. Different browsers are used by mobile devices, so testing Chrome may not suffice.
This is an easy and quick way to test how your website looks at different sizes. It can also alert you to major problems.
To use Chrome in Device Mode, click View > Developer > Developer Tool in the menu.
This will split the browser screen in two, with your website on one and a code or element inspector on another.
The small icon that looks like a tablet or mobile phone at the top of developer tools will be clicked. This will change the size of your browser view, so that you can see your site at a lower resolution.
You will see an additional toolbar at the top of your browser. This can be used to manually adjust the screen resolution, zoom, rotate, and adjust the level of throttle to control how page loading times are affected.
Method 3: Use a third-party device simulator or testing service
WordPress developers should thoroughly test their websites, themes and plugins. A device simulator or emulator is necessary for this type of testing.
Simulators replicate both hardware and software on a device while emulators only simulate the operating system and user interface.
It can be difficult to set up an emulator and they run slow. They are not required for website testing, but they can be used to test apps and games.
To run tests, you used to have to install emulator software. It’s now much simpler, because there are many services that can be accessed online.
This allows you to test your WordPress site from any device, with any browser.
You can also try these services:
- MobileMoxie allows you to test your website and mobile search results using over 50 mobile devices. The service is available for free, but you can also sign up for $29 per month to get unlimited live testing.
- LambdaTest is a cloud-based testing platform that allows site previews across thousands of browsers, operating systems and devices. It also includes tools for real-time debugging. Paid plans start at $15 per month and include 60 minutes of testing.
- BrowserStack This isn’t a simulator. It’s a service that lets you test your website with over 2,000 browsers as well as real devices using a cloud infrastructure. You can try the service for free after signing up.
To make sure your site is optimized for mobile, audit and test it.
You can see the mobile version of your website using any one of these methods. You might also want to test other options to determine if you can make your site more mobile-friendly.
The Google Mobile-Friendly Test
This online tool allows you to enter any URL, and it will tell you if it is “mobile-friendly”.
To use the tool, just go to https://search.google.com/test/mobile-friendly and enter the URL of the page on your site you want to test.
You’ll be able to get this response with any luck.
This gives you an easy preview of your website on a mobile device. This is a snapshot, but it will alert you to any problems.
You can view the full details of any loading problems and make suggestions to improve your site.
Not all sites are mobile-friendly. The green “Page is mobile friendly” doesn’t mean your site has been approved by Google. This simply reassures users that the site isn’t illegible for mobile users.
Google PageSpeed Insights
PageSpeedInsights, another Google tool, will score your website based on its speed.
You can toggle between desktop and mobile (you’ll receive a score for each), and the tool will provide you with a list of possible improvements to your site and an estimate time savings.
MobiReady, a free tool, will run mobile readiness checks on your website and provide you with a report about how it is performing.
Compare your site to other sites and get recommendations on how you can improve it for mobile users.
How to make your WordPress site mobile-friendly
You should make sure your WordPress site is mobile-friendly before you start using it. WordPress has been able to provide tools that will ensure your site is mobile-friendly for many years.
There are steps you can take to ensure that WordPress users have a great experience on mobile devices.
1. A responsive WordPress theme is a good choice
You’re likely to be fine if you use a modern theme that is updated frequently.
If you are using a theme older than a few years, make sure it is mobile-responsive.
If your website is not resizing to make it easier to read at smaller sizes, ensure that you are using the latest WordPress core and theme.
You can also consider updating to a more current, mobile-friendly WordPress theme.
2. Also, ensure that your plugins are responsive
The majority of plugins won’t have an impact on how your site looks on mobile. However, if you add visual elements to your website, make sure they are compatible with a smaller screen size.
Modern plugins must be optimized for mobile devices just as they are for high resolution. It’s something you need to check before you launch your website.
Plugins need to be functional. If they add a widget or form to your site, ensure it is easy to use and navigate on mobile.
3. Mobile Devices: Disable pop-ups
Pop-ups are annoying for desktop and laptop users, but they can render your site unusable for mobile visitors.
It’s better to disable pop-ups entirely on mobile devices than having them trigger.
Google actually began penalizing websites for using intrusive popups to obscure the content. It’s better to avoid them altogether. You can also switch to a banner that occupies a very small area of the screen.
4. Images and videos should be scaled correctly and can be resized
Displaying media and media galleries on small screens can be difficult. You should ensure media elements are visible even when scaled. If they don’t look great on mobile, you might consider disabling them.
Make sure to use a gallery plug that is optimized for mobile viewing. Users should be able swipe through images galleries, for example.
Make it easy for users, if images or videos have been reduced in size, to make it easier to view them at a larger resolution. Mobile users will prefer to view videos at full-screen resolution, especially for those with large screens.
5. Optimize site speed and performance
It is important to ensure your website loads quickly. Mobile users have a different experience than desktop users. Page loading times are critical.
Mobile users often need quick access to information and are always on the move. An old Google study found that 53% mobile users will abandon pages that don’t load in 3 seconds. As internet speeds and technology improve, users become more impatient each year.
On a mobile device, however, it takes 87.84% more to load an average web page.
You can speed up your WordPress website on mobile and in general. There are many things you can do. These are the best ways to get the greatest results:
- How to choose a web host
- Optimizing images
- Using an CDN
These methods can be used to test the mobile experience of your WordPress site, but they won’t accurately recreate the actual experience.
Before you launch a new website or make major changes to it, ensure that you have at least one smartphone.
It should look fine if you have already used some of the preview options. You should be able to navigate the site, so make sure all menus and interactive widgets work properly.
The site can be launched with the assurance that it has been designed to provide a user-friendly experience for mobile and desktop users.