標籤：

響應式設計應該會是今後的趨勢，對前端的要求也將越來越高，你覺得呢？

01-11

終端的多樣與信息呈現提出了越來越高的要求~ 單一展現形式或許已經不能滿足需求了~

我特意看了一些關於RWD的負面評論。常規的RWD實現，主要通過fluid layout和media query實現。這種「簡單粗暴」的方式問題很多，可以搜出一堆關於它的負面評論。

RWD不能是桌面版疊加適配代碼，這樣頁面體積反而變大，在小屏幕里看到的實際上是一個更笨重的頁面，性能只能比桌面版還差。同時手機瀏覽器的事件模型跟桌面瀏覽器的差異很大，意味一些交互也會不work。這樣的結果無法讓人接受。

常規的RWD實現不能接受也不能輕易否定。是不是有超常規手段可以掃除這些問題。我們近期做了一些實踐。

1. 模塊化的page，模塊自動適配組合。手機站有一套手機版模塊組合。模塊之間存在大量復用關係。

2. 手機站通過一些處理就可以復用大量桌面版的js組件。

3. css自動適配。css文件更精簡，media query僅處理細節

4. 布局自動適配。layout是不是fluid不重要

這些自動適配是在模板系統里做的，不是在瀏覽器端。這樣出來的頁面沒有任何冗餘。可以手機訪問http://group.douban.com看看效果。看上去完全不同，它的模板文件卻是同一個。

這些還不夠，內容圖片的自動適配還沒做。更細的優化還要做。

這是前後端共同實現的RWD，結果更合理，還有空間把體驗做的更好。不同公司需要根據自己的技術體系設計一套RWD的實現方式。而常規瀏覽器上的RWD實現只是教科書上的案例。

http://hikejun.com/blog/2012/08/30/%E4%B8%80%E6%AC%A1%E5%93%8D%E5%BA%94%E6%80%A7%E5%BC%80%E5%8F%91%E5%AE%9E%E8%B7%B5/

就目前來說(我就把時間劃分到2015年以後吧，之前的網頁就不拿來批判是否考慮響應式了)，對於一個web，響應式是最基本的要求，說簡單也簡單，但是要處理好每一個細節不是那麼容易的，響應式也是必修課，必然導致前端要提升自己的能力。

網站如果不支持響應式或者響應式很粗糙，誰會買單？

或許國內的大部分網站並不刻意要求響應式，就算要求響應式，大部分適配後的網站效果也是非常粗糙的，總體來說國內的網頁對響應式有比較高的需求的都屬於一些要求高的或者專業性很強的網站，就算你不做響應式，直接讓網頁按照PC端顯示的效果一樣(使用類似 & 的代碼，雖然不建議這樣做，但這能有效確保具有固定尺寸的網頁能按預期顯示)，直接適配手機，客戶也會買單。境外大部分客戶的網站，最基本的要求，不滿足響應式不會買單。

該不該做兩套版本？

對於大多數網站，做兩套版本不是明智的選擇，因為後期維護成本，製作成本，調試成本，開發成本等都會增加很多，而且互聯網發展迅速，網頁過時的很快，一般情況，不值得花大量時間做兩套隨時會過時的頁面。並且大多數網站有常用的開源程序的約束，做兩套對後端的擴展也會有更高的要求，可能會增加後端和伺服器端的工作量。一般做兩套，適用於一些擁有自己的源程序的大平台或者大型網站或者一些知名的網站。大部分網站，無需做兩套。（當然如果你錢多，團隊杠杠的，時間精力也多，就忽略此段落）

響應式技術的發展怎樣？

我們不用糾結於什麼fluid流布局還是其它什麼布局的，很多人會把流布局和固定寬度布局說的很複雜，甚至可以長篇大論，我覺得沒有必要，我們只要有紮實的css基本功，考慮具體的項目設計思路，什麼時候用固定寬度什麼時候用100%寬度，考慮清楚就知道所謂的布局了。很多細節有單獨學習的必要，但是不一定都能折騰進實際項目中。當然如果css基本功不紮實，面對各種布局，bug和設備和瀏覽器的經驗少，對於布局來說，會是一個比較大的工程，更別提響應式布局了，更會讓你折騰到想哭。實際項目還是要盡量精簡代碼，減少開發和後期維護成本，只要能夠滿足多種設備，並且利用響應式有效控制不同尺寸圖片的載入，在現在的不斷提升的互聯網網速環境下，一樣訪問速度會很快。

對於網頁的響應式設計，我不會存在正面還是負面的評價，因為它是基礎啊，你得適應互聯網發展適應發展需要啊，適應客戶需要啊，做一套網頁，做好這個基礎，是理所當然的。對於一項基本功，沒有必要說它好還是不好。

一個真正好的響應式，是能夠處理不同尺寸的圖片的，如果CSS不能滿足需求，現在有很多成熟的結合JS的技術手段，可以配合CSS做到更優秀的相應，不會大幅度影響載入速度，它完全可以達到兩套web的效果。畢竟你不是做APP，是做網頁。如果你要拿APP的原生交互效果和流暢程度和web相比，我覺得偏題了，沒有必要，本身它們就是互補的東西，你不要他要，沒有誰排斥誰的必要。

如果還沒見過優秀的響應式網站，可以去看看FWA上面的很多獲獎的移動端網站。

