网站建设之手机网站应该如何设计才能提高转化率？

2020年，全球智能手机销量为15.7亿部，高于2019年的15.2亿部。当我们关注全球平板电脑的出货量和交付量时，这一令人印象深刻的数字仍在继续。在2020年第三季度，仅苹果公司就出货了1390万台平板电脑。这些惊人的数字使我们考虑了对移动网站和网站所有者的影响。对智能手机和其他移动设备的需求导致了46.6亿人与互联网的连接。自去年以来，这一数字增长了7.3％。其中，移动互联网流量已占全球所有互联网流量的一半以上。作为一个网站所有者，该网站的网站不适合移动设备浏览，这是一个非常令人担忧的问题，并且有助于在正确的方向上塑造我们的网站。

现在是时候让网站所有者了解移动用户是头等大事，应该认真对待。如果您仍然通过大量媒体查询来支持桌面网站，并让运气影响您的收入，那么我将帮助您解读自适应设计的重要性以及如何制作高转换率的移动网页。

响应度和转化率

许多人将响应速度和转换率视为网站世界中的原因和解决方案对。但是，转换移动网页比使网站具有响应性或移动友好性要复杂得多。当然，响应能力是转换的重要方面，是网站开发的第一步，但仅靠它本身并不能提高点击率。从2015年起，Google开始更加重视响应式和移动友好型网站。为了改善用户体验，Google不希望人们继续搜索在设备上成比例显示的一个完美网站。此举给网站所有者带来了警钟，使他们尽可能地关注用户体验和移动友好性。

那么，一旦我们建立了响应式网站，我们如何才能提高转化率？公平地说，响应能力更关心于上下扩展您的网站。如果在5.5英寸的设备上按适当的比例缩放图像，则可以得到一个响应迅速的网站。但是用户从不关心响应性。用户更不用担心可伸缩元素，而是更关注这些元素在设备上呈现的速度如何？我的用户更关心自己的偏好和利益。

当内容在移动设备上无法正确显示时，十分之八的用户会反弹。移动网站上的此类异常现象会降低转化率并影响业务。在接下来的部分中，我们将重点介绍本质上具有响应能力的事物（毫无疑问！），但还不足以使用户单击您的CTA或从您的网站购买产品。很快，我们将意识到，响应能力远不止于眼所见。让我们看看如何使自己达到用户的期望。

PS –我们已使用LambdaTest LT浏览器在各种设备视口中显示网站视图。在此处了解更多信息– https://www.lambdatest.com/lt-browser

您是否需要手机上的所有内容？

开发移动网站的第一件事就是要在设备上显示的内容。设备的屏幕很小，这意味着您必须在提供给您的狭小空间中显示较少但相关的内容。内容应该能够与用户进行交流，而无需使用太多的单词。用户不会阅读所有内容只是为了发现自己是否感到满意。这是您向他展示他需要看的东西的工作。内容分析可以归结为三个主要类别：标题，字体大小和内容。

什么是完美的标题？

网页以标题开头，这可能是用户首先看到的内容。这是您的机会，它决定了用户将增加会话持续时间还是反弹。以下两个网站在Google首页上的“房地产解决方案”中排名：

上面的登陆页面来自RESGroup，下面的截图来自Getrealestatesolution。

除了怪异的标题占用了您宝贵的屏幕空间的25％外，标题还简洁明了，易于阅读。RESGroup着眼于长标题（如果是这样），并迫使用户滚动整个页面以找到对他们有意义的东西。值得注意的一点是，尽管通过修饰带有成就的网页来建立对用户的信任很重要，但用户仍需要找到可以使用的东西。他们很少关心您所提供的服务，而更多地关注如何从中受益。请记住，用户只用50毫秒就可以确定该网站。

从上到下滚动并阅读有关您的成就的信息，将会提高跳出率。Getrealestatesolution正在建立信任，并将其成就巧妙地显示为一条线：“我们使房地产经纪人和经纪人更加成功”。这或多或少会转化为“我们有足够的能力使您成功”和“如果您加入我们就会成功”。

字体大小：我的用户应该放大吗？

字体大小是确定您网站的转换率的着陆页（或其他任何页面）中极其重要的部分。16 px或1 em的字体大小被认为是完美的内容可读性。尽管可能会争辩说他们仍然可以在14 px上正确阅读，但仍要考虑到很大一部分视障人士。根据WHO的数据，大多数企业的主要目标受众是15-49岁，视力障碍者占28％。以下屏幕快照显示了一个CSS Subgrids博客，其字体为12 px，下方为原始字体。

尽管可以通过放大移动设备来放大文本，但它会将内容移出屏幕，并使屏幕可滚动，这是用户不喜欢的。

