如何显示网站内容只有您的移动用户可以看到

你听过多少次“今年将是移动年”?

我们可能永远不知道什么时候才是官方的“移动年”，但我可以告诉你，你的网站的移动流量在未来几年内只会继续增加。我们需要开始调整我们的一些营销努力来迎合这些新的移动用户。

在深入研究我们自己的分析后，我发现超过19%的登陆页面流量来自手机平台。这不是一个可以忽略的数字。

我们知道，使用智能内容在正确的时间向正确的受众传递适当的信息是很重要的。这个概念也适用于登陆页面的移动用户。你可以采取一些小步骤来提高手机转换率，随着时间的推移，这可能会产生巨大的影响。例如，改变这些浏览者在移动设备上访问登陆页面时看到的内容，实际上可能会增加你的潜在用户。

以下是一些简单的步骤，你可以在自己的登陆页面上插入和隐藏特定的文本或图像，专门为移动用户提供服务。

选择你的测试和登陆页面。

决定您想用这个功能测试什么。你的手机浏览者希望在你的登陆页面上看到什么不同于你的桌面浏览者?需要考虑的一些测试想法包括:

• 在网页上使用移动代码，以推广不能在移动端下载的内容(例如，Excel模板、工作簿等)。这也适用于感谢页面，以减少那些无法在移动设备上下载您的内容(即使他们已经填写了您的表格)的用户的挫败感。目前，我们正在两个登陆页面上运行这个测试:

  

• 向移动用户显示不同的文本，确认他们正在移动设备上浏览页面。这将进一步个性化用户体验并促进移动转换。

• 尝试不同大小的拷贝，标题，和图像，只有移动观众会看到。这可以帮助你了解手机用户的行为，以及他们更喜欢在手机版本的登录页面上看到什么。

一旦你确定了你想要测试的内容，选择一个(或几个)你的登陆页面插入你的手机专用文本或图像。登录页面应该与你的测试目标保持一致，并且应该是你预期会获得(或仍然获得)大量流量的页面。移动通信量不会像桌面通信量那么高，所以用较小的样本收集结果可能需要更长的时间。

决定为移动用户显示/隐藏什么。

你可以简单地添加只显示给移动用户的文本，或者你可以添加不同的图像或cta。考虑移动设备上的访问者与普通桌面访问者相比想要看到什么。

根据测试的不同，您可能还希望为桌面用户屏蔽某些内容，例如可能不适用于移动设备的较长的段落或图像。

在移动设备上显示内容。

这就是问题的关键所在。要在你的登陆页面上插入专门用于移动设备的文本或图像，只需在HTML 中添加以下代码:

这个div将声明此副本只在类被触发时响应。通过添加下面的代码，这个类只会在用户在移动设备上时被触发。在页面的HTML 部分添加以下代码:

隐藏移动设备上的内容。

要隐藏某些不会在移动设备上显示的文本或图像，你可以在HTML 中添加类似的代码:

然后，你需要在HTML 部分添加以下代码:

如果你想要这个样式应用到你的整个网站，添加以下CSS样式表:

测试你的手机代码。

一旦你设置了你的测试，包括文本/图像，你将隐藏和显示只为移动观众，重要的是你自己在移动设备上测试页面。因为我自己不是一个高级程序员，有时我会忘记一个括号或拼错一个单词，最终导致页面发生奇怪的事情。不要忘记这一步，以确保所有内容在桌面上和移动设备上的正常运行。