在HTML5真正變革各平臺(tái)的開(kāi)發(fā)模式前，定需要取得某些根本性的突破。今年的的一大突破就是“響應(yīng)式設(shè)計(jì)”的發(fā)展。從根本來(lái)說(shuō)，響應(yīng)式設(shè)計(jì)需讓內(nèi)容適應(yīng)任何屏幕尺寸。今年響應(yīng)式設(shè)計(jì)最引人注目的案例要數(shù)Boston Globe推出BostonGlobe.com。這篇文章轉(zhuǎn)述了ReadWriteWeb與BostonGlobe的開(kāi)發(fā)團(tuán)隊(duì)Fliament之間談話內(nèi)容，其中詳細(xì)介紹了開(kāi)發(fā)中遇到的一些問(wèn)題。希望這篇文章能夠給開(kāi)發(fā)者們帶來(lái)一些心得和體會(huì)。

周一，波士頓環(huán)球報(bào)發(fā)布了面向手機(jī)的付費(fèi)網(wǎng)站—BosonGlobe.com。不要把它和官方免費(fèi)旗艦站點(diǎn)Boston.com混淆在一起.這本身并沒(méi)有那么有趣。然而，HTML5開(kāi)發(fā)社區(qū)對(duì)BostonGlobe.com大加贊賞，稱(chēng)贊網(wǎng)站的內(nèi)容根據(jù)屏幕的大小進(jìn)行調(diào)整是種創(chuàng)新，這種創(chuàng)新叫做響應(yīng)式設(shè)計(jì).

響應(yīng)式設(shè)計(jì)允許Globe的內(nèi)容根據(jù)屏幕的可用尺寸進(jìn)行重新調(diào)整，在與移動(dòng)設(shè)備、屏幕尺寸和移動(dòng)設(shè)備上的內(nèi)容顯示的這場(chǎng)較量中，這是個(gè)勝利。下面是和Globe響應(yīng)式設(shè)計(jì)的創(chuàng)始人進(jìn)行的一次深度討論。

Filament團(tuán)隊(duì)向HTML5跨出了一大步

波士頓環(huán)球報(bào)得到了Fliament團(tuán)隊(duì)的服務(wù)支持，F(xiàn)liament團(tuán)隊(duì)隸屬于波士頓的一家設(shè)計(jì)發(fā)展公司，這家公司致力于開(kāi)發(fā)輔助功能。下面是ReadWriteMobile和三個(gè)Fliament團(tuán)隊(duì)的設(shè)計(jì)師和合伙人之間的談話全文，這三個(gè)人在開(kāi)發(fā)響應(yīng)式設(shè)計(jì)中做出了巨大貢獻(xiàn)。Mat Marquis在Globe的開(kāi)發(fā)中是主力，ToddParker和ScottJehl是他的搭檔。EthanMarcotte，響應(yīng)式設(shè)計(jì)之父，這個(gè)時(shí)候不便發(fā)表評(píng)論。

ToddParker：我想我們應(yīng)該是在11月正式開(kāi)始實(shí)施這個(gè)項(xiàng)目的。界面模板的準(zhǔn)備，和設(shè)計(jì)師打交道一直持續(xù)到4月底，然后我們做了一些整體的準(zhǔn)備工作一直到夏末，之后項(xiàng)目就進(jìn)入正式實(shí)施的階段。

技術(shù)挑戰(zhàn)

我認(rèn)為，這項(xiàng)技術(shù)目前只在博客、文件夾等類(lèi)似的應(yīng)用中出現(xiàn)過(guò)。都是一些零散的碎片，沒(méi)有一個(gè)完整的體系。我想會(huì)有一個(gè)用戶(hù)大膽地說(shuō)，這個(gè)功能對(duì)他們來(lái)說(shuō)很重要。因?yàn)檫@項(xiàng)技術(shù)比一般的web開(kāi)發(fā)要花費(fèi)更多的時(shí)間和測(cè)試，而一般的web開(kāi)發(fā)只需要把幾部分拼在一起就OK了。

