Web Design Clinic - Let's Get Political
This year is an important year in the United States. It's an election year, and some people are heralding it as one of the first elections where the candidates are embracing being online. So I decided to take a look at the two candidate's websites. My reviews are a bit longer than I usually do for the design clinic, but since these sites are so well-recognized I thought that was appropriate.
JohnMcCain.com is a (yes, I'm saying it) conservative website with a conservative design and conservative HTML. It gets the message across without screaming or frothing at the mouth, but may seem a bit needy with all the ad-like elements and requests for money and volunteers.
Review of JohnMcCain.com
BarackObama.com is a progressive site with more advanced HTML and design. It also gets across the message well, but may seem a bit self-indulgent with all the apparent "newness" of the site without any of the actual new-substance.
Review of BarackObama.com
Even if you're not an American you should take a look at these designs. They are both very well done, and show how to target very similar audiences (in this case, the U.S. voting public) in very different ways.
One other caveat, both sites are huge, taking over 200 to 300 seconds to download on a 56K modem, so if you're not on high speed, you might want to skip visiting the actual sites. And neither have valid HTML, CSS, or accessibility.
How Would You Critique These Sites?
Let's not turn this into a political debate - any comments posted that are political in nature will be removed. But I would love to hear what you think of the designs. How would you improve the designs? What do you think they did well? Post your comments on the designs.
Comments
One thing I noticed on the Obama site is they used italics and it was a bit smaller than I would prefer. I think italics is more difficult to read on the web and not the best choice of fonts for readability.
McCain’s fonts were larger and more readable but I’d have preferred a non-serif font like Verdana or Tahoma.
Goddamn I am seriously dismayed with the review, all through the campaign the Obama web people have earned a reputation for great marketing, the ability to raise money and very advanced code/database systems.
I can see invalid code in a hurried season, but there is no freaking excuse whatsoever not to be accessible. It’s not that hard.
I was exposed to it because initially the company wanted government work, so compliance was necessary. After a while accessibility begins to bleed into a better consciousness of usability, the underlying precepts are not that different.
The more you make your files accessible the more your view of the code rotates toward the end user experience. Then sometimes, at then end of some alt tag evolution, you realize none of that matters to some blind person in Mexico City who is thrilled to use a web page they needed, finally.
Dismayed.
I was impressed with McCains site when I stumbled across it a while ago. I thought it was easy to navigate, lot’s of information, and a nice clean look. Obama’s site is very professional as well.
We should sue both campaigns for lack of accessibility! Maybe we can get some $ like they did from Target.
Blind people vote too.
“but may seem a bit self-indulgent with all the apparent “newness” of the site without any of the actual new-substance.”
I couldn’t possibly disagree more with that statement. How does “new” translate into “self-indulgent”? The overriding marketing message for BarackObama.com is change, something different than what you’re used to. I’d say the site design delivers that, and does it very well. As for “new-substance”, they’ve included nearly every social and viral facet of the web - the current web. They encourange interaction, participation and contribtion to the site, along with providing a wealth of campaign information.
The entire site is very well branded, consistent, and well structured. It’s a very clean design, easy to read and navigate, and it’s designers cleary paid attention to the small details. That makes all the difference.
The JohnMcCain.com site is rather disjointed and despite obvious attempts to look new and cutting edge, it still uses a cluttered up structure circa 2002. Visually, the home page is a bombardment of components all calling for your attention. Unlike BrackObama.com, there is no smooth visual flow. A good design should give the most visual weight to just one element, and gently guide the viewer to the next most important component. Good visual flow is vital. It should not have every chunk screaming at you all at once.
Even in the header there is instant evidence of bad Photoshop skills, if not bad overall graphic design skills. Note the obvious difference between John McCain’s headshot and Sarah Palin’s. Is Palin a giant? Is she 7′8″ tall and is her head really that much larger than McCain’s? No, of course not. But the header photos make it look that way. They look slapped together as an afterthought. The designers didn’t even bother to color-correct these photos or check the lighting angles (basics that any novice learns first). Check the lighting angle - McCain’s shadow is on the right, Palin’s is on the left. That’s sloppy work and wouldn’t be acceptable as a final design coming from my company. Compare this to the candidate photos in the BarackObama.com header. The two photos were clearly well planned and fit together very nicely.
I could go on for another 3 pages, but you get the idea. JohnMcCain.com is making a good attempt, but failing on the attention-to-detail that makes the difference between a mediocre design and a truly great design.
I work for a Political Web Design company and we came to a similar conclusion as the author about the two sites. McCain went conservative and Obama made his site central to his campaign.
The other difference we saw was consistency. Obama used the font ‘Gotham’ on everything, including his site. McCain’s image was not as consistent.
Both candidates however did some innovative things online and were included in our 2008 Political Web Design Trends post.