Obama versus McCain : Web Design War
posted in Web DesignNow that Barack Obama has won the Democratic vote for President, it seems like a good time to review both Presidential candidate’s websites.
BarackObama.com and JohnMcCain.com
First off, here are the details of these sites:
BarackObama.com
- Server Type: PWS/1.2.29 (Personal Web Server)
- Width: 960 pixels
- Code: CSS and PHP
- Color Scheme: White, Shades of Blues, Grey
- Design: Light feel, Use of Gradients, Modern, Crisp, Comfortable
- Cross-Browser Compatible: Yes
- Estimated US Visitors Per Month: 1,568,981
- Valid HTML?: Failed validation, 8 Errors (XHTML 1.0 Transitional)
JohnMcCain.com
- Server Type: Microsoft-IIS/6.0
- Width: 999 pixels
- Code: Mostly Tables and ASP / ASP.net
- Color Scheme: blue, grey, orange/yellow, navy, white, green, red
- Design: Harsh feel, very “boxy”, rigid, stiff look
- Cross-Browser Compatible: Two notable IE6 problems on homepage
- Estimated US Visitors Per Month: 350,340
- Valid HTML?: Failed validation, 85 Errors (HTML 4.01 Transitional)
Screenshots from June 9th 2008
BarackObama.com is immediately a striking yet calming website, designed with organization and cleanliness in mind. The main website navigation is clearly defined and the overall usability of the website is excellent. The format of each page begins with a nice page heading graphic, well-designed and interesting. Each page is organized clearly, and a perfect amount of white space and padding is added to each section.
Features on BarackObama.com are:
- User Accounts / MySpace style : Yes (My.BarackObama.com)
- Newsletter Sign Up: Yes
- Website Blog: Yes
- TV Channel and Videos: Yes
- Events Search Engine: Yes
- Local Grassroots Group Area Search Engine: Yes
- State Specific Pages: Yes
- People Group Pages: Yes
- Issues Pages: Yes
- Downloadable Logos, Wallpapers, Print Materials, Buddy Icons etc. Yes
- Social Networking Links: Yes
- Register To Vote Link: Yes (off site)
JohnMcCain.com’s design lacks real organization and a friendly user interface look and feel. The overall design looks contrived and forced together, without any flow or consistency evident throughout. The color scheme….well…there doesn’t appear to be a standard organized color scheme at all with different colors, and tones all over the website; Prominent blues, orange/yellow, red, bright green, turquoise blue and dull blue/grey. Font sizes throughout the website differ, as well spacing and padding. An example of this is if you venture between the Campaign Calendar page and the Blog page. The difference in padding and margin at the top left is a terrible lack of real professionalism in user interface standards, especially for such an important website like this.
Features on JohnMcCain.com are:
- User Accounts / MySpace style : Yes (McCainSpace)
- Newsletter Sign Up: Yes
- Website Blog: Yes
- TV Channel and Videos: Yes
- Events Search Engine: No (only events calendar)
- Local Grassroots Group Area Search Engine: No
- State Specific Pages: Yes
- People Group Pages:No
- Issues Pages: Yes
- Downloadable Logos, Wallpapers, Print Materials, Buddy Icons etc.No
- Social Networking Links:No
- Register To Vote Link: Yes (on site)
So, after studying both websites, it is clear which one is of a higher quality of web and graphic design standards. BarackObama.com is a modern, web 2.0 website, utilizing the latest in XHTML and CSS capabilities, along with capturing the interests of all ages.
JohnMcCain.com lacks a comfortable and appealing design, and is also extremely narrow in its reach. The only user that will enjoy JohnMcCain.com is a wealthy 70 year old man looking for some new golf gear (4th tab in dark blue in center of page)!
BarackObama.com seems to be reaching out to all ages, all ethnicities, all groups of society. His website has something for everybody, and it is interesting to note that this seems to tie in perfectly with his overall campaign promise; To unite everyone. His website certainly achieves that.
What do you think about the two websites? Do you think they achieve what they need to? Which one keeps you interested to click through to other pages and which one turns you away right off that bat?
-
Cel says:
Right on. Obama’s website and campaign has received quite a bit of attention already, but you’ve compared a few things I haven’t seen mentioned.
(By the by, it’d be helpful if you could link the screenshots to the sites?)
-
Brian, this is a pretty cool look at the sites. I shared your post with my political science husband and he was interested in not just your design takes, but also your sense about who the sites speak to.
Tammy Lenski’s last blog post..7 top reasons to subscribe to Conflict Zen
-
Sarah says:
hm. i wonder who you’re voting for.
-
Cel,
Thanks for your comments! I did see after I published the post that Vanity Fair recently review the 2 websites along with Hillary Clinton’s. Wasn’t very in depth though.
http://www.vanityfair.com/ontheweb/blogs/daily/2008/05/obama-vs-mccain.html
(Screenshots are now linked, thanks for the suggestion!)
Tammy,
Thanks! I have been really getting into the presidential race in past few weeks, especially as the Primary got closer to the end.
Currently, I am eerily addicted to CNN…so I will register to vote for the first time this year now that someone has sparked my interest!
It is very interesting and ironic that Barack’s website is very modern, using the latest in online technology, CSS coding etc…and McCain’s website is using outdated tables for the website structure and format, and the code is messy and full of styles that should be in external style sheets.
Their websites really do give you a feeling of who the person is and the image their campaign gives off.
-
Sarah,
Haha! Well, I did go into this review completely unbiased….but after studying both, it was clear which one was much better. I guess my “golf gear” comment may be a little one sided!
-
dan says:
psh. it wasn’t biased.
this is one of the problems with political discourse today. if you’re on one team you have to love EVERYTHING about it. and if there’s even one things you don’t like, you’re with the enemy.
even stuff that has nothing to do with the actual politics or politicians. like the design of their sites.
there was nothing political in your analysis. and i seriously doubt anyone well versed in web design, user statistics, and marketing would disagree with your conclusion.
and it was an excellent breakdown.
-
Mark says:
check out the comments for the Golf pack on McCains website, he doesn’t seem to have many friends at all
-
Norman Miller says:
I’ll only vote for Obama if he gets one of those cool new iPhones.
On second thought I’ll need him to get sparkly shoes and flexy hair too.
-
Decent review. I think McCains site is organized though. There are degrees of organization, not just “organized or disorganized”. Both sites are really big and require plenty of work to really get through. You could probably spend several days going through video clips and reading everything. You can get lost in both sites in the subsections. And you can get back from both too.
I thought at first your golf gear comment was just a jab, until I found it was actually there. What kind of douchebag would sport that crap. Somehow, golf geat becomes really tasteless on this site, where a t-shirt wouldn’t work either.
Much of the code issues is really a problem for the developers and whomever pays for that site, not the visitors. So if they want to use tables and suffer the beast of it, that’s their problem. The page shows up pretty good. I also think most of the tables are coming from the CMS, not the outside layout. But I’m not spending that much time to investigate.
It’s funny McCain uses IIS, MS and ASP, which is what I associate with expensive closed off, proprietary. where Obama uses LAMP (I think) which is certainly more open and free. Just a webdev insider thing. Most people won’t know, but it reflects that way on me because I do know.
-
Omigawd! I finally know the perfect present for my rabid GOP, golf-crazy stepmother! She’ll be thrilled to have AUTHENTIC John McCain golf gear!
(Could the Senator have possible come up with any more inane item to put on his website?)
-
I just emailed the following to McCain’s campaign:
I can’t believe you have a tab for golf gear on your website.
Golf gear!Yep, that’s going to really excite the people of this country. That nice golf gear is just what they need to keep them happy, while they struggle to pay for gas, health insurance, repairs to their tornado or wind or flood-ravaged homes, etc. etc. etc.
Maria Antoinette didn’t actually say “Let them eat cake.” But obviously, Senator McCain is saying, “Let them play golf!”
-
Todd says:
This is definitely not what one would call a “fair and balanced” review. I feel it leaning towards what I see as a big ole heap of liberal.
-
Dan,
Thanks for your comment. I felt that I didn’t get much into the politics end of it at all, only a few comparisons between the politician and their website image as a whole and how they relate to each other.
I guess others disagree, but it is interesting to read those comments.
Mark,
Wow, I didn’t see those comments on McCain’s shopping page for the golf gear!
That’s funny. Although, I disagree with that one comments about golf being an “idiotic sport”…I was even out on the golf course today, and personally love it.Norman,
Your comment confused me, but thanks for the comment nonetheless!
Smickworks,
Thank you for your comment. It is a nice addition to the post. The Golf Gear link was just a funny item to me, especially as it is so prominent on the homepage!
As for the code, I agree that it is more relevant to developers to be interested…but that is why I went into that area of both websites. As a developer and designer, that is a major aspect for me when reviewing the quality of a website.
Did you check out the IE6 problems on McCain’s site? The menu with the golf tab is screwed up and the pics on the left don’t line up. I know these things are a little pety, but for a site receiving over 300,000 visitors a month, it needs to be better.
It’s pretty interesting to see as I’m sure at least 30% of his visitors are using IE6.
C.Sykes,
Lol, thanks for the comment. I agree that golf gear thing on the homepage is a little much, but I can see why he is doing that. It’s just another promotional tool to try and get his supporters to use and flash in public. I don’t think there is anything wrong with that, I just think having it on the homepage is a little off, and a little narrow in approach.
Todd,
Fair opinion. This post is not supposed to be leaning towards any political side. The small amounts of political opinion I did give; I simply presented a personal opinion on how the websites portray each candidate in comparison to their campaign.
It would have been worse if I said something like :
Use of tables in html : Archaic way of coding html – McCain’s website.
CSS used in html : Modern way of coding html – Obama’s website.
McCain = Archaism
Obama = ContemporaryGood thing I didn’t say that though!
-
Interesting take on the design of the candidate s websites.
Obama = Well organized, cross compatible, good color scheme, and few validation errors.
McCain = Disorganized, no real flow from section to section (and seriously.. wtf is up with the tab there for Golf Gear?!?), use of outdated design tactics, and MONDO errors on validation.Basically, Mr. McCain s site looks like the project of Mrs. Horton s 5th grade computer class, while Mr. Obama s looks like a well put together, and professional piece of webwork.
Best Political site design … Obama.
solicitor in bulgaria’s last blog post..41 PER CENT OF BULGARIANS BELIEVE EU MONEY WILL CONCENTRATE AROUND THE AUTHORITIES
-
I agree with the difference in quality between the two sites…both from a design aspect and from a code standpoint.
I just can’t believe that a website that receives over 300,000 visitors a month would be coded in messy HTML using outdated techniques like that.
The overall look of McCain’s site just doesn’t do it for me whatsoever.
In addition, looking at both websites again today…Obama’s site has a large graphic on the homepage encouraging visitors to help out the Flood victims , including a link to the Red Cross website. McCain’s site does not update like this, and does not take part in this type of online community building and support.
Overall, the main point is that Barack’s technological team are far superior over McCain’s…and this to me says quite a lot. We live in a technological era….and a Presidential candidate that strongly acknowledges that fact is comforting in my opinion.
-
Great article Brian. Errors and compatibility issues aside, it is interesting to me how one is able to visualize their respective audiences based on site design, usability, (navigation & tabs) etc. This illustrates how important it is to understand your desired target audience when designing a product in general. Appealing to your loyal customers is one thing but reaching out to those on the fence is how you sell a product or in this case win an election.
Jeremy’s last blog post..Web Design “Trends”
-
j says:
You didnt touch on the inline css and js mccain has all across his site. I mean com on put that in a seperate file and stop wasting bandwidth.
-
J,
Yeah, I agree. All of that js and css on the actual page just adds to how bad the coding is. Thanks for the good comment!
-
Great post. I was doing some research on these sites last week for a project. The target market is very obvious for both parties, even though BarackObama.com at first gave me flashbacks of CREST toothpaste packaging…after a good chuckle… the site is easy to nav and pleasant to look at..and lets not forget the “Obama Everywhere” section. Reaching hip voters, no doubt//JohnMcCain.com is…I don’t think I need to add to the wealth of comments here. Its obvious.//andrea
-
Great info. I just wrote an article on Obama’s site review, from the POV of a web designer:
http://www.8164.org/presidential-design/
I’m also working on the Mccain’s site review. I’d love to hear your thoughts.
Jin’s last blog post..Presidential Design
-
Briana says:
The one thing that Obama’s website really lacks is a search box. I don’t know how many times I’ve gone to look for something I previously read on his site and I can’t find it again. Otherwise, I like it better too.
-
Even though I would like McCain to be president I have to admit Obama’s website makes McCain’s site look like trash.
-
Hi Andrea,
Have you been able to see the development in Obama’s site design over the duration of his campaign? It has changed significantly (for the better) as time goes by. Thanks for your comment
Jin,
Thanks, left a comment on your post. Thanks
Briana,
Great name by the way!
I agree with you…I was just on there the other day trying to find information on his stance on abortion and couldn’t find it anywhere. I was then looking for a search box. That is definitely something missing.Evan,
It really does…but more so for the way it is coded in my opinion. I just can’t believe such a highly visited site would be coded in tables. That just shows low quality web design in my opinion.
-
All very good points, and I can really feel sorry for McCain, it’s like they got am amateur 15 year old to design the site so they could save on costs.
Regarding downloadable logos etc. on Barack Obama’s website, could you please link me to it, because I can’t find the page.
Eli’s last blog post..Illustrator Tutorial: Designing a Sleek Pencil Icon
-
Eden says:
well, he changed it and now he has hurricane ike and palen images… and i must agree the way obama’s webpage comes out in comparison to mccain’s makes a big difference…i wanted to see the golf stuff but it is OUT…anyways i need a site to compare issues between the too…anyone got any???
-
Obama’s site looks much more creative & trendy inline with todays personal websites.
McCain’s site looks like an e-commerce site, and I’m not buying it.
-
karl! says:
“…it is clear which one is of a higher quality of web and graphic design standards”
who’s standards?
i mean, obama’s does look better
but don’t pretend that’s a fact
or that it was measured against anything other than
that little checklist you made up. -
We think that “Obama” won the campaign “quite early on”
By designing such an elegant website for his supporters..
-
Thank you. Very interesting article.
LizimpereeFap’s last blog post..People looking for instant payday loans as world oil prices fell.
