Obama Defeats McCain

by Brooke Marshall — Oct 14, 2008

In these shaky economic and political times, it's important to put aside our conservative-versus-liberal differences, to shun petty political squabbling and come together in perfect bipartisan agreement about an important issue facing this election: Web design.

I don't care who you are, whether you're a staunch conservative or a hardcore liberal, a Republican, a Democrat, or an Independent — we can all agree that Barack Obama's Website is freaking gorgeous. And that makes John McCain's already mediocre site seem all the more lame. I mean, I know the guy doesn't know how to use the Internet, but that's no excuse for some of the design sins committed on his site.

Sure, this may seem like a paltry issue in light of the crisis on Wall Street, the government's high-stakes bailout, astronomical gas prices, the broken health care system, the... well, you get the point. But with the polls split almost evenly, and 73 toss-up electoral votes slated to decide this election, the candidates owe it to themselves and their parties to put their best possible face forward, particularly on a medium as important as the Internet. September saw a huge spike in the number of visitors to McCain and Obama's Websites, according to Web information site Alexa.com, and if their growth over the past few months is any indication, the sites are due for a lot more in the weeks ahead.

Now, I'm not just writing this for the distinct pleasure I get from putting McCain's mediocre Web design in its place. (For the record, I'm a 22-year-old liberal/hippie with an Obama '08 sticker affixed to the bumper of my Honda Civic.) I'm also impressed with the amount of pertinent information these two very different Websites have to teach us about the principles of sound design — what to do, what to avoid, what looks great, what looks cheesy, etc. So I examined the design and functionality of the sites, looking at aspects like quality, organization, use of current design trends, ease and pleasure of navigation, provisions for alternative users (the disabled, non-English speakers, etc.), and whether the site achieves its purpose.

And all I can say is that if quality of Web design decided the election, Obama would win in a landslide.

First Impressions — Headers

Located at the top of each page, the header is often the first part of a site that visitors see. Although it doesn't need to be wildly impressive, putting some effort into it can add a nice touch of flair. The ideal header is attractive, but also says something meaningful about your site. At the very least, it should contain your site's name and logo.

Both Obama and McCain have put effort into their headers, but Obama's outshines McCain's quite a bit in terms of artistic quality.

Obama Header

Blurred, feathered edges, an infusion of white light, a gradient background, and a faded photograph of supporters lifting “Change” signs symbolize Obama's message of hope and growth. In addition, the header blends seamlessly into the rest of the page while still maintaining definition as its own distinct element. It achieves this through a shared gradient effect with the page background paired with strategic highlighting and a red border at the bottom that fades into a red stripe of the American flag. The only flub in this header is the “En Español” button, an ugly, blocky affair that overlaps the “W” in “Now” slightly.

Yet perhaps just as important as all this lovely artistry is one simple detail: The pictures of Obama and running mate Joe Biden are well proportioned. Minute and obvious though this may seem, it's not the case in McCain's header.

McCain Header

The pictures of him and running mate Sarah Palin fall victim to what looks like a bad Photoshop job — if you look closely, you'll notice that Palin is slightly larger than McCain. You don't need to look closely to see that the tops of both candidates' heads are chopped off. This looks sloppy and a bit amateurish.

Of course, McCain's header is not without its strengths. Like Obama's, it employs an artistic gradient background with a faded picture of supporters waving American flags. McCain and Palin, rendered in solid colors, stand out in stark contrast to the soft background. Had the pictures of the two candidates been better proportioned, this could have been an above-average header. As it stands, it looks like something that was slapped together without much of an eye for detail.

Finding Your Way — Menus and Search Tools

The importance of a well designed, easy-to-navigate menu cannot be understated when dealing with information-heavy Websites like McCain's and Obama's. Great care should be taken to make sure that the menu helps people browse the site effectively. Key things to keep in mind are readability and functionality.

Obama Menu From the text to the design to the details, Obama's menu is an ideal navigational tool. The dark blue sans-serif font over a white background is easy to read, and the use of an italicized serif font for words like “the” accents the text nicely. Also important is the format — namely that he condenses long lists of information in his drop-down menus into two columns. This means that users with smaller screens or browser windows don't have to scroll down to see the full host of menu options. In addition, his drop-down menus appear in full on mouseover and disappear instantly when the mouse is moved away. Several popular Websites like Google, Yahoo!, Facebook, and The New York Times online employ this professional-looking technique because it doesn't waste the visitor's time or clutter the screen with unnecessary animation.

McCain Menu McCain's menu eschews the solid design principles on which Obama's is built in favor of the exact opposite. Instead of a clearly defined main menu, there are bold words against the site background. Instead of dark text against a white background, there is bold white text on a dark background. Although this can be an eye-catching technique, it is notoriously difficult to read, so it should be kept brief and limited to special situations.

The poor menu construction doesn't stop there. On mouseover, his menus slide down, and they slide back up when the mouse is removed. This unnecessary effect not only wastes time and clutters the screen, but it also looks cheesy. The options listed on the drop-down are kept to one long list, which means those with browsers not expanded to full screen may have to scroll down or change their screen size to see all the options. This is the kind of thing that annoys and frustrates visitors — and that can drive them away.

