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).