Some questions to ponder while reading:
- How does our understanding of grids change if the page size is no longer fixed?
- How does our understanding of typographic layout change if column sizes are no longer fixed?
- How does our understanding of visual hierarchy change if layouts are no longer fixed?
Important advances in simplifying the understanding of aesthetic formalism have often come about by quantifying design in mathematical terms. From the Greek golden section, to Müller-Brockmann's grids, the photographer's rule of thirds, the typographic scale, W3C colour contrast algorithms and Donald Knuth's work in computer typesetting - these all distil aesthetic ideas into formulas.
Traditionally the output mediums were of limited fixed sizes and so a sensible designer could redesign for a different size without much needed to quantify layout in response to weird output sizes. A few general rules of thumb and a good sense of aesthetics was all that was necessary.
Things have changed; Websites are now displayed on a wide variety of devices with different screen sizes and proportions. It used to be that a designer would simply ignore anything but desktop or design a second site for mobile. For over fifteen years web designers have been able to largely ignore increasing desktop screen-resolution by fixing their designs at a certain size within the browser window - effectively ignoring the live resizing of browser windows. This meant no difficult decisions regarding text-line lengths and image sizes relative to column sizes because this could all be fixed at design time. But as the number of devices increase (and thus variety of screen size) many web designers are realising that they should design responsively.
The gateway drug for responsive web design is the flexible grid. Designers are forced to think in terms of ratios (expressed in percentages) instead of pixels. Further to this as the web browser window size is moved into previously nonsensical proportions, the responsive web designer is faced with unique challenges to preserve "design integrity". Solving these challenges via flexible grids, media queries, typographic hacks and even changes to the visual hierarchy are forcing designers to express these visual relationships in code.