如何让你的网站适应移动设备

为你的企业建立一个网站是确立在线存在感的好方法。随着大多数交易现在都在线完成，没有网站可能是一个巨大的失误。在今天的数字时代，人们更倾向于使用移动设备在线购买产品。根据Oberlo的统计，全球网站流量中有54.8%来自移动设备。因此，你的网站必须在移动设备上也能正常访问。

要记住，你的网站在移动设备上呈现的样式会有所不同。你需要对网站进行优化，以确保它能够适应移动设备用户的需求。那么，如何让你的网站更适合移动设备使用呢？如果你有这个疑问，继续阅读，下面将介绍一些配置网站以适应移动设备的技巧。

1. 创建响应式布局

响应式布局可以让你的网站根据用户使用的移动设备自动调整显示。显然，智能手机的屏幕要比笔记本电脑或台式机小得多。73.1%的网页设计师认为，非响应式设计是导致访客离开网站的主要原因；此外，53.8%的网页设计师表示，网站未能在所有设备上响应是导致重新设计的主要原因。

在智能手机上，屏幕既有横向也有纵向显示。因此，你需要确保网站能在这两种显示方向上都能正常加载，而且在从桌面版的两栏布局切换到手机版的单栏布局时，加载过程中没有任何问题。更重要的是，适应屏幕尺寸时不应影响加载速度。

响应式设计还能帮助提升搜索引擎排名。比如，Google会对移动友好的网站给予更高的排名。你可以使用如Wix和Squarespace等网站构建工具，它们有响应式主题。另一种选择是添加viewport元标记，它可以帮助网站根据不同的屏幕尺寸进行自适应。

2. 优化加载速度

加载速度对于将网站访客转化为潜在客户至关重要。研究显示，47%的访客会在网站加载超过2秒后放弃访问。即使是1秒的加载延迟，也会导致转化率下降7%。加载速度是一个排名因素，因此你需要优化网站的加载速度。此外，加载速度还会影响品牌的印象。

有许多因素会影响加载速度。幸运的是，通过一些可操作的调整，你可以让你的网站迅速提升速度。Google会惩罚加载慢的网站，因为当网站加载超过三秒钟时，用户通常会回到搜索引擎寻找其他内容。

根据Google的说法，加载速度延迟1到3秒会导致跳出率增加32%。优化加载速度可以改善用户体验，因为访客无需等待网页加载。你可以使用许多工具来测试和衡量你网站的加载速度。

3. 压缩图片

关于图片，必须注意，图片在移动设备上的加载方式不同。智能手机和平板电脑的带宽比桌面设备小得多，因此大图片加载速度会更慢。因此，建议将图片压缩至尽可能小的尺寸，同时确保图片质量不受影响。

移动用户的数据流量通常有限，优化图片有助于减少数据消耗。压缩图片可以减少文件大小，从而提高加载速度。你可以使用各种图片优化插件来减小图片大小，也可以尝试缩放图片尺寸。

另外，你还可以考虑使用懒加载，即仅在用户滚动到页面时才加载图片。那些位于页面底部的图片可以在用户向下滚动时加载。你也可以使用操作系统自带的图片压缩工具，这些工具易于使用，无需编程或代码知识。

4. 避免使用Flash

曾几何时，Adobe Flash是网站图像的标准。虽然它仍然在动画中很受欢迎，但移动设备不支持Flash。Flash会使网站变得较慢，从而影响SEO和用户体验。Adobe已经停止了对Flash的开发，并且自2020年12月30日起，所有主流浏览器均不再支持Flash。

另外，Flash不利于SEO。它缺少搜索引擎优化的关键元素，且基于Flash创建的网站无法被搜索引擎抓取，Google也无法索引它们，这使得你的网站在自然搜索中难以被发现。

如果你想让你的网站适应移动设备，建议使用HTML5或WebGL。HTML5无需安装浏览器插件，且支持移动设备，适合嵌入视频、音频和创建动画。此外，HTML5也可以完成Flash曾经处理的许多功能。

5. 减少弹窗

