让您的网站更适合移动设备

现在访问网络在当今世界非常重要，因为许多人准备通过各种类型、大小和制造的设备在线连接到业务。

在普通计算机上制作一个用户友好的优秀网站是一回事。 制作一个可以在各种设备上查看的内容是另一回事。 只有当您设计的网站能够在较小的智能手机或巨大的平板电脑和平板电脑上为消费者提供他们需要的东西时，这才是一个很好的机会。

本文着眼于如何创建一个为您的受众无缝工作的网站的最实用方法，并检查每种方法的优缺点和影响，这些方法肯定会提高您的客户满意度。

那么，最好的方法是什么？

1. 决定应用正确的技术

有许多方法可用于制作适合您的客户和业务需求的移动友好型网站，包括业务目标和客户期望。 根据您用于为所有屏幕配置网站的方法，确保它对您网站的品牌和业务来说是独一无二的，最重要的是，该方法应该具有成本效益，并且只从一个域（例如www.example.com ）为所有网站提供服务。

考虑到这一点，让我们看看可用于制作移动友好型网站的最佳方法。 实际上有三种类型，每种方法都为移动用户提供不同的体验：响应式设计、完全独立的移动站点和自适应/RESS/动态设计。

响应式网页设计（RWD）

这种设计是一种利用从服务器发送到所有设备的单个 HTML 代码的技术，并且 CSS 用于调整设备上页面的描述。 这使得在任何设备上查看都是统一的，因为代码源自相同的 URL，但内容会发生变化，以便适合当前正在使用的屏幕。 响应式网站设计需要事先规划，因为初始成本通常较高，但一旦完成，维护非常容易。

编码

• 使用元name="viewport"

这指示浏览器更改内容显示。

如何使用name="viewport" ？

为了向浏览器发出页面将调整为所有屏幕尺寸的信号，元标记被添加到文档的头部。

[代码]
<meta name="viewport" 内容
[/代码]

这个元视口标签指示浏览器如何调节正在使用的屏幕宽度的大小和缩放。

在没有 meta viewport 标签的情况下，移动浏览器通常会尝试通过增加字体大小和缩放网站内容以完全占据屏幕大小或仅显示部分内容来使网站内容看起来更好。适合屏幕大小的网站。 发生这种情况是因为移动浏览器尝试按照正常桌面屏幕尺寸将网站内容呈现为默认值。 这对移动用户来说很困难，因为网站内容的字体大小往往不一致，因此迫使他们要么捏放大要么双击以清楚地看到网站的内容。

要创建响应式图像，请包含<picture>元素。

如果您的网站适用于大多数当前浏览器，这是一般规则。

响应式网站设计技术的重要性

推荐使用响应式网页设计，因为：

• 它使您网站的访问者能够使用单个 URL 链接到您的内容。 这使得管理 SEO 变得非常容易，因此产生了很好的结果，因为您对结果有一个统一的视图。
• 具有成本效益。 响应式网站通常需要更长的时间来设计，但它们的生存时间更长，只需很少或不需要维护，因为升级只需要应用一次。 这实际上可以节省您的时间和金钱。
• 确保良好的用户体验。 如果您的网站旨在灵活适应用户选择的任何设备，这会让他们感到高兴，这实际上会提高您的客户满意度，从而为您的企业带来更多利润。
• 降低遇到实际影响移动网站的常见错误的可能性。
• 使用响应式网页设计技术，无需重定向用户，这大大减少了加载时间。
• 提高转化率。 无论正在查看的设备如何，优化的网站都是一致的，因此这些增加了用户体验，因为大多数客户都能够与您互动。

实际上，响应式网站设计策略不再是趋势，而是必须的。 这是因为无论他们在查看您的网站时选择何种屏幕，它都能为客户提供美妙的优化体验。 这意味着您将拥有更广泛的服务范围，并使您在商业世界中脱颖而出。

自适应/RESS/动态设计

这种方法的设计方式是，网站服务器会注意到访问者正在使用的设备的类型和大小，然后呈现一个为该特定设备设计的自定义页面，无论是手机、平板电脑还是大屏幕智能电视。

在这种网站设计方法中，URL 也保持不变，但服务器会根据访问者使用的设备类型发送不同的 HTML 和 CSS 代码。

自适应网页设计有多重要？

• 例如，将视频发送到您的网站的带宽会减少： <video src="…"></video> 。 而不是其他现有方法使用的较长的编程过程。
• 提高服务器速度。 确保渲染就绪的内容在使用时更快地交付到设备，并确保更快的页面加载。
• 它利用单个 URL 的使用。 这与响应式设计相同，其中用户只保留一个 URL。

自适应网站设计技术的缺点

