Categories
User experience, web, technology

Newsweek’s Spring 2010 Website Redesign

Home page of Newsweek.com, May 31, 2010
Home page of Newsweek.com, May 31, 2010

I don’t know when it happened, exactly, but Newseek.com was recently redesigned. There is so much to say about it, and it is mostly good.

I’ll start with the most obvious: the design.

In short, the home page is easy to scan. There is a clear visual hierarchy. The lead photos and articles have been spot-on for Memorial Day news items, and the clarity of the layout made certain I couldn’t miss them.

The article pages are easy to read and keep enough of the patterns, like the byline and publication date, that it’s easy to figure out what’s what.

My biggest complaint is one that they no doubt haven’t figured out how to get rid of yet: the banner ads.

There’s more talk about the visuals for the new newsweek.com at nymag.com. I won’t go on about that, myself, other than to say, gee, it looks like a professional blog. Oddly, that’s a compliment.

Now let’s look at the markup.

Code for namespaces on newsweek.com
Newsweek.com's namespaces point to interesting uses of meta data.

I’ve had a penchant for information architecture since the late 1990s, and about the first thing I noticed when glancing at the markup for the home page is the references to the Dublin Core meta data definitions and other meta data sets.

I was suddenly intrigued. Good use of meta data is sadly absent in many large-scale websites, and it’s really great to see an effort to play the game for real.

So, at a quick glance through the markup you’ll notice some unusual pieces, first this:
data-track="{'title':'stories being discussed'}", which is an attribute with a value that looks a bit like JSON.

I admit to being behind the times with studying HTML 5, but that attribute spurred my suspicion that this page was using HTML 5. I stopped wondering a few lines later when I spotted an article element, followed soon thereafter by a header element, and a nav element sporting an attribute of role="navigation". Whoa. Newsweek jumped right in.

So what about the meta data? Well, I can’t really know what they’re actually doing, but here is an observation. In a sidebar, they have a list of quotes. Each quote is marked up as a blockquote with an id attribute. Following each quote is a span with attributes like property="dc:creator" and about="#q1". The about attribute refers to the id of the blockquote in question. The content of that span itself is the name of the quoted person, plus which publication the quote came from.

Pretty cool idea: internal markup references like this can build relationships into the content. It could provide some interesting opportunities for parsing later on. Yeah, that’s right, the semantic web.

The problem with this all is…it’s half-baked!

Newsweek.com meta tags, bad markup
Newsweek.com used "http-equiv" when they needed "name". Oops.

That list of quotes with the ID attributes? All that meta data is duplicated and thereby meaningless! Further, why use a span element when they could have used a cite element? More semantic and those attributes would’ve played as well. Gah!

And back at the top of the markup by those meta data namespace references there is another set of meta tag elements which are sadly marked up incorrectly.

There is a stack of 5 meta elements that use the http-equiv attribute when they should have used the name attribute. I’ll bet whoever coded that knows the difference, but I wonder if they were rushed to get this version out. It feels like a beta.

They are so close to providing some really great examples of meta data use in HTML 5! I hope they release another version soon that gets more precise and cleans up some of this code.

By Davin Granroth

Davin is Chief Operating Officer for Covenant Eyes, Inc. in Owosso, MI, USA, where he gets to mix his background in user experience design, research, and strategy with the operation of a software company. For more, see his LinkedIn profile.

2 replies on “Newsweek’s Spring 2010 Website Redesign”

Hi Davin, I was one of the developers working on the site. First off, we’re real glad you like our implementation – we put a lot of time into making HTML5 work along with RDFa and jQuery UI. We’re also pretty excited you took time to look under the good. HTML5 was surprisingly painless to implement, with Firefox 2 being the only real outlier. Newsweek was nice enough to trust our decision to use it, which is nice.

The inline JSON is indeed part of the current HTML5 spec. We’re using the data- attribute to tag different elements on the page. Some examples include data-slideshow (for the slideshow widget), data-dartad (for ads, loaded after document.ready for speed), and data-track (click tracking in omniture so we can determine which modules are getting the most attention). I put this in so that we had a clear and reliable way to target elements for design and functionality. I can’t tell you how many times I’ve targeted an element by class name or ID, only to have the class change and break everything. Using the data- attributes has proven to be far more reliable, since the attributes exist solely for functionality and are unlikely to be accidentally used on a wrong element.

I’ll be fixing the metadata today (good call!) – clean code is on my TODO: along with 50 other items. Thanks for your interest – nice to have our hard work appreciated.

Michael, thanks for the comment, and for that insight on data- attributes.

Actually, I’m inspired by you and your team doing this at Newsweek. I’ve been hesitant about taking HTML 5 seriously, but you clearly did. Looks like it’s time to experiment.

Leave a Reply

Your email address will not be published. Required fields are marked *