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

周一，波士頓環(huán)球報(bào)發(fā)布了面向手機(jī)的付費(fèi)網(wǎng)站—BosonGlobe.com。不要把它和官方免費(fèi)旗艦站點(diǎn)Boston.com混淆在一起。這本身并沒有那么有趣。然而，HTML5開發(fā)社區(qū)對(duì)BostonGlobe.com大加贊賞，稱贊網(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ā)展公司，這家公司致力于開發(fā)輔助功能。下面是ReadWriteMobile和三個(gè)Fliament團(tuán)隊(duì)的設(shè)計(jì)師和合伙人之間的談話全文，這三個(gè)人在開發(fā)響應(yīng)式設(shè)計(jì)中做出了巨大貢獻(xiàn)。Mat Marquis在Globe的開發(fā)中是主力，ToddParker和ScottJehl是他的搭檔。EthanMarcotte，響應(yīng)式設(shè)計(jì)之父，這個(gè)時(shí)候不便發(fā)表評(píng)論。

通過下面的視頻來看看BostonGlobe.com的響應(yīng)式設(shè)計(jì)師如何實(shí)現(xiàn)的吧。（注：視頻播放不了，猜想是網(wǎng)站進(jìn)行了IP限制。）

這個(gè)項(xiàng)目是如何啟動(dòng)的

ToddParker：我想我們應(yīng)該是在11月正式開始實(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ù)目前只在博客、文件夾等類似的應(yīng)用中出現(xiàn)過。都是一些零散的碎片，沒有一個(gè)完整的體系。我想會(huì)有一個(gè)用戶大膽地說，這個(gè)功能對(duì)他們來說很重要。因?yàn)檫@項(xiàng)技術(shù)比一般的web開發(fā)要花費(fèi)更多的時(shí)間和測(cè)試，而一般的web開發(fā)只需要把幾部分拼在一起就OK了。

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

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

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

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

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

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

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

標(biāo)簽： HTML5 響應(yīng)式設(shè)計(jì) jQuery 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。