譯者注：在HTML5真正變革各平臺的開發模式前，定需要取得某些根本性的突破。今年的的一大突破就是“響應式設計”的發展。從根本來說，響應式設計需讓內容適應任何屏幕尺寸。今年響應式設計最引人注目的案例要數Boston Globe推出BostonGlobeocom。這篇文章轉述了ReadWriteWeb與BostonGlobe的開發團隊Fliament之間談話內容，其中詳細介紹了開發中遇到的一些問題。希望這篇文章能夠給開發者們帶來一些心得和體會。

周一，波士頓環球報發布了面向手機的付費網站—BosonGlobeocom。不要把它和官方免費旗艦站點Bostonocom混淆在一起。這本身并沒有那么有趣。然而，HTML5開發社區對BostonGlobeocom大加贊賞，稱贊網站的內容根據屏幕的大小進行調整是種創新，這種創新叫做響應式設計。

響應式設計允許Globe的內容根據屏幕的可用尺寸進行重新調整，在與移動設備、屏幕尺寸和移動設備上的內容顯示的這場較量中，這是個勝利。下面是和Globe響應式設計的創始人進行的一次深度討論。

Filament團隊向HTML5跨出了一大步

波士頓環球報得到了Fliament團隊的服務支持，Fliament團隊隸屬于波士頓的一家設計發展公司，這家公司致力于開發輔助功能。下面是ReadWriteMobile和三個Fliament團隊的設計師和合伙人之間的談話全文，這三個人在開發響應式設計中做出了巨大貢獻。Mat Marquis在Globe的開發中是主力，ToddParker和ScottJehl是他的搭檔。EthanMarcotte，響應式設計之父，這個時候不便發表評論。

通過下面的視頻來看看BostonGlobeocom的響應式設計師如何實現的吧。（注：視頻播放不了，猜想是網站進行了IP限制。）

這個項目是如何啟動的

ToddParker：我想我們應該是在11月正式開始實施這個項目的。界面模板的準備，和設計師打交道一直持續到4月底，然后我們做了一些整體的準備工作一直到夏末，之后項目就進入正式實施的階段。

技術挑戰

我認為，這項技術目前只在博客、文件夾等類似的應用中出現過。都是一些零散的碎片，沒有一個完整的體系。我想會有一個用戶大膽地說，這個功能對他們來說很重要。因為這項技術比一般的web開發要花費更多的時間和測試，而一般的web開發只需要把幾部分拼在一起就OK了。

因此，說到技術難點，我認為應該是媒體查詢。很多東西都要涉及到媒體的查詢，但是目前下載到的IE版本對此不提供支持。因此，我們首先要做的就是寫一段代碼實現媒體查詢。雖然還有其他的方式能夠實現同樣的功能，但是對于我們的需求來說實在是太慢了，因此我們創建了響應JS，這是我們實施這個項目必須要解決的第一步，我們在這上面花費了很多時間。

另外一個大的挑戰就是，我們正在解決的響應圖片問題。到目前為止，我們做的所有工作都采取移動優先的方式。如果你訪問Globe的站點，就會發現文章的配圖都有1000像素寬，他們非常大并且色彩豐富，像大片一樣。而我們在HTML中需要引用較小的圖片，這里我們用到一個小技巧，如果你使用平板或者桌面機，并且支持下載響應模式的話，就可以訪問高分辨率的圖片；如果你使用手機，訪問到的就是低分辨率的圖片，如果你使用瀏覽器或者平板，訪問到的就是高分辨率的圖片。因此，給對應的設備發送相應的圖片是我們需要解決的另一個技術難點，在CMS環境中實現這個功能確實花了我們不少功夫。

廣告帶來的挑戰

Marquis：我認為真正的挑戰之一就是不知道會遇到什么樣的挑戰，這些挑戰可能是過去沒有遇到過的問題。因此，這需要新的解決方案，但是現在沒有答案。這會是一項艱巨的任務。

Parker：我認為，在權威地解決這些問題上我們做得還不錯。目前仍比較棘手的問題是廣告。使用JavaScript實現廣告功能，會給頁面增加非常多的問題。把這些內容放到沙盒中，并且不把整個頁面弄得一團糟的確是一個非常棘手的問題。

Marquis：現在我們有了更好的解決方案。一般原則是，從用戶的角度來看越突出，我們就越成功。我們沒有留太多空白，也沒有占據整個頁面的廣告，我們只有兩個框式廣告和兩個懸框廣告，這些處理起來都非常簡單。我們可以把這些放到沙盒中，以免這些廣告破壞網頁上的其他內容。

Parker：廣告帶來的挑戰除了廣告的技術方面的問題，還需要保證廣告按照我們的方案能夠運行得很好，這的確非常棘手。而另外一個問題就是廣告出售的方式并沒有按照我們的方案來實施。他們把空白部分出售給廣告商。我們覆蓋了如此大的范圍，根本沒有辦法區分他們。對于一個7英寸的Android平板來說，這樣合適么？對于Kindle來說合適么？因此，我們只添加一個廣告，在頁面中使用CSS，使它看上去顯得別具一格。你看，這就是單一廣告的模式。