As more people are using mobile devices, like smartphones and tablets, for tasks that used to be only possible on desktop computers, one thing has become clear: mobile browsing is taking over Internet traffic.
Responsive Web design became a hot trend in 2013 and has only continued to increase in importance since then. This is due to the explosive growth of smartphones and tablets and the fact that more people are using smaller-screen devices to view web pages.
In the not too distant past it was common to have one version of a website designed for desktop users and another version designed just for mobile users. Thankfully those days are gone because we live in the era of Responsive Design.
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.