Responsive Web Design and how to test RWD Online

The idea of Responsive Web Design was coined by Ethan Marcotte which implies that our web site should adjust its layout and design to fit in any device that chooses to display it. This RWD concept freed us from building separate design for mobile and desktops screens , the same design is served to all the devices including desktops, mobiles, tablets, e-readers and even gaming consoles. Using RWD technique the layout magically adapts all the devices based on the screen resolutions. The website makes use of fluid grid, fluid images and media queries etc which enable the application to automatically adjust itself according to the devices.

As the information world is now accessible everywhere and on many devices, we can't build the web design for all the devices separately, so its obvious that most of the websites today are RWD enabled. Now there must be some mechanism to test these RWD enable application, we will discuss some of them here in this article. Yes its true that nothing replaces than checking your application on the actual device but for designers and testers, some creative developers have made some online applications to get quick quick peek of the layout with various resolutions on your computer. As it is very tedious to change the browser resolutions manually and check the layout every time so these tools can be very effectively used to test the layout with ease.

There are many applications available online to test if the web design of the AUT is rendering fine on its targeted devices. Some of the applications which I found to be useful while doing Responsive Web Design testing are as follows :

• http://responsinator.com/
• http://quirktools.com/screenfly/
• http://responsive.is
• http://responsivepx.com/

All of the above applications are very easy to use where we just need to give the URL of the web site whose design we want to test on different devices with different resolutions.

http://responsinator.com/ : Features

- Nearly effortless, just paste in a link and scroll
- Lots of different device previews
- Nice visual representation that clients will understand
- Software UI dimensions are clearly accounted for

http://responsinator.com/ : Limitations

- Has to load several instances of each site
- No way to explore sizes that are not listed

http://quirktools.com/screenfly/ : Features
- Different sections are separated as Desktop, mobile, tablet and television
- Easy to use
- Allows scrolling under the display

http://quirktools.com/screenfly/ : Limitations
- Limited options are available
- There is no way we can add our own resolutions

http://responsive.is : Features
- Clean, minimal interface that focuses on the content
- Only one instance of the test site is loaded
- No need to scroll, simply click on an icon to change the viewport
- Built in testing options

http://responsive.is : Limitations
- You’re limited to six generic viewports
- No specific dimensions listed
- May be trickier for clients to figure out than The Responsinator

http://responsivepx.com/ : Features

- You decide the preview dimensions
- Perfect for finding breakpoints
- Remote and local testing
- Easy to share specific test cases

http://responsivepx.com/ : Limitations
- Mostly for developers, use a different option for clients
- The toolbar UI could use some work

Now depending on our need, we can go for any of the above application to test our RWD enabled AUT to check if the layout and design are rendering fine on all devices with different resolutions.

Reference : http://designshack.net

Hope this helps !

Regards, S.K Srivastava