bts防弹少年团演唱会

bts防弹少年团演唱会

响应式设计如何促进移动转换

《响应式设计如何促进移动转换》

Google是响应式设计的坚定拥护者 。 Mashable的名为 2013“响应式设计的年”,但响应的网页设计其实答案提升移动转换?

2012年是消费设备市场的里程碑年。 自2001年以来, PC销量首次低于上一年 ,平板电脑销量有望在2013年首次超过笔记本电脑销量。此外, 尼尔森报告称,55%的美国移动用户拥有智能手机,购买新手机时,3个美国人中有2个选择使用智能手机而非功能手机。

移动电话的使用正在增加,并且转化为越来越多的移动访问者。 如果在线运营的企业希望从这一趋势中受益,他们需要优化网站访问者的移动体验。

在移动设备上购物可能会很痛苦

尝试用智能手机从桌面设计网站购买东西的过程可以用一个词来概括 – 痛苦。 除了在三英寸屏幕上导航和缩放计算机显示器大小的站点以查找相关内容之外,互联网零售商还假设您是一个了解其长篇形式和“条款和条件”相关性的屏幕攻击忍者。 所有这些障碍使得到达结账页面成为意想不到的挑战。 毫无疑问, 61%的移动访问者在遇到令人沮丧的移动浏览体验后转移到竞争对手的网站上。

同时,移动访客在使用手机时更加舒适,方便的时候。 尼尔森报告说,29%的智能手机用户使用他们的设备进行在线购物。 随着企业改善其网站上的移动浏览体验,这一百分比肯定会增加。 已经承认购买潜力并投资改善移动体验的公司正在获益。

《响应式设计如何促进移动转换》

成功转换移动流量的公司的一个很好的例子是Webundies.com,一家内衣,睡衣和休闲服装的家族零售商。 Webundies.com 宣布 2012年移动商务销售额为16.8万美元,占总销售额的5.4%。 对于Webundies.com,2012年的移动销售额比2011年增长了惊人的169.2%。该公司正在实施响应式设计和平板电脑优化目录,以促进其移动和平板电脑转换,显然它正在支付红利。 谁不想享受同样的成功?

想要增强移动浏览体验并提升转化率的桌面设计网站业务通常有三种选择:

  • 使用响应式设计构建网站。
  • 构建专用的移动网络。
  • 构建移动应用程序。

响应式网页设计

是一种灵活的液体布局,适合各种屏幕尺寸,分辨率和设备。 它允许网站根据访问者的屏幕分辨率自动更改布局,无论是在桌面,平板电脑还是智能手机上,当访问者浏览网站时创建用户友好的界面。

如果您在桌面浏览器上查看此博客文章,则可以测试响应式设计的实际效果。 尝试缩小浏览器窗口,您会发现图像和内容列缩小以适合您的屏幕。

“波士顿环球报”网站就是一个响应式设计的好例子。 请注意相同的内容如何适应各种设备。

《响应式设计如何促进移动转换》
图像来源

响应式设计因其与替代解决方案相比的优势而获得了许多支持者:

  • 一个建立和管理的网站:经常更新内容的企业的强大优势,因为不再需要确保各个位置的内容平等。这一优势也为转换优化带来好处 – 例如在A / B测试中 ,如只有一个机构进行测试。 此外,无论是使用笔记本电脑,智能手机还是平板电脑,访客都会遇到紧密的品牌体验
  • 搜索引擎优化:所有链接和书签都指向一个URL。 难怪Google建议采用响应式设计
  • 社交媒体:通过响应式设计,无论用笔记本电脑,平板电脑还是智能手机浏览,网址访问者的遭遇都是相同的。 这使得通过社交媒体共享内容万无一失,因为它保证了收件人也能够以最佳视图浏览内容。
  • 分析:所有流量的完整视图。
  • 对未来友好:无论新的趋势设置设备如何,响应式设计都可以通过缩小内容来满足设备的分辨率。

响应式设计对移动转化的影响

让我们来看一些实现响应式设计如何促进移动转换的示例。 以下所有公司都从桌面站点转变为响应式设计:

O`Neill服装

《响应式设计如何促进移动转换》

受欢迎的电子商务商店O’Neill Clothing在实施响应式设计后取得了一些令人印象深刻的成果。 O`Neill在响应之前三周监控转化,交易和收入。 然后,在将响应条件部署到已经存在的站点之后,他们将监视相同的度量标准另外三周。 结果令人震惊:

对于iPhone / iPod:

  • 转化次数增加65.71%
  • 交易增加112.50%
  • 收入增加101.25%

对于Android设备:

  • 转化次数增加407.32%
  • 交易量增加333.33%
  • 收入增长惊人的591.42%

想想感谢照片

Think Thank Photo(TTP)是一家为摄影师生产设备和配件的公司。 在见证他们的移动访问者一年三倍到他们整体网站流量的13%之后,TTP决定使用响应式设计重建网站。

