⇥ TAB’s new layout

Over the past few weeks, I have toyed with the idea of giving The Accidental Businessman a new look. I don’t dislike the current theme, but, as I mentioned in an earlier post, it’s a bit too “angular” for my taste.

Over the last few days, therefore, I stole a few minutes of free time here and there to come up with a new design. It turned out to be an interesting experience, both because on this site I have a degree of freedom with experimentation that I can’t really afford anywhere else (not necessarily a good thing) and because of the technical challenges of realizing my vision for the site on current browsers (the site works with IE8, FF3.5 and Safari 4).

Maximum space

My first concern was to maximize the space available on the screen for viewing. Screen reading is quite difficult—ironically because there is usually much more space available than the comfortable reading angle that the human eye can accommodate.

The default solution to this problem is to confine the reading area to a small horizontal section of the screen; this works, but it’s also very inefficient: it’s the physical-world equivalent of printing a sixty-character line of point-10 font on an A2-size sheet: inefficient, wasteful and difficult to handle. The way I see it, the typical web layout works if you like scrolling. Me, I like to open a webpage, lean back on my chair and read.

Speaking of real world, it occurs to me that newspapers have already solved this problem—and, in so doing, have established a number of rules to make the task of as much space available as possible in a manner that is both efficient and aesthetically pleasing. Therefore, the new TAB layout attempts to mimic the look of newsprint as much as possible, keeping in mind that, of course, my blog is not printed on paper (therefore, some concessions to life online—such as leaving some room for comments).

Layout

The new layout makes heavy use of Javascript—according to my statistics, practically all my visitors have a Javascript-capable browser and leave JS enabled, so I have absolutely no problem with taking advantage of a bit of scripting to achieve my goals¹. Through the magic of jQuery, the content is automagically laid out across multiple columns—their number determined based on the site of the browser window—and paginated across multiple screen, which you can navigate without a browser refresh².

I decided to keep a comment area on the right-hand side only so that comments can be visible at all times. I am unsure as to how good this is—on a screen big enough, it seems to work fairly well, but at lower resolutions it robs much of the content area from the rest of the article.

Typography

The proper use of type is as important on the web as it is on paper—even more so on the former, perhaps, because of the limited resolution at which we are forced to view type online. Unfortunately, typography is often completely disregarded by web designers—I’m not sure why this is, but the focus seems to always be on graphical elements that, at the end of the day, have little or no importance: if your header looks colourful and has all sorts of bells and whistles, but people can’t read what in the body of your site, they are unlikely to be very happy.

In choosing a typographical design for TAB, I started from the most excellent Baseline CSS Framework, which, much like newspaper typesetters, uses a simple set of rules to ensure that multi-columnar text will line up properly on the font’s baseline. The framework’s setup is actually fairly simple: each style is an integer multiple of the base font size and line height, resulting in a text flow that lines up perfectly across multiple columns—in fact, as long as every element on a page follows the same rule, images and practically any other type of content can be added to an article and still maintain the same baseline alignment.

The script also support a very basic form of orphan and widow control, so that a heading should never appear either at the end of a column, or (even worse) “broken” across two columns. I am investigating ways to improve on this particular piece of technology to improve paragraph control well beyond the basics, but I fear that some of the calculations required will slow things down too much. Unfortunately, the level of control that CSS affords over sub-paragraph data (at least in CSS2, which is the target here) is not quite as good as it could be.

Finally, you will note that the text in the columns is justified. I usually dislike full justification in a browser because hyphenation is not a possibility and, therefore, there are often unsightly gaps between words that make reading a challenge. However, using the most excellent Hyphenator package by Mathias Nater, I was able to add hyphenation as well, which closes the gaps between words and makes text flow very nicely, providing both a pleasant look and a practical, readable format that should be easy on the eye.

Limitations

The theme is still quite rough around the edges. First of all, the contrast is not quite where I’d like it to be—I feel that the design is easy on the eye, but could probably use a little more punch. I’m not much of an expert on colour theory, so I’ll probably be nagging my good friend Arbi, whose worst day was the day I acquired a copy of Photoshop, for some advice. The layout of pages other than main articles needs some adjustment as well.

From a technical viewpoint, the method used to lay out the columns is a bit brutal—I am essentially cheating by duplicating the content over and over and only showing selected portions of it as appropriate—which works visually, but makes things like cutting and pasting a challenge³. Rendering performance under Internet Explorer is also a problem—although that’s something I think can be fixed by optimizing the Javascript code a bit.

Thus, think of this as an experiment in the works. I welcome your comments, suggestions, bug reports, and so on. I do, at some point, plan on making this an actual WordPress theme—it’s still too “Tabinized” for public consumption at the moment, but feel free to borrow, copy and use at will; none of the code or stylesheets on this site are minized or obscured and they are explicitly released under a BSD-like license (unlike the content itself).

Photo credit: A Stack of Newspapers, by DRB62

¹ Of course, scripting only affects the layout visually and not its functionality or content—thus, if you use an assistive device, such as a screen reader, the site should remain easily accessible.

² This is my idea of “good pagination.” I hate when sites split content across multiple pages as a way to force reloads so they can serve more ads.

³ CSS3 is going to make this type of layout much easier, but support for flowing controls is still a way off in several browsers.