the new yorker

the new yorker

The New Yorker is a weekly magazine known for its compelling articles and commentary on current events and culture. A magazine which contains such sophisticated content deserves an equally sophisticated website—and in many ways they have succeeded in doing so.

The website appears to be designed around a six-column grid (but more on that later), allowing for flexible placement of various types of content.

Incorporating the illustrated man with the top-hat into the design must have been difficult, but was executed very well. Placed next to the classic logotype, the two go very well together. Both the illustration and logo sit above an elegant menu which really holds the site together.

The print version of the magazine features a beautifully illustrated cover for every issue (with nearly 50 issues printed every year). Obviously this was something that needed to visible in the web site as well. On the home page, the title and description of the main story is featured in the center of the page, accompanied by a black and white illustration.

Larger illustrations and comics that accompany articles in the print version of the magazine also appear along side articles on the website. This not only creates a “print-like” environment for the online version, but also connects the online version to the print version.

Times, a typeface frowned upon by many designers, can be one of the most elegant fonts used on the web—and was the perfect choice for The New Yorker. When I first visited the site, I was a little shocked to see Times in full use. The entire body copy is set in Times, and it looks good. In fact, I would have trouble enjoying the website if, say, Georgia were used as the body copy. Times is an old, classic typeface—which is fitting when used with an old, classic magazine such as The New Yorker.

Serifs certainly dominate the website, but sans-serifs are sprinkled throughout, mainly used as sub-headings. Set in dark red, the subheadings work very well with the rest of the site as it allows for a small change of pace without completely disrupting the flow of content.

criticism

The website is not without its faults, however.

When I first looked at The New Yorker website, I was impressed. Impressed by the limited color scheme, impressed with the use of illustrations instead of photos, and most of all impressed with their choice in typography. But once I truly studied the design, I began to like it less. There are various issues I take with The New Yorker.

As I mentioned earlier, the website appears to be based off of a six-column grid. As you can see on the front page, there are three sub-columns inside of the middle column of the website. From left to right, it appears that each column is the same width, except for the last column on the right. It is disproportional to the rest of the website. The way it is now is unbalanced. What section is more important? Had they made the right column the same width as the left column, the website would be better balanced. However, please take this with a grain of salt as I am a grid aficionado. I obviously take issue with this more than others.

The majority of print publications tab every new paragraph rather than addling a line break like most websites. The New Yorker decided to tab every paragraph rather than adding a line break after each. This becomes a problem with long articles as the content can become overwhelming without any room to breathe.

Advertisements are placed in the right column and very bottom of the home page. However, when a user clicks on a link to another page on the site, an advertisement is placed above the entire site (above the logo and the menu). This pushes the content down, including the menu, which in my opinion is a pretty big usability problem. The New Yorker could have done something similar in advertising the way The New York Times and New York Magazine did with their websites. Instead of placing an advertisement above the menu, therefore pushing the content down, advertisements could be placed to the side of the logo.

conclusion

