Tag: CSS

I’ve noticed a growing trend towards more organic web designs, lately. We see fewer sites with rounded corner header graphics, plastic colors, and infinite reflections, and more with images seemingly plastered across the page, and then allowed to weather and age until looking like the wall paper in our Aunt Sally’s fusty old apartment. I like the new looks, if only because they add to the seemingly infinite variety of web design possibilities.

However, there’s a new movement afoot to eliminate many of the old web design paradigms. To strip away the wallpaper and 2.0 reflections, equally. The movement is towards a minimalist design.

This weekend, Russell Beattie writes about the new minimalist designs, pointing to the recent redesigns by Mark Pilgrim, James Bennett, and Ryan Tomayko. Three web developers/designers, three sites, but all three share a common design focus: minimal page layout, with minimal visual cues, as well as minimal color. The operative word is minimal.

The approaches

Tomayko’s approach to minimalist design was to reduce what he calls administrative debris at his site, including adding in-page editing rather than using an administrative interface. Archive references are built into the header, and he restores the hypertext link back to its initial position of importance. As he writes, the elegant simplicity of the link is subverted all too often, in favor of gimmicks to make the web page look more like the desktop.

Since the web’s inception and subsequent boom, people have been trying to get around hypertext’s “limitations” as an interface medium: first with Java Applets and Active X controls, later with Flash sites, and today with Rich Internet Application (RIA) platforms. There was a time when sites were authored with the goal of preventing the vertical scroll-bar from ever appearing! The goal is always the same: invert the web’s superior content-oriented interface back to the GUI era and allow for the types of administrative debris so common and accepted in desktop applications.

Tomayko has an excellent point, yet is a minimalistic web page inherently a single column, black and white page, sans graphics?

Uploaded with plasq‘s Skitch!

Bennett’s take on Tomayko’s work is on emphasizing the content by reducing everything else to the barest minimum necessary. This reductionism includes removing what are normally seen as “essential” elements of a site’s design.

The big take-away from Ryan’s redesign, for me, was a much stronger focus on content, and a de-emphasizing or removal of anything that wasn’t content. This meant a lot of traditional design elements, such as a header/logo, sidebars, etc. immediately went out the window in favor of a simple, single-column layout. There’s no logo, no header and no sidebar. A paragraph’s worth of metadata which used to be present in the sidebar of every page has disappeared, replaced with a much smaller interstitial line of metadata which now (in the absence of dedicated elements in the page for this purpose) does double duty as an aid to navigation.

In his minimalist design, Bennett reduced his site to single column, black and white, with meta information contained in a subheading under each article’s title. He also uses HTML rather than XHTML, as I recently discussed, but that’s incidental to the design. Or is it?

Uploaded with plasq‘s Skitch!

Pilgrim reflects the philosophy of both Tomayko and Bennett in wanting to strip as much as the “administrative debris” from the page, focusing, again, on a single column with archival and meta data incorporated into the writings rather than in headers, footers, or sidebars. He, like Bennett, also references the excellent online publication, The Elements of Typographic Style Applied to the Web. I’m not surprised a minimalistic web design would require paying an increased attention to the typography, as the approach strips out every other last visual element of the page, and the only visual element left to tweak is the text.

Pilgrim also references the A List Apart article on grid-based page layout, an approach to page design that has gained considerable popularity, and which probably directly or indirectly also inspired Tomayko and Bennett. Pilgrim also relies more heavily on the browser “chrome” to fill in for some of the functionality in the page, such as navigation bars for multiple page documents. However, not all browsers support such cues: does minimalism require a return to the days of “This site best viewed with…”?

Uploaded with plasq‘s Skitch!

Is this the start of a new trend? A move away from the currently cluttered web spaces, with their Ajax-based intros and navigation, not to mention tools and widgets? A minimal page design certainly helps the web page load faster, and makes it easier to spot the content. It also eliminates many of the problems associated with differences among browsers, not to mention whether the page is viewed via mobile device or on the big screen at home.

Recently, the St. Louis Today web site underwent a redesign the charitable could only refer to as not minimalism. The navigation is hard to find because there’s so many conflicting navigation cues—when the navigation isn’t being covered by ads that unfold and hide half the page contents. The site loads slowly, has clashing animations, and generally makes it difficult to determine what is the main story. Seeing a site such as St. Louis Today, one wants to celebrate a return to simpler times, of black and white pages, easily read.

I also like the reliance on webiness in a minimalistic environment when it comes to navigation and page layout. There is no popping, dropping, or flashing. The page starts at the top and unrolls to the bottom. You only scroll vertically, other than viewing the site on a very small monitor. This design is the original web page—the essence of web page, if you will.

