Responsive Web Design: Design Theory's Experimental Frontier

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.

Responsive web design at its highest craft is about flexing within specified constraints then having alternative plans when those constraints are violated. How narrow can the browser window get before a column is dropped? How small can the logo go? How wide can a line of text be? All these decisions made by the responsive web designer and codified in CSS and JavaScript provide a living source of data for new understandings in layout and proportion.

Web designers are pragmatic people and don't like doing things twice. So as the body of aesthetic approaches in responsive web design grows many of these heuristics are becoming encoded into behaviours in JavaScript frameworks that are freely shared. Here, JavaScript and CSS code provide good documentation of the ratios and formulas at work. So while web designers pragmatically solve the problems of non-constant screen sizes, their experimentation leads to a new way to look at layout, proportion and hierarchy and this will lead to a greater understanding of mathematics of layout aesthetics.