Responsive Design is a method of web design and development constructed so that all of the content, images and structure of the site remains the same but rearranges itself depending on the type of device it is being seen through. 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.
“The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.”
Think about the wide variety of devices that can access the website these days. It could be seen from desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen. As designers, we have to develop our websites so that they can to be elegantly viewed from any possible device.
You’ve probably seen a traditional “fixed” website from your smart phone or tablet. You can tell because you have to zoom in to read text then zoom out to see where you are. It’s a very poor experience for your visitor. Elements might be hidden from view or look distorted. The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.
However, if a site uses responsive design, the tablet version will automatically adjust to display just two columns, so the content is readable and easy to navigate. On a smartphone, the content would appear as a single column stacked vertically. Images will resize to take up the space they are contained in.