Brian Sweeting

It’s time to pit the Republicans against the Democrats. We’re putting the issues, military service records, and all else aside to focus on the Presidential Candidates’ websites. We’ll see how the Bush/Cheney website stacks up against the Kerry/Edwards website on issues like Homepage Size, Accessibility, Usability, Markup, and Branding & Overall Design.

Homepage Size

First up let’s see how each of the candidates sites weigh in. Using the Web Page Speed Report as a guide, the Bush/Cheney homepage comes in at a whopping 310kb. Here’s the breakdown:

• HTML 70kb
• Images: 207kb
• Javascript: 18kb
• CSS: 5kb

Looks like Dubya, could benefit from some semantic html and by getting rid of those 46 tables. Also the 207kb in images is rediculous. I would first recommend replacing all the images that are text with actual text.

The Kerry/Edwards homepage slightly smaller, but still weighs in at a hefty 181kb. And the breakdown:

• HTML 18kb
• Images: 114kb
• Javascript: 35kb
• CSS: 13kb

The size of the html is decent (despite the 29 tables), and total images are half the size of their Republican counterpart. Javascript at 35kb, is quite large, and likely could be trimmed down.

And the vote on the issue of homepage size goes to…

Markup

We’ve already covered the number of tables being used in each website. But let’s turn our attention to standards compliance in the markup. Both sites sport the HTML 4.01 Transitional DOCTYPE. It would be nice if they used XHTML, but let’s see if they can at least live up to the HTML 4.01 standard.

The Kerry/Edwards site fails HTML validation with 34 errors. Most of these are due to improperly placed tags and invalid usage of attributes.

As for Bush/Cheney, their website fails HTML validation with an atrocious 184 errors. It leaves me asking…why use a DOCTYPE if you have no intention of adhering to it.

And the vote on the issue of markup goes to…

Accessibility

Since Section 508 is mandated for all federal government sites, let’s take a look at how well each candidate adheres to that and other accessibility guidelines in their own websites.

The Bush/Cheney camp fails Section 508 and the WAI verifications miserably. Hey guys, ever hear of the alt attribute? I guess when you have 72 images on a page, it gets a little tedious adding alt attributes to all of them.

Kerry/Edwards passes Section 508 verification, but fails WAI verification due to: the use of the bgcolor attribute in the body tag, the use of the same link text in anchor tags that refer to different link destinations, the failure to use labels for form input elements, and a few other things.

And the vote on the issue of accessibility goes to…

Usability

Usability can sometimes be a subjective thing. What I may think is poor usability, someone else may think is perfectly usable. That is why usability tests involve groups of people. I could go fairly in depth on this subject by taking out my trusty “Defensive Design for the Web” book by 37Signals, but in the interest of the length of this article, I’ll keep it short, and look to my readers to add their 2 cents on each site’s usability.

First up on this topic, Kerry/Edwards. The links are nicely organized along the left and I like the hover effect of adding the underline. Jakob Nielsen may have a problem with the links not being underlined in the off state, but I think it works in this situation. At least they are noted with color and the underline on hover helps those who are colorblind. I think that the subheadings for each section of links, although bolded, could be set apart a little better from the links by using a different color. The overall layout of the site is clean and well organized. It has a lot of information but couldn’t really be classified as “wordy”. I also like the consistency throughout the site. Everything is just where I expect it to be on the secondary pages after getting acquainted with the homepage. I really recommend that they get rid of the splash screen that appears the first time you visit the site. At least they use a cookie to prevent you from seeing it every time you visiti their site. Perhaps the only other suggestion I would have would be to give the search form a more prominent placement on the page. I also question the order of the links. I mean is information about Teresa Heinz Kerry more important than Kerry’s own running mate?

Let’s turn to Bush/Cheney now, which has not fared very well to this point. The site also uses a left-hand navigation scheme. I don’t really like the “issues” tabs near the top of the page. It seems like the designer tried to give them presedence, but they end up getting hidden. The flash movie on the home page seems to be more distracting than it is entertaining or informative. I do give the site points for maintaining the consistency of the left navigation throughout the website. The search probably could be a little more prominent. The page seems quite cluttered. It also seems that too much information has been crammed into the home page, which is essentially a 4-column layout. The home page could benefit by reducing the amount of content. This would also help reduce the overall size of the website.

i’ll look forward to others weighing on this topic, but as for my vote on the issue of usability, I have to go with…

Branding & Overall Design

For the last area, I’ll take a look at how each site has been branded and how well done the overall design is.

Starting with Kerry/Edwards, when I opened the site my first impression is that it is well-designed. The layout is clean and the content well organized. The graphics look great with the exception of the “Contribute to the Democratic Party” button, which would be better if it was more in the style of the “Play Video” button. The logo is strong and the typography although a little dull, is okay. The use of icons on the site is a little questionable. The pencil for the blog is okay, but the star with stripes icon for “volunteer center” and the star for “Contribute to DNC” do not seem representative of the topics. Especially since the icon used on for volunteering is also used as the favicon for the site.

The Bush/Cheney website is way too cluttered and the graphics are second-rate and the drop shadows used are as subtle as a hand grenade in a barrel of oatmeal. The typography is subpar and quite bland. I also wonder what is going on with the flag in the logo. Have you ever seen a flag flowing in the wind that has such sharp folds? Personally, I’d like to see a little more of the “W” branding used on the site.

And on this final topic Branding & Overall Design, the vote goes to…

Conclusion

It’s a good thing for President Bush that elections are not decided based on the quality of your website, or his presidential prospects would be hopeless. Like him or not, Kerry has the better website hands down. Perhaps his elitist lifestyle has contributed to the quality of his website.

I want to make it clear that this was just a fun little exercise to evaluate the direction of web design as it relates to the Presidential Candidate’s websites. The votes on these issues in no way reflects my own political views. Also props to Blake Scarbrough for his similar evaluations of the Summer Olympic sites…that was my inspiration for doing this.

Now it’s your turn to weigh in. Do you agree with me or am I way off? You decide.