The Main Components of a Responsive Website
The term “responsive website design” was coined by Ethan Marcotte in an article published on A List Apart in 2010. Marcotte defines three foundational elements that create a responsive website: media queries, flexible images, and fluid grids. Here’s a breakdown of each.
Media Queries
A media query is a feature of CSS 3 that allows displaying web content according to screen size, orientation, and resolution. It checks the screen’s width before rendering the content to make sure the latter is appropriate for the screen. For example, if the screen layout is small, certain blocks can be rearranged to adapt the design to the display.
Media queries have two components: media type (phone, tablet, TV, etc.) and media feature (screen orientation, min-width, max-width).
Flexible Images
Flexible visuals are another key feature of a responsive design. They’re achieved by the use of responsive containers that automatically resize based on screen dimensions, scaling the image as well. When the max-width of an image is set to 100%, the percentage decreases as the website layout shrinks, thus scaling down the image. This also prevents the image from growing too large on extra broad displays and becoming pixelated as a result.
Fluid Grids
Following the same principle of adopting percentage values instead of fixed pixels, fluid grids adjust web content in proportion to the browser window. It’s because of fluid grids that horizontally lined up columns can be stacked vertically when the user switches from a wider to a narrower screen. This is just one simple example of rearranging components; there are many other ways of working with flexible grids.
