譯者注：在 HTML 5真正變革各平臺的 開發(fā) 模式前，定需要取得某些根本性的突破。今年的的一大突破就是“響應(yīng)式 設(shè)計 ”的發(fā)展。從根本來說，響應(yīng)式設(shè)計需讓內(nèi)容適應(yīng)任何屏幕尺寸。今年響應(yīng)式設(shè)計最引人注目的案例要數(shù)Boston Globe推出BostonGlobe.com。這篇文章轉(zhuǎn)述了ReadWrite Web 與BostonGlobe的開發(fā)團(tuán)隊Fliament之間談話內(nèi)容，其中詳細(xì)介紹了開發(fā)中遇到的一些問題。希望這篇文章能夠給開發(fā)者們帶來一些心得和體會。
周一，波士頓環(huán)球報發(fā)布了面向手機的付費網(wǎng)站&md as h;BosonGlobe.com。不要把它和官方免費旗艦站點Boston.com混淆在一起。這本身并沒有那么有趣。然而， HTML5 開發(fā)社區(qū)對BostonGlobe.com大加贊賞，稱贊網(wǎng)站的內(nèi)容根據(jù)屏幕的大小進(jìn)行調(diào)整是種創(chuàng)新，這種創(chuàng)新叫做響應(yīng)式設(shè)計。
響應(yīng)式設(shè)計允許Globe的內(nèi)容根據(jù)屏幕的可用尺寸進(jìn)行重新調(diào)整，在與移動設(shè)備、屏幕尺寸和移動設(shè)備上的內(nèi)容顯示的這場較量中，這是個勝利。下面是和Globe響應(yīng)式設(shè)計的創(chuàng)始人進(jìn)行的一次深度討論。
Filament團(tuán)隊向HTML5跨出了一大步
波士頓環(huán)球報得到了Fliament團(tuán)隊的服務(wù)支持，F(xiàn)liament團(tuán)隊隸屬于波士頓的一家設(shè)計發(fā)展公司，這家公司致力于開發(fā)輔助功能。下面是ReadWriteMobile和網(wǎng)站設(shè)計應(yīng)針對所服務(wù)對象（機構(gòu)或人）的不同而具有不同的形式。有些站點只提供簡潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。為了做到主題鮮明突出，要點明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點的主題；調(diào)動一切手段充分表現(xiàn)網(wǎng)站點的個性和情趣，辦出網(wǎng)站的特點。三個Fliament團(tuán)隊的設(shè)計師和合伙人之間的談話全文，這三個人在開發(fā)響應(yīng)式設(shè)計中做出了巨大貢獻(xiàn)。Mat Marquis在Globe的開發(fā)中是主力，ToddParker和ScottJehl是他的搭檔。EthanMarcotte，響應(yīng)式設(shè)計之父，這個時候不便發(fā)表評論。
通過下面的 視頻 來看看BostonGlobe.com的響應(yīng)式設(shè)計師如何實現(xiàn)的吧。（注：視頻播放不了，猜想是網(wǎng)站進(jìn)行了 IP 限制。）
 
這個項目是如何啟動的
ToddParker：我想我們應(yīng)該是在11月正式開始實施這個項目的。界面模板的準(zhǔn)備，和設(shè)計師打交道一直持續(xù)到4月底，然后我們做了一些整體的準(zhǔn)備工作一直到夏末，之后項目就進(jìn)入正式實施的階段。
技術(shù)挑戰(zhàn)
我認(rèn)為，這項技術(shù)目前只在博客、文件夾等類似的應(yīng)用中出現(xiàn)過。都是一些零散的碎片，沒有一個完整的體系。我想會有一個用戶大膽地說，這個功能對他們來說很重要。因為這項技術(shù)比一般的web開發(fā)要花費更多的時間和測試，而一般的web開發(fā)只需要把幾部分拼在一起就OK了。
因此，說到技術(shù)難點，我認(rèn)為應(yīng)該是媒體查詢。很多東西都要涉及到媒體的查詢，但是目前 下載 到的IE版本對此不提供支持。因此，我們首先要做的就是寫一段代碼實現(xiàn)媒體查詢。雖然還有其他的方式能夠?qū)崿F(xiàn)同樣的功能，但是對于我們的需求來說實在是太慢了，因此我們創(chuàng)建了響應(yīng) JS ，這是我們實施這個項目必須要解決的第一步，我們在這上面花費了很多時間。
另外一個大的挑戰(zhàn)就是，我們正在解決的響應(yīng)圖片問題。到目前為止，我們做的所有工作都采取移動優(yōu)先的方式。如果你訪問Globe的站點，就會發(fā)現(xiàn)文章的配圖都有1000像素寬，他們非常大并且 色彩 豐富，像大片一樣。而我們在HTML中需要引用較小的圖片，這里我們用到一個小技巧，如果你使用平板或者桌面機，并且支持下載響應(yīng)模式的話，就可以訪問高分辨率的圖片；如果你使用手機，訪問到的就是低分辨率的圖片，如果你使用瀏覽器或者平板，訪問到的就是高分辨率的圖片。因此，給對應(yīng)的設(shè)備發(fā)送相應(yīng)的圖片是我們需要解決