What is Responsive Web Design?
Responsive Web design is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
Responsive Web design has become one of the hottest trends in 2013. This is due in part to the growth of smartphones and other mobile devices. More people are using smaller-screen devices to view Web pages.
The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.
How Does Responsive Web Design Work?
Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels.
So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation 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 instance.
Media such as images is also resized relatively. That way an image can stay within its column or relative design element.
What is responsive design?
A responsive design simply means a website that has been constructed so that all of the content, images and structure of the site remains the same on any device. For example, when a user accesses a site on their desktop, they are getting the full view of the site. But when that same user goes to visit the site from their smartphone or tablet, the site will retract to fit on the smaller screen.
In other words, with a responsive website design, you don't have to have worry about having different websites for various devices or making sure that your site runs properly on a mobile device.
But there are some other really important reasons why you should make the switch to responsive design for your website.
Video Tutorial
