Whether you’re designing a website for a client or managing your own WordPress site, it’s important to understand how it will look and work on mobile before making any changes public.

You probably have a cell phone that you can use to view your website. But if you’re working on a laptop or desktop, it’s inconvenient to have to keep using your phone.

How to Preview Your WordPress Site on Mobile

Even if your website looks good on your phone, there are plenty of phones and tablets out there. Just because it looks good, doesn’t necessarily mean it will work perfectly on a variety of different screen sizes, browsers, and operating systems.

So, how exactly do you preview your WordPress site on a mobile device? In this guide, we’ll cover some easy ways to test your website on mobile devices without leaving your computer.

Why is it so important to test the mobile version of your website?

A few years ago, mobile devices replaced desktop computers as the main way to browse the web. In the first quarter of 2021, mobile devices accounted for 54.8% of global web traffic, and last year mobile phones and tablets accounted for 57.37% of the global market share.

In some parts of the world, mobile device usage is much larger than desktop usage. For example, in India, mobile devices have a market share of over 77%.

In response to growing mobile internet usage, Google has started penalizing sites that don’t provide a good user experience on mobile devices.

Over the past few years, there have been many algorithm updates aimed at providing a better search experience for mobile users. 2015’s “Mobilegeddon” update was the most drastic, as Google moved to a mobile-first model.

As a WordPress user, choosing a mobile responsive theme is the first step to making sure your website looks good and works well on mobile devices.

But with the block editor, users have more control over the formatting of individual pages than before. So even if you’re not developing a theme or plugin, it’s important to check how your site looks on mobile devices every time you add new content.

This is especially important if you use a visual drag-and-drop page builder like Divi or Elementor to create new page layouts or add content to your website.

Method 1: Use the built-in WordPress mobile preview

Method 2: Use Developer View in Chrome

Method 1: Use the built-in WordPress mobile preview

You can always preview your WordPress posts and pages before publishing. But have you noticed that you can also preview how your website will look on mobile devices?

There are two places to access mobile previews in WordPress:

How to Preview Your WordPress Site on Mobile

From article and page editors (not always accurate)

From WordPress Customizer

WordPress Post/Page Editor Preview

Let’s start by taking a look at how the mobile preview in the post and page editors works. Click the Preview button next to the Publish or Update button.

How to Preview Your WordPress Site on Mobile

In the drop-down menu that pops up, select “Tablet” or “Phone” and click.

This will instantly resize the page editor. However, this is a very rough and out-of-the-box estimate of what the content will look like and may not be accurate, especially if you are using custom blocks or externally loaded CSS.

You can see in this example that the editor just resizes the block to fit the smaller screen and wraps the text.

However, if you view the live site at a smaller screen size, you’ll see that it doesn’t look like this at all. Instead, responsive design settings have started rearranging blocks and resizing text.

Here’s how it actually looks on smaller browser screens:

WordPress Customizer Preview

So is the preview in the WordPress customizer better? let’s see.

To access the WordPress mobile preview, go to Appearance > Customize in your WordPress dashboard.

This will show you a preview of how your website will look and allow you to see in real-time how changes you make to styles change its appearance. You can navigate to any page on the site and scroll up and down as if it were a live version of the site.

Method 2: Use Developer View in Chrome

Some browsers have built-in device emulators. Chrome is one of the most popular browsers that you can use to preview how your website will look on many different devices and at different resolutions.

Chrome device view is much more advanced than WordPress mobile preview. In addition to being able to switch between popular devices, you can see how your website will look when you zoom or rotate the screen, and even simulate a restricted mobile internet connection.

But while this gives you more preview options than using the built-in WordPress mobile preview, it’s still only an approximation of how your site will look.

Importantly, you can only see how your site will look in Chrome. Many mobile devices use different browsers, and testing in Chrome may not be enough.

But it’s a very quick and easy way to test how your site looks and works at different sizes, and it can alert you to any major issues.

To use Chrome in Device Mode, go to View > Developer > Developer Tools in the menu.

This will split your browser screen into two, with your website on one side and the code and element inspector on the other.

Click on the little icon at the top of the developer tools that looks like a phone and tablet. This will adjust the screen size of the browser view so you can see how your website will look on lower resolutions.

Recommended reading:

The latest function of fmwhatsapp group call

How to get rid of GB WhatsApp ban?

Leave a Reply

Your email address will not be published. Required fields are marked *