Bottom-up web design is an approach to the design process. It is diametrically opposed to a top-down approach, but the two can be — and usually are — used in some combination. They differ in the scale at which the design process originates: bottom-up designs begin at the scale of the individual; top-down designs begin at the scale of the whole. And while there are certainly circumstances in which a primarily top-down design process is best suited to the problem at hand, I argue in this essay that a properly executed bottom-up design process leads to design solutions that are more authentic and representative of their content.
Top-down designs begin with a “big idea”, a concept of the whole that drives the rest of the process and which individual design components must conform to. Further, this idea is often abstract and can be applied to a variety of design problems. One of the most prominent top-down web design concepts is the grid-based layout. Grids Are Good [PDF], a presentation by Khoi Vinh and Mark Boulton in 2007, presents this concept quite clearly1. The justification for the grid arises from the designer's will to order — “The grid is the most vivid manifestation of the will to order in graphic design” — and the rationality it entails. This concept is intended to evoke a most fundamental nature; the design's essence, if you will. Indeed, a motivation of the grid's usage is “deriving beauty from the innate qualities of the browser”.
I do not disagree with the desire for rationality in the design process or that one should derive designs from the most fundamental nature and qualities of the web. I wholeheartedly support those statements. But I do strongly disagree with the assumption that the fundamental nature and qualities of the web arise from the top-down — from the browser and the whole — and that they are eternally capable of a generality that covers a wide spectrum of design problems. This generality ensures that the individual and specific design components — and the materiality of the web — are reduced to inert receptacles incapable of providing their own form, structure and qualities.
This macro-reductionism is not a new idea. Much of Western philosophy has historically been concerned with the fundamental resources that give rise to the properties and qualities of the individual: Creationism, Aristotelean essences and Platonic heavens all seem to follow this path. Yet recent scientific discoveries — non-equilibrium thermodynamics, population and evolutionary theory, and topology, to name a few — have inspired new directions of philosophy. In particular, the work of Gilles Deleuze and later Manuel DeLanda synthesize these new understandings to develop a neo-materialist philosophy in which the properties and qualities at any level are not endowed by a higher authority, but are immanent resources that emerge from the bottom-up.
Perhaps the most simple examples of these immanent resources from the physical world are the endogenously generated stable states of matter. The spherical form of the soap bubble, for instance, is not given from an external resource — from an essential “soap-bubbliness” or a Platonic sphere — but emerges from the collective action of the individual molecules as they reach a point of minimal energy. Further, this point of minimal energy in the state space of the soap molecules does not represent the spherical form of the soap bubble in the same way that an eternal essence might, as that single point of minimal energy can and does actualize itself in many different forms and ways. The point of minimal energy of a salt crystal, for instance, actualizes itself instead in a cubic form. Regardless, the central idea is that the property and qualities of entities are immanent and require no external resources to exist.
Architects are now beginning to study these new developments. Materials that used to be selected for their ability to act as inert receptacles — concrete and clay could be carved and molded in to perfect geometric forms and plant and animal motifs and other divine essences — are giving way to materials that possess qualitatively rich latent properties and qualities. Further, these materials are bound together in parametric component relationships that give rise to emergent and qualitatively novel wholes. This movement is still quite young, but its momentum only appears to be building. Is there a path for bottom-up design processes and a neo-materialist philosophy in web design?
There is, and it begins with the materiality of the web. A bottom-up design process needs to begin with a rich material palette. While architects may be concerned with the qualitative nature of their building materials and their ability to form structure and enclosure and to induce movement and define space, web designers must be concerned with a materiality that can communicate content, relationships among elements of content and the purpose of the content itself. This is precisely what HTML is best at. Let me illustrate this with a rather extreme comparison:
<p>Apple <a href="/banana">Banana</a> <a href="/carrot">Carrot</a></p> <p>Apple</p> <p>An apple is the pomaceous fruit of the apple tree, ...</p> ...
This preceding segment of HTML provides little meaning; its individual components of content contain little richness and variability and the relationships between them are weak, at best. Compare that to the following:
<nav> <ul> <li><strong>Apple</strong> <li><a href="/banana">Banana</a> <li><a href="/carrot">Carrot</a> </ul> </nav> <section> <header> <h1>Apple</h1> </header> <p>An apple is the pomaceous fruit of the apple tree, ...</p> ... </section>
The content displayed — ignoring all HTML tags — is the exact same. Yet the individual components of this document express more meaning and richness. And when they interact, as the items of the navigation list do, additional relationships and meaning emerge — the navigation list itself should be thought of as an individual component, only at a larger scale than its child members.
Yet for all of the richness that HTML can express, it is still quite limited.
Not only is it limited in kind — there are only so many elements to select from
in the current HTML specifications — it is also limited in degree. In the above
navigation list, “Apple” carries a different and stronger meaning
because it is contained within a
strong element while its sibling
list items are contained within
a elements. Yet it would be
difficult for that same “Apple” component to express significantly
more strength, or slightly less, or a different feeling of strength. HTML lacks
much of the qualitative capabilities of physical materials. Thankfully, the
web's materiality also involves the use of Cascading Style Sheets.
CSS greatly increases the richness and qualitative expressivity of the web's materiality by allowing designers to visually style HTML elements in near infinite ways. In line with bottom-up design processes and a neo-materialist philosophy, the purpose of CSS should be to enhance, enrich and communicate the meaning and relationships already immanent in the content.
The genesis of those meanings and relationships is entirely dependent on the design problem and the purpose of the web site. But what is important is that those meanings are relationships are primary and accurately represented in HTML2 and that the CSS applied enhances and enriches them. If done well, this process leads to a design solution that authentically represents the design intents of the content; and, quite possibly, to a visual design of the whole that is more than the sum of its parts, perhaps one not even possible with a rigorous top-down approach.
I selected this presentation of top-down design simply because of the authors' credibility and the enormous amount of respect so many designers (myself included) have for them. There are many other examples that could have been used.
This is not to say that top-down web designers cannot or do not produce properly formatted and accessible HTML documents — they surely can and many do — rather, the point is that in a bottom-up web design process such a document is an active and driving component in the design and not merely a necessary final requirement of a separate visual design process.