There has been a great deal of discussion around the idea of designing web page “layouts from the content out”. In this article I want to begin by briefly looking at the phrase “web design”. I’ll go on to look at two different approaches to web design. I’ll also offer my interpretation of what designing “layouts from the content out” might mean.
Design as De-Sign
If, by the word de-sign, I can conceive of a process where something called “A” takes on a sign-ificance relative to something else called “B”, then the word design can be thought of as built upon a relationship between “A” and “B”. In this way two things can become connected, and an instance of communication can occur.
But, there are many different ways that things can relate to one another.
One way is to relate things semantically. For example, a child’s alphabet block can be semantically related to things such as a toy, a wooden cube, or a learning aid.
Another way is relate things visually. For example, the same alphabet block can be visually related to things such as a poppy seed (scalar relationship), or an egg (shape relationship).
So, for now I might think of the word de-sign as a verb which can be exchanged with the verb, to relate. When I use the phrase “designing a website” I can exchange this with the phrase “relating parts of a website”
HTML is the set of building blocks that deals with semantic relationships. As an HTML designer, the question that I would ask myself is: “What semantic relationships will I make in this site?” If my name was David Rosen I might ask myself how putting the words “Got Democracy?” on my Home page would semantically (and semiotically?) connect with the 1993 “Got Milk?” ad campaign.
CSS is the set of building blocks that deals with visual relationships. As an CSS designer, the question that I would ask myself is: “What visual relationships will I make in this site?” If I’m designing a website layout for a company called Sevenfold Organic Sunflower Seeds, then I might consider using CSS to set up visual ratios that are observed in sunflowers (perhaps a webpage that had the proportions of 1:1.618).
In the web design world semantics and visual presentation are artificially separated, but in reality they are inseparable. I can’t look at the content of a web page, and tune-out the visual shape of the letters that make up this content. Ignoring one or the other of these two design approaches can only result in dysfunctional layouts.
In my opinion, understanding the importance of the relationship between semantic design and visual design is more important than choosing between an outside-in process, or an inside-out process.
What Means “Layouts from the Content Out”?
The idea of designing “layouts from the content out” has been set in opposition to the idea of creating “layouts from a canvas in”. The “content out” idea seems to associate the word “content” with things like “text” or “images”. However, the promoter of the content-out idea does not explicitly state whether this text/image components are being related to one another semantically, visually or both.
Going back to our example — that is, to the phrase “a child’s alphabet block” — I can approach the four words of this phrase semantically or visually.
With a semantic approach I can imagine a web page layout where the four words of the phrase are used as self-sufficient points of departure for a series of fluid visual arrangements. As such the four words can be setup to flow, shrink and expand based on the characteristics of the devices, browsers, or even other HTML elements within which they’re being viewed. This self-sufficient cluster of words is designed to be independent of other words or images, and is related only to associations with other words in our language. It is not visually related to any specific layout.
With a visual approach I can imagine a web page layout where the four words of the phrase are used in deliberate, specific, non-fluid relationships. In this case:
- the shape of each part of a single letter is visually related to the shape of the whole letter
- the shape of each whole letter is visually related to the shapes of its neighboring letters, to form whole words
- the shape of each whole word is visually related to the shapes of its neighboring words to form single lines (a.k.a. measures) of text
- the shape of each measure of text is visually related to its neighboring measures to form the whole textural areas we call paragraphs
- the shape of each whole text area is visually related to any images, titles and or symbols that make up the whole layout
Of course, to get anyone to give some of their attention to this visual approach I would need to give it a snappy name. Perhaps calling it “Centrifugal Composition” would work — as distinguished from the outside-in, “Centripetal”, composition that takes place when a large shape is subdivided into smaller shapes.
Which Way to Go?
I believe that a semantic approach that ignores visual relationships is doomed to fail as a vehicle for good-quality human communications on the web (or in print).
On the other hand, the visual approach, taken separately from the semantics of a given website project, will fall into what many critics refer to as the “pretty pictures” syndrome.
A more holistic design process is one that carefully considers the relationship between the semantic and the visual. This process has a lot to offer to people that are truly interested in communicating via the web. It is based on the understanding that semantic content and visual form cannot live without one another.
One More Look at the “Content-Out” Idea
The argument is often made that the content-out approach is the only viable solution in a world where viewing devices are constructed to every imaginable size and pixel density.
To this, I say that I can either offer myself up as a slave to the device manufacturers, or voluntarily place myself in the service of human communication.
If, as a consumer, I decide to purchase all of Samsung Galaxy’s two dozen screen-size mobile devices, then I should be willing to accept that, for the most part, my communications with others will be deprived of any meaningful visual component. In this environment, the only way that I can think of for a web designer to develop stable and meaningful visual relationships is to make use of the centrifugal composition process. The result is not ideal, in that I’m left with a composition that’s detached from the perimeter of my viewing device. A floating composition.
If, instead, I was asked to agree to only have access to two standardized sizes of Samsung’s two dozen Galaxy products, then I would gladly accept this device restriction. I would know that our beloved web designers could take back the millennia-old practice of visual communications, that a visual composition could include the perimeter of the viewing device, and that the site for my future sunflower company would communicate with other people in a more comprehensive way.