fbpx
HomeBusinessHow to View Your Website on Mobile in 30 Seconds or Less

How to View Your Website on Mobile in 30 Seconds or Less


Ever wonder what your website looks like on a smartphone? There’s a simple way to do it even if you don’t have your phone handy. Use your computer. It’s easy to do and we’ll show you how.

And if you want to see the desktop view of your website on your phone? We’ll walk you through that, too. We’ll even show you the options for different ways to view your site using website builder tools.

Use Desktop Browser View to See the Mobile Version of Your Site

Popular browsers like Google Chrome and Safari have many semi-secret features that most casual users don’t know about. One of those is the ability to view the mobile version of a website from your desktop computer.

Why should you care? According to analytics firm Statista, nearly 60 percent of website traffic comes from people using mobile devices—and this doesn’t even include those using tablets. Knowing this, you can’t afford to give your mobile visitors a subpar experience.

If you have or manage a website, especially one with an ecommerce component, you want to make sure your site is mobile-friendly. The easiest way to identify issues is to see how your site looks when viewed on a smartphone. The more responsive your site, the better the visitor experience.

Every popular browser lets you see your site through the “eyes” of a mobile phone. While the interfaces vary among browsers, all make it easy to do. Let’s take a look at how this works in two of the most popular browsers, Google Chrome and Safari.

View your mobile site on Google Chrome desktop browser

Step 1 – Open the Inspect Element tool

There are four ways to access the Inspect Element tool in Google Chrome.

Option 1: Open Chrome, navigate to your site, then right-click anywhere on the page. In the drop-down menu that appears, select Inspect.

QuickSprout homepage with menu shown and "Inspect" option highlighted. QuickSprout homepage with menu shown and "Inspect" option highlighted.

Option 2: In the top navigation menu, select View > Developer > Inspect Elements.

QuickSprout homepage with the View menu shown and the Developer option and Inspect Elements selection highlighted. QuickSprout homepage with the View menu shown and the Developer option and Inspect Elements selection highlighted.

Option 3: Select the three-dot icon in the top right corner of the Chrome window, then choose More Tools > Developer Tools.

QuickSprout homepage with Google Chrome settings shown and the More Tools option expanded to select Developer Tools. QuickSprout homepage with Google Chrome settings shown and the More Tools option expanded to select Developer Tools.

Option 4: Use a keyboard shortcut. On Windows, it is Control+Shift+C, and on Mac Command+Option+C.

Step 2 – Activate the Toggle Device Toolbar

Once you open the Inspect Element tool, the screen is then divided into two parts. One side will show your site and the other side is filled with code and technical data.

On the side of the screen with the code, navigate to the Toggle Device Toolbar icon in the upper left corner. It looks like a desktop monitor with a mobile phone icon in front of it. This is the icon you click to change the view of your site on the other side of the screen.

QuickSprout homepage with the toggle device toolbar shown and a red arrow pointing to it. QuickSprout homepage with the toggle device toolbar shown and a red arrow pointing to it.

Click the icon to go back and forth between mobile and desktop view. The image on the left will change to reflect the current view.

Here’s how the screen looks when you choose mobile view. You’ll also see a new set of icons above the mobile image. More on that in the next step.

QuickSprout homepage mobile view. QuickSprout homepage mobile view.

Step 3 – Select device to preview

Now you can explore how your site looks in different mobile scenarios. You can choose preset options or customize your own.

When you select the Dimensions: Responsive dropdown menu, you can choose a device-specific option.

Dimensions: Responsive dropdown menu example with list of devices to preview from. Dimensions: Responsive dropdown menu example with list of devices to preview from.

You can also edit this list to add or delete devices. This lets you fully customize the website views on mobile devices that matter most to you.

Settings menu showing a list of Emulated Devices. Settings menu showing a list of Emulated Devices.

You can also fully customize the mobile size by manually changing the width and height dimensions.

Example to set dimensions of mobile website preview. Example to set dimensions of mobile website preview.

You can even test different internet speed scenarios with the Throttling dropdown menu. If you’re not familiar with bandwidth throttling, it is a tool some web hosting providers use to control shared server resources.

Example showing the Throttling dropdown menu with the No Throttling option selected. Example showing the Throttling dropdown menu with the No Throttling option selected.

View your mobile site on Safari desktop browser

