How to check if your WordPress site is responsive

For those of you who don’t keep track of time, here’s a quick reminder – it’s 2016, and we can call it a modern era. Smartphones and tablets are all around us, desktop and laptop computers are a must-have, and we get to witness new technologies on a daily basis. It’s been a long time since the Internet and websites were something “geeky,” and it’s been a long time since websites just had to be put on a server to have the information online.

Today, you have to do so much more. Luckily, WordPress allows us to forget about a large aspect of website development and lets us focus on more important things. Still, you have to take care of your site. Among many other things you have to take care of, making a responsive website is crucial.

There are dozens and dozens of different screen sizes which can load up your site and that means that your site can change its layout drastically if you don’t care. Someone who loads your WP site on a desktop computer connected to a 4K monitor will definitely have a different experience from someone who loads the same on a smartphone. And if you leave your site with fixed-width, you will be in trouble.

Not only your visitors will get lost in the broken layout, but Google will penalize you by lowering your search engine rank if the site isn’t responsive. We already listed responsiveness as an important factor in buying a premium WordPress theme, and it’s time to see how to test that.

1. Manual check-up

Let’s start with the obvious. Instead of using tools and plugins, you can easily check a website for being responsive simply by loading on different devices. You can load up a website on your desktop/laptop computer, on a smartphone and a tablet and simply check it out. If the site looks nice on every screen and there are no broken elements to be found, you probably do have a responsive site. But as you can already guess, this check-up is far away from perfect. You won’t be able to have all the devices with you at all times, and even if you did, you’re still testing the site only across those two, three devices you have available. You have to step up your check-up game.

2. Browser tools


Every modern browser comes packed with a free responsive check-up tool. For example, if you use Chrome, all you have to do is to right-click anywhere on your site and choose Inspect which will open up a new screen. There, you should navigate to Toggle Device Toolbar (or simply press CTRL+SHIFT+M after you have the inspection console opened). By doing this, the site will open in a responsive mode where you can play around with different screen resolutions and devices.

There are already several predefined devices so you can choose iPhone, Galaxy or Nexus devices and see how your website would look like loaded on those. Even better, you can choose the Responsive option and test your site against any resolution you want. You can manually write the resolution, or you can simply minimize the window and change its size by dragging it around with your mouse. Your website will stay loaded inside, but it will change its shape according to the resolution of that window. If you still haven’t discovered this awesome tool, this is the right time to test it out – you will love it!

3. Google’s Mobile-Friendly Test

Test

If you have tested the responsiveness of your site manually, it’s time to let robots do the work for you. Google is still the most popular search engine, so it would be recommended that you check out how it sees your site. Luckily, this is really easy. Simply open up the Mobile-Friendly Test, write the URL of your website and click on the Analyze button. Google’s bot will do all the work and will let you know if your website is responsive. You can learn more about the test on the official blog pages.

4. Online emulators

If that’s not enough for you, there are online emulators to help you. Those provide an easy way of testing your website for responsiveness.

Responsive Test by TrullyBlogger

Test

Responsive Test by TrullyBlogger
This online emulator is very simple, but it works like a charm. Once you open the emulator, it will load up several devices in a row which will be ready to take your WordPress website for testing. On top of the site, you will find a text area where you need to enter your URL, and after you hit enter, the magic starts to happen. The Responsive Test will use each device to load your site in a different resolution, and all you have to do is to scroll through the devices to see if your site looks good on them.

Responsinator

Test

Responsinator
This test will do the same for you. Open Responsinator, enter the URL which you would like to test and let the robots do the work for you. Responsinator will load your site into several devices; the only difference from the above-mentioned one is that it will list devices vertically. You can even make your own customized Responsinator if you want to.

Am I Responsive

Test

Am I Responsive
This is another online emulator which will give you practically the same. Am I Responsive looks great and it shows you four devices on top of the screen. Not only it will show you the preview of your site, but it will actually stay interactive. Unfortunately, since all the previews are loaded at the same time, they’re quite difficult to read.


After testing your site, chances are that your WordPress website is already responsive. That’s because practically every modern theme you can get for free or buy on premium marketplaces offer responsive themes. If you have and older theme which isn’t responsive, now it’s time to act on it. Either you should get a responsive theme, or you should start coding your own one. Whatever you choose, it’s very important that you have a responsive site.

Now you might be wondering if it is enough to have a responsive website or you do you need a mobile app, too. This depends on what you do and from visitors who come to your site; see what are the differences and what are the best mobile app builders which can help you with your WordPress site.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

2 thoughts on “How to check if your WordPress site is responsive

  1. […] responsive WordPress theme utilizes CSS and JavaScript in order to adapt a website’s layout to the user’s different […]

Leave a Reply

Your email address will not be published. Required fields are marked *