Testing A Website's Responsiveness

You can test the responsiveness of your website on the fly. 

As we build new sections or layouts, it’s often quickest and more sustainable to check those as you go rather than wait until the entire site is built.

For example, if you're working on a custom header or footer layout, it's important to test the responsiveness of those (at various browser widths) as you add new elements to them. That way, as you “finish” one section, you can move onto the next page or section — knowing your previous section is now bulletproof.

In general, the following are the methods of testing responsiveness and cross-browser compatibility:

On Your PC

While it’s generally safe to assume that if it looks good in Chrome, it will look good in other browsers — testing should still occur in the below browsers on your PC. This is due to the fact that each of those browsers uses a different type of rendering/layout engine. But do keep in mind that Chrome is the dominant recommended browser.

Google Chrome (Blink)

Utilizing Developer Tools

• Adjusting Browser Width
• Adjusting Device Mode

Mozilla Firebox (Gecko)

Microsoft Edge (EdgeHTML)

• Requires Windows 10

Microsoft Internet 11 (Trident)

• May Require A Download If Not On Your PC

Alternative Devices

If you’ve done your due diligence and testing on the above browsers, it should just come down to ensuring if it looks good on other physical devices. Particularly within Safari, since thanks to the iPhone, that browser has a high market share of users. Safari uses a different type of layout engine, compared to the above browsers. It uses WebKit.

Google Android (Chrome)

Apple Macbook (Safari & Chrome)

Apple iPad (Safari)

Apple iPhone (Safari & Chrome)

Using Chrome Dev Tools

Many responsive issues can be resolved by testing within Chrome Dev Tools before viewing on a different device itself. In fact, one could argue that you should always be running your website with Dev Tools open, while building it. One tab for the admin side, and another tab to view the website itself (with Dev Tools active on that tab).

To open Chrome’s Dev Tools there are a few methods:

1. F12
2. Ctrl + Shift + I
3. Settings Menu > More Tools > Developer Tools
4. Right-Click > Inspect

Once Dev Tools is open, you should enable the Device Toolbar (if it isn’t already) by clicking the little Devices icon:

This will add a section to your tab that allows you to easily adjust the width, height, device type, etc. and will look like this.

Test All The Widths!

You can easily test responsiveness by dragging the width of the viewport, to make it more narrow — without having to drag the browser window itself. Make sure the “Responsive” dropdown is set to Responsive, otherwise it will lock the size to a particular device size.

Changing "Device" Type

While in Dev Tools, with the Device Toolbar active, you should see an option to toggle between:

• Desktop
• Desktop (Touch)
• Mobile
• Mobile (No Touch)

It’s recommended to test the website in both Desktop and also Mobile modes.

This is because many themes and plugins will change their behavior based on if it detects a mobile device compared to a desktop device. When toggling between device types, it’s best to refresh the page to ensure the page fully loads under that method.

Don’t confuse these device types (modes) with screen widths. 

They are not the same thing. A “Mobile” device doesn’t automatically equal a smaller screen size. You can easily have a “Mobile” device type at widths beyond 980px (e.g., iPad Pro is a mobile device that goes up to 1366px wide). 

Just the same, a desktop user could easily (and should easily be able to) browse a website on their PC at sizes smaller than 767px wide.

In most cases, testing exclusively in Desktop mode should be fine, but for any unusual custom websites, testing in Mobile mode should help ensure responsiveness and usability.