Role of Responsive Web Design in Web Designing

Responsive web design is an approach to develop websites with flexible and fluid layout, to provide maximized viewing experience. With the introduction of wide range of smart phones and tablets, responsive web designing came in to picture that empowered the website layouts to be implemented almost on any type of screen.

Prior to the introduction of responsive web designing, a website that has been developed used for two different formats, one is for desktops and other for the mobile devices. Even then, it failed to satisfy the mobile device users, due to the variation of screen sizes. Post introduction of responsive web designing, development and maintenance of two different versions of a website got extinct, while single version has been developed that is fully flexible for all kind of browsers, devices and screen sizes.

Responsive web design is based on three basic technical features:

  • Media concerns and media query listeners
  • Flexible grid based templates that use relative sizes
  • Flexible images and media

Media Queries

When it comes to responsive web designing, the first and most important thing that tickles over mind is media queries. Thanks to W3C for the introduction of media queries. Have a look at  few examples how media queries work.

—————————————————————————————————

media=”screen and (max-device-width: 480px)”

href=”demo.css” />

—————————————————————————————————

In the above linked style sheet the two important things are media type and actual query. The media type defines the target on with the query to execute. The actual media query is enclosed in the parentheses, containing a particular media feature “max-device-width” to inspect, followed by the target value “480px”. In other words we are asking the device, if its horizontal resolution is equal to or less than “480px”. If the device passes this query “demo.css” will be loaded, otherwise the link is ignored.

In the same way, the media queries can also be included with in the CSS shown as follows

—————————————————————————————————

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

.column {

float: none;

}

}

—————————————————————————————————

And also media Queries can be defined as a part of import directive.

—————————————————————————————————

@import url(“demo.css”) screen and (max-

device-width: 480px);

—————————————————————————————————

We use these queries based upon our requirement even though the effect is the same for each case defined above.

Flexible grid based layout

Flexible grid layout is the layout of a webpage that should be defined in a relative manner that means we have to define the properties in a way such that the webpage responds to different devices. For example if we are defining width property for a container we can define it with px, % and em.

—————————————————————————————————

#container {

Width: 900px;

}

—————————————————————————————————

In the above example we are defining the containers width as (900px) pixels, this is traditionally non-responsive. As the width is fixed to 900px, it looks good in a PC and all large screen devices above 900px. Now when we take a look at the same thing in a mobile screen whose size is around 320px, the layout would not be read well.

—————————————————————————————————

#container {

Width: 90%;

}

—————————————————————————————————

If we set a relative value as ‘width’ in the above example, this container will fit in to all devices of different screen sizes. This container will respond to the respective screen and take is 90% of the screen size respectively.

Flexible images and media

Usually when we add an image on a web page, we are going to define its dimension according to the container in which it has been placed. Unfortunately, the image size is fixed and inflexible. For the desktop and the large screen size devices, the images size appears perfect. Let’s take a simple example where the images size is larger than its container, this will affect the whole layout.

Now to keep this image in control, we define the maximum width property.

—————————————————————————————————

img {

max-width: 100%;

}

—————————————————————————————————

This one line of code will prevent the image from overflowing the container. And also, we are defining the width property in percentage, now if the container size changes the images resizes itself according to the container size.