The Official Weblog for Restive Labs

A Better Way to Test Responsive Websites

  Obinwanne Hill        February 1st 2014
A Better Way to Test Responsive Websites

Building Responsive Websites has now become a critical skill that every Web designer must know and master. Restive.JS helps to make this process a lot easier by significantly streamlining your workflow [by enabling you define all Responsive CSS markup inline with your original markup] and providing you with a robust arsenal of methods that help you do more if the need arises. It’s definitely a different experience to using Media Queries.

When we launched the Restive.JS Website, we got admonished by a few people who wondered why a Plugin that claims to help Web designers make their website Responsive would not have a Responsive website. I can only speculate, but I’m almost certain that this incorrect conclusion was reached via the ‘browser window resize’ test, where the tester simply resizes a browser window from a high-width to a low-width and examines how the website adjusts to these dimensional changes.

This test is very unreliable and not a definitive way of testing how Responsive a website is or isn’t. For one, if a website uses Media Queries, and is using device-width instead of width for qualifying breakpoints, that window resize test isn’t going to work. In this blog post, I want to go over a much better, more professional way of testing Responsive Websites using just a regular Web browser.

Getting Started

First of all, you need to Download and Install Chrome. Even if Chrome isn’t your default browser, you’ll find it extremely useful for testing Responsive Websites (and doing a whole lot of other useful stuff like Remote Debugging).

After you install Chrome, you’ll also need to install the following extensions:

  1. Mobile RWD Tester
  2. User Agent Switcher

Installing Chrome Extensions is pretty easy, and you should be done in a few clicks.

Note: You may need to have a Google Account to install Chrome Extensions

Testing a Responsive Web Site

When testing Responsive Websites with Chrome you have two options:

Option 1: The Built-in Emulator in the Chrome browser

Option 2: Third-party Extensions, specifically the Mobile RWD Tester and User Agent Switcher

We’ll go through how to use both options to test Responsive Websites.

Testing with native Chrome emulator

The Mobile Emulator in the Chrome Browser is housed inside DevTools. You can open DevTools using either one of the following methods:

  • Select the Chrome menu at the top-right of your browser window, then select Tools > Developer tools;
  • Enter keyboard shortcuts Ctrl + Shift + I using;
  • Right-click on any page element and select Inspect element.

When DevTools window is open, you need to make sure that mobile emulation is active via the DevTools settings:

DevTools Mobile Emulator Activation

Once you confirm this, you can now start testing Mobile Websites

Step 1: Open the DevTools console drawer by hitting the Esc key, or by clicking the drawer icon on the DevTools toolbar

DevTools Console Drawer

Step 2: If you look at the bottom of the DevTools window, you will see a panel containing multiple tabs i.e. Console, Search, Emulation, etc. Click on the Emulation tab and you will see what you have below.

DevTools Mobile Emulator Panel

Step 3: Click on the Emulate button to activate Mobile Emulation. You will notice that the viewable area is now much smaller, similar to what a mobile device would be.

DevTools Mobile Emulator Browser

Note: You may need to reload the page after clicking the Emulate button.

Please note that if you had a web page active before you executed the steps above, and the web page you are testing is built using Restive.JS, you will need to reset sessionStorage prior to reloading the web page. The reason you need to do this is because Restive.JS uses sessionStorage as a caching mechanism to store some important information when a page is loaded.

As a result, if you already loaded the web page, these critical data items would already have been set and will not be reloaded again on subsequent refreshes, so you have to reset sessionStorage.

To do this, simply follow the steps below

  1. Open the Console in DevTools (Ctrl + Shift + J)
  2. Execute the following code in the console: while (sessionStorage.length) sessionStorage.removeItem(sessionStorage.key(0));
  3. Reload the page

You can also avoid this entirely by setting up DevTools for Emulation prior to opening a web page i.e. open the web page you want to test only after you click the Emulate button (as highlighted in Step 3 above)

Testing with Mobile RWD Tester

This is actually my preferred method when testing Websites built using Restive.JS. Follow the steps below to get things going.

Step 1: Use the User Agent Switcher extension to select a Mobile User Agent. Simply click on the icon and then select one from the list. For example, you can select iPhone under iOS if you plan to use a Phone in the next step.

Set User Agent from User Agent Switcher

Step 2: Click on the Mobile RWD Tester icon to see a list of Device options. Simply enter the url of the Website you want to test, then click the link for the device you want to use.

Open Mobile RWD Tester Options

Note: Make sure that the device you select confirms with the user agent you specified in Step 1 e.g. select a Phone device if your user agent is for a Phone.

When you click on the selected device, a new window will popup; this window will be at the selected size of the device e.g. 320 by 480 pixel window for iPhone 4.

Mobile RWD Tester Emulator Window

You may then proceed to test your Websites.

Conclusion

Testing Mobile Websites is not really that complicated. All it requires is using the right methods to ensure that your Website will appear as intended on your desired Mobile device. If you’re using Restive.JS to build Websites, it’s essential that you use one of these methods highlighted in this post for testing because the good ol’ ‘browser resize’ test just won’t cut it when testing Responsiveness.

I would advise that if you’re one of those folks with the habit of using this test, you should desist from the practice immediately or as soon as possible [whichever comes first]. It is not a good test of determining if a Website is Responsive or not. Instead, please use a Mobile Emulator from now on to make such a determination. It’s not that difficult to do, plus it’s much more professional.

What is Restive?!

Restive Labs is a creator of software and services for helping Web designers, developers, and enthusiasts build Websites that are both Responsive and Fast.