利用響應式技術構建大規模社區網站

移動化是未來大趨勢，做任何互連網項目都必須將移動戰略放在一個很重要的位置上，對於回聲來說也不例外。儘管回聲現階段仍然以文字為內容主要載體，也必須充分考慮到移動端的使用情境和體驗。

一般來說，社區網站的移動化策略有三種：1) 開發並提供原生的app；2) 製作專門的移動版網站，也就是Web app；3) 採用響應式技術，用一套代碼、一個網站來適配不同的終端。我們權衡再三，最後選擇了採用響應式設計技術。

響應式設計是最近兩年比較流行的一種前端開發技術，相對而言，在國外應用的更加普遍，在國內則被使用的較為保守。它的特點是只需一套代碼就可以良好支援PC、平板和手機等不同終端的訪問。

其實響應式設計的原理很簡單，其核心包括：1. 流失的網格布局；2. 通過media query解析度偵測來輸出不同的樣式；3. 自適應的內容元素（片）。這篇文章的重點不是技術細節的探討，而是從宏觀的角度來探討響應式設計的優勢、劣勢及應用情境，並分享一些我們在使用響應式技術開發回聲過程中的經驗和思考。

回聲採用響應式設計，主要出於以下幾方面考慮：

1) 提高開發的專註性

若要追求最強的效能和最佳的使用者體驗，Native app仍然是不二的選擇，但是開發Native app所需的成本也很高，特別是針對各種主流的平台需要分別開發與測試。回聲的團隊規模很小，而且還是從零開始，若一開始就同時投入網站和原生app的開發，不僅會將項目的周期拉長，而且由於需求的不確定性，還要承擔很高的需求變更風險。採用響應式設計，可以讓我們在有限的資源條件下，將所有精力都集中在開發和維護一套核心代碼之上。

2) 降低長期的維護成本

如果選擇開發專門的移動版網站，雖然初始難度不大，但從長期來講，追加新功能時都需要同時兼顧兩套代碼，維護成本比較高。雖然從我們採用響應式設計的結果上看，還是顯著增加了前期的開發成本，但是對於今後的網站維護而言，可以長期保持移動端和PC端功能的一致性，而不必每次為Web網站增加功能時都需要額外考慮Mobile網站。

3) 基於網站的自身特性

一般來說，響應式設計非常適合以內容為主的網站，在國外，應用響應式設計的典型案例有：星巴克、smashingmagazine、Sony等。響應式設計意味著頁面的URL在移動端和PC端可以保持統一，不必通過判斷終端的類型而頻繁進行URL跳轉，對於SEO有著很大的好處，也更加方便社交網站的分享和傳播。例如，回聲在朋友圈中傳播的內容網址與PC端是一致的，但在手機瀏覽器中開啟時看到的是為移動終端最佳化過的介面。

（星巴克網站的響應式設計樣本）

回聲雖然也是以內容為主，但同時也有很多的互動操作，相對還是比較複雜的，這樣規模的社區採用響應式技術進行構建，在國內並不多見，因此很多經驗都需要在實踐中摸索，下面就分享一些回聲採用響應式設計中總結的經驗：

1) 選擇合適的架構作為起點

目前，市場上有很多響應式設計的綜合架構，如Bootstrap，Zurb Foundation等。像Bootstrap這樣著名的響應式設計架構，擁有搭配好的視覺風格，並整合了很多常用的組件，讓你可以快速上手構建一個完整的網站。

但是如果你的網站的風格比較具有個性（與Bootstrap的預設風格差異較大），且希望對底層代碼有更高的掌控，那麼可以和回聲一樣，選擇html5boiler這樣更基礎的開發架構作為起點，其中所包含的基礎CSS和JS庫，使得你可以更輕鬆的基於Web標準進行開發，而無需擔心舊版本瀏覽器對HTML5的支援問題以及各種不同瀏覽器渲染效果統一性問題。Yahoo!新推出了一個名為Pure的輕量級響應式設計架構，也是一個不錯的選擇。

2) 產品設計思路的轉化

PC互連網時代設計移動產品的思路，往往是以PC網站為核心，先設計PC網站，然後在此基礎上針對移動終端進行功能降級。但我們在實際執行時往往會忽視移動端，在PC網站中使用很多新技術並追求最佳的視覺和互動體驗，這會導致在實現功能降級時變得十分困難，最終不得不在使用者體驗方面進行削弱，這是一個十分痛苦的過程。

在最近流行的Mobile First理念中，強調在進行產品設計時，應該優先考慮移動端的呈現效果，然後再漸進式升級(Progressive Enhancement)到PC端，這樣做的好處，是可以強迫我們將移動終端放在至少與PC同等重要的位置上去考慮。相對而言，從移動端到PC端的漸進式升級是一個更加愉快的過程，因為我們可以專註于思考如何讓網站的使用體驗在PC上變得更加出色，而不必面臨功能削減的痛苦。

舉個例子，以下是回聲的會員首頁在不同終端下的呈現效果：

我們在進行產品設計時，需要把握從宏觀到局部的原則，先針對網站在不同終端上的表現進行全面構思，特別是頁面配置、導航等宏觀要素，既要適應不同終端的使用特性，又要考慮網站整體風格的統一性。

可以看出，為了適應響應式設計的要求，回聲會員首頁採取了流式布局+卡片式的處理方式，當使用不同終端瀏覽時，導航和內容布局都會有對應的變化，而整體風格又能保持良好的一致性。

為了保證小螢幕終端瀏覽時的體驗，我們並沒有強求PC端和移動端在內容上保持一致，而是進行了適當的取捨和重組，例如大螢幕左側的個人資訊模組在小螢幕中則被放在了滑出菜單中。