The minimal web site design is also a good springboard design technique for those of us who are web design challenged. A simple column rather than fuss and fuss on a web design for weeks only to have it fall flat. For instance, I fussed over the initial web design for this site for weeks, only to have it greeted with silence when I showed it to some folks. Disappointed by lack of accolade, I ripped the design out, quickly putting together a variation of Drupal Garland’s theme, except incorporating the Painting the Web book colors and cover image. The first design took weeks, the second, hours. Oddly enough, I now prefer the latter design because it seems more supportive of both the book and the material than the original. (You can see both for yourself: I’ve added a theme switcher into the sidebar.)

Not only can a minimal web site design eliminate the “administrative debris” while focusing attention on the content, it can also eliminate the hours we spend tweaking our site designs; hours that could be used to actually create the content.

However, my new design is not a minimalist design. On the other hand, my personal web site, Just Shelley is a “minimal” design if we consider a design that strips out the sidebar entries and minimizes the administrative debris. Well, other than I do have next and previous link navigation at the bottom of the pages, a small header bar, and don’t make use of categories at the site. I use graphics, but a minimal site shouldn’t be dependent on being only black and white and without any graphics if the point of the effect is to focus attention on the main content block rather than peripherals. Or is that the point? Though not explicitly stated, the minimalist designs shown reflect the same basic design: single column, black and white, and no graphics.

What is minimalism

I found the efforts of all three gentlemen to be intriguing and very elegant in their zen-like simplicity. It seemed, though, that there were three different components of web design incorporated into one definition of minimalism, which might have benefited from being separated out into different discussions.

From my reading, the first and most critical component of the minimal design is to eliminate the unnecessary—the “administrative debris”, as defined by Tomakyo. This reduction also means that we eliminate some of the visual cues we’ve come to associated with weblogs or other personal sites: removing the feed icon and putting the dependence on the browser and autodiscovery; removing the obvious next and previous links and depending on the rel attributes; eliminating headers and footers and incorporating links to this information within the writings themselves; relying on generalized search rather than individual site search engines. Tomakyo even takes the reduction to a further step by incorporating editing features directly into the main view page, and eliminating a separate administrative interface.

The result is remarkably sparse and efficient, but not without its detractors. Beattie, for one, had a problem with this form of minimalism.

you have to think like a reader of your blog. They want to know where they are, and what they are supposed to read, and if they like the content, where to find more. A common use case is the person that arrives from a web search: They find the post, and immediately see that the page is part of a person’s weblog, written on a specific date. If they want more information about the author, the “About Me” is big and obvious. If they want to see what else I’ve written, they can click on the Archives link, or the Search link for more info. I can see the click stream for this blog using Google Analytics that this is pretty much how most searchers use the site. Almost always the next click after the first page is to the About Me page, and then to the Search or Archives.

Beattie’s comments remind me of my reaction to the new Mac Air from Apple, the laptop that Apple bills as Ultra thin. Ultra portable. It is incredibly thin, and very light. Some have even called the machine sexy. What was sacrificed in the machine, though, in order to achieve these goals?

The Mac Air has no built-in CD or DVD player, the hard drive is small, the CPU minimal by today’s standards, and it has only one USB 2.0 port…in other words, Apple has created the ideal iTunes machine. Frankly, I’d rather add a pound and an inch and get back the player, and more disk space— not to mention increase both CPU and RAM so that I can actually use my more CPU intensive applications, like Photoshop. I don’t need a computer that fits in a manila envelope and have never found my four year old Powerbook to be an onerous burden when traveling.

To me, the Mac Air is less a machine filling a necessary niche, than an offering to Steve Jobs’ obsession with engineering ingenuity and cramming increasingly larger amounts of functionality into increasingly smaller spaces. When I saw it, my first thought was not, “Oh, that would be useful”.

In some ways, the same can be said of minimalistic design: ultra thin, ultra light, perhaps even sexy, but is is usable?

Earlier I mentioned about Bennett’s take on HTML as compared to XHTML and how this doesn’t impact on page design. The reality is that markup choices can impact on page design. If you serve pages up as XHTML you can incorporate SVG (not to mention MathML) into your web pages, and into your site design if you wish. However, if you’re not a person who is interested in graphics per se, you might not care that your choice of markup could limit which forms of web graphics you can use in your pages. Based on his HTML preferences, I went searching in Bennett’s pages to see if he used any graphics at all, but had a hard time figuring out what to click to go to the front page, and then what to click to get to the entries. It took me four click-throughs just to find the entry category page so I could see what categories he writes under. Clicking through on several entries shows that Bennett doesn’t use any graphics that I could discover.

