the globe and mail

the globe and mail

The Globe & Mail, one of Canada’s principle newspapers, recently redesigned their website to better reflect the paper’s style and branding. In this post, I will be going over some of the things the re-design accomplishes as well as some other areas where it fails.

First of all, let’s discuss the good. The website strongly conveys a strong, classic “newsy” feel, which is a carryover from the print edition. It mirrors its print counterpart’s feel through the dominant colour scheme of red, white and grey, with touches of colour to accentuate different sections of the website (Business, Sports, etc). Great care has been given to the typographic color—the visual weight of the type—throughout the website. Verdana and Georgia are used well in tandem, and the heavy red rules work extremely well with the dotted black lines. There are some issues with spacing between headlines and such, but we’ll get to that in a moment.

In terms of layout, the site is extremely well organized. Front and centre are several main articles, with the primary one accompanied by an image. Both columns to the left and right reflect features, specials or alternative content. The “Show All Sections” drop down at the top is an intuitive and space-saving way to display a navigation for many different areas. The site features some interesting subnavigation elements as well.

As we scroll down “below the fold”, the sections get divided up but retain clarity through excellent use of space and breathing room, as well as layout differences for each section. For a paper of the Globe’s size and with the amount of content it puts online, this is a well-laid out home page.

The Devil is in the Details

Unfortunately, where the negatives come into play with the Globe’s site is with the typography. The principle articles headline is a fine size and colour, but the lead-in sentence doesn’t have nearly enough separation, and as such the headline and summary blend in together and don’t appear nearly as distinct as they should.

There are also inconsistencies within link colours & other typographic quibbles. While links are always red, some roll over to the grey and some don’t. This isn’t a huge issue, as the links are still obvious, but it is an inconsistency. Likewise, the features on the left hand side of the main page have a “section head” which blends almost entirely in with the text, leaving the point of emphasis muddled there. This could be fixed by slightly changing the color of the section head to create some extra visual distinction, nothing too difficult—but, an exercise in typographic hierarchy.

The final, and more substantial, issue with the redesign is the single-article page. The page itself is split into two tabs, one for the article itself and one for comments. However, the colour bar to separate the content from the nav is jarring, the layout and use of white space feels forced and awkward and the shadow which separates the content area from the ads down the right hand side comes off as incredibly distracting.

Overall, the site could’ve used a much more thorough look at typographical consistency and colouring before going live. The main page is well laid out and it ports the Globe “feel” to the web, but some inconsistencies and minor issues combine with a jarring single-article view to make an insubstantial impression upon the viewer. A good case for paying attention to the details and sweating the small stuff—with typography and design, it really matters.

  1. inspirationbit

    wow, I live in Vancouver, but didn’t know The Globe and Mail’s site is re-designed. I find their web-safe #FF0000 red very jarring, couldn’t they pick a less ubiquitous shade of red? The vertical drop shadow is way too thick. And the colours for various newspaper sections (seen in the navigation bar below the logo) are too clashing with each other. The overall colour palette is too distracting and rough for me.

    Agree re: single page. Also what’s the point in separating comments from the article, and then listing other latest comments below that article? Fortunately that section is collapsible.

    Obviously, they didn’t complete their re-design: none of the links from the footer lead to the pages with the new look, the most horrendous of them are Privacy, Terms and Conditions, and Disclaimer.

  2. Joey Pfeifer

    Nice review, Stuart.

    After browsing the site and reading this article, I have to say I’m not a fan. Layout, typography, colors… none of it really seems to ‘click.’

    The first thing I noticed was the inconsistent grid. I mean, it’s possible there is some sort of 128-column grid happening behind the scenes, but everything appears to be unstructured and cluttered. As for the typography, I have trouble reading Verdana, even at 12px. It’s harsh on the eyes. I’d much rather read 11px and 12px Lucida Grande on such a content heavy site.

    Oh, and I agree with Vivien about the colors: #ff0000 is definitely jarring, not to mention the other colors used to categorize each section are REALLY dated.

  3. Stuart

    I found that’s site re-design several months ago completely hit the nail on the head when it came to organization, layout, clarity and visual appeal. In fact, the re-design alone made me switch to them as my homepage! I’m heartened to see that I’m not the only one disappointed with the Globe’s re-design, I hope they tweak some of the issues, as I find the Globe to be a very good source of news and opinion, so it would be a shame to see their online readership go down due to, as inspirationbit said, an incomplete re-design.

  4. Scott McLean


    I was one of the designers responsible for the re-design (more of an update really), so I enjoyed reading your post about the site, many thanks for the write-up/crit.

    I thought I might follow up on a few of the puzzling choices we made;

    The reason for the tabs in stories pages is to accommodate a number of different features (when there is more than just comments). An example can be see here that better illustrates it’s use:
    There is the article, video, interactive (calculator) and comments.

    To Joey’s point about Lucida Grande, that typeface is mac-only (by default) so the list of web-safe typefaces available is quite limited, which is why we chose Georgia and Verdana.

    We’re continually making changes and fixes to the site, so I keep your comments in mind.


    Scott McLean,
    Web Designer, The Globe and Mail

  5. Tim Brown

    Nice review, Stuart. The way you begin by discussing the overall look and feel before drilling down to specifics is very effective. I also appreciate the attention you’ve given to that subtle quality – spacing - that can make or break a typeset text, even when most other decisions (about typeface, size, color, etc) are decent.

  6. Willian Mick

    Very good post. I’ve found your site via Yahoo and I’m really happy about the information you provide in your posts. Btw your sites layout is really broken on the Chrome browser. Would be cool if you could fix that. Anyhow keep up the good work!