下面是回聲一個群組頁面的例子，各種螢幕尺寸下內容布局的差異體現的更加明顯：

3) 選擇適合的功能組件

為了追求速度，我們在開發回聲時，使用了很多基於jQuery並支援響應式的開源組件，例如日期選取器使用了datepicker，新使用者引導使用了Joyride，彈出模態視窗使用了Tinybox並進行了響應式的改進，使用這些成熟的開源組件可以大大節約項目開發的時間。

4) 充分利用調試工具

chrome和firefox瀏覽器都有很多可以支援響應式設計的擴充，能夠方便的測試網頁在不同螢幕解析度下的顯示效果。此外，安卓上的chrome瀏覽器還可以支援通過USB在PC上進行調試，具體可以參考相關的文檔。

他山之石可以攻玉，回聲在開發時還借鑒了不少優秀響應式網站的設計，並通過調試工具分析它們的代碼實現，比如星巴克、Medium、Google Plus等，這些成熟網站的響應式設計實現對我們的設計思路和代碼規劃有很大的啟發。

具體細節上的經驗還有很多，這裡就不贅述了，整個網站的功能開發持續了2個多月，結果還是比較滿意的。目前，來自行動裝置的訪問流量大約佔據了總訪問量的1/4，更重要的是今後在增加新功能時可以同步支援移動端，而且我們還在此基礎上封裝了安卓版的行動裝置 App，這其中，採用響應式設計的決策功不可沒。

不過，我們在開發回聲的過程中也發現了響應式技術的一些問題和弊端，以下是我們的一些發現和對策：

1) 載入額外的內容影響手機端的訪問速度

世事無絕對，一套程式相容不同終端是響應式設計的優勢，但這也會導致HTML和CSS檔案中需要包含用於各種螢幕解析度的內容和代碼。也就是說，即使通過手機訪問，人們也不得不花費更多的等待時間來下載用於PC網站上顯示的內容和樣式。

去年，Akamai的產品架構師Guy Podjarny測試了採用響應式設計的347個網站，他發現這些網站的內容大小和載入速度在不同終端上的表現幾乎相同。這種狀況對於要承受落後網速和高昂費用的中國手機互連網使用者來說，意味著使用者體驗的降低。

為了改善這一點，我們採用了一些對應的策略，比如：針對消耗流量較大的圖片，我們為行動裝置專門產生了小尺寸縮圖，這樣使用者就無需在行動裝置上載入大尺寸、高清晰度的圖片；針對Javascript和CSS檔案，我們採取了緩衝和壓縮機制，保證了使用者在內容無更新時無需重複下載，並且通過網路傳輸的內容儘可能小。

2) 響應式設計初期實現的複雜度高

雖然響應式技術本身並不複雜，但是要想良好的相容各種尺寸的終端，需要投入的額外時間和精力並不少。回聲初步估計為此付出的開發成本要達到30%以上，單純從一次性的開發成本上講，未必比開發單獨的webapp節省多少。是否採用響應式設計，實際上是一個眼前利益和長期利益的平衡問題，換言之，我們付出了較高的初期實現成本，換來的是網站長期維護的便利性。

設計響應式網站比普通移動網站更加需要良好的架構規劃，特別是要在保證訪問速度和使用者體驗的前提下。例如，為了最佳化網站訪問速度，現在流行“條件載入(conditional loading)”的方式，即在同一個URL下根據不同的訪問終端載入不同的內容和樣式。

3) 令人頭疼的瀏覽器適配問題

IE8以下的舊版本瀏覽器不支援mediaquery的機制，所以不能夠應用響應式技術，對HTML5的支援也不夠好，相容起來有很大困難。回聲這次為此而放棄了在PC上相容核心在8.0以下的IE瀏覽器，當這部分使用者訪問回聲時會跳轉到瀏覽器升級的提醒頁面。但由於在中國IE6仍然有一定比例的人群，從流量上看還是有一定的損失，這也算是我們採用響應式設計，向移動端傾斜所必須付出的代價了。

4) 使用者體驗最佳化難度高

由於在開發時要兼顧各種不同螢幕解析度的終端，不能像開發單獨的移動網站那樣做到毫無負擔。諸如JQuery Mobile這樣的移動網站開發架構，為了類比原生app的效果而引入了許多特效，開發人員調用起來也非常簡單，相對而言，響應式設計還是更加適合比較平實、簡潔的內容型網站，在追求炫酷的效果方面並沒有優勢。

回聲在最佳化使用者體驗方面引入進行了很多努力，例如：我們在全站的列表頁面中廣泛使用了內容的非同步載入機制，並支援當頁面滑動到底部時動態載入更多內容。此外，我們還通過瀏覽器的本機存放區（Local Storage）來記錄使用者上一頁的開啟位置，當使用者通過瀏覽器回退時，可以快速定位到之前的位置，這些細節的最佳化都使得通過手機訪問回聲可以獲得比較流暢的使用體驗。

5) 功能上的局限性

響應式設計本質上也是一種webapp，與原生應用相比，在利用手機的特性上存在先天的不足，比如拍照和圖片上傳、錄音功能、地理定位等，若你的產品對於使用者體驗和效能的要求極高，或需要用到一些HTML5不能良好支援的手機原生特性，那麼建議還是優先考慮開發原生app。

到目前為止，響應式設計在國內還是一個頗具爭議的話題，相對於原生app，響應式設計在國內的大規模應用還比較少。其實，響應式設計與移動網站及原生app之間，從技術本身並無高下之分，只有適應的情境不同。與其停留在爭論之中，不如充分充分瞭解響應式技術的特點，並將其應用到適當的項目中。以上是回聲在進行響應式設計時積累的一些經驗，希望能夠帶給大家一些有益的啟發。

