內容簡介
1、第二部分第五課：響應式網站和移動應用
2、第三部分第一課預告：服務器
第二部分第五課：響應式網站和移動應用
在我們開始聊響應式網站之前，我們可以聊聊移動App（App是Application的縮寫，意爲“應用”）。
自從觸屏式手機和平板電腦開始流行起來後（多虧喬布斯喬老爺子推廣了iPhone），傳統的網站和軟件行業發生了翻天覆地的變化。以前，我們用手機最多是打電話，發短信，玩遊戲，很難得會在手機上瀏覽網頁。
可是自從觸屏技術開始流行後，大大提高了人們在手機和平板上“上網衝浪”的興趣。
隨着這樣的潮流，不少知名軟件推出了移動App版，不少知名網站也推出了對應的移動App版。
這時開發者們就有了兩個選擇：
1. 優化自己的網站，使之能夠適應手機和平板的分辨率，在電腦上和移動設備上呈現不一樣的效果，不至於因爲分辨率的變化而“變形”。因爲在電腦上瀏覽網頁，和在手機和平板上看到的頁面是不一樣的。如果不經過優化，在電腦上看很正常的網頁，在手機和平板上會不全，你要用手指去拖動頁面看其他部分；或者字很小，你要放大才能看。
2. 將自己的網站做成原生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做額外的工作。例如：http://www.chinaz.com/ 是站長之家的主站域名，它的移動網站的域名是：http://m.chinaz.com/ 。
維護：您必須得維護兩個網站。
沒有普遍的一致性：你必須考慮到，有兩種不同類型的移動設備：觸摸屏和鍵盤導航。一個單一的移動網不以同樣的方式在所有類型設備上工作。
原生App的優點：
用戶體驗：Native App比任何移動優化方案都具有更好的用戶體驗。親兒子，就是不一樣。原生態，健康品。
輔助功能和速度：應用程序可以運行，即使沒有連接網絡也可以訪問您的所有信息。如果你足夠幸運，擁有一支豐富的團隊和良好的編碼器，你的運用程序可以加載得更快，更順利。
可見性：一旦用戶在移動設備上安裝了，它就一直會顯示在菜單中或在桌面上有一個獨特的圖標。
原生App的缺點：
不能在所有設備上訪問：你的應用程序是建立只是在一個特定的操作系統，這意味着iOS系統上的應用不能在別的設備上訪問。
不具靈活性：所有的應用程序更新都必須通過應用程序商店（例如蘋果的App Store和谷歌的Google Play），每次提交都得獲得批准，這有可能需要長達幾個星期的時間。而且不是每個用戶都很樂意於頻繁的更新，有些人會一直使用舊的版本。
成本高：原生App的開發顯然是衆多解決方案中最貴的一種。
營銷和搜索引擎優化：需要一個完全不同的營銷策略來推廣你的應用程序，你可以需要一個專業的移動營銷人員幫忙。
看了上述方案的優缺點對比，你是否對於選擇哪一種心裏有底了呢？
值得一提的是，目前移動設備使用率越來越高，所以大部分網站都已紛紛做響應式設計了。
大勢所趨，我們還等什麼呢。快去開發一個屬於你自己的響應式網站吧，或者把你還沒響應式設計的網頁改成響應式。
總結
響應式設計：Responsive Web design。使得網站可以自適應屏幕大小，在電腦，平板和手機上呈現方式不一樣。
響應式設計，Web App和原生App：具體取用哪個方案，主要還是看您的業務規模，預算和行業特點。這些解決方案可以在一起工作，相互補充。爲什麼不能同時具有一個Web App和一個原生App？或者你可以選擇一個響應式網站，適應臺式機，平板電腦，手機。
最好的解決方案是給你用戶一個最好的效果。
第三部分第一課預告：服務器
今天的課就到這裏，一起加油吧！
下一課我們學習：服務器
程序員聯盟社區
目前有一個微信羣和一個QQ羣，凡是對編程感興趣的朋友都可以加，大家可以交流，學習，互動，討論編寫的程序的源代碼，編程問答等。
微信羣（程序員聯盟），加羣請私信我（微信羣人數超過100之後，不能通過掃描二維碼加入了，只能私信我，謝謝）
QQ羣： 413981577 （1000人羣）
QQ羣文件裏有很多編程書籍PDF和其他資料。掃描下面二維碼加QQ：
我們還建立了一個公共的百度雲盤，2TB容量，已有很多優秀編程資源，大家也可以上傳。鏈接加羣之後會發送。
百度貼吧 【程序員聯盟】 歡迎您加入，交流編程，討論代碼，共享資源，已經有很多話題。吧主就是小編。
http://tieba.baidu.com/f?kw=%E7%A8%8B%E5%BA%8F%E5%91%98%E8%81%94%E7%9B%9F&ie=utf-8
點擊左下角【閱讀原文】即可進入 【程序員聯盟】 百度貼吧
《程序員聯盟》的微社區，方便大家提問和互動。可以關注一下。
微社區地址和二維碼如下：
http://m.wsq.qq.com/264152148
謝謝！
*您若覺得本文不錯，請點擊畫面右上角《···》按鈕“分享到朋友圈”或“發送給朋友”
*新朋友請關注「程序員聯盟」微信搜公衆號 ProgrammerLeague
小編微信號： frogoscar
小編QQ號： 379641629
小編郵箱： [email protected]
程序員聯盟QQ羣：413981577
程序員聯盟微信羣：先加我微信
有朋友反映看手機端的文章太累，其實是可以用瀏覽器網頁來看的：
方法1. 點擊畫面右上角的《···》按鈕，然後選擇“複製鏈接”，再把鏈接黏貼到你的瀏覽器裏面或用郵件發送給自己，就可以在電腦的瀏覽器裏打開了
方法2. 頭條網www.toutiao.com，搜索我的自媒體“程序員聯盟”，內有所有文章，也可以直接進這個鏈接：http://www.toutiao.com/m3750422747/
方法3. 我的51CTO博客，CSDN博客，博客園和開源中國博客鏈接（所有文章都在上面）
http://4526621.blog.51cto.com
http://blog.csdn.net/frogoscar
http://www.cnblogs.com/frogoscar
http://my.oschina.net/frogoscar/blog
如何查看所有文章：
1. 點擊“查看公衆號”，再點擊“查看歷史消息”
2. 在公衆號回覆任何信息，可以看到包含“查看歷史消息”的鏈接。
【支持小編的勞動】
覺得文章對你有幫助，請紀念小編的辛勤勞動，掃描二維碼捐贈給小編，謝謝！
支付寶
Paypal
本文分享自微信公衆號 - 程序員聯盟（coderhub）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。