【Web探索之旅】第二部分第五课：响应式网站和移动应用

内容简介

1、第二部分第五课：[b]响应式网站和移动应用[/b]

2、[b]第三部分第一课预告：服务器[/b]

第二部分第五课：响应式网站和移动应用

在我们开始聊响应式网站之前，我们可以聊聊移动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

小编邮箱： enmingx@gmail.com

程序员联盟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