关键字的相关性-选择哪个单词？

向用户展示内容时要记住的最后一件事是使用与用户相关的特定关键字。根据2019年的一项研究，手机屏幕非常小，其中5.5英寸是用户中最受欢迎的屏幕。我们希望用一点时间和更小的空间，来尽快获得用户的信任，以便他停留在网站上并且不会反弹。

特定关键字过程首先从消除所有冗余和松散单词开始。诸如“非常”，“非常”，“最佳”等词被视为内容的填充物。“我们非常专业，提供最好的服务”可以转换为“我们专业提供房地产服务”。第二句话比第一个句子更有效，使用的单词少一个。

消除之后，便会投放相关关键字来帮助您转换网页。这些关键字将成为您的用户可以信赖的东西。至少，用户应该完全相信您是最好的，并相信我，写“ best ”对转换没有吸引力。因此，不要选择冗长而有效的词来表达您的信心，经验和专业精神，而要冗长而明确地推销您的项目。在我的分析中，我找到了两个非常清楚地说明这一点的室内设计服务网站。

这是Woodenstreet的登陆页面

除了证明我们的字体较小之外，此部分中唯一有效的句子是“根据自己的喜好定制它们！” 这让我感觉到这样一个事实，我可以控制自定义项，但不能控制任何一项。措辞宽松是为了建立对服务公司的信任。

该网站的另一个竞争对手是Livespace。他们网站上的同一部分如下所示：

该细分市场通过吸引用户的复杂关键字来关注关键字和体验。我也想要一个知道波西米亚风格卧室的人！（只是在开玩笑！）

另外，请注意这两个网站中同一句子的转换。Woodenstreet说：“根据自己的喜好自定义它们！”，Livespace说，“您的愿望就是我们的命令！”。

您认为哪一个具有更大的权重来转换您的页面？

为了增强内容，您无需删除空格并填补网页上的所有空白。空格很好！它们使元素在拥挤的空间中呼吸，每个元素都可以得到用户的适当关注。对于较大的内容，您还可以使用项目符号，以较少的句子提供更多信息。

为确保您的网站在移动设备上的外观，您可以使用可以模拟体验的工具。像LT浏览器这样的易于开发的浏览器也是一个不错的选择，因为它提供了完整的解决方案，其中包含许多功能（包括调试器）和要分析的性能报告。LT浏览器只需单击两次，即可在您选择的任何移动设备上显示您的网站。

在LT浏览器上测试响应度

模拟器和模拟器长期以来一直用于在不同设备上测试网站。但是今天，对于特定测试人员的需求，我们可以利用特定于移动设备的测试浏览器，该浏览器为测试人员提供了完整的环境。面向开发人员的浏览器（例如LT浏览器）可以提供其他功能，其中一些要点如下：

• 大量内置工具：超过40个内置屏幕的列表可以使您单击几次即可呈现网站。
• 比较网格：比较网格并排显示了两个移动设备，供测试人员进行比较。测试人员还可以使用滚动同步在两个设备上同时镜像其动作。
• 屏幕截图捕获和会话记录：测试人员可以获取设备屏幕的屏幕截图并标记错误，然后将视频/图像发送给团队。
• 第三方集成：第三方集成使开发人员只需单击即可与队友共享错误或问题。
• 网络节流：检查用户体验的一个非常重要的功能是网站在各种网络带宽下的性能。这可以通过LT浏览器中的网络限制来实现。
• 本地测试：本地测试使开发人员甚至可以在将其发布到域服务上之前对其网站进行测试。通过本地隧道，他们可以在本地系统上的任何设备上查看网站。
• 绩效报告：为了分析最终绩效，开发人员和测试人员可以查看绩效报告并共享或保存以供将来使用。

拇指区及其在转换中的重要性

拇指区域已成为一个有争议的论点，并为移动设计和移动Web实施的许多研究奠定了坚实的基础。拇指区域是移动屏幕上的区域，用于确定拇指到达特定点的难易程度。霍伯（Hoober）的一项研究得出的结论是，有49％的人用一只手来操作手机，而只有15％的人用两只手来操作。在这样做的人中，有67％的人通过右手拇指担任两个主要职位：

注意：第二张图片比第一张图片稍高。

您在上图中看到的颜色：是我们的拇指区域。通常，单手使用手机的人的拇指区域可以放大如下：

绿色区域最容易实现：因此对于我们的转化目标而言最重要。黄色区域很难到达但可以管理：我们可以在其中放置一些不太重要的内容，例如标题和其他内容，这些内容不可单击。最后，红色区域是最难到达的区域，也是放置CTA的最糟糕的地方。