McCain's final major error is neglecting to include alt text in his menu. This is important because it allows people using text-only or voice browsers to access the information. Luckily for alternative users, Obama's menu does utilize this essential tool.

However, Obama's Website falters by omitting one crucial element: a search function. No matter how great a menu is, there is still going to be some information that's hidden away somewhere that can only be accessed easily through a search. It's almost embarrassing that McCain's site beat Obama's on this one. Hidden though it may be — it's tucked away at the very bottom right-hand corner of the page — McCain's site does indeed feature a search function. I grudgingly tip my cap to you, Mr. McCain.

Creating A Palette-able Site — Color Scheme

Use of color in a Website should never be haphazard. At the very least, the design should feature a matching color scheme; however, neglecting to take full advantage of this useful tool can be a big mistake. When used well, color can draw attention to or away from page elements or even symbolize an idea — which is exactly what Obama's strategic color scheme does.

The site utilizes a tasteful, consistent scheme, with certain areas appearing brighter or more faded for variety and emphasis. The page is drenched in a deep, lovely blue, with white typically used as a text background or highlight, and splashes of red accenting important elements. The symbolism of this color scheme, while clear, isn't overstated or obnoxious.

The use of color in McCain's site, while certainly sound, lacks in strategy and vision. Strong colors placed almost indiscriminately around the page make it difficult to determine where the eye should be led. In addition, the solid color background is a bit boring. Ultimately, this scheme pales in comparison to Obama's clever use of color.

Lookin' Good (Or Not) — Design

Of course, what is a color scheme without a design to go with it? The ideal site looks good and functions better. Navigation should be easy and intuitive, presenting — but not pushing — cool but useful features to visitors. Ultimately, people want to feel like they're in control of the Website they're visiting — and if they don't, they're likely to leave as quickly as they came.

Flash™ is one of those things that can drive users away as easily as it can keep them around. The most important thing keep in mind is whether Flash™ is actually necessary for what you're trying to accomplish. If it doesn't make the experience of your Website easier and more pleasant for your visitors, don't use it.

I'm talking to you, John McCain.

McCain Flash™ Animation The front page of McCain's Website features a clunky Flash™ animation containing three screens that alternate with a rolling animated effect every few seconds — kind of like a slot machine, only with opportunities to volunteer with McCain's campaign instead of pictures of fruit. If you want to shift to a different set of screens, you can click some arrows at the bottom of the animation, but you have to wait and watch while the new screens roll into place.

This clumsy bit of Flash™ animation ultimately gives the impression of someone who's severely out of touch trying to impress people with what he thinks of as “sophisticated technology.”

The rest of McCain's site design isn't much better. The separate elements in his page are kept in neat boxes, but loud colors and unnecessary use of large text size make for a cluttered, almost chaotic feel.

Even though Obama's front page features quite a bit more content than McCain's, it avoids clutter through a clean, cohesive design. The site is exquisitely woven together using a series of color fades and brightening, an excellent balance of text and graphics, plenty of breathing room between elements, and strategic variety of text size, style, and color. He also includes an excellent graphic that utilizes Silverlight, Microsoft's Flash™ alternative — a series of four tabbed screens that switch every few seconds with a brief, tasteful fade as a transition.

Obama Starlight™ Animation

This motion makes it clear that these screens, which contain information about the campaign and current events, are the main emphasis of the front page. Visitors who want to view a specific screen simply click one of the clearly labeled tabs, and the chosen screen is automatically displayed without the fade transition.

Obama Background But the attention to detail on Obama's site doesn't stop with Silverlight animation. Right-clicking the page background and selecting View Image reveals an intricate emblem that appears in the center of every page, but that's usually covered by the content.

Special attention is also paid to his People page. The name of each featured group is accompanied by a graphic of the eminently clever Obama logo with tasteful, attractive accents that pertain to that culture. As if that weren't enough, his Issues page contains unique graphics produced in a similar style for each different topic.

Curious to see if McCain's Website utilized a similar technique, I checked out his Issues page. He opted to use reliable but uninspired stock photos. Clicking the Coalitions menu button returned me to the main page, which is a definite no-no in Web design. Links should always lead to the place they claim to lead to. Remember: If you don't have a place for a link to go, don't link anywhere at all.

Yes, I'm still talking to you, John McCain.

Music, Pictures, and Vids, Oh My! — Multimedia

With sites like MySpace, YouTube, and Facebook ranking 3rd, 4th, and 5th on Alexa.com's list of the top 100 most visited sites in the U.S., it's no surprise that incorporating multimedia can boost a Website's popularity. Videos, pictures, music, and the like can make a site look modern and interesting, but they also carry with them the threat of seeming cheesy, inexpert, and even frustrating for visitors.

Obama deftly avoids the perils of including multimedia with a Photos page that utilizes a clean, intuitive design. Thumbnails give the user the option of choosing which photos to view, and a brisk but not-too-quick slide show allows them to relax and watch without getting frustrated or bored.

