The Responsive Grid: Step 2 -
In Step 1, we worked on the principles that
- the content would be fluid and reflow to fill the given space and
- When we got to certain trip points, media queries would kick in to revise the rules to be more responsive to the viewport.
One of the criticisms of this approach is that it sometimes results in images being downloaded that are never displayed, thus creating an unnecessary download overhead. On this page, we have taken an approach that does not have the browser download images if the browser is in the smaller end of the scale. The serving of variable images at different viewports is one of the debates that is ongoing concerning responsive design. There are several approaches to serving alternate images for different viewport sizes, but they involve scripting that we have not yet addressed in these lessons.