總結

現在的響應式技術，已經很發達了，不但能滿足不同設備的適配，還能夠從交互，從體驗，從載入速度等方面進行匹配。現在的響應式技術，不能和響應式才開始流入的那幾年相提並論，什麼代碼冗餘等等的負面東西可以忽略了。其實對於響應式這個東西，剩下的，只是願不願意學更加先進的技術，願不願意研究和發現，願不願意使用到實際項目中的問題而已。

我自己並不做獨立的前端工作，也不是什麼大牛公司的前端開發，我只是為了服務自己設計的東西而已。只不過我也經過了幾年的折騰，兼容性，響應式各種，用過很多開發框架，學過研究過不少進口知識，做過一些被認可的東東。我現在對於響應式設計，只有一個方向：

  • 儘可能精簡代碼
  • 儘可能以最少的Responsive Breakpoints兼容更多的設備
  • 儘可能優化載入速度
  • 儘可能避免使用JS(Retina圖片適配我一般使用JS,相對來說和響應式分開，會更加靈活，避免Retina的圖片適配也使用CSS)
  • 儘可能做到和PC端一樣流暢的交互效果

小工具

檢測網頁的性能，包含基本的響應式性能：http://developers.google.com/speed/pagespeed/insights/

用一個方法解決多個問題，貌似不太好吧。響應式布局的想過好像不是太好，追求好的用戶體驗，還是需要兩套。

另外，非PC端，瀏覽器其實不如app的體驗好，不然為什麼還要做app。手機上也用瀏覽器好了。

Responsive web design 這個英文說法歧義很大。主要因爲 responsive 一詞容易讓人聯想到網速（網路的「響應速度」），乍看還以爲說是如何優化頁面提高加載速度呢。翻譯成「響應式設計」之後問題更加嚴重了。

英文用 Adaptive Web Design 更好吧。

中文裡其實已經有了比較易懂的說法：爲移動設備做適配。其實 responsive web design 談不上是一種設計風格或方法，如今很多人工作以外的時間都不碰電腦了，只用智能手機和平板，爲移動設備做適配遲早會成爲必須。

twitter的Bootstrap給出的解決方案是800解析度以上的還是採用柵格布局

媒體查詢的breakpoint設置為

  1. /* Large desktop */
  2. @media (min-width: 1200px) { ... }
  4. /* Portrait tablet to landscape and desktop */
  5. @media (min-width: 768px) and (max-width: 979px) { ... }
  7. /* Landscape phone to portrait tablet */
  8. @media (max-width: 767px) { ... }
  10. /* Landscape phones and down */
  11. @media (max-width: 480px) { ... }

而８００以下的採用的才是fluid layout！　

個人認為大屏　大解析度　信息量大而且雜　如果採用fluid layout的話基本上是不可能完成的任務，這個對前端還好　對於那些本來對邊界測試就很不在行的國內設計師來說簡直就是災難　尤其在國內的網站　每個頁面信息量巨大的情況下！

對於小屏幕　信息量不是很大　fluid layout　在適應性上就有很大的優勢！

國外的一些fluid layout實踐案例都是大量的文本　少量的圖片！

至於未來　我之前在公司內部分享扯了一個蛋呵呵　利用巴赫的音樂轉調理論　弄了一個音樂布局系統哈哈　

http://twitter.github.com/bootstrap/scaffolding.html

響應式設計只是為了暫時偷懶、或者已有PC網站趕緊搞一個能用的手機版而已（反之亦然）。

對於要求不高的網站，這樣就行了，節約開發成本。

對於要求高的該網站，為了PC和手機都足夠優化，肯定是要兩套最好。

Responsive Web Design可以為不同終端的用戶提供更加舒適的界面和更好的體驗，的確會是趨勢。

但是對於前端工程師來說，至少對於我來說，我會想，坑爹啊~以前要兼容各種瀏覽器已經夠慘了，現在還要兼容不同解析度！難道前端工程師就註定要這麼苦逼？

也不知道是否這個原因，我感覺上，在前端社區，Responsive Web Design這個理念的推廣程度不及其他一些HTML5和CSS3技術。

另外，我推薦一篇文章：http://stefangirard.com/2012/01/responsive-design-is-bad/

主要是講Responsive Web Design的一些軟肋。

聲明一下，我的立場跟文章作者一樣。我是支持推廣Responsive Web Design的，只是負面的文章比較少，客觀討論一下它的不足而已。

總感覺響應式比較迎合西方人的審美觀念，也可能是很多優秀的模板都來自於歐美而影響了我的感覺。國內現狀推行起來應該會比較慢，小網站還可以，大的例如電商三巨頭都是獨立的HybridApp。不過還是應該與時俱進，緊跟潮流，任重而道遠。

響應式布局確定增加了一些難度，但是這是一個優秀前端必備的能力：跟上時代的潮流！

對前端的能力要求與響應式流行沒多大關係。

推薦閱讀：

※做 A/B 測試的 Optimizely 融資 5700 萬美元，很靠譜嗎？
※做設計用Thinkpad T470p還是惠普暗影精靈2代比較好？
※什麼是自然匹配原則？它在設計中是如何被應用的？
※1000元以下的剃鬚刀有哪些推薦？

TAG:前端開發 | 產品設計 | 響應式設計Responsivewebdesign |