弹窗是用户浏览网站时最烦人的元素之一。尤其是当弹窗的关闭按钮不明显时，问题更严重。虽然在桌面网站上弹窗有助于提高转化率，但在移动网站上并非如此。弹窗反而可能使访客感到烦扰，从而放弃访问你的网站。

弹窗在小屏幕上的显示效果不好，不能在合适的时候触发。避免使用那些会分散注意力并使访客感到困惑的弹窗。过多的干扰性弹窗会导致负面的用户体验和更高的跳出率。然而，合理安置弹窗则可能将烦恼的访客转化为付费客户。

如果你必须在移动网站上显示弹窗，确保方式尽量不显眼，只保留那些必要的弹窗，去除多余的弹窗。弹窗可以是一个盟友，也可以是敌人，关键在于它的频率、时机、目的和类型。无关的弹窗可能会被访客视为垃圾信息。

6. 关闭自动填写和自动更正

浏览器默认会记住用户提交的表单信息，这是自动填写功能，它能够立即填写表单字段。这个功能早在1990年代初期就已推出，旨在减少在小屏幕键盘上输入时的困难。

然而，自动更正会将用户的姓名、电子邮件地址等信息更改为常见词汇。尽管这种功能让用户不用再次填写信息，但它也可能令用户感到烦恼，甚至影响填写表单的效率。更重要的是，某些客户可能会觉得这是一种隐私问题，因为一些信息可能将来不再有用，或者包含诸如信用卡号等敏感信息。

你最好禁用这个功能，否则可能会因让用户填写表单不便而失去客户。这样，用户可以专心填写并更有效地输入信息。这对于需要准确填写信息的网站尤为重要。

7. 简化注册表单

网站上的注册表单对收集数据至关重要，客户理解并愿意提供信息。然而，某些网站的表单字段太多，填写起来对客户来说过于繁琐。往往，填写表单会成为他们的烦恼，最终放弃填写。

需要注意的是，每个表单字段都会增加填写的难度。根据你的业务类型，只请求必要的信息。例如，电子邮件地址、联系电话或地址是必须的。如果你不需要给他们寄送任何东西，那就没有必要要求提供地址或电话。仅要求提供电子邮件地址，因为你首先会通过它与你联系。

尽量减少字段数量。去掉不必要的字段，例如生日、出生地等。最新的研究表明，将一个11字段的联系表单缩减到4个字段，转化率可以提高120%。增加表单字段应该视情况而定，只有在必要时才添加。

8. 调整按钮大小和位置

按钮是连接网站各个部分或注册表单的元素，它的作用是提示用户采取行动。按钮是网站最重要的元素之一。但如果按钮无法被用户看到，那么它的作用就会失效。按钮的大小和位置对网站的影响很大。

那么，在移动网站上，按钮应该多大呢？根据MIT Touch Lab的研究，移动网站上按钮的最小尺寸应为10mm x 10mm，这是根据手指的平均尺寸得出的。此外，按钮的大小应与行动的优先级挂钩，按钮越大，代表动作越重要。

按钮的位置也很关键。在手机上，你很可能是用大拇指滚动页面，因此，任何无法用拇指轻松点击的按钮，都可能被忽视。在网站设计术语中，这种位置称为“可视区域”。

9. 使用大号易读字体

在桌面网站上，你可以尝试不同的字体大小，通过换行和图片来弥补字体小的不足。然而，在移动网站上，由于屏幕空间有限，你就无法这么做。推荐的14像素字体在移动设备的小屏幕上可能显得太小。

同样，要确保你的网站字体在手机设备上也能清晰可读。使用黑色文字，而不是各种颜色的字体，这样可以确保在不同背景下，或在户外阳光反射下，文字仍然清晰可见。可以选择标准字体，如Open Sans和Droid Sans，这些字体在小屏幕上也容易阅读。

可以使用加粗或大写字母，避免文字之间重叠。确保测试字体在移动版本上的显示效果，一旦确定了合适的大小和样式，就在所有平台上保持一致，确保品牌一致性