由于新的响应式布局等的优化努力的结果,TTP 取得比从智能手机和平板电脑用户2012年交易增长超过96%和浏览量移动用户增长之间通过网络星期一从黑色星期五收入增长了188% 224%。

紧身裤

《响应式设计如何促进移动转换》

Skinny Ties是一家自1971年以来一直设计和生产领带的家族企业,它决定重塑品牌的身份,并建立一个对未来友好的平台。 考虑到智能手机和平板电脑日益普及,该公司选择了响应式设计。 该网站于2012年10月推出,在几周内,与前三个月相比,Skinny Ties的销售指标大幅改善

  • iPhone的收入增长了惊人的377.6%
  • iPhone转换率提高71.9%
  • 所有设备的收入增长42.4%
  • 整体转换率提高13.6%
  • 跳出率下降23.2%

Maxatec

Maxatec是一家提供POS和EPOS系统,移动和条形码产品的公司。 与之前的示例类似,Maxatec看到了移动访问者的增加,并决定改善平板电脑和智能手机访问者的用户体验,并提高该细分市场的转化率。

结果:移动访问者目标转换率上升了12%,完成任务的平均时间减少了50%。

结论

正如预测的那样,所描述的案例研究明确表明,响应式设计在转换移动访问者方面远远优于桌面设计。 吸引移动访问者使用桌面设计的企业错失了大量的潜在转化和收入,随着智能手机普及率的提高,桌面设计可能会变得昂贵(在转换和收入损失方面)。

专用的移动网站

企业还可以选择建立专用移动网站以增强移动访问者的浏览体验。 专用站点与桌面站点分开(单独的URL),其唯一目的是托管移动访问者。

专用移动网站的一个例子: 亚马逊

《响应式设计如何促进移动转换》


专用移动网站的优势

  • 移动行为:专用移动网站针对移动行为和分辨率进行了优化,同时响应仅针对分辨率进行了优化。
  • 更快的加载时间:Beth Israel Deaconess医疗中心希望改善其网站的移动体验时, BlueTrain Mobile举例说明了如果他们采用了响应式设计以及该页面如何在专用移动设备中查看,他们网站的一页将如何看待现场。 在同一个移动网络中,响应式设计中的页面需要15秒才能加载,而专用移动页面只需2秒钟即可完成加载。
  • 优化:更轻松地针对移动转化进行优化。 专用的移动网站专注于移动访问者,同时还要注意笔记本电脑,平板电脑和智能手机。

专用移动站点的缺点与响应式设计的优势基本相同:

  • 要管理的两个内容
  • 单独的网址:如果您使用内容营销来吸引访问者,这是一个巨大的劣势,因为社交媒体中的链接共享存在问题。

移动应用

如果您拥有独特的社交或互动平台, 或者当您的网站是您的产品时,构建移动应用程序以增强移动访问者的浏览体验是一个好主意。 如果您不是Facebook,Twitter,LinkedIn,YouTube – 建立专用移动网站或使用响应式设计。

考虑一下。 当您的网站不是您的产品时,您是否可以想到为什么有人应该从应用程序商店下载您的应用程序,安装它并仅使用它来访问您的网站? 没有? 认为这样。

应用程序的其他缺点是它们具有有限的内容和功能 ,而且它们是特定于操作系统的。 最有可能的是,您需要为Android和iOS构建,以便为您的移动访问者进行优化。

响应式专用移动设备:您应该选择哪一个?

响应有很多倡导者是有原因的。 比较两种选择时,响应式设计更具有未来性,有一个内容管理(确保内容平等),提供持续的品牌体验,并且是社交媒体友好型。

专用移动网站基本上具有一个优势 – 加载时间更短。 但随着移动网络的改进和更快的下载速度,响应式设计和专用移动设备之间的加载时间差异将减少。

从转换优化的角度来看,事实是,对于两种替代方案,您都需要遵循相同的路线 – 持续改进,A / B测试和多变量分析。 因此,采用提供最大优势的替代方案 – 响应式网页设计是明智的

在优化移动转化的响应式设计时,请记住5件事

1. 专注于重要的事情

在为移动访问者进行优化时,重要的是要记住,移动访问者最烦人的事情是通过纯文本海洋。 如果移动访问者无法快速找到他们正在寻找的内容,那么他​​们就会消失。

严格审核您的内容并保留所有有助于移动访问者快速找到所需内容的内容。 摆脱任何可能导致访客点击的东西。

确保移动访问者看到的第一件事就是您的价值主张(VP)。 价值主张是一个明确的陈述,它解释了您的产品如何解决客户问题,提供特定利益以及客户应该从您而不是竞争对手那里购买的原因。 有关构建可行的价值主张的更多信息,请阅读此博客文章

Fork是一个开源CMS,是响应式网络的一个很好的例子,它对移动访问者具有高度可见的价值主张。 浏览网站时,移动访问者将立即知道Fork是什么及其好处。 副总裁的可疑部分“将摇滚你的世界”,这真的没有任何信息。 用一个说明谁瞄准谁(例如“小企业”)的声明来代替它将提供更多信息。

