设计并开发的网站能够友好的支持移动设备,已经成为当今网页设计的一个重要趋势。
它的重要性体现在我和客户交谈时,几乎所有的客户都把“支持移动设备”作为网站重新设计的第一要务。
去年年底,我开始给一家销售加工木材产品的公司做新设计。在讨论的一开始,我就把话题转到支持移动设备和响应式设计。通常,这个话题很受欢迎,但这次例外了,就像客户所抱怨的:
我们的客户不会使用手机来访问我们的网站。
我已经不止一次的从我的潜在客户那儿听到类似的回应了。我也和许多公司交谈过,但这些公司都严重低估了通过手机或是移动设备来访问他们公司网站的人数。通常情况下,看下流量统计就能让他们看清移动设备对他们网站流量的影响。但是当我看到这个特殊客户的分析报告时,我惊呆了。
2%。这就是当时来自移动设备的用户数量。就这么多!
在结束这个故事之前,我最终和这个客户合作然后重新设计的他们的网站,并且那个网站现在完全是响应式的。在设计师如何推销响应式网站上,它给了我们一个有趣的启示:当我们认为应该推行一种大家公认的最佳实践的解决方案时,客户的需求往往不是显而易见的。
明确他们是否真的需要一种移动网站体验
本文的标题,“向客户推销响应式设计”听起来可能像一个阴险的销售人员试图说服客户购买他们不需要的东西。这不是我想提倡的。因此,这个过程的第一步应该明确客户是否真的需要你给出的解决方案。
当你需要为一个不支持移动设备的网站做响应式的设计时,你需要从大局着手。 做一些流量报表统计我们的客户端是否吸引移动用户。如果移动流量接近浏览器客户端流量,那么可能他们现在不太需要一个移动网站体验—特别是网站没有其他问题的情况下。
如果一个网站组织运行良好,比如说它转化率高,设计也很吸引人,并且有很好的用户体验(至少在桌面环境上如此),但是移动用户占比却难以置信的低,那么重新设计或者重构网站仅仅为了让他变得响应性是没有任何经济意义的。
你可能会反驳说,虽然占比很小的访客获得很差的体验是无法接受的,但是我可以通过开发一个响应式设计来解决这个问题。站在设计师的角度我表示欣赏这种观点,但是我也理解业务方面的形势。无论你和什么公司谈合作,为了取悦仅仅2%的客户而进行响应式设计是很难被接受的。所以你不能只看流量统计,而且需要思考更多而不单单是响应性设计相关的好处。
尝试解决其他问题
显然,支持移动设备还不是一个足够诱人的理由让我们的客户去重新设计他们的网站,其他的问题同样也会阻碍用户。 其中有两个主要问题,在网站的视觉设计上,设计过时和设计不贴合当前的营销,还有缺乏内容管理系统(CMS)的或是缺乏网站更新工具。那么,针对这些问题我提出一些个人的建议。
花点时间重新设计过的网站会给用户带来一种全新的视觉体验和感受,同时也能改善了网站的美观和易用性。 我们会把网站提高到目前的水平并且接入CMS(此处指的是发布系统),CMS能够帮助我们解决网站更新的问题。
当我和客户谈到这个建议和接下来要做的步骤时,我提到说我们可以让网站变得响应式,就像我们重构了它一样。不出所料, 客户询问了这样做是否必要或是这是否需要额外的花费(这不是废话嘛)。这里最关键的一点是我将用户引导到响应式设计的好处上,而不仅仅是支持移动设备。
关注更多,不仅限手机
当我们谈论响应式设计的时候,我们往往只关注手机。因为手机和以往我们设计的主战场-桌面屏幕太不一样了。创造一个在桌面到手机上,用户体验很好的网站,是一个很好的方式去体现响应式设计的灵活性和健壮性。但对这个客户而言,手机用户看起来不是很多。好在响应式设计不仅限于手机。
在和客户交谈之后,我发现他们经常被顾客投诉说他们的网站看起来“太小了”。原因是因为网站是多年前设计的,设计宽度固定在800 x 600像素分辨率。当用户使用现在典型的大屏幕去访问网站,会发现网站的列宽实在是太窄了,左右两边出现了大量的空白。既便如此,这家公司仍然还一定量的用户仍在使用旧的、低分辨率的显示器。所以 仅仅是把网站做得大一点不是一个对的解决方案。其实这家公司需要的是一个大小屏幕都能适应的网站。这个问题绝对能通过响应式设计解决。
我并没有将注意力集中在手机和其他小屏幕上,我像客户解释说响应式设计可以让我们有效地在主流的大屏幕、旧笔记本和低分辨率的老屏幕上展示我们的网站。
当我分别用笔记本和大显示器向客户展示一个使用响应式设计的网站时,他们激动的告诉我们他们对网站的不满(太小)已经很多年了,但是他们的前设计师告诉他们,如果要支持使用旧电脑的用户,他们除了为这些最低标准的用户做设计外别无选择。
响应式设计能解决这个问题,响应式设计使得我们的客户与我们达成更多共识,因为它解决了他们的老大难问题(网站太小), 在没有解决这个问题之前,他们甚至认为没必要解决这个问题(支持移动设备)。
立足未来,而不是现在
当我和客户谈论响应式设计时,我极少使用 “支持移动(mobile support)”这个术语,因为它只会让客户联想到手机,或是平板电脑。 我更倾向于使用“支持多种设备(multi-device support)”,它包括了更广泛的设备和屏幕尺寸,这更符合我们真实的设计和开发。
响应式设计的优点之一是它不再只关注当下的设备和屏幕尺寸。因为一个响应式的网站的布局能够适应任何尺寸的屏幕,这是一种未来友好型的方法。 大家都希望网站能够在未来依然表现良好,即使有新的设备和屏幕尺寸进入市场,出现在客户面前。 换句话说,即使网站现在没有吸引大量的移动客户,但它很可能在未来发生。响应式方法能够确保那些移动访客能获得优化后的体验。
客户对它能否吸引移动访客仍然保持怀疑,但是他们仍然接受了响应式设计,因为它解决了其他问题。另外,因为我们必须重构网站,所以同时让它响应式是有商业价值的。 尝试将现有的非响应式网站响应式化的代价是昂贵的,任务更是艰巨的,而在设计过程的早期就考虑响应式,实现起来就容易得多,特别是当它作为工作流程的核心部分,我们就是这样做的。这样的工作流程帮助我们确保这个响应式方法在技术上和经济上都是可行的。
随着项目的不断推进,我们明白一旦网站上线,我们必须紧紧盯着流量,来证明我们关于移动流量缺乏的说法。
打破常规
2%的流量来自移动设备用户是一个非常低的占比,我第一次看到的时候还一度怀疑它的准确性。
这个特别的公司没有商场或面向公共客户销售。它是一家B2B公司,和一些指定地区的分销商和代理商共事。 这个客户认为当地移动用户数量很低,大多数都是通过电脑来访问,而不是通过手机。
我承认这家公司移动用户的数量水平比较低 (在我们维护的网站中,绝大多数都只有30%的移动用户,除了为数不多的几个超过了50%) 。 我感觉这里一定有地方不对,我的直觉告诉我移动设备的体验差是其中原因之一。我推测是因为移动用户体验的缺乏让移动用户望而却步了。
当时我没有和客户提我的这个想法,不过随着时间的推移和新设备的不断涌现,来自移动流量的已经从2%攀升到了17%。尽管如此,这个网站获得的移动流量还是低于其他许多网站获得的,不过它指数型的增长让人无法忽视它。
唯一能解释快速增长的原因就是网站的响应性。不是人口原因也不是因为市场变化了。 唯一的不同就是网站在移动设备上展示的方式。改进的体验促进了流量的增长。这也是我推行响应性的理由之一,即使流量统计数据有推荐其他的方式。
解决问题
作为专业人员我们不仅要能解决客户告诉我们的问题,还要解决客户还未意识到的问题。
在网站的设计过程中,我们团队解决了客户提出的一系列的问题,包括过时的设计和缺乏CMS。我们针对这些问题提出的解决方案是客户没有意识到的— 缺乏移动访客源于缺乏支持 — 证明了我们的响应式设计方法有用,即使流量统计数据没有表示我们需要它。我们知道响应式设计能够修正在大屏幕和小显示器上的布局, 同意也能扭转网站移动访客流量过低的问题,这已经被我们证明是正确的。
2%到18%的增长可能归结于实际顾客曾经一直坚持用桌面电脑,但是现在转向使用移动设备。这些用户可能会在不同场合选择不同的设备访问网站,我确信他们在设备上会得到不错的体验了。
增长的另一个原因毫无疑问应该是新业务。 正如电影 Field of Dreams 说的那样: “If you build it, they will come.” 如果网站不支持移动设备,那么移动访客注意到之后会马上离开, 再也不会回来. 这也是用户数量低的原因之一。但是如果网站不再将移动访客赶走(意思是网站的移动体验还不错),那么访客来了就不会马上离开。 否则,用户还是会找到他们寻找的信息,可能还会再次访问,或是告诉朋友有该内容的其他网站。支持移动鼓励了用户使用移动设备(Mobile support encourages mobile use)。
通过解决客户提出的问题,包括客户没有提及的,让我们能够推行响应式设计方法。改进后的体验使得移动用户大大增加,同样公司从网站获取到的用户数据也增加了。
总结
推销响应式设计和推销其他任何东西一样。一切都是为了解决问题。
在这里,我们强调了响应式设计的好处超过了潜在客户所说的仅仅支持移动设备的好处。这里有一些关键点是我们在讨论”对一个没有明显需要移动支持的的网站进行响应式设计的价值“时总结的:
- 我们应该尽量支持各种不同的屏幕尺寸,特别是我们讨论响应式设计时通常不考虑的,包括最新的高分辨率的桌面显示器和老旧的小屏幕低分辨率的显示器。
- 随着市场中出现越来越多新的移动设备和更多的屏幕尺寸,会有更多的移动用户来访问网站,因此网站应该做好长远的规划,面向未来。
- 通过做这件事,我们可以节约时间、金钱,还能降低技术复杂度,我们应该把它作为设计过程的一部分,而不是在网站建设好后再去填补它。
原文:http://www.smashingmagazine.com/2013/10/30/selling-responsive-website-design/
作者:Jeremy Girard
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。