武夷山做网站:如何建立有效的移动着陆页面

2019.04.29 |
标签

您可能已经选择了一个响应性的WordPress主题。大多数现代主题都考虑到移动通信日益突出的重要性。但你还走得更远吗?你在你的移动登陆页面上做了什么特别的努力吗?

武夷山做网站在这篇文章中,我认为仅凭响应性的设计还不足以创建一个高质量的移动登陆页面。你得再往前走一步。在这篇文章中,我将给出一些创建移动登陆页面的最佳实践。我还将进一步介绍如何使用Divi和DiviBuilder轻松地实现这些技巧。

你为什么要关心移动通信

如果你还生活在一个桌面访客是王者的梦幻世界里,那么我很抱歉,我即将来到你的…上。

根据2016年希特勒报道到目前为止,58%的谷歌搜索都是在手机上完成的。这个摇臂上有一个2015年AdWords博客文章,他们也承认了这一点(尽管是针对有限的市场)。

当那些搜索者登陆你的网站时,风险很大-~40%将选择另一个结果,如果您的网站不是移动友好。

移动通信也比你想象的更注重购买。例如,令人惊讶的40%黑色星期五的网上购物来自移动设备。以实际美元计算,手机销售额超过10亿美元。

有了这样的数字,你就不能忽视手机。

是什么让移动登陆页与众不同?

1366x768…

这是桌面上最受欢迎的屏幕分辨率。

你知道手机上是什么吗?

  • iPhone 7-375 x 667
  • Google Pixel-411 x 731
  • 三星Galaxy S7-340 x 640

不需要数学家就能计算出这些数字是非常不同的。

首先,手机平直的分辨率较小。第二,纵横比完全翻转。

添加不同的动态触摸,你不能期望移动登陆页面设计完美地模仿它的桌面对应。

移动登陆页最佳做法

对于这些最佳实践,我不打算在一般登陆页面的最佳实践上多谈。有一些概念适用于所有登陆页面,不管设备是什么。如果您需要一般提示,我们已经在登陆页面上发布了一些帖子:

  • 如何用Divi引线从头开始建立有效的着陆页面

  • 5使用Divi构建的高转换着陆页

  • 使用WordPress创建登陆页

对于特定于移动登陆页面的提示,请继续阅读…

通过删除不必要的元素尽量减少干扰

无论是移动的还是桌面的,你都不想在登陆页面上分心。但是在手机的小屏幕上,…的风险更高。什么是分散注意力的定义更为宽泛。

移动屏幕很小,所以你的标题、副标题和CTA可能已经占据了大部分的可视空间。任何其他大型元素都有分散读者完成CTA的风险。

如果您正在使用Divi,您可以很容易地选择从您站点的移动响应版本中删除一些元素。

不知道怎么做?

武夷山做网站每当您在Divi Builder中添加新模块时,只需向下滚动到禁用设置在一般设置:

武夷山做网站

如果您选中旁边的框电话,则该特定模块将不会显示给移动用户。你也许要检查一下药片也是,取决于模块。

如果您确实禁用了特定的模块,那么最好的做法就是通过使用自定义管理标签来注意这一点。这个管理标签方框也在一般设置:

mobile landing page admin label

这样,您可以创建一个便条提醒您,一个模块是禁用的移动。就像这样:

disable on mobile

这并不是必要的,但如果您需要在稍后的日期对您的页面进行更改,这是非常有帮助的。

缩短你在手机上的标题

因为你在手机上的可视空间较少,如果你想保持标题的大胆和吸引注意力,你需要缩短它。

如果您使用的是Divi,您可以使用我前面概述的相同的概念来显示不同版本的标题。但你得再加一个。

而不是一个模块包含你的标题,创建两个。在移动和平板电脑上禁用标题的桌面版本,在桌面上禁用标题的移动/平板版本。

Mobile landing page header

砰!一个简单的方法,以缩短您的移动登陆页面的标题,而不必求助于外部解决方案。

当访问者访问您的网站时,他们只会看到为其特定设备启用的标题。

也缩短你的副本

不只是新闻标题需要删减,如果你想让移动访问者在旁边看的话,你也需要缩短你的拷贝。移动会话平均长度大约一半平均桌面会话的持续时间。

因此,相同的长格式副本,它可以很好地转换桌面版本的网站可能不会做同样的移动。

