作者：Carin van Vuuren

毫无疑问，响应式网页设计（responsive web design，RWD）的已经被抬高到近乎“一方独霸”的神话地位。

响应式设计宣称能够在所有手机屏幕上传递良好的体验，同时通过减少代码和手机体验管理工作来节约公司的开支，听起来好得不像是真的。然而，这就是真的。

值得注意的是，网页体验的某些领域——如编辑性内容和电子商务付款功能，可以通过RWD高效地拓展到各种手机设备上。然而，有许多手机网页功能是响应式设计无法实现的。具有复杂的网页功能的网站，如销售成千上万种产品的综合零售网站、高分辨率图片网站、以用户生成内容为主的网站、经常发布营销信息和举行活动的网站、播放视频和动画的网站，在使用响应式设计前应该三思而后行。

为了更好地评估什么时候适合用响应式设计，商家必须考察三个影响比较大的方面：性能、用户情境和手机促销。

responsive-web-design-for-mobile(from instantshift.com)

响应式网站虽好但速度慢

对于手机，性能基本上等同于速度。每一秒延迟都意味着损失7%的转化率，为了达到理想的手机体验，手机网站的页面加载时间应该控制在3秒钟内；而基于RWD的商业网站面临着一个风险：速度太慢。

Keynote是一家从事在线性能监控的网站，经常发表一些关于各大行业手机和电脑网站加速速度的指标。有趣的是，在高居各自行业排行榜的网站中，没有一个零售或旅行手机网站采用响应式设计。这就指出了响应式设计的一个缺陷：因为它依赖代码在不同设备上传递一致的内容，具有高分辨率图片的页面和其他内容量大的页面需要更长的加载时间。虽然做出的网站很漂亮，但手机用户的整体体验却被破坏了。

当制作高品质手机体验时，以下几个技巧应该牢记在心：

1、减少IP请求量：电脑网站通常移交100个IP请求，而在手机上，这些请求是占时间的，必须尽一切可能减少这个数量。对于手机网站，合理的平均请求数量应该是40-60。

2、网站减负：品牌必须保证它们的手机网站加载的图片是小尺寸的，还要减少CSS和JavaScript，以便手机网页体验不会大量获取用户的设备数据。

3、高效的UI和UX：用户会被视觉上引人注目的手机网站吸引——特别是鲜明的颜色、直观的触控体验和有趣的内容。记住，速度不一定要牺牲丰富的体验。

4、使用CDN（游戏邦注：内容发布网络(CDN)是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容）：毫无疑问，CDN会提高你的电脑网站和手机网站的速度。如果你要求返回手机页面，这个返回可以由边缘服务器完成，从而节省宝贵的时间。

关注用户情境

在一份关于手机消费者体验的报告中，Forrester Research公司预测，整合使用情境——即在合适的时间与消费者分享合适的服务、价格和内容的商业，将获得更加显著的优势。在吸引手机用户时，采用响应式设计的手机网站更难考虑到用户情境。

创造情境丰富的体验的另一个方法是，在手机网站中混合使用响应式和和适应式设计。这些混搭的例子包括Mercedes Benz USA、FedEx和许多保险公司如New York Life。通过将响应式设计与包含自适应性体验元素的页面组合起来，手机用户可以享受到两种最佳体验：网站不仅外观吸引人，而且速度快、内容丰富。

然而，如果是对于希望通过手机活动、抽奖、赠品、推送信息、本地通告等形式来个性化手机消费者体验的品牌，应该考虑为针对各个手机渠道创造专有的体验。

准备出让控制权？

当考虑是否把执行RWD纳入你的手机网站策略时，你应该记住一个交易：在手机营销开发循环中，把控制权交给其他利益相关者。响应式设计让营销团队放弃驾驶员的座位，使他们更难快速设计和管理各个渠道的营销活动。

曾经有来自大媒体组织的客户在响应式项目完成之后，失望地告诉我，他们没有意识到制作RWD网站的测试量那么大那么难，最后，为了让网站生存下来，他们不得不及时替换掉功能和性能。

专注于手机用户

“手机第一”通常被追捧为响应性设计的咒语。虽然这个前提很充分，但“用户第一”可能产生更好的结果和让手机消费者产生更强烈的沉浸感。

遵循这个方法的例子是，女性内衣和高级成衣品牌Fleur du Mal。这个奢侈品牌的下一手机体验将吸引人的内容、图片、直观的浏览和查看选项以及内容发布工具结合起来，以进行频繁的即时活动和促销。

如果手机体验在5秒钟内加载完毕，浏览者就会觉得简单有趣。这种体验的方方面面都是为了提高产品的被发现率和促进快速有效的浏览。手机网站还要通过本地定位整合先进的社交功能和个性化功能，也就是给用户发送有关本地商业、促销和热门零售活动的手机网页信息。作为线上独占品牌，Fleur du Mal意识到独特的手机体验可以更好地吸引消费者，所以创造这种体验是非常重要的。

