When I first started making websites at the end of the 1990s, layout structures were table based. More often than not, all the sectioning up of screen real estate was done with percentages. For example, a left navigation column might be 20 percent whilst the main content area would be 80 percent. There weren't the vast differences in browser viewports we see today so these layouts worked and scaled well across the limited range of viewports. Nobody much cared that sentences looked a little different on one screen compared to another. However, as CSS-based designs took over, it enabled web-based designs to more closely mimic print. With that transition, for many (including myself), proportionally based layouts dwindled for many years in favor of their rigid, pixel-based counterparts.
Like all great designs and solutions, they come back around. The mini car, permed hair (I wish!), and flared jeans have all made their comebacks over the years. Now, it's time for proportional layouts to make a re-appearance.
In this chapter, we shall:
- Learn why proportional layouts are necessary for responsive design
- Convert pixel-based element widths to proportional percentages
- Convert pixel-based typography sizes to their em-based equivalent
- Understand how to find the context for any element
- Learn how to make images scale fluidly
- Learn how to serve different images to different screen sizes
- Understand how media queries can work with fluid images and layouts
- Create a responsive layout from scratch using a CSS grid system
As I mentioned, since the "table layout" days, I've had little call to use proportional layouts. Typically, I've been asked to code HTML and CSS that best matches a design composite that almost always measures 950-1000 pixels wide. If the layout was ever built with a proportional width (say, 90 percent), the complaints would have arrived quickly, "It looks different on my monitor". Web pages with fixed, pixel-based dimensions were the easiest way to match the fixed, pixel-based dimensions of the composite.
Even in more recent times, when using media queries to produce a tweaked version of a layout, specific to a certain popular device such as an iPad or iPhone (as we did in Chapter 2, Media Queries: Supporting Differing Viewports), the dimensions could still be pixel-based as the viewport was known. However, whilst many might enjoy the possibility of re-charging a client each time they need a site tweaked for today's newest gizmo, it's not exactly a future proof way of building web pages. As more and more varied viewports are being introduced, we need some way of provisioning for the unknown.