— 作者 謝恩銘 轉載請註明出處
《Web探索之旅》全系列
第二部分第五課：響應式網站和移動應用
上一課 Web探索之旅 | 第二部分第四課：資料庫 中，我們認識了關係型資料庫和非關係型資料庫。
在我們開始聊響應式網站之前，我們可以聊聊移動App（App是Application的縮寫，意為“應用”）。
自從觸屏式手機和平板電腦開始流行起來後（多虧賈伯斯喬老爺子推廣了iPhone），傳統的網站和軟體行業發生了翻天覆地的變化。
以前，我們用手機最多是打電話，發簡訊，玩遊戲，很難得會在手機上瀏覽網頁。
可是自從觸屏技術開始流行後，大大提高了人們在手機和平板上“上網衝浪”的興趣。
隨著這樣的潮流，不少知名軟體推出了移動App版，不少知名網站也推出了對應的移動App版。
這時開發者們就有了兩個選擇：
- 優化自己的網站，使之能夠適應手機和平板的解析度，在電腦上和移動裝置上呈現不一樣的效果，不至於因為解析度的變化而“變形”。因為在電腦上瀏覽網頁，和在手機和平板上看到的頁面是不一樣的。如果不經過優化，在電腦上看很正常的網頁，在手機和平板上會不全，你要用手指去拖動頁面看其他部分；或者字很小，你要放大才能看。
- 將自己的網站做成原生App。所謂原生App，英語是Native Application。之所以叫“原生”，是對應它的作業系統說的，指安裝在此作業系統上的應用程式。假如是Android系統，那麼原生App一般使用Java語言開發，須要安裝在Android作業系統裡才能使用；iOS系統，那麼原生App就是使用Objective-C或Swift開發，須要安裝在iOS作業系統裡才能使用。
第一種方法就是響應式網站了，英語是Responsive Website。響應，顧名思義就是說這樣的網站針對不同裝置（電腦或移動裝置，如手機，平板，甚至智慧手錶），會自適應解析度，而且優先顯示的內容區塊也會不一樣。
比如我們來看一下小編自己隨便建的一個部落格（響應式網站，沒什麼內容）在PC（個人電腦），平板和手機上分別是如何的：
PC上
平板電腦上
手機上
看到了嗎？響應式設計不僅會針對不同解析度自適應大小，而且會對頁面做調整，保證最佳的內容呈現。
當然了，除了響應式設計和原生App，還有一種是Web App（也叫Mobile Website，移動網站），考慮平臺的有限性和機遇，為移動裝置專門設計的。
我們有時在移動裝置上瀏覽網頁時，可以看到彈出選項說“是否轉到移動版本？”，這樣的網頁就是做了移動版本了。Web App和響應式網站一樣，也不需要安裝在手機本地。
響應式網站，原生App和Web App各有優劣勢：
響應式網站的優點
- 一個網站：適應所有裝置，更容易管理。
- 一個URL（可以簡單理解為“網址”）：讓你的使用者在移動裝置上更容易找到，而且不需要任何的重定向，這在較慢的網速下特別有用。
- 容易做搜尋引擎優化：不需要為移動裝置建立特定的內容，可以讓移動裝置使用桌面網站的搜尋引擎優化的好處。
- 易於營銷：網站在移動裝置上顯示，對於營銷部門來說不需要增加額外的工作量。
- 成本低：簡單的數學運算，一個網站比兩個網站要便宜吧。
響應式網站的缺點
- 一個網站：讓一個網站適配所有網站，對於你來說很容易，但不一定適合你的使用者。你需要在同一個頁面上展示不同的側重點，以便使用該平臺的最大優勢，最大限度的提高你的轉化率。
- 技術：響應式設計是一種較新的技術，在一些老的裝置和瀏覽器中載入頁面速度過慢，甚至是完全不支援。
- 使用者體驗：移動端和PC機上的使用者體驗是完全不同的。所以一個網，甚至是響應式設計，在兩個平臺上都會損害您整體的UX（User Experience，使用者體驗）。如果你試圖使用相同的介面來滿足移動和桌面的兩個平臺的使用者使用，到最後可能誰都無法滿足。
Web App的優點
- 使用者體驗：您有一個網站，是專門為移動裝置建立的，考慮到平臺的所有優點和侷限性，有不錯的使用者體驗。
- 速度：您的網站在移動平臺上載入更快，更輕鬆。
- 成本：相對於響應式設計，建立一個移動網站並不便宜。
- 立即訪問：雖然比響應式設計沒有額外的好處，但對於一個需要下載安裝的原生App，仍然發揮著它的作用。
Web App的缺點
- 多個URL：您的使用者必須記住兩個URL，或以其他的方式重定向到移動網站，這需要幾秒鐘的時間。而且移動網站還需要為SEO做額外的工作。例如：www.chinaz.com/ 是站長之家的主站域名，它的移動網站的域名是：m.chinaz.com/
- 維護：您必須得維護兩個網站。
- 沒有普遍的一致性：你必須考慮到，有兩種不同型別的移動裝置：觸控式螢幕和鍵盤導航。一個單一的移動網以不同的方式在所有型別裝置上工作。
原生App的優點
- 使用者體驗：Native App比任何移動優化方案都具有更好的使用者體驗。親兒子，就是不一樣。原生態，健康品。
- 輔助功能和速度：應用程式可以執行，即使沒有連線網路也可以訪問您的所有資訊。如果你足夠幸運，擁有一支豐富的團隊和良好的編碼器，你的運用程式可以載入得更快，更順利。
- 可見性：一旦使用者在移動裝置上安裝了，它就一直會顯示在選單中或在桌面上有一個獨特的圖示。
原生App的缺點
- 不能在所有裝置上訪問：你的應用程式建立在一個特定的作業系統中，這意味著iOS系統上的應用不能在別的裝置上訪問。
- 不具靈活性：所有的應用程式更新都必須通過應用程式商店（例如蘋果的App Store和谷歌的Google Play），每次提交都得獲得批准，這有可能需要長達幾個星期的時間。而且不是每個使用者都很樂意於頻繁的更新，有些人會一直使用舊的版本。
- 成本高：原生App的開發顯然是眾多解決方案中最貴的一種。
- 營銷和搜尋引擎優化：需要一個完全不同的營銷策略來推廣你的應用程式，你需要專業的移動營銷人員幫忙。
看了上述方案的優缺點對比，你是否對於選擇哪一種心裡有底了呢？
值得一提的是，目前移動裝置使用率越來越高，所以大部分網站都已紛紛做了響應式設計。
大勢所趨，我們還等什麼呢。快去開發一個屬於你自己的響應式網站吧，或者把你設計的網頁改成響應式。
總結
-
響應式設計：Responsive Web design。使得網站可以自適應螢幕大小，在電腦，平板和手機上呈現方式不一樣。
-
響應式設計，Web App和原生App：具體取用哪個方案，主要還是看您的業務規模，預算和行業特點。這些解決方案可以在一起工作，相互補充。為什麼不能同時具有一個Web App和一個原生App？或者你可以選擇一個響應式網站，適應桌上型電腦，平板電腦，手機。
-
最好的解決方案是給你使用者一個最好的效果。
下回預告
微信公眾號「程式設計師聯盟」ProgrammerLeague
我是謝恩銘，在巴黎奮鬥的軟體工程師。
我的簡介
我的經歷
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：“向著標杆直跑”