Web设计的未来:网页响应式设计路在何方?

作者Tom Ewer认为在多数情况下,网页并非需要响应式设计。虽然移动设备将成为未来上网的主要渠道,但并不是所有网站都应该使用像是设计,也许分类进行选择。在文中列举5点证明响应式设计的弊端或是差强人意的方面,并形容其有一个“免费通行证”,总是避过批评和建议。

Facebook设计总监KateAronowitz:“我们开发产品首先考虑移动端,其次是桌面端。”

Adobe CTO Kevin Lynch:“移动设计转型甚至超过PC革命。”

2014年,通过移动设备上网的人数将超过PC端。在未来,设计移动设备将成为Web开发人员的首要任务。

响应式设计似乎被看做成未来的设计方向,但我不赞同。今天,我要解释为什么我认为响应式设计并不是Web设计的最佳解决方案。

什么是响应式设计?

维基百科对响应式设计是这么介绍的:

响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries),结合流体网格适应各种布局,还可灵活使用图像。用户可跨越不同设备和浏览器的限制,访问相同内容,布局也利于阅读和浏览,只需细微的调整、平移或滚动。

网站设计将根据设备特定的分辨率或是屏幕尺寸进行调整。按上述定义来看,响应式设计看来很有发展前途。

在某些情况下,我也是响应式设计的拥护者。比如,一个桌面Web应用无法有效地呈现在移动设备屏幕上时,响应式设计就起到了作用。谷歌地图就是一个很好的例子:

桌面显示

手机显示

如果网站内容很大程度上是依赖图片,响应式设计绝对是一个很好的解决方案。但是,当内容是大多数文本的网站或是博客,我相信响应式设计是在浪费时间。

我要解释为什么我认为在很多情况下响应式设计是不值得的。

1. 违背用户期望

可用性101(usability 101)第一条规则就是满足最终用户期待,混淆最终用户是Web设计中最大的败笔。然而,这正是响应式设计所做的。

以博客为例。最普遍的“标准”博客设计,页面最上方是标题,下面分为两栏,一栏是博客内容,另一栏是其他内容。数以百计的博客网站设计基本如此,因为这样易于操作,而这就是人们所期望的。

如果你访问一个响应式设计开发的博客,传统的侧边栏肯定会消失,有可能被移到页面的顶部或是底部。但有一件事可以肯定,这并不是你所期望的。

以“Cats who code”为例。在桌面显示,顶部是导航栏和工具栏,其中包括最新文章和snippets,在边栏中还有搜索框:

采用响应式设计技术在手机中显示:

无论是导航栏,还是工具栏都消失了。经过多次滚动页面,在页面底部终于发现了原先的侧边栏,但导航栏依旧无迹可寻。

也许,会有响应式设计的拥护者称,这个网站只是一个失败的简单示例。但是,你们不要忘记,这个网站刚刚被评为10个“优秀”的响应式Web设计网站。我认为这是响应式设计的典型例子。其实,我很迫切能在手机上看到桌面版的布局。

2. 高成本、效率低

通常响应式设计会比非响应式设计耗时更长,成本更高。初始资金一般是捉襟见肘,如果还要额外支付一大笔资金用于响应式设计,会让人非常痛苦。

有人认为,响应式设计的费用比从零开发一个单独的移动网站更佳实惠,我同意这个说法。但是你知道什么比响应式设计更便宜吗?那就是非响应式设计。响应式设计除了耗时较长,其开发也相对的复杂。

你认为你的网站不使用响应式设计就会完蛋,这是错误的想法。试问自己,响应式设计给你带来的回报是什么?如果你认为非响应式设计的网站,就不能给移动用户提供服务,这个想法也是错误的。这就是我下面要讲的内容。

3. 非响应设计工作原理

在Mac上访问我的博客:

到目前为止,网站运营正常。我的网站是基于Woo ThemesCanvas theme,开发时并没有使用响应式设计。

在iPhone上访问我的博客:

在iPhone 4s视网膜屏幕上,非响应式设计完全可以纵向显示网站布局。

如果你觉得纵向文本区域显示拘谨,可横向转动设备观看,如下:

还可以通过双击屏幕,放大文本内容。

现在的移动设备都可有效地显示非响应式Web设计网站。但也有例外,有些非结构化设计网站在PC上显示的并不尽人意。

很多时候,一个设计优秀的桌面网站,可以在移动设备上完美的呈现出原有布局。

4. 加载效益低

移动设备通常是通过子宽带连接互联网(网速低),所以网站开发应更精简,以确保最佳的加载时间。

虽然这是一个合理的建议。但实际上,许多响应式设计并没有考虑加载的问题,许多设计师都习惯在页面中隐藏无用元素。虽然这不是最好的做法,但却是最常见的做法。

最佳(非响应式)解决方案是使用延迟加载,这是加载密集元素的最终解决方案。这是一段图像延迟加载代码,可用于你的网站。

5. 折衷

响应式设计可看作为是一种“折衷”,使用取决于设计师的主观决定。就算网站使用该技术,在移动设备上也无法呈现出桌面布局的最佳效果。