因此，說(shuō)到技術(shù)難點(diǎn)，我認(rèn)為應(yīng)該是媒體查詢(xún)。很多東西都要涉及到媒體的查詢(xún)，但是目前下載到的IE版本對(duì)此不提供支持。因此，我們首先要做的就是寫(xiě)一段代碼實(shí)現(xiàn)媒體查詢(xún)。雖然還有其他的方式能夠?qū)崿F(xiàn)同樣的功能，但是對(duì)于我們的需求來(lái)說(shuō)實(shí)在是太慢了，因此我們創(chuàng)建了響應(yīng)JS，這是我們實(shí)施這個(gè)項(xiàng)目必須要解決的第一步，我們?cè)谶@上面花費(fèi)了很多時(shí)間。

另外一個(gè)大的挑戰(zhàn)就是，我們正在解決的響應(yīng)圖片問(wèn)題。到目前為止，我們做的所有工作都采取移動(dòng)優(yōu)先的方式。如果你訪問(wèn)Globe的站點(diǎn)，就會(huì)發(fā)現(xiàn)文章的配圖都有1000像素寬，他們非常大并且色彩豐富，像大片一樣。而我們?cè)贖TML中需要引用較小的圖片，這里我們用到一個(gè)小技巧，如果你使用平板或者桌面機(jī)，并且支持下載響應(yīng)模式的話，就可以訪問(wèn)高分辨率的圖片；如果你使用手機(jī)，訪問(wèn)到的就是低分辨率的圖片，如果你使用瀏覽器或者平板，訪問(wèn)到的就是高分辨率的圖片。因此，給對(duì)應(yīng)的設(shè)備發(fā)送相應(yīng)的圖片是我們需要解決的另一個(gè)技術(shù)難點(diǎn)，在CMS環(huán)境中實(shí)現(xiàn)這個(gè)功能確實(shí)花了我們不少功夫。

廣告帶來(lái)的挑戰(zhàn)

Marquis：我認(rèn)為真正的挑戰(zhàn)之一就是不知道會(huì)遇到什么樣的挑戰(zhàn)，這些挑戰(zhàn)可能是過(guò)去沒(méi)有遇到過(guò)的問(wèn)題。因此，這需要新的解決方案，但是現(xiàn)在沒(méi)有答案。這會(huì)是一項(xiàng)艱巨的任務(wù)。

Parker：我認(rèn)為，在權(quán)威地解決這些問(wèn)題上我們做得還不錯(cuò)。目前仍比較棘手的問(wèn)題是廣告。使用JavaScript實(shí)現(xiàn)廣告功能，會(huì)給頁(yè)面增加非常多的問(wèn)題。把這些內(nèi)容放到沙盒中，并且不把整個(gè)頁(yè)面弄得一團(tuán)糟的確是一個(gè)非常棘手的問(wèn)題。

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

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

設(shè)備識(shí)別和適應(yīng)屏幕的尺寸帶來(lái)的問(wèn)題

Marquis：到目前為止，我們根據(jù)屏幕的尺寸來(lái)確定顯示什么樣內(nèi)容和提供怎樣功能。所以，不存在這樣的情況，“OK，如果用戶(hù)使用的是安卓客戶(hù)端，他們獲取到的是XYZ，如果用戶(hù)使用iPad，他們獲取到其他的內(nèi)容。”如果用戶(hù)使用的是觸控的設(shè)備，特定的功能和意愿需要額外添加Javascript來(lái)實(shí)現(xiàn)。因此，我們只給特定的用戶(hù)提供特定的功能。我們不會(huì)說(shuō)iPad用戶(hù)使用的是這種布局，而是某個(gè)尺寸的設(shè)備會(huì)使用什么樣的布局。

Parker：我們從沒(méi)做過(guò)用戶(hù)代理檢測(cè)，這是個(gè)大忌。因此，網(wǎng)站完全是開(kāi)放式的。我們專(zhuān)注于性能和兼容性，我們檢測(cè)設(shè)備，以便按照其需求動(dòng)態(tài)加載內(nèi)容。這就是為什么每個(gè)設(shè)備下載的內(nèi)容都會(huì)有非常簡(jiǎn)潔的體驗(yàn)?？赡苓@個(gè)平板能夠支持觸摸事件，而另外的一個(gè)就不行。由于分辨率的不同，它們獲取到的布局就會(huì)不同。

Marquis：顯然，我們的計(jì)劃并不包括在所有情況下，任何人都能夠使用游戲機(jī)打開(kāi)它，但是，最近有人這樣做的時(shí)候，它的確表現(xiàn)地非常出色。