Barack TV His videos page, Barack TV, exudes a trendy, scrabook-y, down-home kind of feel. Weathered gray boards with the Obama logo in flaking paint form the backdrop for a cluttered assortment of framed pictures, faded photographs, tattered campaign posters, and license plates from four of the battleground states. Mousing over these different images reveals titles of different videos. This is a distinct departure from the original Barack TV page, which featured a sleek, modern player with a neatly consolidated list of videos, but it makes for a much more interesting and artistic layout.

In addition to photos and video, Obama offers several other multimedia options on his site, including downloads like desktop wallpaper, instant messenger buddy icons, materials for assisting with his campaign, cell phone ring tones, iPhone apps, and even music.

McCain's site doesn't take advantage of the many rich multimedia options available — and judging from how the pictures and videos on his site are treated, this is probably for the best. There's no slide show for the photos on the front page; to view a picture, the user must click the thumbnail and then wait for the photo to grow to full size. Clicking the Photos of the Week link brings the user to an impressive-looking but difficult-to-navigate album. Although it seems like quite a bit of time went into its creation, it ultimately comes off as impractical and flashy for the sake of being flashy.

McCain Video Player McCain blunders on his Multimedia page with a video that begins playing automatically. Anyone who's spent more than 10 minutes on the Internet knows this is annoying — if your visitors are listening to music, they have to scramble to turn it off, and then rewind the video to the beginning so they can catch what they missed. And — surprise, surprise — the mistakes don't stop there.

The list of videos doesn't include any more information than the title and a tiny, extremely pixilated thumbnail, which makes it difficult to figure out which video you want to watch. Finally, there's no easy access to closed-captioning or Spanish. That's just insensitive.

Keeping In Touch — Networking

Networking and interactivity can help keep users connected to the Web pages they frequent. Knowing that their input is valued can make visitors feel special, welcome, a part of their favorite sites. Most sites would do well to include an easy-to-find contact page and perhaps a discussion board. There's also the option of getting involved with established social networking sites like MySpace and Facebook. However, trying to create your own online community can be fraught with peril.

Don't believe me? Check out McCainSpace.

McCainSpace

The ambition behind McCain's networking page is admirable, but its execution is an utter failure. The cluttered page opens with a pixilated video of a profoundly uncomfortable-looking McCain, who delivers a stilted speech about the importance of social networking sites. I have to give him credit for trying, but he really would have been better off not filming this almost amusingly embarrassing video. He sounds as anachronistic as, well, a 72-year-old talking about the importance of social networking sites. McCainSpace is a key example of why most sites are better off leaving the social networking to Facebook.

MyBO But then there are the exceptions that prove the rule. Sure, Obama has taken advantage of the myriad social networking options out there, including links to 16 popular sites for networking and photo and video sharing. But he also created a savvy, successful social networking space of his own.

MyBO's sleek, exciting design allows supporters to create events, get involved, meet other Obama fanatics, blog about their experiences, and much more. There's even a handy tutorial that appears when a new user logs on for the first time. MyBO is designed far better than it has any right to be.

Whoops! — Errors

Broken links, misspelled words, pixilated photos — errors like these can make your site look amateurish and even untrustworthy. It's imperative for Web designers to check, double-check, and triple-check their sites for errors.

Although their sites are cleaner than most, even Obama and McCain, men whose Websites will play a part in deciding whether they'll be elected president of the United States, have errors on their Web pages. Frankly, this is inexcusable — particularly in McCain's case, since there are not one, but two errors on his front page.

Lessons Learned

Despite a few minor flubs, Barack Obama's site is a shining example of the amazing things that can be achieved through the art of Web design. Even so, it doesn't have that much to teach us, except maybe to pay attention to detail. No, the true lessons lie in John McCain's attempt.

Now, don't get me wrong: I'm not saying you shouldn't vote for McCain because of shoddy Web design. Clearly the man has a lot to offer the American public — experience, intelligence, an impressive record of service, all that good stuff.

But what if McCain wasn't running for president? What if he was running a small business instead? If that were the case, a lot fewer people would tolerate the mistakes he made on his Website. And that's the lesson to take from this. McCain's Website commits two grievous errors: Trying too hard and not trying hard enough. Instead of wasting time with McCainSpace — a doomed enterprise if ever there was one — he should have concentrated on picking color more wisely. Instead of trying to impress his visitors with hackneyed animations, he should have checked his site for errors. Instead of creating a mediocre site plagued by the same basic design mistakes people have been making since the days of animated GIFs and embedded MIDI players, he should have done his homework on current design trends.

In a way, his site almost mirrors his politics. The self-proclaimed maverick who votes with the current administration the vast majority of the time has created a blasé site that fails to step outside the safe boundaries of Web design, and even repeats a few obvious mistakes. Meanwhile, Obama's site is poised at the frontier of innovative design, incorporating relevant trends with solid principles and a spirit for experimentation and evolution, all while keeping in mind the most important aspect of any Website — the user.

As far as I'm concerned, that's the change we need.

Screenshots taken from www.barackobama.com and www.johnmccain.com.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float