A responsive web design automatically adjusts for different-sized screens and viewports. With a responsive website, someone can browse your website from any device and it will still look and function perfectly. People spend, on average, 3.3 hours a day engaging with digital media on their smartphones. Because of this shift in consumer behavior, it’s no longer enough to have a website that only works from a desktop computer.
Responsive web design is a website design that adjusts to fit on desktop, laptop, tablet, and smartphone devices. If you have ever pulled up a website on your smartphone and it was a very tiny version of what you would see on your desktop, and you had to zoom in to see the content, then the site was not mobile responsive. A responsive website automatically adapts its layout to fit the screen of the device it is being displayed on. There are 4 common screen sizes that responsive design is aimed at. They are widescreen desktop monitor, laptop, tablet, and mobile phone. As a screen gets smaller, the content and layout of a website modifies so the user can have the best experience possible.
How Responsive Websites Work
A typical website is comprised of a set of files (each web page—home page, about page, etc.—is an individual file). Each file contains HTML code and content (text and images). Web pages are styled with files called Cascading Style Sheets (CSS). For ease of explanation, let’s say that a standard (non-responsive) website has a set of files and a few CSS files that govern the look of the site. A responsive website applies an alternate set of CSS files depending on the device being used to access the site. The site looks and ‘responds’ differently based on the device.
For example, while someone viewing the site from a desktop device sees a horizontally aligned navigation menu, someone viewing the site from a mobile device gets a vertically aligned navigation menu with larger text that is easier to read on a smaller screen.