What is Responsive Website Design?

According to wikipedia, Responsive website design is an approach to website design that makes website pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.

Responsive website design makes your web page look good on all devices. Responsive website design uses only HTML and CSS.

Responsive Website design has become an important tool for anyone with a online presence. With the growth of smartphones, tablets and other mobile computing devices, more people are using smaller-screens to view website pages.

The reason of responsive design is to have one website, but with different elements that respond differently when viewed on devices of different screen sizes.

Let’s take an example of traditional “fixed” website. When viewed on a desktop, for instance, the website might show four columns. But when you view that same design on a smaller screen, it might force you to scroll horizontally, something which users don’t like. Or elements might be hidden from view or look disturbed. The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation or turned sideways for landscape view.

On a small smartphone screen, web pages can be even more challenging to see. Large images may “break” the layout. websites can be slow to load on mobiles if there graphics are heavy.

However, if a website uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically. Or possibly the user would have the ability to swipe over to view other columns. Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive website design, the website automatically adjusts based on the device the viewer sees it in.

How Does Responsive Website Design Work?

Responsive website design use fluid grids. All webpage elements are sized by percentage, rather than pixels. So if you have three columns, you wouldn’t say precisely how wide each should be, but rather how wide they should be in similarity to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for example.

Media such as images is also resized accordingly. That way an image can stay within its column or relative design element.