LingPipe Site Colophon

by

A colophon is a description of the publication of a book. Nice examples can be found in the end of the Addsion-Wesley Java series books and the back of most O’Reilly books. They tell you about the software, fonts, production and design of the book. I love typesetting and read colophons.

For LingPipe, we wanted something crisp, readable, navigable and extensible. We did not want it to be busy-looking like a direct mail solicitation or barren looking like a high-end clothing store. Luckily, LingPipe’s not Amazon or IBM, so we thought we could tackle it on our own. To make a long story short, it’s harder than you might think to do it right. Even with most of the content in place, it took me roughly a week and a half to finish the site redesign.

We also wanted something that would proportionally resize. Most pages don’t resize their content area’s widths when resizing (a good example is this blog format from WordPress), so eventually at large font sizes, things get pushed out. Also, most sites don’t let you make them too small without having to scroll. We wanted what’s known as a fluid layout.

I also thought this’d be a good opportunity to switch from our table-based layouts, which are impossible to maintain, to something a little more modern, like cascading style sheets (CSS). En route, we learned that CSS is more like troff than TeX. I’d had previous experience typesetting books with TeX. The kind-hearted copy-editors and designers at Cambridge University Press first sent me down the book-design road by sending me typesetting corrections for my first book (now in its second printing!). It took a week of my time, but boy did it look beautiful in the end, and about 75 pages shorter. Lesson one: don’t waste whitespace.

For basic design, we had the official Alias-i colors from our logo, a dark blue and a yellow. Together with a lighter blue for links, and black white and gray, this makes up the entire color range of the site.

For basic fonts, we wanted something readable. On paper, that means serif. On the web, that means sans-serif. We went with Verdana, which is a font designed for the web that is avaialble on all browsers. We paired that with Lucida Console, which is a beautiful code font, though not quite contrasty enough against Verdana. And it needs to be sized a bit differently to get them to match in terms of x-heigh (how high the top of the letter ‘x’ is) and in terms of weight (how dark a page of the text looks). Courier looked terribly fat and out of place and there are no other choices of fixed-width fonts for code. Note that all of our runing content links are underlined and rendered in blue with a light mouseover effect. Overall, the fonts are way smaller than the default values, but not as small as professional designers tend to choose. Try cranking down the size one notch in the browser — that’s how it’d look to a designer.

For basic layout, we chose a simple header, left navigation bar and running content area. They’re all spaced proportionally, so they resize as the web browser resizes and/or fonts are resized. Sounds easy, but CSS is a nightmare for this compared to tables. We wanted to refrain from the world of CSS hacks, which are typically of the two-wrongs-make-a-right variety, such as exploiting an MS IE bug to resize something that IE gets wrong because of its double margin bug. Why does CSS have no vertical alignment? I couldn’t figure out any way using just CSS to get our logo to stay nestled on top of the content. A higher-level goal is that it should look OK with all the styling turned off. I haven’t gotten around to a printer style yet, but it looks OK without any styles at all. I can vaguely recommend the book I used to get up to speed, Stylin’ with CSS, but I would’ve dearly liked something aimed at programmers (O’Reilly’s offering is no better in this regard). I found the book Great Web Typography a bit dated, but the most use of anything out there for the actual design issues. I can also highly recommend the W3C’s pages, including their validator.

We followed the basic rules of design: contrast, repetition, alignment and proximity (aka CRAP), as explained in Robin Williams’s indispensible The Non-Designers Design Book.

Contrast: You want the important things to stand out. In page design, you pretty much get contrast for that. So you see the major heads are set bolder and also set on solid backgrounds a la Apache. You see that the current page is highlighted in yellow, allowing a kind of breadcrumb-like behavior for the nav bar. You see the navigation all on a blue background and the text clearly set out on a white background. You’ll also see the code on a light grey background with some slightly darker grey borders. Ditto for the sidebars. This makes them stand out and separates them from the surroundijng material. It makes it easy to scan the sidebars, and also easy to scan the code. All titles are in bolder and/or bigger fonts so they stand out. Tables have slightly darker titles and a bit lighter headers.

Alignment: This is tricky. But check out how everything lines up. When it doesn’t, pages look vaguely disturbing. Here, we’ve lined up the nav bar with the title, all the titles to the left, the sidebars run just as far as the running titles, etc.

Proximity: What goes together conceptually should be close physically. You see the navbar items under a top-level header are closer to the title than the separators. The search button is right next to the search bar. The titles are closer to the first paragraph of following text than the previous text. Paragraphs are just widely enough separated to be noticable. Everything is also given a bit of space from its surrounding elements for readability.

Repetion: We tended to reuse the same elements rather than making everything up new. Thus the navigation is all in the nav bar all the time, and it always looks the same. The title’s always at the top. We try to start pages with an explanation of what the page is about. But this also involves repeating the same fonts and colors again and again. It gives the whole design coherence.

That’s about it. I learned enough that I can diagnose major flaws in web pages. This is not always a good thing. I’ve always hated badly set books after understanding how to do it right, and now more and more web sites are bugging me when I see them use too many fonts, text jammed up against borders, lack of interline spacing, overfull lines, etc. etc. Having said that, I have a long way to go, and would love to get feedback about our design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s