The New Yorker is a well thought out website. It makes good use of typography, color, and illustrations. But when observed more closely, there are several problems that are undeniable.

  1. Kyle Meyer

    In my opinion, I’m not sure the online version holds up to the quality of design of its print counterpart. My biggest issue with the site is the standard size of 12 pixels for the body copy. This makes it look identical to the default setting in Microsoft Word and other applications that give Times that default connotation. If they bumped it to 13 pixels or went a little taller on the line-height; they could avoid that issue.

    I definitely agree about the tabbing in of each paragraph, personally I find it more difficult even in print. There are some sites that do it very well on the web, such as Cameron Moll’s site, but Georgia presents a much lighter color weight to times and things seem to breathe easier.

    I’m sure we’ll have some opposing opinions on the issue of indentation. I think the New Yorker is a great site to learn from because there are plenty of examples of what not to do, as there are interesting areas of the design.

  2. Joe Clark

    The design of the New Yorker has been rather severely criticized. It’s just that nobody wants to admit such criticisms even exist; everyone wants to coast on the common wisdom that the New Yorker is the best magazine there ever was. Many of us beg to differ.

    Kyle, if you think indented paragraphs in books are unreadable, you need to be checked for dyslexia.

  3. Kyle Meyer

    @Joe Clark: I don’t find them unreadable, but I do find them more difficult when used with serif typefaces at small sizes, especially on screen in comparison to an extra line break. On your site for example, the text is large and spaced liberally, in which case I don’t find it problematic.

  4. kevadamson

    Hmmm. I like the illustrations. I also think single articles are nicely considered in terms of the layout. But, I dunno, the site seems like a mish-mash of well considered layouts with poorly considered layouts. It feels inconsistent to me.

    It’s also a site that looks considerably better in Safari than any other browser.

    I’ve used “consider” a lot in this comment.

    The adverts are visually intrusive. Which is a shame.

  5. Kevin Zak

    An interesting choice of sites to review. I’m a fan of the New Yorker’s publication, however, it is fairly challenging to get a recent copy in the middle of Nebraska. I frequent the site reviewed daily, and I have experienced a fair few annoyances; some outlined here, some not.

    A big one has already been mentioned — indentation. I actually use a Greasemonkey script to add another line and eliminate the indent. While this may be an affective way of displaying print, I have yet to find a site that uses only an indent (Moll’s site has a linebreak and an indent, which is somewhat redundant but is still readable) that looks good.

    This is a new angle for Typesites, in my opinion. Rather than commending a site for its positive attributes and pointing out areas of excellency, this review is telling us what not to do. I enjoy the wit put into the New Yorker, but I must say, there site is fairly disappointing.

  6. Gordon Warvi

    I’m a great fan of sites that utilize typography as a creative way to present sites, especially newspaper/magazine sites. Unfortunately, on The New Yorker, much of this is lost when images are disabled. I was disappointed to see that they did not have an alternative navigation menu, which replaced the standard one when images were disabled. I would have preferred to see the same menu (colour theme and hover effects), but the type in Georgia rather than Times to replace the existing menu had the images been disabled. Another thing was some of the Article Headings could not be seen. The New York Times has the upper hand in these cases; their navigation menu remains and so do the headings on most, if not all of their articles. I think The New Yorker could work on this a little. Perhaps they could use sIFR to sort out the Headings while implementing a alternative CSS menu in regular text rather than an image.

  7. Leon P

    Times does not work as body copy. I don’t agree it looks good - paragraph after paragraph of it on the screen is unreadable.

    Georgia is a better option because it is designed for screen reading: it’s thicker, bigger and and the serifs are wider and blunter. Apart from these differences it’s very similar to Times, so it creates the same feel.

    I’ve knocked up a Stylish makeover that demonstrates the differences:

    My New Yorker modification

  8. Kyle Meyer

    @Leon P: Wow, just changing the type to Georgia feels like an improvement to me both in aesthetics and legibility. Great stuff, thanks for taking the time to pack it up nicely in a Stylish stylesheet.

  9. Bruno Bergher

    I’m not sure this review did the trick, but I only read it today, and the New Yorker’s website looks a lot different, especially on the point you guys stressed.

    Quite influential, uh?

  10. Kevin Cannon

    @Joe Clark - I can’t believe you linked to your own site in the third person as if some kind of objective authority had written it.

    “The design of the New Yorker has been rather severely criticized.” would perhaps be more honestly stated as “I hate the New Yorker and have bitched about it and it’s website on my blog.”

  11. Joey Pfeifer

    Thanks for the honesty, Bruno; much appreciated. I’m curious though—what looks different to you about the current New Yorker website compared to the examples made in my review?

  12. Tor Løvskogen Bollingmo

    Leon, I don’t agree with this:

    Georgia is a better option because it is designed for screen reading: it’s thicker, bigger and and the serifs are wider and blunter. Apart from these differences it’s very similar to Times, so it creates the same feel.

    Georgia is, as you state, much thicker wider and more blunt. This is what seperates Times New Roman and Georgia. Times New Roman is much lighter, more sophisticated and classier - when used right. So I don’t think it creates the same atmosphere.