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.
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:
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:
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
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.
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.
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
- Open the Console in DevTools (Ctrl + Shift + J)
- Execute the following code in the console: while (sessionStorage.length) sessionStorage.removeItem(sessionStorage.key(0));
- 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.
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.
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.
You may then proceed to test your Websites.
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.