让手机网站设计更适合移动用户

早在2016年时，移动互联网的使用首次超过了计算机的使用。任何人都不应该感到惊讶。自从苹果发布了第一款智能手机和移动设备作为日常生活的常规部分以来，移动设备的使用一直在增加，我们都希望人们每次离开家都能看到自己的手机。

对于网站所有者来说，这种人与网络交互方式的转变并不令人惊讶，但它确实增加了使网站移动友好的紧迫性。如果你的移动访问者目前没有很好的经验登陆你的网站，你将远离大部分潜在的流量（在这个过程中损害你的搜索引擎排名）。

你必须让你的网站移动友好。但是知道自己需要做什么，以及知道如何去做，是两回事。现在，您可以采取以下步骤来确保您的网站适合您的移动访问者，就像您的桌面用户一样。

1。让你的网站作出回应。

响应性网站设计包含关于您访问的任何设备的所有相同内容和信息，但是它根据设备屏幕的大小改变其显示和安排。这是使您的网站适合移动设备的最佳选择，因为您不限制移动访问者可以访问的信息——他们仍然获得与其他访问者相同的内容。响应设计对SEO也有好处。百度表示，这是他们首选的移动网站格式。

创建响应网站不适合初学者。你需要雇佣专业人士来帮助你，或者找到包含移动友好模板的网站构建者。

2。让人们更容易找到信息。

有些人不介意花一些时间在移动设备上以与计算机相同的速度浏览或阅读内容，但是其他人希望尽可能快速和容易地找到他们需要的信息。想想移动设备上的用户在访问你的网站时最可能查找的信息，把它放在移动主页上显而易见的地方。

还要考虑人们在访问你的网站时最常查找的常见问题。将所有答案放在移动主页的前端和中心可能没有意义，但是您应该很容易在移动设备上找到并导航到它们。

三。不要使用闪光灯。

几年前，Flash因为对搜索引擎优化不利而大失宠。它降低了页面加载时间，并且许多浏览器和设备根本无法工作。

Android和iOS设备不支持闪存，所以如果您构建的网站以任何方式依赖于Flash动画体验，那么您的移动用户将被排除在外。

4。包括视口元数据。

可视标签是一种简单的方法来控制网站在移动设备上显示的方式。如果您的页面以与手机小屏幕上的桌面相同的宽度打开，则必须笨拙地左右滚动以读取每行文本并查看页面的不同侧面。viewport标记告诉浏览器根据访问者所来自的设备类型的屏幕调整页面宽度。
将它添加到HTML中非常简单。只要粘贴在每个页面的HTML上：
2016，移动互联网的使用首次超过了计算机的使用。任何人都不应该感到惊讶。自从苹果发布了第一款智能手机和移动设备作为日常生活的常规部分以来，移动设备的使用一直在增加，我们都希望人们每次离开家都能看到自己的手机。

对于网站所有者来说，这种人与网络交互方式的转变并不令人惊讶，但它确实增加了使网站移动友好的紧迫性。如果你的移动访问者目前没有很好的经验登陆你的网站，你将远离大部分潜在的流量（在这个过程中损害你的搜索引擎排名）。

你必须让你的网站移动友好。但是知道自己需要做什么，以及知道如何去做，是两回事。现在，您可以采取以下步骤来确保您的网站适合您的移动访问者，就像您的桌面用户一样。

1。让你的网站作出回应。

响应性网站设计包含关于您访问的任何设备的所有相同内容和信息，但是它根据设备屏幕的大小改变其显示和安排。这是使您的网站适合移动设备的最佳选择，因为您不限制移动访问者可以访问的信息——他们仍然获得与其他访问者相同的内容。响应设计对SEO也有好处。百度表示，这是他们首选的移动网站格式。

创建响应网站不适合初学者。你需要雇佣专业人士来帮助你，或者找到包含移动友好模板的网站构建者。

2。让人们更容易找到信息。

有些人不介意花一些时间在移动设备上以与计算机相同的速度浏览或阅读内容，但是其他人希望尽可能快速和容易地找到他们需要的信息。想想移动设备上的用户在访问你的网站时最可能查找的信息，把它放在移动主页上显而易见的地方。

还要考虑人们在访问你的网站时最常查找的常见问题。将所有答案放在移动主页的前端和中心可能没有意义，但是您应该很容易在移动设备上找到并导航到它们。

三。不要使用闪光灯。

几年前，Flash因为对搜索引擎优化不利而大失宠。它降低了页面加载时间，并且许多浏览器和设备根本无法工作。

Android和iOS设备不支持闪存，所以如果您构建的网站以任何方式依赖于Flash动画体验，那么您的移动用户将被排除在外。

4。包括视口元数据。

可视标签是一种简单的方法来控制网站在移动设备上显示的方式。如果您的页面以与手机小屏幕上的桌面相同的宽度打开，则必须笨拙地左右滚动以读取每行文本并查看页面的不同侧面。viewport标记告诉浏览器根据访问者所来自的设备类型的屏幕调整页面宽度。
将它添加到HTML中非常简单。只要粘贴在每个页面的HTML上：

<meta name =“viewport”content =“width = device-width，initial-scale = 1”>

5。允许对窗体进行自动更正。

如果您的网站上有要求提供姓名或地址信息的表单，您可以以一种简单的方式向移动访问者提供更多信息，即，关闭每个表单字段的自动更正，否则他们的移动电话将试图更改他们的姓名或str的更常见的单词。EET名称和减速填写表格。过程。

6。让你的按钮大到足以在移动设备上工作。

用鼠标点击几乎任何尺寸的按钮都很容易，但是当你用手指“点击”智能手机屏幕时，小按钮很难处理。如果多个小按钮彼此靠近，则尤其如此——在按下另一个按钮的同时按下另一个按钮可能对访问者造成真正的烦恼。

保护访问者免受这种挫折的最好方法是使用更大的按钮。在网站设计中添加按钮（以及所有现有的按钮）需要一些时间通过许多移动设备在员工和家人之间进行自我测试。

7。使用大字体大小。

如果字体很小，在小屏幕上阅读会更加困难。最好在网页上使用至少14px的字体大小，但请继续测试它如何看起来更好。

最好还是坚持标准字体。访问者浏览器可能需要下载的任何字体都会减少站点加载时间，这对移动设备来说是坏消息。

8。压缩图像和CSS。

当谈到网站设计的加载时间，你总是希望你的网站快速。但如果是这样，那么移动设备上的速度就更重要了。这意味着使您的站点移动友好的另一个好方法是压缩任何占用大量空间并减慢加载时间的内容。

这可能包括你的高分辨率图像和CSS。通过压缩它们，可以确保它们加载得更快，而不会负面影响人们在网站上看到的内容的质量。

9。定期移动测试。

你能做的最好的事情是确保你的网站的移动体验是好的，定期在你的移动设备上测试它。经常在你的手机和平板电脑上浏览你的网站，花些时间浏览看看有没有什么难看或难做的事。

即使你今天知道了一切，移动设备的外观和工作方式也会继续改变，而今天的移动友好网站可能仍然无法完成明天的工作。继续测试，在需要时继续调整，并继续优先考虑您的移动用户，以便网站能够继续反映其应有的作用和价值。