Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns. Redesign: The Change Has Come

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 Link

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 Link

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 Link

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 Link

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? Link

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.


Footnotes Link

  1. 1
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

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

  1. 1

    I really like the new design, but I hate that it’s still ASP.NET powered. Why do all the major businesses use ASP.NET and not PHP or Ruby?

  2. 2

    Mickael B. Alexandre

    February 1, 2009 3:42 am

    Really amazing graphist that make the obama campaign’s site too !
    We reconize the graphic touch. Simply the best.

  3. 3

    “the world’s oldest brand” How on earth did you come up with that statement???

  4. 4

    Claes Magnusson

    February 1, 2009 4:08 am

    “The US government is a brand; the world’s oldest brand…”

    World’s oldest brand? Which world?

  5. 5

    A fair assessment overall but I would argue that the US Gov isn’t the oldest brand in the world. I kid. It really is nice to see the site starting to come into the 21st century, isn’t it?

    And apparently everyone else beat me to it.

  6. 6

    Nice looking website, comparing to our governments website.

  7. 7

    I like the redesign also but we lost a few features. The president has always had a “Presidential baby welcome” where the administration would send you a message. We held off during W’s lame duck period and then with the redesign it disappeared.

  8. 8

    Andrew Cairns

    February 1, 2009 4:28 am

    it is a very well designed site indeed!

  9. 9

    Fantastic design. I like it.

  10. 10

    At the time of this screenshot, it matched the President’s skin tone rather well. One wonders if that is a coincidence.
    The brown used is the inverse of the light blue used… if you’re on a mac ctrl+alt+command+8 and you’ll get what I mean.
    The new site is wick’
    good article

  11. 11

    HTML is valid, great work, only 1 minor error

  12. 12

    How can it be the world oldest brand :S There has been loads of similar “brands” like the british monarchy and another other monarchy in the world that were around for hundereds of years before the US preseident existed. The history of the US is so short compared to the rest of the world.

  13. 13

    For me the layout has to many squares and gradient mashes that make the website looking like a detention center seen from an airplane. Especially on the campaign site there were squares with gardient mashes inside of gradient mashes inside of squares of gradient mashes … Moreover, everything is blue. It’s okay if the President of the United States uses blue being the color of seriousness, but in the times of the whole web is blue like a uniform I skip blue pages immediately.

  14. 14

    I’d like to find that navigation somewhere as a jquery download

  15. 15

    World’s oldest brand, hmph! The world is bigger the US.

  16. 16

    Beh beh beh…
    Where is the blood effects?

  17. 17

    The site is valid xhtml 1.0 transitional. Handful of pages have errors on them but last time I looked this was because someone pasted MS Word code into their CMS. Most of the CSS validation errors are a few IE-only properties.

    Their navigation should be easily fixed if they position it offscreen rather than use display:none. Site in general is pretty impressive and I look forward to it’s evolution and improvements! Thanks for the article.

  18. 18

    Every thing looks fine…Nice use of typography.

    DKumar M.

  19. 19

    I think with the CMS its ExpressionEngine…the same of

  20. 20

    Patrick Kwinten

    February 1, 2009 6:25 am

    are they also move back to secure Lotus Notes email above outlook:


↑ Back to top