推荐:浅析移动平台网站开发的三种方法

2013/01/22 6070

methods-mobile-websites.jpg

对于哪种方式更适用于移动平台网站开发,这个问题一直都存在很大争议。那么在开始话题之前,先让咱罗列一下目前大家所熟悉的三种方法:

1、响应式网页设计;
2、针对手机的专属网页设计;
3、响应式网页设计+服务器端组件

众所周知,谷歌一直致力提倡创建响应式网页设计,但是另一位实用性咨询专家Jakob Nielsen却认为应该创建手机专用的网站(但他随之就被一些网页设计师给抨击了)。第三种方法是,对于相同的链接,网页服务器根据访问网页的设备来选用那些合适的HTML和CSS(可以称为是响应式设计和服务器端组件的集合),值得一提的是这种方法也越来越受欢迎。

那么,今天的这篇文章将会讨论以上的各种方法,并对每个方法列举实际案例!

用来检测和收集各个网页例子的数据的手机是有着ios5.0系统的iphone4

一、响应式网页设计(RWD

响应式网页设计很典型的使用CSS3 媒体查询(media query)来根据用户的阅读面积调整网页布局,你可以用一样的HTML来展现不同的网页布局给电脑,平板电脑,手机,电视等等。

响应式网页设计的优点

  1. 内容一样,无论你用的是什么设备,都有相似的体验。当越来越多的人用手机取代了他们原本的电脑来浏览网页时,这个优点也变得越来越重要。
  2. 网页只需要一个链接:这使得共享并指向你的内容更方便。不需要重定向来获得最优化的显示(相对于一个专门给手机创建的网页而言)。

响应式网页设计的缺点

  1. 对手机来说内容不会完全最优化,还是会有一些内容展现的不那么完美!
  2. 性能更慢:根据2013年一月的HTTP档案数据显示,现在网页内容平均是1.3MB,虽然在应用响应式网页设计的时候,不必要的下载是可以避免的。但在实际应用中,绝大多数的响应式网页需要的尺寸不变甚至更大,正如一个关于手机网页性能表现的演讲中所报道的,研究院所测试的86%的网站的尺寸都相对来说更特么的大了!
  3. 网页上的信息、结构并不是那么容易驾驭:手机用户一般来说会想和电脑用户实现不同的任务,他们可能也更习惯于为手机定制专属的用户界面。除非你一个一个设备单独设置框架,否则可能会出现手机适用性的问题。

响应式网页设计的例子

0319-02_starbucks_responsive_web_design.png

星巴克
星巴克网页是一个能体现正反意见的绝佳例子。移动设备能访问它们所有的内容,每个页面都用的是相同的链接而且没有重新导向。
不幸的是,它们的网站需要加载很久(用3G智能手机要花15秒)而且如果想阅读整个网页需要滚动太多次。
性能结果:

  1. 平均加载时间:14.99秒
  2. 平均网页大小:1,193.88KB
  3. HTTP请求:142

World wildlife fund
0319-03_wwf_responsive_web_design.png

Wold wildlife fund网页很好的应用了响应式网页设计。导航为了手机被最优化了。
然而,加载时间对于3G手机来说也有些慢(花了7秒钟)。而且,有些子网页对于移动设备来说并没有最优化(例如他们的领养表格),而且在我的手机上用起来很痛苦。
性能结果:

  1. 平均加载时间:6.91秒
  2. 平均网页大小:885.97KB
  3. HTTP请求:72

The Boston Globe

0319-04_boston_responsive_web_design.png

The Boston Globe无可厚非的是最好的应用了响应式网页设计的大型网站之一。这个网页用了响应式图片和优化的Javascript以至于它不会让移动设备上的表现受到影响。
性能结果:

  1. 平均加载时间:5.55秒
  2. 平均网页大小:605.27KB
  3. HTTP请求:87

关于响应式网站设计的资源

 

二、针对手机的专属网页设计
有些网页为了打造移动设备更好的用户体验专门创建了一个单独的手机网页。
最常见的做法是将一个电脑网页重新定向去一个子域。(也就是说从examplesite.com导向去了mobile.examplesite.com)
手机专用网页的优点

  1. 对电脑网页和手机网页分别进行修改更方便:修改可以仅仅针对于手机版本或者是电脑版本。
  2. 加载时间短:因为你只是在开发手机网页,你可以使得你的手机网页简单化并且最优化来提高手机用户体验。
  3. 更容易导航:导航结构和内容可以针对手机用户进行的任务而改变。

手机专用网页的缺点

  1. 每个网页都有多个链接:在社交传媒中,分享网页成为了一个问题。因为手机用户分享的是手机版本的链接,而当电脑用户点击链接时能看到的只是手机版本的网页。为了防止重复的内容导致搜索引擎不最优化的问题(SEO不确定是不是应该这么翻译),你需要用到”rel=”alternative”以及” rel=”canonical”的标签。并且,当一个手机用户在谷歌上搜索,并且点进了一个电脑版本的链接时,他们看到的也即将是电脑版本的网页,或者是被重新定向去手机版网页。如果手机版本的网页不存在的时候,他们只会得到404。
  2. 不同的内容和功能:创建手机网页的目的是为了手机用户而调整网页。这可能意味着要删除一些内容和功能,导致了不一样的用户体验。
  3. 内容分歧:你可能会有两套不同的内容,使得要进行一场关于内容安排的噩梦。
  4. 需要重新导向:手机用户需要被导向去被优化了的版本,而且反过来也是一样(对于电脑用户来说)。重新导向使得加载时间变长,而且搜索引擎也可能不怎么待见你,SEO也是一个问题。

手机专用网页的例子
Walmart

0319-05_walmart_dedicated_mobile_site.png

沃尔玛的手机专用网站一眨眼就能加载完,1.35秒。
性能结果

  1. 平均加载时间:1.35秒
  2. 平均网页大小:272.29KB
  3. HTTP请求次数:45

Amazon
0319-06_amazon_dedicated_mobile_site.png

就和沃尔玛一样,我测试的亚马逊的独立手机网页也比响应式网页设计要快。(2.25秒加载时间)。
但奇怪的是,它并不是所有的网页都有手机最优化版本。例如,你用你的手机进行谷歌搜索,很多搜索出来的结果指向的都是电脑版本的网页,而且并不会被重新指向去手机优化版的网页。而且如果你用电脑访问手机优化版的网页时,你不会被重新指向去电脑版本的网页。

性能结果

  1. 平均加载时间:2.25秒
  2. 平均网页大小:103.66KB
  3. HTTP请求次数:16

BBC

 

0319-07_bbc_dedicated_mobile_site.png

BBC的独立手机网页比我测试的那些响应式网页要快(3.4秒),但是几乎一半的时间是用来为手机用户重新导向去手机网页(1.65秒)。
不像亚马逊的独立手机网页,如果你从电脑访问一个手机网页时,你会被自动重新导向回电脑版本的网页。
性能结果:

  1. 平均加载时间:3.4秒
  2. 平均网页大小:56.04KB
  3. HTTP请求次数:22

关于手机专用网站的资源

三、RESS:同一个链接,不同的HTML和CSS

这个方法会为不同的设备使用服务器端编程呈现自定义CSS和HTML,手机用户获得一组代码,而桌面端用户将获得另一组代码。
这个做法的本意是来提高网页性能的。
当这个方法和响应式网页设计结合在一起,双剑合璧却各司其职,性能表现最好。

这种方法也可以被称为是:响应式网页设计+服务器端组件(RESS)

用这个办法的时候,关键在于设置不同HTTP头部信息(去谷歌的创建智能手机优化的网页指导阅读更多),这样机器人都将基本桌面和移动版本。

RESS的优点

  1. 更容易管理:网页导航架构可以针对手机和电脑用户所需要达成的任务进行调整。
  2. 更少的页面膨胀(page bloat):对于手机而言,网页元素可以直接从HTML或者CSS里删除而不是使用display:none或者visibility:hidden。这样会减少需要加载的数据并且减少加载时间。
  3. 加载时间减少:不必要的Javascript可以直接从HTML中剔除,解放了移动设备的CPU,内存和缓存。

RESS的缺点

  1. 需要更多的服务器资源:动态创建HTML会使得服务器负荷加重。
  2. 需要检测设备:手机用户需要被检测到,而检测设备并不可靠。

RESS的例子

CNN

0319-08_cnn_ress.png

手机版本使用了为手机性能而优化过的HTML和CSS,而电脑版本明显用了更多的HTTP请求和Javascript。
导航也专门为了手机特定服务而调整。

性能结果:

  1. 平均加载时间:3.46秒
  2. 平均网页大小:163.12KB
  3. HTTP请求次数:28

eHow

0319-09_ehow_ress.png

像CNN一样,HTML和CSS在eHow的手机版本上被调整了以得到更好的性能体现。最顶端的导航两个版本是一样的,并且强调了搜索和它们的七个内容频道。

性能结果:

  1. 平均加载时间:6.15秒
  2. 平均网页大小:188.95KB
  3. HTTP请求次数:31

SlideShare呃,因为文明用语的一些原因,这么好的网站需要翻墙。

0319-10_slideshare_ress.png

SlideShare的手机和电脑版本完全不同。手机版本的网页应用了响应式网页设计,而电脑版本的没有。每个网页都用了完全不同的HTML和CSS。在手机版本上的Javascript显著减少了。每个网页都用了不同的网站结构。

性能结果:

  1. 平均加载时间:6.15秒
  2. 平均网页大小:188.95KB
  3. HTTP请求次数:31

WordPress.com

 

0319-11_wordpress_ress.png

WordPress.com的手机和电脑版网页几乎相同,只有一些差别:

  1. 手机版本的有http-equiv的属性,而电脑版本没有。(<meta http-equiv=”x-ua-compatible” content=”IE=10″>)
  2. 他们各用不同的样式表。
  3. 手机版本的酱novalidate属性放在了form标签里,而电脑版本的将其放在了表格里面<input>
  4. 手机版本的在页脚有一个新闻链接,而电脑版本在网页里根本没有这个链接。
  5. 手机版本的一些Javascript被剔除了。

性能结果:

  1. 平均加载时间:2.77秒
  2. 平均网页大小:118.40KB
  3. HTTP请求次数:19

关于RESS的资源

总结

理论上来说,响应式网页设计是最好的办法,但是实际上,大部分的响应式网页并没有制作的很理想并且导致加载时间变长。根据我的检测,手机专用的网站加载时间最短,但这种做法有一个明显的缺点。除非性能表现优先权最高,我是不会考虑这个做法的。我个人的偏好是响应式网页设计和RESSS的结合。这样又有响应式网页设计的优点又克服了它最大的两个缺点(更多的文件下载和较慢的加载时间)。

哪种方法是你设计手机优化网站时偏向的呢?请在评论中分享你关于这篇文章的想法。

翻译:SDC翻茄匠,@无语_圈圈不要肉
原文:http://sixrevisions.com/mobile/methods-mobile-websites/

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/methods-mobile-websites

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里