Whitehouse.gov Redesign: The Change Has Come

• By Katie Kelly
• February 1st, 2009
• Redesign, Usability
• 106 Comments

By Katie Kelly

The US government is a brand, one often overlooked in favor of the obvious companies and celebrities. The United States of America is arguably a brand in dire need of refreshing. While this is certainly a larger task than simply restyling a logo or adding a smattering of Web 2.0 cliches to its Web and print material, a significant step has been taken in the full overhaul of the White House website.

Millions across the world focused on the United States’ inauguration of Barack Obama, waiting for the change they were promised in the election campaign. While only time will tell if that happens, a dramatic change can be seen on the new White House website.

In this installment, we’ll take a tour of the updated Whitehouse website, as well as quickly compare it to the old website under the George W. Bush administration. The many changes within the government are reflected in the website’s new direction: the design, the content and the technology.

Visual Design and Typography

First a quick glance at history: the White House website under the George W. Bush administration had a single-colored background, with a very subdued color scheme. White, light gray and navy blue were the only colors found outside of the iconic presidential seal. The logo was very prominent in the upper left, with the navigation taking up a full third of the page. As shown here, there were minor CSS alignment issues throughout the website.

Now back to the present, for the “reboot”: shortly after Barack Obama’s inauguration to the US presidency, a new website was posted. The White House logo was heavily reduced in prominence, taking a visual backseat to the navigation and content header.

The navigation got a sorely needed menu update, freeing up an extra third of screen space compared to its predecessor. jQuery is used extensively throughout the website: on the menu, in images (with thickbox) and for the carousel effect.

Subtle gradients and whitewashed effects are design concepts retained from the original website, although the blue gets a much larger range and deeper tone. Red comes into play with the roll-overs, and a tiny flag icon is included, interestingly, in the prominent spot under the logo and to the left of the navigation: a sly allusion to the “flag pin” controversy during the campaign? Perhaps.

The newsletter sign-up box gets prominent placement and is well offset by the contrasting color. At the time of this screenshot, it matched the President’s skin tone rather well. One wonders if that is a coincidence.

The design adds a number of classic elements: the stars, architectural details in the main background, the grayscale presidential seal in the horizontal rule before the footer.

Sidebars on the website show desaturated illustrations that follow the color scheme of the rest of the website. Titles and buttons maintain the brown tone, with subtle gradient effects.

Typography

Lucida Sans is used for body text and Georgia for headings. These older fonts carry on the slight classical/retro slant of the website. In a nod to sans-serif font readability on the Web, Arial is used for main text. While the font used in the image headers is not listed, it is a heavy serif font, styled like flyers of old, from the tiny pronouns and articles to the fully capitalized nouns.

Website Structure

Structurally, the website shows a clean hierarchical importance from top to bottom and left to right. The content header carousel effect gives lush visual prominence to current topics, with the left side containing the carousel controls and headline text. This allows users with low resolutions or alternate browser set-ups, such as screen readers, to see the content of the headline before the photo comes into play.

At an 800×600 resolution, the screen shows only the blue content header, with the background and white content box cut off. At that resolution, the website does scroll horizontally, but the headline becomes the focus, and the link to the featured content is visible without having to vertically scroll.

Directly beneath, we have a three-column set-up: the blog, a search box and the “Agenda” section, as well as a content pull-out (most likely a placeholder for future expansion).

Usability and Accessibility

The website takes a few detours from the usual standards of usability. On the main page, the search box is almost lost in the middle of the secondary content; it has little to no visual impact, with the word “Search,” the outline of the input area and the tiny magnifier all in a light gray. The upper right has an email/newsletter sign-up function that is well placed and well set off from the blue content header, but this takes the place of the conventional spot for the search box.

The content of the website scales decently when text size is changed: the navigation menu tab is a static image; however, the content in the roll-over and the duplicated navigation in the footer do scale. Considering the reach (the demographics, if you will) of the website, a more screen reader-friendly version would be a good step to becoming more accessible, because the header navigation is unreadable and the footer navigation requires the entire page to be read before being able to navigate away.

The website’s images are well thought out and optimized, and while they are not a big burden on dial-up users, a text-only version of the website would solve a number of accessibility issues in one go.

Change We Can Validate?

Perhaps not. As of this writing, there are 41 errors and 1840 warnings for CSS 2.1.

However, from a visual standpoint, there is veritable change in the content that is being delivered, in the use of technology to share that content and in the styling of that content. The United States government is taking a step to refresh its brand and its image to the world and to add transparency to its workings; the President’s website reboot shows a new, well-designed direction.

(al)