归根到底，找到设计手机网页的正确方法的关键是，不仅强调达到内部商业目标，还要重视传递消费者欣赏且能与他人分享的那种体验。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Responsive design: Will your mobile customer thank you?

by Carin van Vuuren

There’s no doubt that the debate around responsive web design (RWD) has reached every level of most organizations, almost achieving mythical status for “one design to rule them all.”

Responsive design’s claimed ability to deliver great experiences on every mobile screen, while simultaneously saving companies’ money through reducing code and mobile experience management, sounds too good to be true. Which, unfortunately, is exactly what it is.

It should be noted that certain areas of the web experience – such as editorial content and e-commerce checkout functionality – can be effectively extended across mobile devices using RWD. However, there are many other areas of mobile web functionality where responsive design simply does not deliver. Businesses with complex web functionality, such as a comprehensive retail site with thousands of products, high-resolution images, user-generated content, high-frequency marketing offers and campaigns, and videos and animation, should think twice before embarking on a responsive redesign.

In order to better assess when responsive design does and does not make sense for your mobile customers, businesses must examine three areas of potential impact: performance, user context, and marketing control over mobile promotions.

Responsive sites are pretty, but slow

On mobile, performance boils down to speed. With every second of delay causing a 7% decrease in website conversions, commerce sites built with RWD run the risk of underperforming compared to unique mobile experiences achieving the desired three second page load time.

Keynote, a leader in online performance monitoring, regularly publishes indices on mobile and desktop website load speeds across major industries. Interestingly, not one of the retail or travel mobile sites that top its industry charts are responsively designed. This points to one of the flaws with responsive design: as it relies on code that delivers consistent content across all devices, pages with high-resolution images and other heavy content take much longer to load. While the result is a great looking site, the overall customer experience for mobile users is substandard.

Here are some additional tips to keep in mind when creating high-performing mobile experiences:

Reduce amount of IP requests: Desktop sites often make over 100 IP requests, but on mobile these requests take time and need to be minimized at all costs. Mobile sites should aim to use 40-60 as a reasonable average number of requests.

Go light-weight on mobile: Brands need to make sure their mobile site loads smaller sized images, as well as reduced CSS and JavaScript so the mobile web experience does not end up hogging users’ device data.

Effective mobile UI & UX: Users are drawn to visually stimulating mobile web experiences — especially bright colors, intuitive touchpad experiences and engaging content. Remember that speed does not need to come at the expense of a rich mobile experience.
Use a CDN: There is no doubt that a CDN will enhance the speed of your desktop AND mobile site. If you require a redirect to get to your mobile page, the redirect can be done at the edge-server, saving valuable milliseconds.

Context matters to users

In a report on mobile customer experiences, Forrester Research predicts that businesses that integrate the use of context – that is, sharing appropriate services, prices, and content with customers at the right moment – will gain significant advantages over competitors. Mobile sites built with responsive design are much less able to take context into account when engaging with mobile users.

An alternate approach to creating context-rich experiences is to fuse responsive and adaptive design approaches for mobile. Strong examples of these hybrid mobile sites include Mercedes Benz USA, FedEx and many insurance sites like New York Life. By combining responsive design with specific pages containing experiential elements that are adaptive, mobile users can enjoy the best of both worlds: visually appealing sites that are fast and context-rich.

However, if you are a brand seeking to personalize the mobile customer experience by using mobile campaigns, sweepstakes, giveaways, push messaging, location-based notifications, or any other personalized form of content, you should consider building a dedicated experience for each mobile channel.

Ready to yield control?

When considering whether or not to implement RWD into your company’s mobile web strategy, a major trade-off to keep in mind is relinquishing control to other stakeholders in the mobile marketing development cycle. A responsive approach pulls the marketing team out of the driver’s seat, making it much more difficult for marketers to quickly create and manage unique campaigns across channels.

I’ve had clients from large media agencies come to me disappointed after a responsive project. They did not realize the amount of testing that goes into creating a RWD site and how, in the end, they had to substitute functionality and performance to get their site live in a timely manner.

Focus on the mobile user

“Mobile-first” is often touted as the mantra of responsive design. While the premise is sound, a “user-first” approach is likely to yield better results and stronger engagement with mobile consumers.

A good example of a brand that takes this approach is luxury lingerie and ready-to-wear retailer, Fleur du Mal. Fleur du Mal’s next-generation mobile experience couples engaging content, visually enriching images, intuitive browsing and checkout options, and content publishing tools to enable frequent real-time campaigns and promotions.

The mobile experience loads in under five seconds, and visitors immediately notice how easy and engaging it is. Every aspect of the experience is designed to promote product discovery and enable fast, efficient browsing. The mobile site also features advanced social integration and personalization via location-based targeting, which sends users targeted mobile-web based information on local deals, promotions and pop-up retail events. As an online-only brand, Fleur du Mal recognized the importance of creating unique mobile experiences enabling them to better engage with their customers via mobile.

Ultimately the key to finding the right approach to designing for the mobile web is focusing not only on achieving internal business goals, but also delivering the kind of experience that customers will appreciate and share with others.(source:venturebeat)