作者 謝恩銘，公眾號「程序員聯盟」（微信號：coderhub）。
轉載請注明出處。
原文：http://www.lxweimin.com/p/93048eed45cb

《Web探索之旅》全系列

內容簡介

1. 響應式網站和移動應用
2. 總結
3. 第三部分第一課預告

1. 響應式網站和移動應用

上一課 Web探索之旅 | 第二部分第四課：數據庫 中，我們認識了關系型數據庫和非關系型數據庫。

在我們開始聊響應式網站之前，可以聊聊移動 app（app 是 application 的縮寫，表示“應用”）。

自從觸屏式手機和平板電腦開始流行起來后（多虧喬布斯推廣了 iPhone），傳統的網站和軟件行業發生了翻天覆地的變化。

以前，我們用手機最多是打電話，發短信，玩游戲，很難得會在手機上瀏覽網頁。

可是自從觸屏技術開始流行后，大大提高了人們在手機和平板上“上網沖浪”的興趣。

隨著這樣的潮流，不少知名軟件推出了移動 app 版，不少知名網站也推出了對應的移動 app 版。

這時開發者們就有了兩個選擇：

• 優化自己的網站，使之能夠適應手機和平板的分辨率，在電腦上和移動設備上呈現不一樣的效果，不至于因為分辨率的變化而“變形”。因為在電腦上瀏覽網頁，和在手機和平板上看到的頁面是不一樣的。如果不經過優化，在電腦上看很正常的網頁，在手機和平板上會不全，你要用手指去拖動頁面看其他部分；或者字很小，你要放大才能看。

• 將自己的網站做成原生 app。所謂原生 app，英語是 Native application。之所以叫“原生”，是對應它的操作系統說的，指安裝在此操作系統上的應用程序。假如是 Android 系統，那么原生 app 一般使用 Java/Kotlin 語言開發，須要安裝在 Android 操作系統里才能使用；iOS 系統，那么原生 app 就是使用 Objective-C/Swift 開發，須要安裝在 iOS 操作系統里才能使用。

第一種方法就是響應式網站了，英語是 Responsive Website。響應，顧名思義就是說這樣的網站針對不同設備（電腦或移動設備，如手機，平板，甚至智能手表），會自適應分辨率，而且優先顯示的內容區塊也會不一樣。

比如我們來看一下我自己隨便建的一個博客（響應式網站，沒什么內容）在 PC（個人電腦），平板和手機上分別是如何的：

PC上

平板電腦上

手機上

看到了嗎？響應式設計不僅會針對不同分辨率自適應大小，而且會對頁面做調整，保證最佳的內容呈現。

當然了，除了響應式設計和原生 app，還有一種是 Web app（也叫 Mobile Website，移動網站），考慮平臺的有限性和機遇，為移動設備專門設計的。

我們有時在移動設備上瀏覽網頁時，可以看到彈出選項說“是否轉到移動版本？”，這樣的網頁就是做了移動版本了。Web app 和響應式網站一樣，也不需要安裝在手機本地。

響應式網站，原生 app 和 Web app 各有優劣勢：

響應式網站的優點

1. 一個網站：適應所有設備，更容易管理。
2. 一個 URL（可以簡單理解為“網址”）：讓你的用戶在移動設備上更容易找到，而且不需要任何的重定向，這在較慢的網速下特別有用。
3. 容易做搜索引擎優化：不需要為移動設備創建特定的內容，可以讓移動設備使用桌面網站的搜索引擎優化的好處。
4. 易于營銷：網站在移動設備上顯示，對于營銷部門來說不需要增加額外的工作量。
5. 成本低：簡單的數學運算，一個網站比兩個網站要便宜吧。

響應式網站的缺點

