Whitehouse.gov Redesign: The Change Has Come

Advertisement

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 website1.

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.

Old White House Website Showing Old Branding

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.

White House Website Showing New Branding

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.

Look at Colors and Sign-Up Box

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.

White House Website Showing New Branding

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.

White House Website Showing New Branding

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.

Heavy Serif Styling

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.

Text Size +++

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)

Footnotes

  1. 1 http://www.whitehouse.gov

↑ Back to top Tweet itShare on Facebook

Katie Kelly is a front-end Web developer by day and video game fanatic by night. With over 15 years of experience, she enjoys the hybrid mix of clean code, user-friendly content, and customer-driven e-commerce. When not fighting the dreaded "scope creep" monster, she remembers to update her website with helpful tips about wrangling with the design side of ASP.NET: mediapyre.

Advertisement
  1. 1

    Good night, Happy April Fool’s Day!

    Mrs. Herman from London was visiting some friends in Florida when she saw a little old man rocking merrily away on his front porch. He had a lovely smile on his face. She just had to go over to him.
    “I couldnt help noticing how happy you look. I would love to know your secret for a long and happy life.”
    “I smoke four packets of cigarettes a day, drink five bottles of scotch whiskey a week, eat lots and lots of fatty food and I never, I mean never exercise.”
    “Why, thats absolutely amazing. Ive never heard anything like this before. How old are you?”
    “Im twenty six,” he replied.

    Happy April Fool’s Day!

    0
  2. 102

    Madison isabella

    August 25, 2010 3:10 am

    The detailed description about white house is really impressive and good.Thanks for sharing this here. information in an elaborate way.Thanks!!

    0
  3. 203

    Awesine Post, I didnt think I’d missed anything on this one, but I guess I had!

    0
  4. 304

    The first time I stumbled at the site redesign, I was particularly impressed by the clean layout and realistic use of shadows and gradients. Surely no human design can be said to be 100% perfect, considering varying perceptions of critics. Good work!

    0
  5. 405

    Oh my goodness! Incredible article dude! Thank you, However I am encountering issues with your RSS. I don’t know why I cannot join it. Is there anybody getting identical RSS issues? Anyone who knows the answer can you kindly respond? Thanks!!

    0

↑ Back to top