Testing of Responsive Designs for Mobile Applications

Responsive web design is the approach which suggests that the design and development should respond to the users’ behavior and environment based on the screen size, platform and orientation etc.

Nowadays, almost every new client wants a mobile version of his/her website. It’s practically essential after all; one design for the iPhone, the other for BlackBerry and the iPad, netbook, Kindle etc — and all screen resolutions must be compatible, too. It is quite possible that in the next five years, we’ll be designing for a number of new and additional inventions as well. When will the madness come to a halt? It won’t, of course.

For testing the responsive designs we can use different tools or we can test them on real devices directly. But testing of responsive designs on mobiles could be very expensive as one cannot afford to purchase Blackberry, iPhone and Android phones at the same time. There are some simulators of these devices available. The one I have used is the Opera Mobile Emulator, it has the simulation of nearly all the famous mobiles of all screen resolutions like iPhone, iPad, Samsung Galaxy etc.

The main errors that occur during testing of web applications on mobile devices are the alignment issues. The errors that I have encountered were mostly like the text appears outside the boundary of its text box and gets merged with the content of other text box. Mostly the logo size and font size of text was also of the same size as for the large computer screen. The buttons were scattered randomly on the screen. Margin of the form input fields was also disturbed which caused alignment issues on the screen. The graphic animation sizes on the screen have also caused various issues.

So the tester has to focus on identifying such errors and mistakes which deviates the site from its specified designs. The proper documentations of designs would be very helpful during testing of responsive designs for mobile apps as per the clients’ requirements.

The designs of the websites should be flexible enough so that the developers may design CSS in such a way that the design responds to almost all resolutions. To make the designs flexible, following techniques in writing the CSS of the responsive site may be helpful for the developers.

• To set the size of an image the developers should write its minimum and maximum values like this:“.Img{height:500px; max-height:25%;}”. The minimum and maximum values should be in percentage to make the image adjustable according to the screen size.

• Relative values could be used so that the content size in relative to each other may appear. For relative values we declare the size in em or %. For example we can declare the relative font size, padding and margin values.

• Overflow property can be used to make the text align automatically e.g. if we assign the overflow property like this: “.text{overflow:auto;}”  then a scroll bar will be added to the text box to help view the rest of the content if the overflow is clipped.

• The word-wrap property allows long words to be able to be broken and wrap onto the next line e.g. “word-wrap:break-word;”

Few other tools for testing responsive designs are as follows:

Aptus
Aptus is a Mac App for testing your adaptive, responsive or mobile site at custom screen sizes.

RWD Bookmarklet
There are a number of bookmarklets out there that allow you to test responsive designs. It is quite easy to view your design at iPhone and iPad sizes, in both portrait and landscape orientation. There is also a button to toggle the on screen keyboard, so that you may optimize your forms for your iOS devices.

The Responsinator
This tool is a standalone website. It basically performs a simple task i.e. it displays your site inside the frames of popular tablets and smart phones.