Aneesh Writings: July 2014

In the previous blog we have scene how to design it and about the working of RWD.

Here I am going to share, how to test a web site under Responsive design Testing? RWD plays a vital role while testing a website. We need to ensure that the website is fit and comfortable with any devices whether it’s a smart phone or ipad or iphone or tablets etc.

Am going share three types we can check this RWD,

1. If you are using the Google Chrome browser

STEP 1: you can get the app from the Chrome store by searching Resposive web design testing

STEP 2: Click on it

STEP 3: Add it to your chrome

STEP 4: open the website you are going to test

STEP 5: now right click, you could see responsive wed design Tester

STEP 6: now you can choose the options to test your site.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2. You can also test a website online

http://mattkersley.com/responsive/

You can choose the option width only or device sizes.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3. Manually you are going to test this RWD in various devices like mobile, ipad, tablets etc.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

You may have a question here this third type is going to a real time testing then why the last type. Since all may not have all these various devices with us immediately when we test so, at that moment the online testing is going to be really useful for the testers.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

What is RWD?

It 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.

Resizing – Alter the size of the image either small or big

Panning – moves the location of the picture where some part is only visible

Scrolling – to move up or down to know the information

Literally, the rwd concept is used to make all the devices compatible and auto adjust according to the resolution of the device.

How it is possible or what is the method to deploy the RWD concept?

A site designed with RWD with adapts the layout using Fluid grid, Flexible images, Media Queries and Server-side.

Fluid Grid – It helps to size the page element using Percentage not by pixels or points

Flexible Images – also sized in relative units, to prevent them from displaying outside their containing element

Media Queries – allow page to use different CSS style based on the characteristics of the device – most commonly the width of the browser

Server-Side – helps to produce faster-loading sites for access over cellular networks and also deliver rich functionality or Usability

How to add it to the CSS?

@media screen and (max-width :590px) {

\\code

img

{

width: 100%

}

What happens?

The image will automatically adjust the screen resolution and resizable image. This will automatically happens in all the resolution or devices.

The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored.

The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

A very simple example for RWD concept with the CSS- Media Queries as follows,

1. HTML

<div id="sidebar-left">
<h2>A Left Sidebar</h2>

</div>

<div id="sidebar-right">
<h2>A Right Sidebar</h2>
</div>
</body>
</html>

2. CSS

@media screen and (max-width:590px){
#content{
width: 100%;
}

#sidebar-left{
    width: 70%;
    float: left;
    margin-right: 3%;
    background: blue;
}

#sidebar-right{
width: 30%;
float: left;

background: green;

}
img {
width: 100%;
}
}

Aneesh Writings

Saturday, 5 July 2014

How to test RWD ?

Responsive Web Design (RWD)