視覺設(shè)計(jì)與版式
先看看布什時(shí)代的白宮網(wǎng)站（如下圖），使用了單一背景色，以及比較暗淡的配色，白色，淺灰，海軍藍(lán)。Logo 位于左上角，很顯眼，導(dǎo)航區(qū)占據(jù)了1/3 的頁面空間，還略有點(diǎn) CSS 對(duì)齊問題。
現(xiàn)在的白宮網(wǎng)站，白宮的標(biāo)志低調(diào)了很多，位于頁面主體內(nèi)容之外，原先占據(jù)1/3空間的導(dǎo)航區(qū)不見了，而是大量使用了 jQuery 實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航，jQuery 在菜單，Banner 圖片等場合被大量使用。
微妙的漸變色以及水洗效果被保留下來，不過，藍(lán)色變得更廣更深。還在鼠標(biāo)盤旋菜單中引入了紅色元素。有趣的是，主導(dǎo)航條的左邊加了個(gè)小小的星條旗標(biāo)志，是否在暗示競選期間的“星條旗胸章”之爭？
在頁面右上角，出現(xiàn)了郵件列表注冊(cè)框，那個(gè)“GET UPDATES” 按鈕的色調(diào)據(jù)說和奧巴馬的膚色是一樣的（美國人八卦起來也很無敵）。新設(shè)計(jì)中加入了一些古典元素，主背景中的五角星與建筑細(xì)節(jié)，以及頁腳上方的灰色總統(tǒng)章。
頁面?zhèn)冗厵诘呐渖驼麄€(gè)站點(diǎn)的配色呈現(xiàn)一致的低飽和度顏色，按鈕同樣適用咖啡色系，略呈漸變色。
[Page: ]
字體
正文使用的是 Lucida Sans 字體，標(biāo)題用的是 Georgia。這些老式字體為網(wǎng)站增添了些許古典與懷舊傾向。由于 sans-serif 字體在 Web 上的可讀性，主要內(nèi)容的字體使用了 Arial，不過圖形化頁首的文字不太清楚，似乎是加粗的 Serif 字體，用的是老式傳單的字體風(fēng)格，小寫的代詞，加全部大寫的名詞。
[Page: ]
網(wǎng)站結(jié)構(gòu)
從結(jié)構(gòu)上看，整個(gè)站點(diǎn)顯示了一種干凈的結(jié)構(gòu)，從上到下，從左到右。頁首部分的幻燈式新聞圖片帶來華麗的視覺感受，左邊關(guān)聯(lián)的文字內(nèi)容，可以讓低分辨率用戶，或使用代用瀏覽器（如屏幕閱讀器）的用戶在沒看到圖片之前就能理解圖片的意思。
在800x600屏幕分辨率下，屏幕上只會(huì)顯示到那個(gè)藍(lán)色的內(nèi)容標(biāo)題，在這個(gè)分辨率下，頁面并不左右滾動(dòng)，但新聞標(biāo)題部分就成了視覺的焦點(diǎn)。
新聞區(qū)域的下方，是三欄結(jié)構(gòu)，分別為 Blog, 搜索與 Agenda，以及一個(gè)視頻區(qū)域。
易用性與可訪問性
網(wǎng)站的易用性方面似乎走了不少彎路，那個(gè)搜索框位于新聞去三欄結(jié)構(gòu)的中間，使用的都是淺灰配色，很難被發(fā)現(xiàn)。右上角的郵件列表注冊(cè)倒是很顯眼，不過，那似乎應(yīng)該是搜索框的位置。
文字的縮放可以正確地進(jìn)行，不過主導(dǎo)航條是圖片式的，這個(gè)縮放不了，但下拉菜單以及后面的頁腳部分的文字都可以正確的縮放（當(dāng)然在 IE6 中不行 -譯者）?？紤]到白宮網(wǎng)站的訪問之廣泛，如果對(duì)讀屏軟件更友好一些會(huì)更好，目前，主導(dǎo)航條的下拉菜單是無法被讀屏軟件讀取的，其頁腳部分的鏈接也要等整個(gè)頁面全部完成后才會(huì)讀到。
網(wǎng)站中的圖片也做了很好的優(yōu)化，雖然對(duì)撥號(hào)用戶來說，不是問題，不過如果能提供一個(gè)純文字版，也許會(huì)更好地實(shí)現(xiàn)可訪問性。
能否通過驗(yàn)證？
恐怕不成。在 CSS2.1 驗(yàn)證測試中，有41處錯(cuò)誤和1840個(gè)警告。
不過，從感官來說，新網(wǎng)站有了很大的改觀，所使用的技術(shù)，風(fēng)格都顯示出美國政府正在努力改觀其品牌形象與透明度，新的白宮網(wǎng)站走向一種新的，良好的設(shè)計(jì)路線。
原文作者
Katie Kelly 白天做 Web 前端開發(fā)設(shè)計(jì)，晚上沉迷于視頻游戲。15年的經(jīng)驗(yàn)讓她欣賞干凈的代碼，友好的內(nèi)容，以及客戶導(dǎo)向的電子商務(wù)。在不和怪獸作戰(zhàn)的時(shí)候，她在自己的網(wǎng)站 mediapyre 寫一些 ASP.NET 設(shè)計(jì)方面的文章。
