Menu Search
Jump to the content X X
Smashing Conf New York

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 New York, 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 New York

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 New York, on June 14–15, 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:

  21. 21

    Is this the same designer/design company who made (previous version)? It looks like it’s the same style..

  22. 22

    I´m very dissapointed with the supossed “Spanish version” from the site. Chack it for yourself If you access, you will see a completly ENGLISH site (header, sidebar, footer, etc) with only 4 posts in spanish.

    That´s not good ! You don´t go live with a suposed Spanish version till you don´t finnish it, at least the navigation, the menus, the context. I understand that thakes time to translate the content, but if you want to make a spanish site, focus on the only-spanish speakers, and not on the marketing-politics saying “Hey, we care about latins, we have spanish too” (lie)

    I´ve sent an emai to, but i had no answer. Maybie this way i can have some feedback


  23. 23

    …and look at that, it’s impossible, it’s ASP.NET, wow, ASP.NET and beautiful site, it’s incredible… :)

    Of course it can be better technically :) – multiple external JavaScript files, multiple external CSS files, lack of Expires header, in properly use of ETags generated by IIS 6.0, JavaScript at the top of page (within head). Everything of this can be avoided. :)

  24. 24

    Does anyone know what that gorgeous display serif is? The script looks like Snell Bold. Let’s hope that the rest of our government starts to rise to the challenge. Ever visited your local congressperson’s website? Or senator? Blech.

  25. 26

    My favorite part is that is has an RSS feed!

  26. 27

    So this is the change Obama was talking about…

    If only Georgia were used this beautifully everywhere. Lovely.

  27. 28

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

    That’s so close-minded. I come from a country that exists double longer than US and it feels offensive to me.

    All in all, the article is brilliant! I haven’t seen such a one in a while. It’s something different from what I can usually find here.

  28. 29

    I like this kind of article, where a fantastic design is dissected and discussed. There’s not too many blogs doing this that I’ve found. These are valuable resources for beginning designers. Perhaps Smashing Magazine could find a few more examples to write about.

    Great work, thanks!

  29. 30

    When you see an article starting like that, well..

  30. 31

    Nicely written article about a very nicely designed site. Its good for the detailed dissection of the site, it gives a good overview of what should be done and what should be avoided.

    Perhaps do a few more site reviews like this.

    Cheers :)

  31. 32

    You guys are sure getting bent out of shape about that world’s oldest brand business. Don’t be so easily offended — after all, your news is covering our president on a daily basis, not the other way around. :)

  32. 33

    Ha ha. This site uses tables. Cheaply made.

  33. 34

    does anyone know which agency worked on the site redesign?

  34. 35

    The new site is really good. First goverment related site ever i subscribed. And i’m not even from the U.S. …

  35. 36

    A more concise assessment would point out that the new website is an adaptation of Obama’s campaign branding. Essentially it fuses Obama’s strong-colored, graphic heavy, modern website with the traditional, light and boring design.

  36. 37


    Kind of deceiving comment there…The site doesn’t use tables for the overall design. Tables are valid, and the use of tables in this site is minimal. I found two tables, for styling the search box and e-mail subscription forms. Nothing wrong with that. :S

  37. 38

    We hope to see more changes than those on the website.

  38. 39

    @ Rob (February 1st, 2009, 8:23 am) ….

    It these kind of comments that “piss” me off… But, one day the US is going to realise there are other great countries in the world…

    cocky little buggers.

  39. 40

    I see that the “world’s oldest brand” had been stroked-through =) It is only 500 years ago America was discovered, and then it took alot of time to get it to be a state and to develop a “brand”. The beer i am drinking ( Leffe ) has more history in it than USA. But, ok, Whitehouse changed site. It’s OK i guess.

  40. 41

    Katie — You lost all of your credibility by saying the US government is the oldest brand in the world. Period.

    Rob — Shut the fuck up — this cockyness is the reason most of the world loves you this much!


↑ Back to top