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

(al)

Footnotes Link

  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

    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?

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

    0
  3. 3

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

    0
  4. 4

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

    World’s oldest brand? Which world?

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

    0
  6. 6

    Nice looking website, comparing to our governments website.

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

    0
  8. 8

    it is a very well designed site indeed!

    0
  9. 9

    Fantastic design. I like it.

    0
  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

    0
  11. 11

    HTML is valid, great work, only 1 minor error

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

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

    0
  14. 14

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

    0
  15. 15

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

    0
  16. 16

    Beh beh beh…
    Where is the blood effects?

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

    0
  18. 18

    Every thing looks fine…Nice use of typography.

    DKumar M.

    0
  19. 19

    I think with the CMS its ExpressionEngine…the same of change.gov

    0
  20. 20

    are they also move back to secure Lotus Notes email above outlook: http://www.dominopower.com/issues/issue200712/00002098001.html

    0
  21. 21

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

    0
  22. 22

    I´m very dissapointed with the supossed “Spanish version” from the site. Chack it for yourself http://www.whitehouse.gov/spanish/. 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 whitehouse.gov, but i had no answer. Maybie this way i can have some feedback

    Adios,
    Francisco

    0
  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. :)

    developer.net

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

    0
  25. 26

    My favorite part is that is has an RSS feed!

    0
  26. 27

    So this is the change Obama was talking about…

    If only Georgia were used this beautifully everywhere. Lovely.

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

    0
  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!

    0
  29. 30

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

    0
  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 :)

    0
  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. :)

    0
  32. 33

    Ha ha. This site uses tables. Cheaply made.

    0
  33. 34

    does anyone know which agency worked on the site redesign?

    0
  34. 35

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

    0
  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 whitehouse.gov design.

    0
  36. 37

    @Designer1993

    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

    0
  37. 38

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

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

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

    0
  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!

    0
  41. 42

    hey! it’s so fantastic amazing design! I’m an Iranian- don’t be afraid! I’m not a terrorist!- and I believe in the change, in Barack Obama! ;-)

    0
  42. 43

    To call the US government the world’s oldest brand is slightly ignorant to all those businesses with honorable names in Europe and elsewere that were established long before the United States constituted and that are still around…

    0
  43. 44

    Lovely re-design – loving the blue and brown and grateful to Jon (February 1st, 2009, 4:32 am) for the shortcut i wasn’t aware of.

    0
  44. 45

    To call the US government the world’s oldest brand is slightly ignorant to all those businesses with honorable names in Europe and elsewere that were established long before the United States constituted and that are still around…

    I think that statement should be deleted at all and not just stroked… It’s so improper.

    0
  45. 46

    @Jbcarey

    Every country is great for its own reasons. One thing doesn’t negate something else necessarily.

    @Coen

    You’re misconstruing what I’m trying to say. Regardless if it’s the oldest or not (which it is not), it’s one of the biggest brands in the world. Period. But way to get all butthurt about it.

    Anyway, more about design and whatnot.

    0
  46. 47

    The fonts used in the image headers is Hoefler Text from Hoefler and Frere http://www.typography.com

    1
  47. 48

    http://www.JeremyBuff.org is a political blog based on wordpress that mirrors WhiteHouse.org. Although not an exact replica, it’s a lot like WhiteHouse.org. The site says it’s not complete yet, but you should check it out.

    Looks real nice

    0
  48. 49

    Did anyone get a fix on that *sweet* heavy serif font? Would be fun to know…

    @Rob: Substitute “the world” with “North America” in regards to ‘the oldest’ or ‘biggest’ brand (and I highly doubt it’s either, but that has nothing at all to do with a website redesign, and the redesign as well as this article is well done, some minor nignags notwithstanding.)

    Okay, back to the SuperBowl (biggest, oldest ‘football’ event in the world? Perhaps not. But fun to watch just the same. ;))

    0
  49. 50

    Great design. Should come with some color themes. Definitely for me the red color theme is suitable right now.

    0
  50. 51

    The US government is a brand …

    a brand of slave-driving, corrupt, selfish rich people that would sell you to the highest bidder. Yeah, this is the “land of the free”. Here, you are free to live in the gutter, but don’t let the police catch you there, or they will drive you out of the city limits, with a strict warning not to come back. We are free to pay taxes, and you best be paying your taxes, or else you will go to jail, and besides, they need your tax money because they are busy handing it out to their rich buddies in the form of bailouts.

    In regards to design …

    if they can keep you thinking they are great, and you buy into their tactics, then they have you just where they want you.

    0

↑ Back to top