I returned to Tomakyo’s site and attempted to go through his various writings, also looking for the use of graphics, but it seemed every link I clicked took me to a separate web site rather than to one of his own writings. I had a hard time following the trail of writings.

Pilgrim mentions about using the rel attribute attached to the link element in the header to specify the links between pages in a document. I opened Opera, per his discussion, and then went looking for one of his online books where I assumed he used this functionality so I could see it in action myself. However, I couldn’t find a link to Mark’s “Dive into Accessibility” anywhere on his site or in his archives.

The point I’m laboriously making is that Beattie’s concerns are valid: we have to put ourselves into the position of the reader, who may not have a browser that pops up links when a certain meta tag is used, or may not know to use the search engine with a certain phrase to search within the site, or that if you look real closely under the article title, you’ll find links to contact the author or return to the home page.

Returning to the minimalists perspective, though, incorporating the use of these meta tags and other elements of like nature into each writing should occur regardless of design, as these features enhance the site’s overall usability. In addition, Tomakyo, Bennett, and Pilgrim may not care if the neophyte stumbles around their sites trying to find information which they should (if they were but wise to the ways of the web) know how to discover from their browser’s chrome. Or, as Tomakyo expands on in his comments, those who stumble on to a page are typically only interested in that page, and those who visit the site often, understand how the navigation works.

People reaching the site organically care most about reading a single article on a specific topic and are only passingly interested in other stuff contained here. The design decisions I’ve discussed here that seem to be attracting the most descent (removing navbars and other surrounding artifacts) are a direct result of targeting that 80%-90% usage scenario at the expense of those coming in through the front page (very rare) or wanting to browse around from article to article.

My theory is that this site’s navigation expands outside its own domain with Google, reddit, and other blog posts becoming the site’s most frequently used navigational devices. The individual “permalink” content page is the single most important aspect to get right. My goal in removing extraneous elements is to give the site a focus that matches its use.

Tomakyo’s point is equally good as Beattie’s. Perhaps the real key is understanding how people typically use your site, and then designing accordingly—the old “pave the cow path” design philosophy. Which leads us, then to the second component of minimal design, and the material we use to not only pave the path, but also build that which the paths traverse: typography.

With a minimal web design, we’re putting more of a focus in the typography of the page and the precision of the layout, rather than focusing all of our effort into the header graphics or the sidebar widgets. To let the site’s elegance shine through in the text, rather than the imagery.

I’m not as good at using grid-based design techniques, or fully understanding all the nuances of typography, as I could, or even should be. This is a neglected aspect of web design that the new minimal efforts also help emphasize, in addition to the importance of semantic markup.

At the same time, I’ve actually found that some sites focus on the elegance of the typography at the expense of the site’s readability. Pilgrim, Bennett, and Tomakyo all have very easy to read sites, with legible text. As the ALA article mentions with the grid-based design, however, a need for a precise layout with the text can lead to sacrificing the resizing capability of the text.

At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.

I can agree with the ALA article to some extent. However, there’s always a risk that the person accessing the page is using a browser (such as IE) that won’t resize fixed pixel fonts. The web page designer may decide, though, that the risk to accessibility is minimal compared to the elegance of design. In this case, minimal could also mean a minimal level accessibility support. It is a valid choice, as long as the page designer is aware he or she is making this choice.

Speaking of choices, the last component of the minimal design seems to be focused on reducing the visual elements of the page; to eliminate all but a single column layout, as well as use of color and any graphics.The question then follows: why?

I can see removing much of the cruft of a site, or any visual distractions such as bouncing, blinking sidebar widgets, but I had a difficult time understanding why the very design of the three sites seems to imply that you can’t have any visual element or color without detracting from the visual “purity” of the design, and the underlying principles of “minimalism”. Perhaps I’m inherently visual by nature because my response to this is a resounding, bull puckey! Not only are visual elements a welcome break from rivers of nothing but text, they provide a useful feature: differentiation.

When I first read James Bennett’s writing on his minimal site design, I didn’t connect him up with the same James Bennett who recently wrote about his choice of HTML or XHTML, which I wrote about only yesterday. I didn’t immediately connect the names in the two different contexts, or recognize that it was the same site because it lacked a visual element that helped me identify his site as one I just visited yesterday.

More importantly, as I flipped between his pages and Tomakyo’s, I found it increasingly difficult to remember if I was in Tomakyo’s pages, or Bennett’s, because the subtle font differences were not enough for me to distinguish easily between the sites. Pilgrim’s was the only one I could differentiate easily from the other two because of his faint use of color, and wider content column, and even that was only a remnant of browser caching—the color vanished when I looked at his site with Opera.

Uploaded with plasq‘s Skitch!

Uploaded with plasq‘s Skitch!

Uploaded with plasq‘s Skitch!

We sometimes take graphics to an excess, and I know I’m guilty of this. However, graphics can also form part of the environment in which the content is displayed. The use of graphics can set expectations, and can actually enhance the reading experience. The use of color and graphics can also help form part of a site’s identity, which becomes more critical as we rely more on opening many pages into tabs.

There is elegance and simplicity in plain pages that display black text on white pages, but I for one would be disappointed if the trend caught on. It would be like consisting only on health foods, without the occasional treat that makes eating fun.

Summary

In my opinion, minimalistic site design isn’t a technique to follow, so much, as it is a technique from which we should learn.

From Ryan Tomayko, we are reminded of the importance of the hypertext link, and chastised, gently, for our many efforts to subvert this element that represents the every essence of “webbiness”. In addition, he presents a good argument as to the unimportance of embedded navigational aids, though I don’t know that I necessarily agree with his view. However, his approach gets us to thinking about site navigation, and questioning our assumptions, which is a goodness.

From James Bennett we are reminded, again, of the importance of focusing on content. Perhaps a better way of looking at his view is that we’re reminded that we need to stop distracting from the content, as much as start focusing on it. Bennett also asks us to question the importance of home pages. How often are these visited? Do people visit the home page, or do they come in via links, search, or feeds? In particular, how important is the “home” page for personal sites?

Bennett also proposes a philosophy of navigation inherent in archival pages, based on the directions of “up”, “down”, “back”, “forward”, and “fast forward”, very similar to the links found at the bottom of this book page.

Mark Pilgrim agrees with Bennett and Tomayko, both as to removing unnecessary page elements and paying more attention to typography— too often neglected in site design. Pilgrim also stresses how the browser chrome is part of the page design, and underutilized by most web designers, developers, and just plain folk. I’m guilty of neglecting the inclusion of “semantic” markup in my pages, and not necessarily making as much use of meta elements as I could.

At the same time, though, we have to be careful before treading into ground where browser support differs widely. Of course, some of us, with our use of inline SVG, already tread this territory, so what’s another brick in the wall between browsers?

Lastly, none of the three mention that you have to strip out graphics, or focus only one black text on white background. It’s intriguing, though, that all three are heading in that direction with their site designs. Somehow in our web culture, we have learned to equate “minimal” with “black and white and no graphics”.

I would hope that one could practice elements of minimalism without having to forgo the visual elements that add that extra spark and delight to a page. Forgive me if I sound like an ad for my book, but I thought the first paragraphs in Chapter 1 for “Painting the Web” were appropriate to this discussion.

Do you remember your very first web page? The first one you ever saw? I remember the first time I saw a web page. I’m not sure if such memory is unusual, or if many people remember their first glance at what was to become ubiquitous in a very short time.

The time was late 1993 or early 1994. I was working at Intel as a contract software developer when one of the other developers asked me if I’d seen this application called Mosaic. I wasn’t among the first to see this new type of application, but at that time the Web was still in its most primitive form. The first web page I saw had a white background, a larger, bolder header, and text formatted into several paragraphs. It wasn’t anything special, and nothing to excite interest. However, in the page was a thing called a hypertext link, an underlined piece of text that, when clicked, opened another page—one on a completely different computer, connected to the first only by a domain-driven location.

The second site, like the first, was also incredibly simple. It featured the same black text on a white page, and the only typographical variation was the larger font for the titles. It was completely empty of any graphics. No CSS; no images or Flash; not even a FONT or BLINK. However, the two pages did demonstrate all that was critical about the Web: both pages were available to anyone with an Internet connection, each at a specific location that could be called up again, and served through a coordination between server and client that was both unprecedented and mesmerizing.

What an odd way to begin a book about graphics: describing plain web pages completely devoid of any graphics. There is a purpose behind my madness. By describing this earliest glimpse of the Web I hope to make an important point—that web graphics are not an essential component of the web experience. We can strip a page down to the most minimal markup without any use of Cascading Style Sheets (CSS), images, Scalar Vector Graphics (SVG), or Flash, and the page continues to be Web-like and useful.

Graphics are not necessary to the web experience. They can, however, add immeasurably to the richness of the Web, making the difference between a site that’s lively, compelling, and exciting, and one that’s merely functional.

For a minimalistic view of this writing, just click the printer friendly link in the first page. Drop a lotus flower in thanks on your way out.