Today we’re going to be looking at the Washington Post site, www.washingtonpost.com. I do not particularly like this site, as I find it cumbersome and annoying to navigate and read. But I do like the paper, and this is the local news, so we’ll start there.
1. Overall Structure
I’ve taken the rendered source code of the home page, and then gone through and cleaned out the code to show you the high-level structure. We’ll delve into details elsewhere.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html>
<head>
<title>
washingtonpost.com - nation, world, technology and Washington area news and headlines
</title>
</head>
<body id="hp" class="local">
<div id="container">
<div id="skip"></div>
<div id="hdr"></div>
<div id="wp-nav-box"></div>
<div id="top"></div>
<div id="mid"></div>
<div id="btm"></div>
<div id="ftr"></div>
</div>
</body>
</html>
This isn’t bad. They ID the body, which is a good thing. They have a set container, then identified ID’s based on what the content will be. I would have rather seen something other than placement-related ID’s (top, mid, btm) but that’s a minor complaint.
I’d grade this high-level overview at a solid B+.
2. Semantics
I’d rank the semantics fairly low. Not at the high-level so much but it really falls apart in the deeper levels.
For example, they use a <span class="h1"></span> for the main, frontpage headline. Not a <h1>, but a span. That’s horrific. You really have to use the actual classes there. <span class=”h2″> is also used. <div class=”clearboth”></div> is also used a great deal, to clear floats.
Yes, they do use proper <ul>'s and <p> tags, so they helps them a bit.
They do use <table> tags, why I don’t know. It’s sporadically in the code. Maybe some legacy inert from a CMS?
I also really dislike how many inline style declarations they use. <div align="center" style="padding-top: 5px; padding-bottom: 5px;"> is a common occurance, which is just wrong. As many styles as they are using, they should just class this div and style it that way.
Also used a great deal is two styles; lft and rt. I don’t like naming my classes after what they “look” like. What if they changed the look, and all of the sudden the stuff with the “rt” (right) class now floats left in a call-out? These types of classes aren’t very future-proof.
3. Content
The content area, which must be put in there from a CMS, has problems on the home page.
The main headlines and content callouts are inserted via a javascript write. This couldn’t be more of a wrong idea.
name:"Site",
type:"Most Clicked Articles",
updated:"9:01 a.m. ET",
content:[
{url:"http://www.washingtonpost.com/wp-dyn/content/article/2008/12/14/AR2008121402670.html?nav=hcmodule“, linkText:”Executive Pay Limits May Prove Toothless”, kicker:”", headline:”Executive Pay Limits May Prove Toothless”, subheadline:”Loophole in Bailout Provision Leaves Enforcement in Doubt”, byline:”By Amit R. Paley”, source:”Washington Post Staff Writer”, timestamp:”December 14, 2008 11:06 PM”, blurb:”Congress wanted to guarantee that the $700 billion financial bailout would limit the eye-popping pay of Wall Street executives, so lawmakers included a mechanism for reviewing executive compensation and penalizing firms that break the rules.”, slug:”execcomp15″, commentcount:”", commenturl:”"},
While you can see how they’ve split apart the stories into the set content meta-data types (Headline, byline, blurb, etc), they’ve inserted them into the story in an incredibly non-semantic way.
They need to update their CMS system to insert it into the page in a better way.
They also use a LOT of inline spans and inline styles.
<span style="font-family:arial;font-size:11px;color:#000000;">• </span>
That’s just wrong. Why they don’t use that as a class, I don’t know.
4. Conclusion.
At a high level, they have an idea of where they would like to move towards. But it falls apart quickly.
I’m sure they have a complex CMS system, or systems that feed into this site.
But that is no excuse. ESPECIALLY for the home page. The home page is just non-semantic, and there isn’t much of an excuse. It’s a newspaper site for one of the great local newspapers in the DC area, and it’s just not friendly.
