Responsive web design is an approach to building websites that enables a single website to provide a good viewing and navigation experience on all types of devices, from desktops and laptops to tablet computers and smartphones.
Smartphones and tablets are a way of life, and too many websites are still very difficult to use on these devices, especially on smartphones. A lot of websites display on smartphones merely as shrunken down versions of the original, with text that is frustratingly tiny, and menus that are very hard to use. Those websites require a great deal of pinching and zooming in order to read them, and in general are aggravating to use. They also tend to load very slowly, which is a huge problem given that smartphone users are often using slow cellular connections to begin with. Responsive web design solves these problems.
Mobile-Friendly Fluid Layouts
Responsive websites are built on what are called “fluid grids”. These are basically layouts that will adapt to the size of the browser. A responsive site may display as 4 columns wide on a big desktop, but adjust to be only a single column on a mobile phone, with content rearranged to display vertically down the page. On a tablet computer, the same site might be rendered in 2 or 3 columns.
Faster Load Time
Another problem that is solved via responsive web design is that of load time. Because smartphones are smaller than desktops anyway, we can serve much smaller versions of the website images to smartphones. Since images are a common culprit of slow load time, by sending much smaller images to smartphones, we can speed up the load time considerably. In some cases, it makes sense to exclude certain images from displaying on smartphones. With less screen real estate, a reduced number of images leaves more room for displaying text.
To get a sense of how a responsive website adapts to screen size, you can try shrinking your browser window on this website. Because the Treetop site is built responsively, you will notice the layout rearrange itself as you make the browser smaller.
