Get our latest articles via email:

How to Virtually Test Your Site on Different Screen Sizes

Share this article:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on email

We’re constantly advocating for real-world website testing. But what if you don’t have access to the full suite of devices and screen sizes? There’s a free tool for that.

If you use Google Chrome, it’s easy to view how your website looks on a different screen size. You can even select mobile devices, desktop devices, and add your own custom devices.

Here’s how to access it:

1. In Google Chrome, right click anywhere on your page. Click “Inspect.”

2. From there, click the Responsive icon on the top bar.

(Your Inspect bar may appear on the right-hand side of the screen, or even in a new window, but the icon will be the same.)

3. On THIS new screen, use the drop-down menu at the top to select the screen size.

You can add custom screen sizes by clicking the “Edit” option:

And that’s it! With this tool, you can view your website in all sorts of sizes. And that might show you how you need to adjust your design for conversions.

For example, here’s what I saw when I viewed our own site on a 13″ Macbook Air screen size:

All the right elements are above the fold.

But when I previewed it on mobile…

…it didn’t look quite so good. Where’s the button?

So I made some adjustments, and voila:

I think it works better! I had to hide some copy on mobile, and I completely changed the default font sizes. But that’s what you SHOULD do when you’re building a mobile-first site.

Most of your website visitors will be on mobile. But most designers focus on desktop. With this free, simple tool, you can test your website on different screens without having to own a wall of monitors (or shoebox full of smartphones).

Before You Go...

If you need to get something “fixed” but haven’t had the time, we built our new Quick Fix just for you

Get website issues, tech troubles, and even messaging frustrations resolved quickly for a low, affordable price… and by a team that actually gets what matters for your business.

Share this article:

Facebook
Twitter
LinkedIn

Leave a Comment

Democratizing opportunity through technology.

"The meek shall inherit the earth, but not its mineral rights." – J. Paul Getty, whose children created one of the greatest philanthropic endowments ever as a last laugh on a bitter miser.

Let's stay in touch

We occasionally write about conversion-focused design (including UX design and conversion copywriting).

Fill out this form to get all our newest, highly-profitable articles and training.