放置CTA的另一个最差的位置是页面底部或下方。没有用户愿意向下滚动4 5次并在网页上搜索您的CTA。许多人甚至可能不了解CTA按钮，以及该网站上是否存在CTA按钮。

最好的方法是将CTA放在拇指区域中，并放在第一个网页视图的上方。亚马逊在其CTA中也提出了类似的想法，以下是其目标网页：

“登录”按钮正是我们的绿色区域所在的位置，其宽度足够使我们不会意外碰到任何东西。

从上面的页面中，我们观察到两个有趣的事情：首先，登录也位于右上角（最困难的位置），并且我们的绿色区域还有另一个CTA“创建帐户”。

具有两个登录选项可以提醒用户两次登录。即使不单击该按钮，您仍然会看到该按钮。LiveSpace在其网站上使用相同的方法，但方式略有不同：

底部按钮是固定的，经常提醒“书籍设计咨询”。第二种方法很有趣。未知用户有两种可能：要么登录（假设他已经注册），要么创建一个新帐户。

两者之间的决定对于所有者达成主要CTA和次要CTA的最终结论很重要。拥有两个CTA通常不被认为是一种好方法，因为它会使用户感到困惑，但是即使您这样做，与Amazon中的另一个相比，它们中的一个也应脱颖而出。

使用什么CTA？

作为网站所有者，您可能会提供很多服务：咨询预订表，您也想展示您的便宜价格！您希望他们从首页本身单击一下就可以致电给您！！CTA可以通过高转化率来增加您的收入，但CTA并不是开发人员的愿望。它必须是听众想要的。要通过CTA增加您的移动转化次数，您需要分析访问者更感兴趣的内容。

Google Analytics（分析）是从这里开始的好方法。Google Analytics（分析）提供了您的访客最感兴趣的关键字。Mailchimp具有很多很好的功能，可以用作CTA，例如“ Start Campaign ”。但是他们的移动网站使用的CTA与定价相关：

CTA是值得考虑的东西，同时也要包括市场营销和销售团队的大量建议，这可以很好地向用户建议用户的倾向，也是一个好主意。

有了关键字，下一步就是考虑可以通过响应式移动网页设计带来更多转化的CTA文本。在上面的屏幕截图中，Mailchimp本可以使用“查看定价”，但是即使该页面链接到定价页面，他们还是选择了“选择一个计划”。

同样，Youneedabudget为用户提供“免费试用YNAB并持续34天”，而不是注册或免费试用YNAB。

研究这些词，找出您的用户为何访问您的网站。通过CTA向他们确切显示他们想要的内容，转换率将会提高。

CTA也应该看起来像“ CTA ”，并且像一个“ CTA ”那样工作。如果CTA混入背景中，并且看起来像是“幻影”按钮，那么它将失去其目的。CTA应该是颜色的对比，需要大声说出并要求用户注意。那就是他们的目的。

Mailchimp完美地做到了这一点，其背景为黄色，CTA为蓝色。完全相反。

对于寻求直接潜在客户的业务提供商而言，表格就像按钮一样好用，因为它们无法按简明的段提供所有信息，并且用户还有很多其他疑问。例如，室内设计。室内设计对不同的用户有不同的要求，需要个人联系。响应式表单在这里是出色的CTA：

字段数对于了解转换率很重要。用户对填写太多字段不感兴趣，并且会轻易反弹。Quicksprout显示了字段数如何导致移动设备上较低的转换率：

表单中的5个以上字段对用户来说是令人生畏的，并且用户不太可能填写表单。如果您无法设法将字段缩小到6或7以下，请在HTML代码中使用浏览器的自动完成功能，以便用户一键即可快速填写表格。今天，自动完成功能可在主流浏览器中使用，对用户有所帮助。

如果您的CTA是通话按钮，则应该是一键式按钮，而不是纯文本。不要指望用户承担复制号码并移到其拨号盘上，粘贴并打电话给您的负担。

记住2秒规则！

Google希望在加载任何Google产品时的加载时间为0.5秒。但是不用担心，尽管我们在过去十年中取得了长足的进步，但实际上我们仍未触及到如此高性能的统计数据。Google声明2秒钟是用户对网站加载时间的“接受度”。那么它如何影响我们的转化率？

事实证明，跳出率在很大程度上取决于网站的加载时间：

2G连接的日子已经一去不复返了，人们可以等待一百秒钟等待网站加载。随着网站上元素的增加导致加载时间缩短，转换率下降了95％！！

我们该如何提高加载速度？

当网络开发人员扮演我们不知道的重要角色时，我们可以做些什么来减少Web站点加载时间，这个问题就让我们想到了。作为开发人员，我们可以对响应式移动设计进行一系列检查，以确保更高的转化率并同时降低跳出率：

内容显示改善

