Have you ever spent forever designing a smashing look for your website and tweaking it to perfection only to look at it on a phone and immediately ring up your psychiatrist for an emergency appointment? Be honest now. If you’ve designed a few sites, this is probably you. Okay, maybe you skipped the psychiatrist and immediately started writing your will instead. I don’t know. Everyone’s different. But you get the point, right?

I mean, heck! You even tested your site for responsiveness in WordPress and maybe even in your page builder, but it still looks bad on a real device! Well, the inconvenient truth is that the responsive testing modes in WordPress and most page builders are not entirely accurate. I don’t know why, but they just aren’t – especially when you get into more advanced designs. They are a good reference point, but sometimes (most the time) you need something more precise.

For example, let’s take the Elementor page builder – my favorite. You can get your webpage looking great in all three responsive modes in Elementor, but it never looks quite the same on real mobile devices. The obvious solution would be to test your site on real devices, right? Well, that would be ideal, but unless you’re a device hoarding DRAGON, you probably don’t have all the devices you need to test efficiently.

So, to make a long story short and an already difficult task easier, I’m gonna show you five of my favorite FREE ways to test responsiveness right on your desktop. The last one is a bit odd (bordering on highly unconventional) but is also my absolute favorite. Yeah, of course I’m leaving it for last. Just like any semi-seriously sneaky (a.k.a. good) writer with ulterior motives, I wanna keep you here till the end of the post. So, I’ll just go ahead and start with my least-favorite favorite way to test responsiveness on a desktop.

1: Responsive Test by TrulyBlogger

This one is an online tool by TrulyBlogger. I don’t like it much, but I love it. It’s so ironic – the most unresponsive responsiveness testing tool I’ve ever seen, but it does the job. Anyway, much as would be expected, you just punch in a URL, and it shows you several responsive views of that webpage.

This tool is good because it kind of simplifies the process for people who don’t know exactly what they’re doing. It lets you choose between displaying common screen widths or common device sizes (small phone, iPhone, small tablet, etc.). Another interesting feature is the ability to test for really small device screens (you know, those ancient 2G phones that nobody uses anymore), but I’m not sure how useful that actually is.

2: Responsinator

This is another online tool called Responsinator, and it’s actually the first one I ever heard about or used. It’s free though it does have a paid plan and a friendly invitation to ‘say thanks’ and buy the developers a beer… I don’t know… I guess they don’t like coffee much.

But let’s talk about the free version for now because I did promise you free stuff after all. Well, there isn’t too much variety in the devices; there are four phone models and one tablet, but that is actually enough for most projects. What I really love about this tool is that it shows both the portrait and landscape modes of the devices, and it shows the operating system’s UI getting in the way just as it would on a real device. That’s something I’ve rarely seen anywhere else.

Another cool thing about Responsinator is that it maintains hyperlinks allowing you to navigate your site within the responsive modes. But that’s actually a pretty standard feature for good responsiveness testing tools.

3: Resizer by Material Design

This is the last of the online-only tools, and this one is by Google. Of course Google had to make an appearance somewhere in this list.

Resizer is part of Google’s Material Design resources, and it does exactly what its name suggests – resizes things, specifically webpages. The key features of this tool are a really ugly favicon and the ability to see three device previews side by side.

There is only one phone size and one tablet size, but you’ve got the option to view landscape mode as well. There are quite a few desktop sizes though. You also have the ability to navigate the website within the responsive windows. So, altogether, it’s a pretty handy tool and therefore gets bronze in my list of favorites.

4: Chrome DevTools’ Device Toolbar

This next one could be an online or an offline tool depending on where your site lives. DevTools are a set of tools built right into the Google Chrome browser. Yep, Google did just claim another entry on this list. But back to the point, there is a very good responsiveness testing tool built right into the Google Chrome browser. In fact, this is probably the most accurate tool in this list so far and the one to use if you wanna look really professional. Several other browsers do also have a similar feature; I know that Opera and Edge have it for sure, but let’s talk Google for now. I mean, who actually uses those other browsers anyway?

A really neat thing about these browser tools is that you don’t have to leave your site to get to them. All you have to do is right click on your webpage and then click ‘Inspect’. This pulls up a geeky looking sidebar with a lot of code in it. Yikes! But never mind all that. Up in the top, left corner of the sidebar, there is a little button (highlighted below) which should be labelled “Press for Magic” but for some strange reason is not. This button invokes the Device Toolbar.

Once you’ve got the Device Toolbar activated, you’ll see a dropdown menu at the top of the window. In the menu, you’ll find a list of common devices ranging from laptops to phones, but that’s not all. Way at the bottom of the list there is a button called ‘Edit’. When you press it, you get the option to preview at least twenty more devices. You can even add custom devices… which is really cool by the way.

Being the awesome tool that it is, of course Chrome DevTools has an option to view either portrait or landscape mode. There is even an option to resize the responsive window without actually resizing it if you know what I mean – basically zooming in or out on your screen. And to top it all off, your cursor gets turned into a little black spot to simulate what appears to be a toddler’s finger on the device screen.

But my absolute favorite feature from this tool is the ‘Responsive’ preview. You’ll find the option at the top of the device menu. This option lets you drag the sides of the display around to manually make it bigger or smaller. The fun thing about this is that it allows you to shrink the display to a ridiculously small size. So, if you ever wanted to know what your site would look like on a 50×50 pixel display, you can now find out.

Well, that’s what Chrome DevTools has to offer – pretty neat stuff. Very good. Good. Nice. Probably the best tool in this list. But let’s move on to my favorite.

5: My Favoritest (as in favorite test, get it?)

Here it comes. My absolute favorite website responsiveness test in the whole wide world of web design.  This one’s great because it works on any browser, albeit it’s also probably the least accurate. Yeah. I just said that.

Okay. Let’s get into this. First, navigate to your webpage. Next, restore down your browser window (or make it smaller for those of you who don’t know what that means). Now just drag the sides in or out to change the width of the window. That’s it! That’s my favorite way to test for responsiveness!

Come on, you have to admit that it’s way faster than any of the other methods. Maybe it’s not as accurate, but it’s a really good way to test a webpage on the fly. Another really neat thing about this method is that you can see exactly where the breaking points are (when it switches from desktop to tablet and from tablet to mobile). Yeah. Okay. It was primitive, and right now you’re either rolling your eyes or beating yourself up for not thinking of it yourself. Whatever you might think, it is still my favorite… though I’m sure I have no idea why.

Conclusion

Well, this is the end, and I’ll just leave it at that. Thanks for reading this far… or at least scrolling this far if you didn’t actually read anything… which you should have by the way. But in the case that you didn’t actually read the post, I wanna give you this invitation to enjoy your scrolling craze some more by scrolling back to the top and starting over.