由于移动设备上布局的改变,会让很多移动用户难以接受或适应,从而会流失用户。

我认为在移动平台上,“折衷”并不比非响应式设计效果更佳,尤其这种方案需花费更长时间和成本。

结束语

我写这篇文章的2个主要原因:

1. 我认为,在许多情况下,响应式设计完全不必要。

2. 在互联网上,明显缺乏反对响应式设计的论据。

世上没有十全十美的东西,但响应式设计却似乎得到一个“免费通行证”,能抵挡大部分建设性的批评。

我不反对响应式设计理论,但在很多简单的情况下并没有使用的必要性。其实很多人都是跟风,所以才这么做。也许你应该花一些时间考虑是否真的需要响应式设计,你的访客是否真的可从中真正受益。

原文:managewp 编译:CSDN

时间: 2024-08-31 02:40:54

Web设计的未来:网页响应式设计路在何方?的相关文章

网页响应式设计的现状与趋势

网页响应式设计的现状与趋势 响应式设计的现状与趋势-banner720 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计:2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮.这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章

响应式网页设计:很全的响应式网页设计教程

文章描述:响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验. 响应式设计现在已经成为网页设计师学习的焦点.网页教学网发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多.你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢? 响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验.当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计.在进行响应式

《响应式Web设计实践》一1.5 为什么又是一本关于响应式设计的书

1.5 为什么又是一本关于响应式设计的书 响应式Web设计实践其实现在我们在实施响应式设计方面还没有取得什么成就,因为响应式设计要求我们对我们之前处理Web的方式进行重新翻修.由于能够迎接我们想到的挑战的工具和流程都还没有出现,所以我们需要先后退几步并问自己一些问题: 把台式电脑的体验设为默认体验是否有意义? 我们该如何调整工作流程,来应对不同设备和不同尺寸屏幕上的设计和原型? 我们该如何以一种更加结构化的方式来存储内容? 内容管理系统和所见即所得编辑器是否有天生的缺陷? 我们是否应该重新考虑一

移动网站新趋势:描述响应式设计的优缺点

[搜狐IT消息]7月17日消息,科技博客Business Insider旗下研究机构BI Intelligence发布报告,描述了响应式设计的优缺点. 作为一种能够缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式.在谷歌公司于2012年中期指出,响应式设计是优化移动网站的最佳方式之后,这种设计做法的地位得到了进一步巩固. 随着iPhone.iPad和Android手机的普及,网站主办方发现,网站在移动端应当带来与桌面端类似

Windows10 UWP开发 - 响应式设计

原文:Windows10 UWP开发 - 响应式设计   Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结,可能有诸多不完善和浅薄之处,欢迎读者严格指正.另外本文也只是抛砖引玉之用,希望能收获更多更好的实战经验. 自适配的必要性 说了这么多,我们首先可能会问了,为什么要做响应式设计?其原因有以下两点: Windows10的跨平台性 Windows10是

移动网站新趋势:响应式设计

[搜狐IT消息]7月17日消息,科技博客Business Insider旗下研究机构BI Intelligence发布报告,描述了 响应式设计的 优缺点. 作为一种能够 缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式.在谷歌公司于2012年中期指出,响应式设计是优化移动网站的最佳方式之后,这种设计做法的地位得到了进一步巩固. 随着iPhone.iPad和Android手机的普及,网站主办方发现,网站在移动端应当带来与桌面

移动网站新趋势:响应式设计

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客 站长团购 云主机 技术大厅 [搜狐IT消息]7月17日消息,科技博客Business Insider旗下研究机构BI Intelligence发布报告,描述了响应式设计的优缺点. 作为一种能够缩放适应不同大小的屏幕的网页设计做法,响应式设计(Responsive Design)正日益成为最受推崇的移动网页优化方式.在谷歌公司于2012年中期指出,响应式设计是优化

《众妙之门——用户体验设计的秘密》一2.4 通过响应式设计实现的普遍化设计

2.4 通过响应式设计实现的普遍化设计 尽管很多关于响应式设计的讨论都聚焦于技术层面和响应式概念的层面,但是"响应能力"这个指标不应该是设计的目标,只是为了满足用户需求的某种条件:只是对不同内容的呈递所需要具备的工具:只是用来压缩图像大小的一种技术:只是用来合理布局.更好地呈递信息,以适应小屏幕显示的一种手段. 响应式设计的核心目标是为不同设备提供普遍化的体验. 掌握响应式设计的过程是一种普遍化设计的训练.掌握了响应式,便对设计的"平均律"有了更深层次的了解.The

WEB响应式设计:响应式Web设计的CSS框架分享

文章简介:Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. Web布局设计新方式-响应式设计,应用越来越广泛,在这里为大家分享10个用于响应式Web设计的CSS框架,让您的开发工作越来越轻松. 1) Less Framework Less框架是一个用于设计自适应网站的CSS网格系统,它包含4个布局和3套预设布局,这些都以一个单一网格为基础.Less框架的目标是更高效地创建多布局网站,并在布局之间保持一致. 2)