I spent some time in Munich last month and had a 6 hour layover in
Amsterdam so I took a train to the city and took a few pictures. I’m
posting them to my flickr stream now (tagged as
pictures and notes on the trip to Germany will follow. The Dutch are
crazy about bikes and I was overjoyed to see for the first time one of
the space-invaders in
public:
The International Herald Tribune’s web design constitutes probably my
favorite way to read news on a web page. Let’s take a look at what
makes it tick…
initial page doesn’t really appear remarkable. Standard top and
side banners (there is also a bottom banner not shown here), content
in the middle.
to be a little narrower and then scroll down.
The layout now seems to seem to perfectly frame the content of the
page. The right banner is gone - never to be seen again once
horizontally resized. The top banner is hidden and the bottom banner
which was previously obscured is still not visible. And the content
fits perfectly.
Calgon, take me away!
cool feature is the article paging. Hover over the right column and
you’ll see the small icon at bottom reading “Next Page” light up -
click this column and you walk through the article.
Smart navigation like this is really subtle but incredibly useful.
When a reader is in the middle of reading an article, it’s annoying to
have to break your concentration to find the small “Next page”, “2″,
or whatever link that is common on most sites involving long
essays. The IHT layout understands that after you read three columns
of an article you will want to move to the next chunk of the article
so you simply need to hover over that last section anywhere and click
to move to the next page. If you want to stop reading mid-sentence and
find the small “Next Page” link and click that, you still can, but the
web layout offers a much more subtle, effective mechanism.
default layout - I’ll revisit where I said the layout seemed to
perfectly fit the content area of the client browser. Vertically
resize your window and you’ll see that this was no accident - the
content does perfectly fit the window.
The trick is simply that the layout and paging is dynamic. You get as
many columns and pages of article layout as are needed to accommodate
the article in your window.
The last subtle piece of brilliance here is that the dynamic layout is
all done on the client. You do not have to re-request data when you
resize the page to retrieve “the right amount of content to fit page N
with client dimensions X,Y”. Trendy current web technologies would
probably force a background call and do this much more clumsily and
force you to wait while loading the content for page N+1, but the
IHT’s layout has simply and elegantly behaved this way for a couple
years.
And there are a few more tricks up their sleeves. The left navigation
area includes links to increase or decrease font size and to toggle
between a 1 column layout of the 3 column, paged layout.
contains all the routines implementing this functionality. Combined
with the article “clippings” feature on the main page which behave
like temporal site-specific bookmarks into articles you would like to
read, the IHT has made an incredibly great site navigation system.
It’s almost a shame that has RSS come along and will probably make
beautiful design like this almost irrelevant, but that’s progress.