1. 一個網站：讓一個網站適配所有網站，對于你來說很容易，但不一定適合你的用戶。你需要在同一個頁面上展示不同的側重點，以便使用該平臺的最大優勢，最大限度的提高你的轉化率。
2. 技術：響應式設計是一種較新的技術，在一些老的設備和瀏覽器中加載頁面速度過慢，甚至是完全不支持。
3. 用戶體驗：移動端和 PC 機上的用戶體驗是完全不同的。所以一個網，甚至是響應式設計，在兩個平臺上都會損害你整體的 UX（User Experience 的縮寫，表示“用戶體驗”）。如果你試圖使用相同的界面來滿足移動和桌面的兩個平臺的用戶使用，到最后可能誰都無法滿足。

Web app 的優點

1. 用戶體驗：你有一個網站，是專門為移動設備創建的，考慮到平臺的所有優點和局限性，有不錯的用戶體驗。
2. 速度：你的網站在移動平臺上加載更快，更輕松。
3. 成本：相對于響應式設計，創建一個移動網站并不便宜。
4. 立即訪問：雖然比響應式設計沒有額外的好處，但對于一個需要下載安裝的原生 app，仍然發揮著它的作用。

Web app 的缺點

1. 多個 URL：你的用戶必須記住兩個 URL，或以其他的方式重定向到移動網站，這需要幾秒鐘的時間。而且移動網站還需要為 SEO 做額外的工作。例如：http://www.chinaz.com 是站長之家的主站域名，它的移動網站的域名是：http://m.chinaz.com 。
2. 維護：你必須得維護兩個網站。
3. 沒有普遍的一致性：你必須考慮到，有兩種不同類型的移動設備：觸摸屏和鍵盤導航。一個單一的移動網以不同的方式在所有類型設備上工作。

原生 app 的優點

1. 用戶體驗：Native app 比任何移動優化方案都具有更好的用戶體驗。親兒子，就是不一樣。原生態，健康品。
2. 輔助功能和速度：應用程序可以運行，即使沒有連接網絡也可以訪問你的所有信息。如果你足夠幸運，擁有一支豐富的團隊和良好的編碼器，你的運用程序可以加載得更快，更順利。
3. 可見性：一旦用戶在移動設備上安裝了，它就一直會顯示在菜單中或在桌面上有一個獨特的圖標。

原生 app 的缺點

1. 不能在所有設備上訪問：你的應用程序建立在一個特定的操作系統中，這意味著 iOS 系統上的應用不能在別的設備上訪問。
2. 不具靈活性：所有的應用程序更新都必須通過應用程序商店（例如蘋果的 App Store 和谷歌的 Google Play），每次提交都得獲得批準，這有可能需要長達幾個星期的時間。而且不是每個用戶都很樂意于頻繁的更新，有些人會一直使用舊的版本。
3. 成本高：原生 app 的開發顯然是眾多解決方案中最貴的一種。
4. 營銷和搜索引擎優化：需要一個完全不同的營銷策略來推廣你的應用程序，你需要專業的移動營銷人員幫忙。

看了上述方案的優缺點對比，你是否對于選擇哪一種心里有底了呢？

值得一提的是，目前移動設備使用率越來越高，所以大部分網站都已紛紛做了響應式設計。

大勢所趨，我們還等什么呢。快去開發一個屬于你自己的響應式網站吧，或者把你設計的網頁改成響應式。

2. 總結

1. 響應式設計：Responsive Web design。使得網站可以自適應屏幕大小，在電腦，平板和手機上呈現方式不一樣。

2. 響應式設計，Web app 和原生 app：具體取用哪個方案，主要還是看你的業務規模，預算和行業特點。這些解決方案可以在一起工作，相互補充。為什么不能同時具有一個 Web app 和一個原生 app？或者你可以選擇一個響應式網站，適應臺式機，平板電腦，手機。

3. 最好的解決方案是給你用戶一個最好的效果。

3. 第三部分第一課預告

今天的課就到這里，一起加油吧！

下一課：Web探索之旅 | 第三部分第一課：服務器

我是 謝恩銘，公眾號「程序員聯盟」（微信號：coderhub）運營者，慕課網精英講師 Oscar 老師，終生學習者。
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：「向著標桿直跑」