What is Responsive Web Design (RWD)?

Responsive web designs (RWD)

People using smart-phone, tablets and notebooks are increasing every year. Users are viewing your website from devices of different screen sizes so; designing your site for widescreen computers is not enough. You should develop your site which is also optimised for smart-phones and tablets. This issue can be addressed by working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.

But if the production of such devices continues at the same speed as we have seen in past decade then, the amount of screen resolutions and formats which designers will have to work with is going to become unbearable. In this article we will see how we can tackle this problem using responsive web design.

What is responsive web design?

Responsive web design essentially indicates that a web site is developed to use W3C CSS3 media queries to adapt to the environment that it is being viewed in. As a result, smart-phone or tablet users will have a similar experience and see similar content to desktop users. But, this content is laid out in such a way that it is readable without having to zoom or do any kind of resizing. The websites are able to react to user’s actions (eg: window resizing) and detect the medium where it is being currently viewed and provide best possible experience to the user in terms of readability and navigability.

Designing responsive website requires a thoughtful process on the part of designers and developers, where they need to redistribute the elements according to the screen resolution, in order to guarantee best possible experience to the users in terms of navigability and readability, with proper utilization of several grid and layout systems, images and CSS media queries.

So, the three technical features which developer has to keep in mind while designing the web sites are:

• Flexible layouts
• Flexible images
• Media queries

The responsive web design is not simply resizing the font and images to fit to the format but, it requires a thoughtful process where designers and developers decide how to distribute the elements according to resolution.

When a new website layout is being considered, it is good practice to consider “Mobile First” and “Progressive Enhancement” designing strategies because browsers of basic mobile phones do not understand media queries. So, it is wise to create a basic web site then enhance it for smart phones and PCs — rather than attempting to degrade a complex, image-heavy site to work on the most basic mobile phones.

Let us see some of the main features which should be kept in mind while designing responsive websites in detail:

Flexible layouts:

First step while designing responsive web design is to create a flexible layout. As the browser with or screen resolution changes, fluid grids will resize and reposition the content. Before this concept became popular, users were using fixed width and centered content as most PCs used the same resolution. Now that we have so many different devices with different screen size, flexible layout is the best answer.

Flexible images:

The second component in responsive design is flexible images. In smaller screens, images are simply resized through width and height attributes. This will keep the data organized but not optimize the loading times. Another method is to use CSS’s overflow property for cropping images. You can also create images of different sizes and keep them on the server and then use the best fitting image depending on the resolution in which it is being displayed.

Media Queries:

The third element of the responsive web design is CSS media queries. A Media query is a CSS3 extension to media types that allows you far greater control over rendering across different devices. A media query consists of a media type and zero or more expressions that tests one or more features of a output device to which the CSS is to be applied. I have already written an article on media queries. You can refer the below link to get a detailed understanding of media queries.