You must enable Safari’s developer tools for this to work. In MacOS Sonoma, do this by choosing Safari > Settings from the top navigation menu, then toggle the Show features for web developers checkbox options to ON. You’ll see Develop added to the top navigation menu.

Step 1 – Open Inspect Element tool in Safari

There are three ways to open the Inspect Element tool in Safari.

Option 1: Navigate to your site, then right-click anywhere on the page and select Inspect Element from the drop-down menu.

QuickSprout homepage with menu shown to select Inspect Element. QuickSprout homepage with menu shown to select Inspect Element.

Option 2: From the top navigation menu, select Develop > Show Web Inspector.

Safari web browser develop option with a red arrow pointing to the Show Web Inspector selection. Safari web browser develop option with a red arrow pointing to the Show Web Inspector selection.

Option 3: Use the keyboard shortcut Command + Option + I (capital letter ‘i”).

Step 2 – View device display options

Once you’re in Web Inspector mode, the Safari screen is divided in half. One side displays your site, and the other shows code and other developer-specific information.

Web Inspector mode on Safari web browser. Web Inspector mode on Safari web browser.

Don’t be alarmed. It may look intimidating, but unless you plan to tweak HTML or CSS code, you don’t need to go into Web Inspector mode at all. Safari gives you a direct menu option for viewing your site on mobile.

Jump straight into mobile view by choosing Develop > Enter Responsive Design Mode from the top navigation menu.

Safari web browser develop option with a red arrow pointing to the Enter Responsive Design Mode selection. Safari web browser develop option with a red arrow pointing to the Enter Responsive Design Mode selection.

This is how the screen will look after you select Enter Responsive Design Mode without first opening Web Inspector.

Menu to select which device to open the mobile view simulator with. Menu to select which device to open the mobile view simulator with.

Here you can view your website in different iOS settings. Choose from predefined settings or customize as needed.

Enable Desktop View on Your Mobile Browser

More and more people use their smartphones to shop and conduct day-to-day activities. So it’s no surprise that website owners must keep the latest mobile trends in mind and optimize their site for mobile traffic.

In the quest to embrace mobile marketing strategies, though, you don’t want to lose sight of the visitor accessing your site the old-fashioned way—with their computer. You want your site optimized for both.

It’s easy to check how your website looks in desktop view even if you only have your mobile device handy. Whether you’re using an iPhone or Android device, here’s how to do it.

Access desktop view on iPhone

The process varies slightly depending on which browser you use on your iPhone. Here we’ll show you how to do it using two of the most popular—Safari and Google Chrome.

View Desktop Mode on Safari Mobile Browser

Open the Safari browser on your phone and navigate to your site. Select the Aa icon next to your site’s url. Then select Request Desktop Website from the popup menu. You will now see your site as it appears on a desktop browser.

Menu shown with a red arrow pointing to the Request Desktop Website selection in Safari on mobile. Menu shown with a red arrow pointing to the Request Desktop Website selection in Safari on mobile.

Desktop Mode on Chrome

Open the Chrome browser on your iPhone and navigate to your site. Select the three dots icon in the lower right corner. Then select Request Desktop Site from the popup menu.

Menu shown with red arrow pointing to Request Desktop Site selection in Google Chrome on mobile. Menu shown with red arrow pointing to Request Desktop Site selection in Google Chrome on mobile.

Access desktop view on Android

Switching to desktop mode in Google Chrome on your Android device is easy.

Open Chrome on your phone and navigate to your website. In the address bar, tap the three vertical dots (the Kebab menu), then check the box for Desktop site. That’s all there is to it.

Kebab menu with a red arrow pointing to the Desktop site selection on Android Google Chrome. Kebab menu with a red arrow pointing to the Desktop site selection on Android Google Chrome.

Other Ways to View Your Website On Mobile

There is another handy way to check the responsiveness of your site. Whether you’re using WordPress, Wix, or any of the other top website builders out there, most have a feature to see your site in mobile, tablet, or desktop view.

In WordPress, for example, you can change the view through the sidebar menu on your Admin Dashboard. On the sidebar menu, choose Advanced > Customize, then look for the icons at the bottom of the left side of the screen. You can toggle between desktop, tablet, and mobile view.

This is a convenient way to make tweaks in real-time to optimize the mobile experience for your visitors.

WordPress settings with options to toggle between desktop, tablet, and mobile view. WordPress settings with options to toggle between desktop, tablet, and mobile view.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments