Visible Borders in Designs

Brent Simmons mentioned Theocacao a few months back, noting the "page-in-a-page" technique used in some site designs. I don't know if there's an official term for this style, but I call it visible borders.

Brent says that he prefers a design without borders, though suggests some possible reasons in favor of using them: compensating for larger displays, adding contrast to bring attention to the content, and making the design feel more like real-world materials.

I think there's some truth to all of this, but my main reason for it is a bit different.

Avoiding "Scanning"

Programmers understand the idea of "polling", which is checking for the state of something on a reoccurring basis (which, by the way, is discouraged in Cocoa, in favor of notifications). People will continually check the water to see if it's boiling or look down the street to see if the bus is coming.

For both computers and humans, polling is relatively expensive. For computers, it takes CPU cycles, for humans, it takes mental energy.

Reading content on a web page is often a lot of work. Readers have to try to separate content, comments, ads, navigation, and even elements that appear on mouseover. They also have to contend with the fact that layout may change drastically as they scroll down the page and new elements are revealed.

The active mind is constantly scanning — in other words, polling — for new areas of interest, as well as looking for things that have to be manipulated to continue, such as a "Next" button. And even if this isn't the case on your site, readers are conditioned to expect this.

On a printed page, the content and format are static. Words aren't going to suddenly appear outside of the boundaries of the book edges, and most importantly, there's no scrolling of any sort. The mind can relax because you can see at a glance exactly what is available to you.

Another key point here is that not all books are the same size or orientation. Books of quotations tend to be very small and square, while coffee table books with photographs are often large and in a landscape orientation. Novels are portrait orientation and relatively small.

The physical design of a book results in visible borders as well, it's just that a book does layout in three dimensions instead of just the two we get on a web page.

Visual Cues

Since each web site doesn't come with a different physical frame like a book does, designers use borders to convince the reader that they don't need to be constantly scanning for content areas.



No one is expecting the main content of an article to suddenly appear outside of the boundaries of the "virtual page," so the mind can temporarily mark that as out of bounds, even as the page scrolls.

Visible borders are just one technique. You can use color or opacity to reduce scanning, too. This is why a Cocoa "source list" makes for a cleaner separation between master and detail views than two regular, plain white tables do.



Daring Fireball is an excellent example of how to make a borderless site work well, but there are several key elements that go into it:

1. The navigation and ads only appear within the first full "page". Past that, the entire page contents is within the one column. If the additional elements continued to appear on the side as you scrolled, I don't think this approach would work as well, because elements would just spring out of nowhere.

2. The content comes in two varieties: long rectangular articles, and square-ish link blocks. To me, this results in implied borders, which is helped out significantly by the underlines in the link title and the vertical lines against quoted text.

3. The design in so unique — particularly because of the background color and narrow columns — that the reader knows that the typical rules do not apply, so they take on a new set of layout assumptions specific to this site.

4. The navigation text and site title are in all caps, which is clearly not content.

One Last Thing

In his post, Brent mentions this:

The engineer in me says that the page is already in the browser-window box - another box is just not needed, it's waste.

I'm absolutely fascinated by this comment, because Brent is telling us something about the way his brain works. Many people are not willing or able to tell you how they see something, so you have to try to read between the lines. I completely understand Brent's perspective, and I can arrange my head in this way by choice, but it's not natural for me.

For me, when I look at the web page, I lock focus on the browser window itself. I'm not thinking about the browser window in the context of the larger window in the window server and so on, I'm "zoomed in" to the content of the window. I suspect this is a common experience for consumers in general, and is certainly the case for those who choose to maximize their browser windows.

But this brings up another important point: people rarely read a book or magazine amongst a pile of other open books or magazines. You usually pick it up and walk to a chair or bed to read it. An open web page, on the other hand, is often swimming in a sea of other web pages, instant messenger windows, Finder windows, and so on.

Comments Temporarily Disabled

I had to temporarily disable comments due to spam. I'll re-enable them soon.