Parker：我認(rèn)為最大的優(yōu)勢(shì)就是我們采取的是一個(gè)不可知的辦法，而不是關(guān)注特定用戶(hù)的需求。我們的方法完全關(guān)注兼容性，這樣一來(lái)，我們使用jQuery的時(shí)候，拿到測(cè)試設(shè)備的時(shí)候（我們不間斷地拿到這些設(shè)備），在這些我們從沒(méi)見(jiàn)過(guò)的設(shè)備上進(jìn)行測(cè)試的時(shí)候，Globe看上去非常棒，我們不需要擔(dān)心兼容性的問(wèn)題。隨著設(shè)備源源不斷地面世，這會(huì)是一個(gè)兼容的方法，并且能夠在舊的設(shè)備上使用，因?yàn)槲覀冊(cè)谧鰸u進(jìn)式增強(qiáng)。不久之后，在你的Newtons和舊版的Palms，或者類(lèi)似的設(shè)備，都能夠閱讀Globe。

為什么這個(gè)功能現(xiàn)在才實(shí)現(xiàn)？

Parker：我想，也許一年半之前應(yīng)該實(shí)現(xiàn)的，這只是把一些技術(shù)碎片拼在一起的問(wèn)題。

Marquis：我認(rèn)為，之前，某些方面是應(yīng)該能夠?qū)崿F(xiàn)的。我是說(shuō)，HTML5為目標(biāo)功能提供更多可用接口，比如說(shuō)，檢查設(shè)備是否提供觸屏支持，從技術(shù)上來(lái)說(shuō)，這是通過(guò)HTML5來(lái)實(shí)現(xiàn)的，雖然并不是利用HTML5標(biāo)記來(lái)實(shí)現(xiàn)的。然而，毫無(wú)疑問(wèn)，HTML5為我們實(shí)現(xiàn)特定的下載提供了支持。說(shuō)到標(biāo)記本身，HTML5通過(guò)另外的語(yǔ)義，為我們提供了很多功能。利用HTML4，這些功能也能夠?qū)崿F(xiàn)，只不過(guò)標(biāo)記并沒(méi)有那么豐富的語(yǔ)義。

Parker：對(duì)于我們來(lái)說(shuō)，我們一直關(guān)注通用訪問(wèn)的問(wèn)題。我們大部分精力都花在這上面，算下來(lái)已經(jīng)有10年了，尤其是我。我想，大多數(shù)人只是在把這些技術(shù)碎片拼起來(lái)的時(shí)候慢了一步，現(xiàn)在我們擁有了核心工具，我們需要讓這些工具可用。比如說(shuō)，一年前我們寫(xiě)了一本書(shū)，關(guān)于漸進(jìn)式增強(qiáng)。那就是我們創(chuàng)建Globe的基礎(chǔ)。以一種簡(jiǎn)潔、不顯眼的方式在CSS和JavaScript上增加簡(jiǎn)潔語(yǔ)義的HTML語(yǔ)言。現(xiàn)在我們做了更多區(qū)分，不如說(shuō)我們提供更多的兼容性以使用戶(hù)得到更好的體驗(yàn)。說(shuō)穿了，我們所做的這些全都取決于用戶(hù)的屏幕尺寸，下一步，我們將把目標(biāo)轉(zhuǎn)向布局。

Marquis：我想，我最喜歡舉的例子就是我們打算做的填字游戲，看上去就像是網(wǎng)站上的一個(gè)小部件一樣，我們開(kāi)始使用由服務(wù)器端產(chǎn)生的有豐富語(yǔ)義的標(biāo)記。因此，不管你的設(shè)備的兼容性如何，你都能獲取到這個(gè)字謎游戲，就像在一張平整的報(bào)紙上填答案一樣，沒(méi)有什么區(qū)別。今后，如果用戶(hù)的瀏覽器支持本地存儲(chǔ)，就是瀏覽器能夠存儲(chǔ)數(shù)據(jù)的問(wèn)題，我們就能添加一個(gè)按鈕，讓用戶(hù)保存未完成的游戲，下次打開(kāi)的時(shí)候接著玩。

響應(yīng)設(shè)計(jì)下一步是什么？

