<         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         > <         >

HTMinimaListic Design, an analysis

November 2012

I'm taking the inspiration for my implementation of this minimalistic style from Paul Graham's website, re-interpreting it to make use of modern CSS design principles which this class focused on. [1] But the tables are gone, and things are laid out properly in their absence, and that's about all that the style requires so we may embark on our exploration of this style idea.

Beginnings

What better place to begin than the source of the style I used for this site, the very same Paul Graham's website linked above? The first thing I found noteworthy is that there's no seperate stylesheet, but that's not part of the design per se. So the next first thing I found noteworthy is how few things are changed explicitly, which correlates directly with how much use of default settings is used. The following is a comprehensive list of things Graham decided to set explicitly:

The font size is a "deprecated style of markup". Verdana, coincidentally, is the default font face used by my browser as well. Same goes for background color and font color: a pattern!

But finally we see a fundamental change to the link colors. I find the vlink color to be interesting because it lets links to data or pages you've already viewed blend in more to the text, so you will not be as distracted by information with which you are already familiar. If you look at the CSS file for this page, you can see that almost all of the style information there is for layout (odd, given what seems to be the preferred dichotomy of HTML for layout and CSS for style, but I digress) and most of the Style data there is to suppress default behavior; the only things which increase the page's entropy with respect to pure lack of decoration are the link color changes. We can thus conclude that a dominant motivating force in this "HTMinimaLism" style is the absence of unnecessary decoration.

Transitioning smoothly is difficult in this style

But what better place to get a list of defining and guiding characteristics for this style than the webpage which gave me the name for it?

So let's explore first how Graham's pages follow these mantras. If you can't agree that the page layout is simple, you probably won't agree with anything else I could say. The page is a textbook example of simplicity. It seems strange to me to include "not ugly" in the guiding characteristics, but certainly there could exist designs whose intent is to shock or jar in some way which attempt to harness the power of "ugly", so it could make sense to explicitly mention this requirement. As it's a bit subjective, you'll have to make your own judgment; to my eyes, there is no ugliness to be found in this page design. It is my opinion that the page can be forgiven for not originally having CSS font control - the style used by Graham appears to have been designed before the popularity of CSS. Certainly there are few colors used; the only places where the fonts deviate from black are hyperlinks, and on the original pages there is a dull-colored header image as well. We can see at this linked page that the presence of a colored box immediately draws attention, something which would be much more difficult on a more "noisy" page. By the definition of negative space, this page uses it judiciously. It could be said that, the design coming from an era with narrower screen resolutions, it has such a narrow main column to fit comfortably on a small screen, but even ignoring the right gutter there is still plenty of negative space utilization, in the spacing between paragraphs and other text elements and the left gutter all the way down the page past the nav-bar. HTML text is basically the only design element on the page. The specification of a liquid layout isn't really applicable to this page, as the sizes it uses for its elements are such that no reasonable viewing window sizes would require it to change.

Through the years

The design on Paul Graham's site comes from as early as 1993. The pages which are listed as examples of the HTMinimaLism style come from 1999-2001. 37signals has some newer pages, like their blog in 2012 which demonstrate a different take on the same motif. We can see that the 1999 and newer pages can all utilise a liquid layout, which is almost certainly due to its technological availability - the css tools to have a page automatically change as its viewing window changes started coming to wide recognition around 1999. We have already examined a style from 1993; let us now turn the clock forward 6 years.

37signals launched in 1999 with this style, where the most prominent feature is how clean and full of empty or negative space it is. A notable evolution is the liquid layout, where the text collapses under itslf as the page gets too narrow to hold it all. This is made possible by a an even bigger evolution in the form of CSS control, where style is contained in a Cascading Style Sheet rather than embedded directly in the HTML. The rest of the tenets of HTMinimaLism are largely unchanged. There is a single link decorated with color, a "start here" of sorts (literally a "Start Here"). The page is very simple, and not ugly, with the main design elements being text with some unobtrusive horizontal lines. We also see an evolution in layout, with a true multi-column approach. There are 3 columns in this layout, regardless of the dimensions of the page. However, this is still controlled by making use of tables for layout. Even in 2001, that was an acceptable and indeed standard practice; it's easy to do, too.

More modern, and still in use today, is John Gruber's website[2]. We immediately notice the background is not white; it is a uniform shade of gray, which I would consider 'undecorated'. All the text is a uniform white color. There are not really any other colors; the icon I am assuming is the 'fireball' uses a slightly different shade of gray so that it may exist on the page visibly without overtly drawing attention - a prime concern in our minimal style. The text is aligned somewhat off center, as it is in Paul Graham's site above, but once again in a more modern way: governed by CSS, not explicitly using a table for the layout, and being liquid at least to the point where the text's container divs would have to shrink. Apparently a horizontal scrollbar is more desirable than being able to fit the page's entire contents on a screen less than 40 em's wide. I would posit that the site designer, whether it be Gruber himself or not, has done significant work to ensure that their design decisions make for pleasant viewing on a very wide array of devices including mobile devices. Whether or not this approach to design is contrary to the Philosophy of Minimalism I will leave up to you, but I will submit that in my view minimalism doesn't make demands on the effort involved but rather on the form only of the output.

And we arrive at the present day, 2012, courtesy once again of 37signals, this time updated for the modern era. We see a similar commitment to negative space, little color (albeit some more color than we have had in the past), and a simple, non-ugly design. This design may be seen as a modernization of the minimal style, or it may be seen as a departure from it. But either way, it clearly evolved along the same lines we have explored here, and thus it is at least worthy of a mention here as a modern implementation of a style growing out of the Minimal style we began tracing from 1993, for a journey of nearly 20 years.

Recap

We have seen the idea of minimalism grow over time, an ironic turn of phrase. We have a set of guidelines to MinimaLize styles, and most importantly we have the knowledge that the guidelines should not restrict expression but rather expand it. 37signals has a very different minimal style now than it did in the years surrounding 2000, which was itself significantly different from Paul Graham's early-nineties example. Something important that is demonstrated through all the changes is that minimal styles retain their elegance and continue to make for pleasant viewing even after many years, in some cases nearly twenty! This in contrast to other 'trendy' styles which make hyperactive use of 'current' or 'modern' design elements that lose their luster after a short amount of time. The sands of time turn public opinions about color schemes, complex layouts, and other gimmicks which fool people into believing them pleasant, or 'hip', or 'fresh', into embarrassing memories which a trip through the Wayback Machine will render all too familiar and painful; but the simplicity of minimal styles which emphasize what they don't show, rather than what they shove into a viewer's face, remains pleasing to the eye even after trends die out.

Notes

[1] It wouldn't really be using the same style if I didn't have a footnote, at the very least. I left out the footer bar at the bottom of the page, becuase minimalism.

[2] His source code is enlightening, to wit[3]: http://daringfireball.net/css/ie_sucks.php

[3] Did I mis-use the phrase "to wit"? Probably. I also left punctuation as part of a hyperlink. Minimal irony, perhaps.

Contact: vorapsak(at)uw.edu
Back