Many CSS developers and web designers are actually able to build responsive web sites without knowing the true meaning of this word when applied to web development. In this article I'll try to address the most frequently asked questions regarding the term responsive.
Q: Is responsive design a brand new feature?
A: No. Responsive designs existed several years before this word became popular. There were a small group of developers who were crazy enough to experiment new kinds of CSS layouts built with ems and percentages. There were also other people who applied this concept to images and multimedia files. If you take a look to the CSS Discuss archives, you'll find a lot of pioneering tests on responsive designs. The year was 2004.
Q: Does responsive design apply only to mobile devices?
A: Responsive design applies to all platforms and devices. The main goal of the W3C is to make the web accessible to everyone. In that vein, responsive also means accessible.
Q: Does responsive design hinge on CSS Media Queries?
A: CSS Media Queries are only a part of responsive design. The main part is made up of a scalable handling of fonts, spacing, widths, heights and all other aspects related to the CSS box model. Media Queries tailor only particular needs. In the past, when Media Queries were not available, there were stunning examples of responsive web sites that degraded gracefully even in those primitive mobile browsers.
Q: What do you mean with "graceful degradation"?
A: There are modern and obsolete browsers. A key point is to keep the relevant content of a website accessible to obsolete browsers. It doesn't matter if a browser doesn't render CSS rounded corners or box shadows: the important thing is that a user can still access the content.
Q: Are CSS frameworks important for responsive design?
A: CSS frameworks are smart tools that you can use when you want to improve your productivity and speed up the development process of a website. This doesn't mean that without a framework you're helpless. If you know well CSS, you can deploy your own techniques and even build your own framework.
Q: What do they mean with "scalable images and media"?
A: CSS allows only two states for each containing block: unconstrained and constrained. The former means that an element has no stated dimensions, while the latter means that the element has at least one stated dimension.
Images and media are scalable if they fit the dimensions of their containing block. Consider the following:
#container {
width: 30em;
}
#container img,
#container object {
display: block;
max-width: 100%;
}
By using max-width: 100% you're telling the browser that it doesn't matter what are the intrinsic dimensions of child images or objects: they will be always as wide as their containing block, because the maximum width they can get is 100%.