一个好的开始方法是对网页进行编码，以便尽早向用户显示某些内容（如果不是全部的话）。例如，AJAX查询是在第一个视图上向用户显示部分内容的好方法。

服务器改进

使用一个好的服务器！服务器扮演着重要的角色，因为它们不仅负责与请求进行通信，还负责将第一个字节发送给用户。Google建议移动服务器与第一字节通信的时间为1.3秒。越低越好。

该图按以下类别显示了建议的移动服务器平均响应时间：

请求计数优化

减少对服务器的请求数量还可以减少总的页面加载时间。较少数量的请求通常意味着要获取的元素较少。尽管Google建议的数字少于50，但今天的平均数字介于120-170之间。

元素重量

确定网站加载速度的一个非常重要的因素是移动网页中元素的权重。研究发现，网站使用太多元素来吸引用户，即使在4G连接（最受欢迎）上，也降低了加载速度。70％的页面花了5秒钟才能使任何视觉元素首次出现在网页上。这使得平均加载时间为15秒，而建议的时间为2秒。

罪魁祸首；图片。提供极高质量的图像只会降低转换率，尤其是与产品无关的转换率，例如背景或成就缩略图。在不压缩的情况下应用非常高质量的图像可以将页面加载到高达4MB的空间，这是平均水平的两倍。

在研究中进行分析后，还发现网页上的图像大小为16 MB，这是一个简单的错误，是降低转换率的邀请。我们可以做什么？压缩这些图像并使用正确的图像格式。

通过简单地压缩网页上的图像，开发人员可以在高达25％的分析网站上节省多达250 KB的大小。图像格式也可以帮助您减少加载时间。在所有适合移动设备访问的网站中，46％使用JPEG，28％使用PNG。JPEG成功的背后原因是，它是有损压缩过程中丢失的位。JPEG是一种很好的格式，当过多的注意力不集中在图像的极端细节上时（如自然图像，风景或背景色等），可以使用JPEG。另一方面，PNG无损并且可以节省处理过程中的比特。当图像需要清晰度，细节和观察力时，PNG图像非常好。

下图是JPEG图像：

该图像是自然场景，因此不需要用户提供非常小的细节。您的用户将不会放大泰姬陵圆顶以查看颜色阴影。该图像大小约为127 KB。

PNG中的同一图像占用了714 KB的网页，这是非常不必要的。

要确定您网站的性能，可以使用Google值得信赖的工具PageSpeedInsights。

为了提高登录页面的速度，开发人员还可以使用Amazon等Web服务提供商提供的CDN或Cache。这些速度非常快，可以帮助根据地理位置存储数据。

A / B测试，您就完成了！

Google在Gmail上投放广告时，他们不确定要使用哪种蓝色。在他们的实验中，他们决定为不同的用户提供不同的蓝色阴影，并查看他们的反应。由于有1％的用户获得一种阴影，而另外1％的用户获得了另一种阴影，因此Google最终在40种蓝色阴影中测试了40个不同的组。该实验选择的最终蓝色为他们额外赚取了2亿美元的收入。

这称为A / B测试。A / B测试是通过将网页的两个不同版本分配给不同的组并记录其响应来比较网页的两个不同版本的过程。如今，A / B测试已广泛用于确定CTA按钮的颜色，位置或大小。绿色和红色CTA按钮之间的实验表明，红色CTA按钮在2000次页面访问中的效果提高了21％。转换率提高21％，表明了当今A / B测试的重要性。

这并不意味着每个红色的CTA按钮都会胜过绿色的CTA按钮。进行A / B测试将提供确定的结果，您可以通过这些结果来增加转化次数，并且对于不同的网站，转化率是不同的。

不仅是CTA，作为开发人员，您还可以测试标题，按钮和其他重要内容，以降低跳出率，最终导致转换率的提高。您可以使用Heatmap工具进行A / B测试。

结论

如果您曾经相信响应能力是提高点击率的一切，那么您并不孤单。研究和研究比我们以前了解了更多有关用户行为方面的知识。从颜色到字体大小，移动设备上的转换率就像木柱上的房子。所有这些共同提高了CTR的功能，并增加了您的收入。

除了本文中讨论的要点外，作为开发人员，您还可以在网站上进行某些增强，以实现更好的转换。用户体验始终在移动网站上至关重要。无论是转化，口碑传播还是任何其他目标，都将为您带来更好的用户体验而获得回报。增强功能，例如在按下后退按钮时不会丢失会话，在多个设备上提供购物车支持或关闭汉堡菜单中的导航栏。这些增强功能始终会被用户注意到，对他来说越容易，获得转换的机会就越大。因此，下一次您忙于开发网站时，请制作清单并提高移动网页的转化率。