• 自适应编程有一些缺点，即存在内容分叉。 这是因为针对不同设备定制的多组相同内容。 如果没有成熟的 CMS，在所有设备上维护内容可能会带来一些挑战。
• 其次，在这种网站设计中存在一些常见的错误，例如设备检测错误。 发生这种情况的原因是服务器运行的脚本过期导致脚本将基于移动的平台发送给平板电脑用户。 由于使用此网站设计技术而出现的另一个错误是，在这种情况下，服务器始终假定设备方向主要是纵向的，但用户可能将设备保持在横向位置。
• 此外，由于多个站点在不同设备上的显示方式不同，因此这种网页设计往往会使用户感到困惑。 为避免此错误，请确保您的品牌外观和感觉在所有设备上都应被识别为相同。

自适应网站设计最适合经常更改其网站的大公司。 但是，需要有能力的专业人员负责所需的复杂网站代码集。

创建不同的移动网站

这是网页设计师可以选择创建与桌面版网站结构不同的不同移动网站的第三种选择。 这样做的方式是，网站系统检测到所有移动用户并将其重定向到不同的移动优化网站，这通常使用另一个域名，通常是主域的子域，例如m.example.com 。

这仅允许移动用户查看移动站点，而平板电脑、智能电视等其他设备上的用户将始终看到您的桌面站点。

这种方法有一些优势，因为它使您能够自定义用户体验和轻松的时间，同时对网站进行更改，因为您可以决定只对桌面网站进行更改而不影响网站的移动版本。

但是，由于创建了多个 URL，此方法有其自身的缺陷，这意味着共享网站需要在网站的移动版本和桌面版本之间仔细进行重定向和集成。 这也增加了加载网页所需的时间。

由于使用这种网站设计而出现的常见错误是； 错误的重定向、缺少注释和不一致的用户体验。

2. 设计一个能确保良好用户体验的网站。

一个伟大的网站设计不仅仅是基本的设置和配置。 实际上，一个移动友好的网站包含三个部分； 速度、布局和内容。

布局

为了在您的网站布局上获得最佳的移动用户体验，实际上应该脱颖而出。 它的设计方式应该是触摸友好并使用正确的字体。 最小设置字体实际上应该是 12 像素或任何更小； 您的移动用户将很难尝试阅读您网站的内容。

您还应该为您的网站设置正确的宽度。 通常人们习惯于从上到下滚动，因此避免用户被迫横向滚动的情况，最重要的是尽量减少鼠标悬停弹出窗口的使用，预测底部只是清楚地标记所有内容。

内容

为了改善您网站上的移动用户体验，只要确保您不会让用户超负荷，尽量直截了当。

此外，您应该尽可能简化您的结帐程序，因为在移动平台上填写冗长的表格非常繁琐，因此请确保您的付款程序变得简单，从而提高您的转化率。 您可以通过启用 Google 钱包即时购买或其他简化结帐流程的相关服务来实现这一点。

速度

您可以通过构建加载速度非常快的页面来实现这一点。 根据 Gomez 所做的研究，每个在线购物者都希望在不到两秒的时间内加载一个页面，并且超过 40% 的人会离开网站。 您的网站设计还应该易于浏览，以免让您的观众感到沮丧，因为他们中的大多数人可能会离开网站而没有返回的可能性。 花点时间提高网站的可用性。 这是通过以下方式实现的：

• 适当地命名每个页面。 确保每个子导航与主导航对应，并确保没有人满为患。
• 将您的网站徽标放在网站的左上角。 这很重要，因为它使您的受众了解网站所有者并与网站内容相关联。 还要确保徽标提供指向网站主页的直接链接。
• 应提供搜索功能。 这一点至关重要，因为它使访问者能够轻松找到他们实际正在寻找的信息。
• 添加联系信息。 确保在需要时可以轻松联系您进行查询。
• 减少促成过多 HTTP 请求的页面元素。 这是因为可用带宽可能不可靠，无法使移动用户比桌面用户更快地浏览。
• 避免图像和文件过载。 确保将正确的图像大小和文件提供给正确的设备。

那么，为什么要让您的网站在移动设备上更友好呢？

好吧，设计网站实际上是一个很大的挑战，通常即使是网页设计的专业人士也会犯错误。 这可以归因于技术进步，因为我们意识到每年都会出现新的互联网小工具。 以下是一些迫使您使您的网站对移动设备友好并让所有用户满意的原因。

想想用户。 客户对您网站的期望是什么？ 他们希望网站能够在他们选择在任何时间和任何地点使用的任何设备上正确呈现。 如果您不提供所有这些，请确保您提供的用户体验很差，这会极大地影响您的回报。 使用多屏策略将使您在竞争对手中保持领先地位，因为移动网络用户数量的增长预计在来年将达到非同寻常的高水平。 因此，一个对移动设备更友好的网站是确保任何业务成功的必要条件。 事实上，您应该站起来，将您的团队完全分组，并制定最适合您业务的策略，因为对其他人有效的方法可能对您无效，从而建立一个能够吸引和取悦您的客户的网站。

参考

您可以访问以下网站了解更多信息。

• google.com/think/multiscreen
• developer.google.com/webmasters/mobile-sites/get-started