Make your Website User Friendly - Learn Responsive Web Design (RWD)

Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. Let us learn something new about responsive web design.

What is Responsive Web Design?

-> RWD stands for Responsive Web Design.
-> RWD can deliver web pages in variable sizes and resolutions.
-> RWD is a must for tablets and mobile devices.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

In other words, Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

How does Responsive Web Design works?

An introduction to responsive webdesign is the future of websites. Nowadays RWD is used widely across the globe for reducing /saving money, improved SEO and better site performance. Unlike desktop alone websites, RWD adapts the layout to the viewing environment by using fluid, proportion based grids and flexible images.

The two main techniques which make up responsive web design are Fluid Layouts and Media Queries. Media queries are mostly used in the web design industry for responsive layouts. Rather than looking for a type of device they look at the capability of the device, and user can use them to check for all kinds of things. For example:

1. width and height (of the browser window)
2. device width and height
3. orientation – landscape or portrait mode
4. resolution

These are the commonly used media queries in the webdesign. These resolutions mentioned here are not fixed; it may vary according to website's requirement.

@media only screen and (min-device-width: 767px)  and (max-device-width: 1024px) {

/** media queries**/
}

@media only screen and (min-device-width: 600px)  and (max-device-width: 768px) {

/** media queries**/

}

@media only screen and (min-device-width: 480px)  and (max-device-width: 599px) {

/** media queries**/

}

@media only screen and (min-device-width: 320px)  and (max-device-width: 479px) {

/** media queries**/

}

Responsive Framework:

Earlier, the websites are made responsive by writing media queries for all elements. But recently many designers are started using responsive HTML framework for their projects. Some of its example are Bootstrap, Semantic, Foundation, HTML5 Boilerplate, HTML KickStart, Skeleton, 1140 grid system, 960 grid system, Less Framework and so on.


Source: w3cschools, wikipedia, smashing magazine, magicdust, hubspot