《响应式设计如何促进移动转换》

虽然是一个专门的移动网站,但Kumon是正确传达其价值主张的企业的一个很好的例子。 通过该网站,您可以清楚地了解服务的内容以及服务的设计对象。

《响应式设计如何促进移动转换》

除了使您的价值主张可见之外,为促进转换而制定的陈述,例如免费送货和退款保证,也应该从其他内容中脱颖而出。

2. 使您的CTA在移动行为方面脱颖而出

使您的号召性用语按钮变得如此之大,以至于它们占据了移动屏幕的整个宽度。 这可确保移动访问者无需缩放即可专注于CTA按钮。

此外,根据移动行为放置您的CTA。 15页的白皮书可能是台式机网站上的转换点,但移动访问者不太可能会遇到下载纸张然后在小型移动屏幕上阅读的麻烦。 “注册我们的时事通讯”或“像Facebook上的我们一样”是对移动访问者的更好的号召性用语。

一个聪明的想法是在联系信息下实现移动特定的号召性用语,例如“立即呼叫”或“获取方向”。 上述CTA将启动电话或打开地图应用程序,从而产生更具针对性的移动浏览体验。

奥迪的移动登陆页面上有一个非常醒目的CTA。 虽然没有响应式设计,但它是一个很好的CTA示例,让移动访问者不会对下一步做什么感到困惑。

《响应式设计如何促进移动转换》
图像来源

3. 利用照片和视频

在移动电话上阅读纯文本是令人厌倦和困难的,尤其是当您考虑到大多数移动浏览在发送时发生短信和应用干扰。 另一方面,照片和视频非常适合吸引移动访问者的注意力并传达您的营销信息。

使用照片捕捉移动访客注意力的响应式设计网站的一个很好的例子是食品食谱博客Food Sense 。 在寻找可口美食的食谱时,你很可能会停留在一个使用非凡图片来开发对食物的渴望的网站上。

《响应式设计如何促进移动转换》

另一家有效利用图像捕捉移动访客注意力并传达其品牌价值的公司是星巴克

《响应式设计如何促进移动转换》

对于广告素材,请记住,更多的照片和视频会转化为更长的页面加载时间。 一项研究发现,67%的人希望移动网站在4秒内加载。 此外,永远不要使用闪存,因为某些移动设备(例如iOS)不支持闪存。

4.减少你的表格

长表单是桌面站点上的转换杀手。 他们对移动访问者来说更糟糕。 使用智能手机填写表格既费时又不舒服。 为了促进移动转化, 请缩短表单

查看表单“是否绝对需要此字段?”如果答案为否,请将其删除。 您可以在实际转换后通过后续电子邮件或电话询问其他信息。

5-6个字段是针对移动访问者进行优化时表单中建议的最大字段数。 此外, 使用垂直对齐标签(顶部)而不是左对齐标签。

汽车租赁公司Hertz就是一个尽可能简单地填写表格的企业的一个很好的例子。 您可以填写四个信息字段来获取租车的报价。 不需要姓名,地址或联系信息 – 在请求报价时它们无关紧要,并且可以在客户做出实际购买决定后收集。 赫兹做得好!

《响应式设计如何促进移动转换》

5.使用可扩展内容或选项卡以避免移动滚动

运行电子商务业务时,请尝试在产品页面上实施可消费内容或标签。 选项卡的重点是根据类别构建信息,以便移动用户可以更快地找到他们正在寻找的内容。

例如,移动访问者只需单击产品页面的“查看”选项卡并“瞧瞧” – 而不是滚动浏览内容波来查找产品评论,而是拥有进行交易所需的社交证明。

Tria提供了一个很好的学习示例,其中包含桌面产品网站和与移动登录页面相同的页面。 请注意桌面网站下半部分的所有内容如何作为可扩展内容放置在移动目标网页上。

此外,Tria获得了CTA的荣誉,CTA非常醒目且位置优越。 另请注意,与桌面版网站相比,“免费送货”的可见性更加明显。 “评论”已经以相同的方式进行了更改,以便为移动访问者提供社交证明。

《响应式设计如何促进移动转换》
图像来源

结论

  • 越来越多的网站访问是在智能手机和平板电脑上进行的,这意味着想要从这一趋势中受益的企业必须增强这些设备的浏览体验。
  • 响应式网页设计允许网站根据访客的屏幕分辨率自动更改布局,无论是在台式机,平板电脑还是智能手机上; 从而在访问者浏览网站时创建用户友好的界面。
  • 投资改善移动访问者浏览体验的公司,从桌面设计到响应式设计,已经看到移动转换的增加。
  • 在优化移动转换的响应式设计时,请确保您的VP和其他转换增强元素高度可见。 使用图片和视频而不是纯文本,并使您的表单尽可能短。

特色图片

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注