Struggling with how to view the mobile version of a website?
Well, one obvious solution is to just pull out your phone and open the website there. But if you’re reading this post, that’s probably not an option for you for some reason.
Thankfully, there are plenty of other ways to view the mobile version of a website right from your desktop web browser. So even if you don’t have access to a phone, you’ll be able to easily see the mobile version of a website no matter what.
In this post, we’re going to share four straightforward methods for how to preview the mobile version of a website:
- The first two methods will work with any type of website, whether it’s your website or someone else’s site and no matter whether it’s built with WordPress, Shopify, Wix, Squarespace, or anything else.
- The last two methods are WordPress-specific options that show you how to view the mobile version of your WordPress site. These will only work if you own the site.
How to view the mobile version of a website from your browser
Whether or not you own the website, there are two easy ways to view the mobile version of any website on the internet:
- Use your web browser’s developer tools. Chrome works great for this, but most other web browsers offer similar tools.
- Use a dedicated mobile emulator tool. All you do is enter the URL that you want to see and you’ll be able to browse it like a mobile user.
Let’s go through both methods. Then, later on, we’ll also show you how to view the mobile version of a website that you’re building yourself (on WordPress).
Use your web browser’s developer tools
Most browsers like Google Chrome, Safari, Firefox, Microsoft, and Brave offer developer tools that let you dig into a website, including seeing how it looks on different devices.
With developer tools, you can quickly see how a website looks on different smartphones, tablets, and so on.
For these examples, we’re going to assume you’re using Chrome (or any Chromium-based browser, such as Brave). However, most other web browsers offer similar features, though the interface will be different.
To begin, right-click on the frontend of your website and choose Inspect from the menu:
This launches developer tools and reveals a module on the right with coding elements from that page.
You don’t have to worry about the coding, since the primary goal is to switch to view the mobile version of the website. Find the small Toggle Device Toolbar button (it looks like a phone and tablet icon) and click it to activate the mobile view.
This automatically displays a responsive, mobile view, where you can change the device dimensions based on what device you want to emulate:
To make this method even more appealing, it’s one of the few options with built-in device defaults, providing a more exact look into how your website appears on real-world devices.
As an example, you could choose an iPad Pro and it instantly adjusts the display’s dimensions to that of an iPad Pro.
Or you could opt for the smaller Pixel 2 XL.
Or the even smaller Galaxy Fold. Test out each of the devices on the list and make sure your website looks acceptable on each one.
Use an online tester or emulator
Emulators are generally used for testing apps in their native environments, but many of them are available for website responsiveness. You can also find basic testers online to paste in your URL and see what it looks like on smaller devices.
ResponsivePX.com is a viable option, but you can find plenty of others with a quick online search.
The reason we suggest people try out emulators and simulators is because they give you far more control over the site dimensions. And they’re often simpler than using your browser’s developer tools.
Take ResponsivePX.com for instance: You go to the site, paste in the URL, and immediately see a mobile version.
It lets you adjust the width, height, and scrollbar visibility. You can even share the results with people in your organization.
How to view the mobile version of your WordPress website
If you’re working on your own WordPress site, WordPress also provides some built-in options to help you see how your site will look on mobile devices.
When you’re working in the WordPress editor, you can quickly see how your content will look on different devices. You can also do the same while you’re customizing your theme in the WordPress Customizer.
Let’s go through these methods…
View the mobile version through the page or post editor preview
You can view a website’s mobile version on a page-by-page basis. For instance, you may want to see if your current blog post looks presentable in its mobile view. It’s also wise to check your homepage for mobile responsiveness, especially after changing the design.
Let’s start with the homepage. Here’s what the following website looks like from a desktop view:
You’re able to see individual page and post mobile views by going to the Posts or Pages tabs in the WordPress dashboard.
For previously created posts and pages, go to All Posts or All Pages.
We’ll begin with a page; more specifically, the Homepage. Select whichever page you want.
Every page and post in the WordPress backend offers a Preview link in the upper right corner. Select that Preview button to reveal a drop-down menu with these options:
By default, WordPress shows the Desktop version.
Select the Tablet or Mobile view to see your website transform its elements like images, videos, menus, and text boxes into a smaller, more readable and clickable format.
When testing your site in other views, check to see that links are clickable (not too small), assets are still visible, and everything comes out clear without forcing the user to zoom in.
Take some time to scroll down on the page to check all the content. This site, for example, lists multiple eCommerce products on the homepage, with images, product names, and Add To Cart buttons.
They look decent, but it’s possible we’d like to switch to two or three product columns to make the product details bigger.
Posts are no different when using this method. They’re simply located under a separate section of WordPress (Posts → All Posts).
Seeing as how these contain your blog posts and not static webpages, it’s even more important to test mobile friendliness. Why? Because many companies publish dozens of blog posts each month with only minor updates to pages. If a blog is your primary content source, you need to ensure every one of them is mobile-ready prior to publishing.
As usual, go to Preview, then click on Tablet or Mobile.
The Desktop view occasionally looks very similar to the Tablet view, so make sure you’re not zoomed in on your browser.
The Tablet view appears somewhat smaller than the Desktop view but with black space around the site content, mimicking a more realistic tablet size.
View the mobile version of a website in the WordPress Customizer
The WordPress Customizer not only provides excellent ways for you to edit your WordPress theme, but it has a visual preview of your site as you make edits.
Luckily, the WordPress Customizer doesn’t only restrict you to a desktop preview. In fact, it’s possible to complete all of your edits while looking at a mobile phone or tablet view.
To make this happen, go to Appearance → Customize to launch the Customizer.
By default, here’s what the Customizer looks like. It’s in the standard Desktop view with settings to adjust on the left and the site preview to the right.
Look to the very bottom of the settings list to find three button icons: one for Desktop view, another for Tablet view, and a third for Mobile view.
Click on the Tablet view button to see how your current edits show up on an interface the size of a general tablet.
The Mobile View button makes that interface smaller, getting you closer to the standard window size of a mobile smartphone.
Note: Keep in mind that these backend mobile previews are estimates. With so many device types in the world, no one will see the exact same thing.
Don’t forget about the menus. Menus are notoriously troublesome on mobile devices. Check to see if the theme developer has put in a considerable amount of testing. You’ll notice that the mobile menu typically gets placed into a hidden hamburger menu (three horizontal lines), and that you may end up with two menus (like how this theme provides eCommerce buttons at the bottom of the screen).
As always, refrain from taking a quick look at the first page and assuming your entire website is ready. That’s a recipe for missing out on minor flaws that hurt your overall user experience.
Run through your entire website while in Tablet view, including everything from product pages to blog posts, and shopping carts to About Us pages.
And complete the same process in the Mobile View. We especially recommend testing out eCommerce functionality, since the last thing you want is a small checkout module or Add To Cart button.
It’s easy to view the mobile version of a website
In this article, we walked through four methods on how to view the mobile version of a website, no matter who owns the website or what technology it’s built with.
The most flexible option is to use your browser’s developer tools. This will work no matter what. As long as you can open the desktop version of the website, you can preview the mobile version using developer tools.
The emulator approach also works with most websites, though the website needs to have a publicly accessible URL for the emulator to be able to fetch the website.
On the other hand, if you’re a WordPress user, you can rely on WordPress’s built-in responsive preview tools to get the job done while you’re working on your site. Or, the other methods also work great for WordPress sites.
If you need a mobile view for working on your own site, you also might want to check out our guide for creating a mobile-friendly website for some tips on what to pay attention to while you’re previewing the mobile version of your site.
Do you still have any questions about how to see the mobile version of a website? Let us know in the comments!
Free guide
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
Keep reading the article at ThemeIsle Blog. The article was originally written by Joe Warnimont on 2021-12-10 05:41:15.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.