把你的稿子剪到最基本的部分。当有疑问时,在手机上给你的朋友看你的副本。如果长度是压倒他们,它可能会压倒你的游客,也。

您可以使用完全相同的Divi技巧,为不同的设备添加不同的复制版本。

遵循Google的移动建议

可用的登陆页是很好的登陆页。如果你的读者正在努力阅读你的页面上的文本,他们就不会很好地转换。没有人愿意花时间放大和滚动只是为了了解发生了什么。

谢天谢地,您不必试图找出是什么使页面可用。谷歌已经制定了移动可用性指南,作为他们努力改善网络移动用户体验的一部分。

例如,谷歌推荐在移动设备上使用最小字体大小为16 px。这意味着你的常规文本应该是16 px-标题应该更大。

但是,如果您不想使您的文本大小为16 px的所有设备呢?如果你在使用Divi,你实际上可以为不同的设备设置不同的字体大小。

就去→主题定制器。然后找到移动样式框并单击电话.
在那里,您可以为站点的移动版本专门配置自定义文本大小:

Divi Mobile Styles

您可以在移动可用性报告谷歌搜索控制台(要运行报告,需要将站点作为搜索控制台中的属性添加)。这也是曾经是PageSpeedInsight的一部分的报告。

使电话号码可点击

这是一个巨大的个人宠物…

如果你的访客是在移动,他们是绝对准备给你打电话。他们手里已经拿着必要的设备了!

所以别让他们很难打电话。让他们点击你的号码,立即打电话给你,而不是强迫他们记住它,或复制和粘贴它。

Click to call

我们武夷山做网站有一整篇关于你如何添加单击呼叫功能。到Divi和其他WordPress网站。

把你的CTA放在一个容易点击的位置

在电脑屏幕上,访问者可以轻松地点击屏幕上的任何地方。但在手机上,事情就不那么灵活了。

来自UX事务的研究显示最常见的手持电话方法的可点击区域。例如,如果你的读者用一只手握着手机,他们可点击的区域看起来很像其中之一:

武夷山做网站

图像UX事项

资料来源:UX事宜

完整的UX事项文章包含了所有常见的手位置的这样的例子。

一个好的一般规则是把你的CTA放在屏幕的左下角。对于大多数右撇子用户来说,这应该很容易点击,不管他们拿着他们的手机。

尽可能缩短表单长度

如果你要求你的用户在你的登陆页面上填写一张表格,例如选择加入,你需要知道该表格的长度。记住,您的用户正在移动键盘上打字-如果您的表单太长或包含太多烦人的复选框,您的访问者可能会完全放弃它。

较短形式通常转换得更好不管怎样。

此外,您还需要确保表单字段之间有足够的间隔,以便访问者可以使用触摸水龙头。手指没有鼠标那么精确,所以如果可能的话,表单字段之间需要更多的缓冲区。

页面加载时间比以往任何时候都更重要

显然,这个并不是严格意义上的移动。页面加载时间对您网站的每个版本都很重要。

但是,当访问者使用移动数据而不是(通常)更快的家庭连接时,缓慢加载的移动站点的后果可能会更加灾难性。

事实上,74%的流动访客可能会放弃一个加载时间超过5秒的网站。

因此,如果您的移动登陆页面加载缓慢,您不仅降低了您的用户体验…你把他们赶走了。

如果您完成了我前面提到的“最小化分心”步骤,希望您已经从站点的移动版本中删除了一些不必要的元素。删除大型图像和视频将大大提高页面加载时间为您的移动登陆页面。

跟着我们武夷山做网站的另一个改进页面加载时间的技巧无论你的访客是在手机上还是桌面上,都会有很大的不同。

把东西包装起来

虽然适用于桌面登陆页的许多相同的通用转换原则都延续到了移动登陆页,但它们并不都是一样的。

一般来说,对于您的移动登陆页面,您绝对需要考虑的两个具体方面是:

  • 明显降低了可见分辨率。

    随着房地产的减少,你需要更简洁和简约。
  • 触觉的缺点。

    永远记住,你的访客没有鼠标-导航需要简单。

虽然这两条原则并不是万能的,但如果你牢记它们(并遵循我的其他建议),你将领先于大多数竞争对手。


相关推荐

最新文章

热门推荐