Typesites is a weekly look at sites that have great typographic design.
The International Herald Tribune, like The New Yorker (reviewed previously on Typesites), is a print publication with a reputation for good design in the print world; trying to make the same magic happen online.
One thing that immediately sets the IHT apart from most other print newspapers’ websites (including that of its parent company the New York Times) is that the IHT doesn’t seem as much to be trying to look like a newspaper. It employs tasteful gradients, drop-shadows, et cetera; which creates a look similar to a news website, rather than a newspaper who has a website.
That’s not to say that the long history of the newspaper is in any way swept under the carpet. The limited color palette and the conservative Georgia/Arial type choice prevents the site from being too flashy and web two-point-oh-y. Which is a good thing, considering we’re talking about a newspaper that started in the 1880s…
I especially love how the two typefaces on the site play off of each other. Arial is a very neutral, clean typeface. Georgia, on the other hand, has a lot of character, and is probably the best thing to happen to web typography as of yet. However, it’s been used so much lately, and has so much character on it’s own, that it quickly becomes overwhelming if used without moderation.
However, the design manages to keep a great balance between the clean and the character. The same goes for the color scheme. The muted blue and grey are as clean as any Helvetica-ripoff. And they, too, are very well contrasted by the warm yellow text elements spread throughout the design.
The use of borders on the site is another astonishingly well-performed balancing act. Like Georgia, borders can either make or break a design — and in this case they definitely make it. From the delicate dotted lines in the byline to the concise 1px border around the article to the thick, light gray border of other content boxes—they all work wonderfully with each other. My personal favorite is the thin gray border around the article images. Not quite large or defined enough to be noticed, but enough to help bring out the image.
The body copy is set in a very straight-forward 13px Arial with a line-height of 18px (about 140%), ragged right. The leading does a very good job at making the text readable without going to extremes. You can even choose a three-column view, which shortens the line-lengths a little and makes reading long stories on screen a more pleasant experience.
It should also be said that the site has some of the cleanest code I’ve seen on an online newspaper site.
criticism
The design is not without its faults, though. Firstly, as a result of the IHT trying to take full advantage of the web, the different parts of the site seems to suffer from what I like to call “Restless Website Syndrome”. This occurs when a site pulls content in from an external site, with all the stylistic baggage that the widget brings on. Much of the elegance of the design is ruined by dragging in things like the differently-styled Reuters-box on the front page.
Another example is the (awesome as it may be) function that allows you to click the name of the city from where the story was filed and in turn will launch a Google map and provide you with links to other stories from that city. The problem is that the Google map looks awkwardly out of place in the design; what was a good idea on paper, suddenly becomes a visual problem.
Not only that, but the site overall seems to have too many elements that weren’t fully thought through. The blog section of the site, for instance, still looks a little unfinished to me.
The navigation also captures this unfinished feel, in my opinion. The thick top border looks a little out of place and the three bars, while I see what they are trying to do, remind me of a poorly compressed JPEG.
There are also some minor issues that bug me a little. One of the good things about the standardized RSS-icon is that it can be colored any way you wish. So why did the IHT go for one that clashes so utterly with the warm yellow accent-color?
Then there are the uglies in the body copy itself, such as improper quotation marks and orphans. I’d personally like just a little tighter spacing between the paragraphs to make it a little less blocky.
The design overall doesn’t seem to have as much flexibility as, say, the New York Times website.
conclusion
Overall, the Int’l Herald Tribune has dared do go in a different direction than most other online newspapers, and it has ended up in an elegant and well-functioning design.
However, it seems the fusion of a 121 year old newspaper with Web 2.0 may have been a bit of a challenge. What works on the site works well, and what doesn’t looks cheap and unfinished.
It may be nostalgia, but to me, the old IHT-design (without the drop shadows and gradients, but with the same content) worked better. Perhaps sometimes you can have new function, without the new style.
about the reviewer
13 responses to ‘int’l herald tribune’
Kevin Zak May 4th, 2008
It is a fairly fluctuating design, really. Some areas look like serious thought and consideration were put into creating them while others look like they were just thrown in after the design was completed. That said, the type throughout the site is done beautifully and should be commended.
I agree with most of what you said concerning the widgets seeming out of place. They make a solid effort to flow with the rest of the site, but they come up a little short. Removing or recoloring the Reuters header would eliminate some of that tension.
…ithe IHT doesn’t seem as much to be trying to look like a newspaper
Here is where I tend to disagree. Other than a well-styled navigation, it doesn’t really set itself apart much to me. It looks like a mix of the ten news sites I read each day. I’ve never seen this particular website before, yet instantly there was an air of familiarity about the design. I don’t think this is much of a coincidence; the design works so why take a chance and do something completely original, possibly compromising their reader-base.
Overall, it has a nice design that I’ve seen before on other sites. It does, however, do a better job in typography than most websites belonging to newspapers.
— §
Tim May 4th, 2008
Nice review John. Little details make a big difference, and ITH is no exception to this.I’m disappointed by the (apparent) lack of work in advertising integration. What’s the use of sweating the details in typography, navigation and borders if they slap hideous ad banners all around. I know newspapers (online & offline) merely rely on advertising but there must be another way than what we’ve seen so far. In fact, there is. Dan Hill wrote a long piece about the design of the Monocle website which mentions their strategy with advertising (scroll down to about ¾ of the article) , and how they made it work with their gorgeous design. I might not work for all, but it’s really worth trying.— §
John Arnor G. Lom May 4th, 2008
Kevin: I see your point. What I meant by that is that the design is more ‘online design’ than ‘print design ported to the web’. If you look at sites like the New York Times, the New Yorker et cetera; it looks more like the paper newspaper design, than what this design does. You’re right that the design isn’t radically different; though. That just makes it even more impressive to me when it is able to make a mark, just on the basis of good type.
Tim: Glad you liked it. Thanks for the link! I’m continually impressed by Monocle both off- and online. (I have two of every single issue of Monocle so far, and love every one of them… ;)— §
Joey May 4th, 2008
As a whole I think the IHT works pretty well. There are, however, quite a few issues I take with the entire site.
Layout-wise, I don’t think the columns are structured well. They could have used a better grid and structured the content around equally sized columns. HOWEVER, despite this fact they still managed to make the content look aesthetically appealing and also easy to read.
I love their use of regular Georgia for the headlines. The headlines used on the IHT are much easier to read than those on the New York Times website, which are set in bold. Also, the body copy set in Arial is a great choice, which is also easy to read and contrasts beautifully with the serif headlines.
Detail-wise, I have a few complements and a few issues. I typically dislike the use of gradients. They seem fairly useless to me. The same goes for the IHT. The few gradients I see completely throw off the design, in my opinion. They seem out of place. Solid colors in place of the gradients would not only look better, but also cut down on the size of the page itself.
The use of borders on the site is another astonishingly well-performed balancing act.
I completely agree. Where the designers could have simply filled content into their respective places, the addition of borders REALLY helps to separate the various types of content.
Another detail I noticed, and like very much, is the Market Tools section (about 1/2 to 3/4 of the way down). Not only is the search bar (used to search different stock symbols) big, so is the GO button. It’s extremely easy to use. And when you press go, you’re taken to a very elegantly laid out stock market page with nice infographics and easy to read stock information.
Even though the structure of the entire layout could have been improved upon, the designers still did a very good job.— §
Steve Killen May 6th, 2008
Although the use of Google maps in a website regularly results in an ugly clash with the site’s design. I think the implementation here is not too bad. The site contains similar colours to the Google map app and is fitting for a news site. The design may benefit from having a custom mapping software but this would involve a lot of development time. I think it is too useful and unique a feauture to compromise for the sake of the overall design.— §
John Arnor G. Lom May 6th, 2008
@Steve, I totally agree, the Google map is way less of an eyesore on the IHT as on many other sites. And, I certainly realize that a custom map solution is a big undertaking on any website. (Though, it isn’t as hard as many thinks, as this article on A List Apart shows…)
However, I think many designers look to Google for maps; I just think that one should probably look at other solutions as well. In my opinion, Microsoft Live Maps, for instance would be a much better fit, visually, for the Int’l Herald Tribune…
I, too, love the function - and I think it’s both really useful, and an awesome idea. So I’m not saying it should be dropped - just that when more visually polished solutions available - I think they shouldn’t be ignored for the default (Google).— §
John Arnor G. Lom May 6th, 2008
…wow, that was a huge pile of grammatical errors. Sorry about that — you get the point, though… (hopefully)— §
Steve Killen May 7th, 2008
@John: Thanks for the clarification, don’t worry I didn’t notice any of the grammatical errors first time around ;).
I did see the A List Apart article when it was published, still seems quite a task to get the right map tiles. Hopefully there will be a few more map APIs coming out that will offer the stability and coverage of Google maps with the ability to fully customise.
PS I apologise for going off the intended focus of this site.— §
John Arnor G. Lom May 7th, 2008 @Steve Don’t apologize; your points are all very valid, and I’m glad to have the opportunity to clarify what I meant…
By the way, I found an old screenshot of IHT before the redesign. And seeing it again, I do think much of my affection is indeed nostalgia-related. I am glad to see the pinstripes, pixel fonts and dotted border extravaganza go.
However, the previous design was more subtle, less random gradients, better grid — and I did love the clipping-feature. (Basically, what that did, was let you “clip” articles that you wanted to read later. I used it during my morning routine to decide what articles to read during lunch, for instance.)— §
Mark Wunsch May 9th, 2008 Apparently, you IHT.com took notice! Great to see a publication like this embrace good web typography.— §
Kyle Meyer May 9th, 2008 @Mark Wunsch: Indeed, that was a very exciting link to see show up in the Mint stats
http://typesites.com/intl-herald-tribune/
READ AN ALTERNATIVE IHT DAILY NARRATIVE AT
A PLACE IN THE AUVERGNE
http://www.aplaceintheauvergne.blogspot.com/
International Herald Tribune
IHT
New York Times
NYT
No comments:
Post a Comment