What is Responsive Web Design
Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)
There is also adaptive web design concept and we should NOT confuse that with RWD
Here is a nice article which talks about both.
http://www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/
- RWD is more of css responding to various window sizes
- AWD is more of responding to targets user agents (detecting user agent and applying rules specified by server to the target)
A very important concept to know before we jump into RWD is the concept of user-agent in the browser.
What is user agent?
When you visit a webpage, your browser sends the user-agent string to the server hosting the site that you are visiting. This string indicates which browser engine you’re using, its version number, and details about your system, such as operating system and version. The web server can use this information to provide content that is tailored for your specific browser.
An example user-agent string looks like this:
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Now that we know what a user agent is , let’s move on…….
From a Developer’s perspective
- Are guidelines and requirements defined for web app to send content to the client based on the user-agent strings (headers and tokens?)
- Where is the logic defined to process user-agent strings? (web server, client side js, server side etc) and WHAT is the logic ?
- Based on user agent string (i.e. once the server identifies which browser, which platform and ultimately identifies the form factor), what do we do with web elements that do NOT fit the size of the screen. Do we hide them OR do we give the user an alternative experience ?
- What is the set of parameters that differentiates one user agent from another ? And how is it handled in the code.
From a Tester’s perspective
- How can I test RWD in an application?
- It is important to identify if the simulators/emulators replicate the user-agent behavior, because ultimately the application responds to user-agent strings that the emulator emulates.
- Resizing the browser and testing the web app is an option (for different combinations of width/height) , however that DOES NOT give us an assurance that we have validated RWD completely.
How to find user agent ?
The easiest way is to hit this link – http://whatsmyuseragent.com/
List of all user-agents
http://www.useragentstring.com/pages/Browserlist/
Why do I have to worry about this stuff?
Well, because responsive web test automation is not only important, but also critical these days. Only once we know this background, we will appreciate the settings on browsers that we would change as part of automation scripts.
The two main settings that I would like to focus for responsive web design is “user-agent” and window “(width,height)“
The assumption we make in this section is that there is logic built by the web application to make itself responsive in the browser. We are validating whether that behavior is as expected through test Automation.
Read the next two posts which will complete the story – Resize Windows & User-agent