How to View a Mobile Version of Your Website on Desktop
Nowadays, ensuring that your website and all its pages look good on mobile is extremely important. The number of users who browse websites from mobile devices grows bigger each day, which is also why mobile-friendly design falls among some of the top-ranking factors for Google. Therefore, to make the most out of your SEO strategy, you should see that the mobile version of your WordPress site looks nothing short of perfect. But to make all this possible, you need to find a way to view the mobile version of your website on desktop first.
Luckily, there are many different ways in which you can check out what your site looks like when viewed from a mobile device, and this time around, we will list them all. Some of these methods will be universal for any website platform, but we will also include ways to do this if you own a WordPress-powered site and wish to test out your pages while working on the website itself. Make sure to read on as we show you the following methods to view the mobile version of your website:
New Themes
VIEW COLLECTION
Ettore
Fashion Store and Menswear WooCommerce Theme
Fidalgo
Restaurant WordPress Theme
ToddlerPlay
Children and Kindergarten WordPress Theme
To view the mobile version of your site, you can simply use the developer tools that come with your browser. The majority of well-known browsers (like Google Chrome, Safari, Firefox, Microsoft Edge, and others) provide you with the ability to see what your site looks like on mobile and other devices. Of course, this also includes tablets, laptops, etc.
We are going to use Chrome and its Inspect Element tool for our example. However, you should note that aside from a slight difference in the interface, the options for viewing the mobile version of your site will be similar.
To access your browser’s Inspect tool, you simply need to right-click your page and hit Inspect.
This will open a new screen, showing you different page elements. Now, what you need to do is find the Toggle Device Toolbar button (the icon in the shape of a phone/tablet) and click on it.
This will reveal the mobile view of your page, i.e. show your page in a way it would be displayed on mobile and/or other devices. Also, in the top corner of your screen, you will be able to change the dimensions according to the device whose view you want to check.
For example, if you choose iPhone 12 Pro, you will be able to see the accurate view from the iPhone 12 Pro phone, since it will be adjusted to simulate this device’s dimensions.
Similarly, you can view the mobile version of your website on Samsung Galaxy S8+ if you click on the option with the same name:
Make sure to try every available option in the dropdown to ensure your site looks good and responsive on every mobile device, regardless of its model or size.
There are many online emulators that can be used to test your website’s responsiveness. They usually work by allowing you to simply insert your page’s URL and then check what said page looks like on a specific mobile device.
We recommend using tools such as Bluetree’s Screenfly screen testing tool or responsivepx, for example. Of course, there are plenty of other similar tools online you can easily find by just searching for them on Google. But for the purposes of this article, we’ve decided to show you how to do this using the Screenfly responsive testing tool.
Once you access Screenfly’s homepage, you can simply type in the page URL in their search bar and then hit the Go button.
Right below, you will see different options you can pick to see what your page looks like on different mobile devices and tablets. This includes iPhone, iPad, Chromebook, some of the popular Samsung Galaxy models, and many more.
For example, here’s what our page looks like when we select Samsung Galaxy S7:
If you own a WordPress site and wish to see what it looks like on mobile from the WordPress site itself, you’ll be happy to hear that this is quite easy to do. Namely, WordPress comes with some integrated options that will allow you to see the mobile version of your site as you edit your pages and posts.
First, you need to head to Pages >> All Pages (or Posts >> All Posts) screen and then hit the Edit button below the page/post in question.
Once you’re on your page (or post) edit screen, you will be able to see and use the Preview link (it will be available in the upper right corner of your page). Click on that link and you will see the new dropdown appear with the options to preview what the page will look like on Desktop, Laptop, and Mobile. The preview will show the Desktop page by default, so you should click on Mobile to see what your page will look like on mobile devices.
We recommend that you check out the mobile view of each page (and post) of your site individually. This includes your Homepage, About page, Blog page, and the list goes on. Then, you need to ensure that all page elements (such as menus, links, images, videos, etc.) are properly displayed and that they all look neat and clean. You should also check out whether all your links are working, whether all page text is easy to read, as well as whether all other page elements are still available and visible in general.
Finally, we also advise you to check out what different elements of your page look like on tablet by hitting the Tablet preview.
Another great way in which you can check out what your pages look like on mobile is through the WordPress Customizer screen. Using this screen is quite practical as it allows you to have an instant live preview of every element during the entire editing process. And of course, you can perform page edits while previewing what it looks like on mobile as well.
To do this, simply access Appearance >> Customize.
You will see that the default Customizer shows you the Desktop preview.
You can easily change this by selecting the mobile icon located in the bottom left corner of the screen:
This will make the entire interface of your page appear narrower, simulating the mobile page size. You have to note, however, that this is just an approximate mobile page simulation, as there are many different phone mobiles with different screen sizes out there.
Once again, don’t forget to check what your mobile menu, images, links, and other elements look like when in mobile view.
Wrapping Things Up
Testing your website’s responsiveness across multiple devices is essential to ensure that it’s both user- and search engine- friendly, and checking out the mobile version of your site is no exception. As you could see from all the methods we presented above, there are many different ways in which you can view the mobile version of your site on desktop. The process itself is as easy as it can get, no matter if you want to check out what your site looks like using the browser’s inspect tool, use one of the available mobile simulator tools, or do this from your WordPress site directly.
Regardless of what method you end up using, just make sure not to rush. Remember to view each page of your site separately and scroll through carefully to check out whether different page elements such as menus and images are working. Above all, see that every element looks clear, presentable, and nothing short of perfect to ensure the best possible browsing experience for your mobile visitors.