Paker：我們給企業(yè)做了很多應(yīng)用設(shè)計(jì)，或者類(lèi)似的內(nèi)容。在我看來(lái)，做更實(shí)用的東西會(huì)是一個(gè)挑戰(zhàn)。環(huán)球報(bào)證明，在內(nèi)容布局上，可以做出一些很酷的東西來(lái)。但是，如果你有一個(gè)應(yīng)用程序，它有豐富的可視化GUI，或者你正在使用類(lèi)似商務(wù)應(yīng)用的表格數(shù)據(jù)。我認(rèn)為這是我們下一件要證明的事情。我有信心能做到的，這只是投入時(shí)間去做的問(wèn)題。我們確實(shí)在為一些這個(gè)領(lǐng)域的客戶(hù)，做一些類(lèi)似的項(xiàng)目。所以，這是一個(gè)有趣的時(shí)刻。

其他挑戰(zhàn)

Marquis：第三方服務(wù)是我們遇到的最大挑戰(zhàn)之一。僅僅是在提供廣告和其它功能上，我們不得不和他們周旋，找到他們默認(rèn)提供的標(biāo)記和腳本。

Paker：在設(shè)計(jì)過(guò)程中，需要考慮的一件事就是，目標(biāo)設(shè)備的廣泛程度。從智能手機(jī)到寬屏桌面電腦，從1200像素到更大的像素。所以，在設(shè)計(jì)這些網(wǎng)頁(yè)時(shí)，我們思考把這些設(shè)計(jì)結(jié)合在一起會(huì)得到什么樣的產(chǎn)品。

Globe和Upstatement之間有非常緊密的合作關(guān)系,關(guān)于屏幕尺寸的問(wèn)題，還有很多需要完善的地方。我認(rèn)為，它肯定會(huì)改變?cè)O(shè)計(jì)過(guò)程，因?yàn)檫@沒(méi)有人會(huì)堅(jiān)持一成不變的形式。

Marquis：這之間沒(méi)有一個(gè)交接的過(guò)程，在你把它交給到下一個(gè)團(tuán)隊(duì)時(shí)，他們僅僅是運(yùn)行它。他們需要經(jīng)常性的對(duì)話。團(tuán)隊(duì)之間需要經(jīng)常交流。

這時(shí)，F(xiàn)ilament Group中負(fù)責(zé)UI的 Scott Jehl，加入了我們的對(duì)話，討論他們?cè)陂_(kāi)發(fā)中用到的工具。

你們使用的是什么工具？

Scott Jehl:在整個(gè)網(wǎng)站中，我們大部分使用的是jQuery，我們?cè)趲讉€(gè)地方使用jQuery Mobile，比如，照片和觸摸交互。我認(rèn)為，在加載jQuery之前，我們?yōu)榇a創(chuàng)建一個(gè)自定義框架，來(lái)處理JavaScript的動(dòng)態(tài)加載。因此，我們只需要加載很少一部分內(nèi)容，然后動(dòng)態(tài)加載剩余部分。正是這樣的內(nèi)容使它變得非常迅速。它是一種很不錯(cuò)的行為。

當(dāng)然，它使主要是jQuery，然后我們?cè)谒厦娴牟寮?，不僅使布局有視覺(jué)上的相應(yīng)，還有行為上的。改變所有組件的行為、適應(yīng)觸摸、不同的交互和條件，這些都會(huì)使情感在確定的內(nèi)容上而不會(huì)在別的方面。

在許多方面，我們使用和其它站點(diǎn)一樣的方式來(lái)使用jQuery。jQuery本身什么都不做。作為一個(gè)框架，它會(huì)給你提供可以使用的工具，我們?cè)诖嘶A(chǔ)之上進(jìn)行開(kāi)發(fā)。我認(rèn)為最主要的區(qū)別，對(duì)Globe來(lái)說(shuō)這不是一個(gè)獨(dú)特的功能，我們發(fā)現(xiàn)如果我們動(dòng)態(tài)加載jQuery，在老版的設(shè)備上會(huì)有更好的表現(xiàn)。比如一款老版的Blackberry，4.5或5版，沒(méi)有運(yùn)行jQuery。由于網(wǎng)站創(chuàng)建的方式在游戲中會(huì)出現(xiàn)延遲，并且在這種設(shè)備只總提供基本功能能夠有更好的表現(xiàn)。

原文鏈接：How the Boston Globe Pull Off  HTMLR5 Responsive Design