很有可能你正在阅读这篇文章 使用移动设备. 如果您不喜欢页面的结构方式或内容 难读，您可能会在别处寻找所需的信息。 现在把自己放在等式的另一边，考虑一下如果您的网站没有针对移动设备进行优化，您会失去多少用户。
“优化”是指您的网站在较小的屏幕上应该看起来很棒。 还应该 加载速度快 并且易于导航和交互。 如果您可以在移动设备上做到这一点，那么您的网站在全桌面屏幕上也应该看起来很棒。
在本文中，我们将讨论什么是移动优先设计及其重要性。 首先，我们将分解 如何 接近移动设计。 然后，我们将向您展示一些可以针对智能手机和平板电脑优化网站的实用方法。 让我们开始吧！
为什么移动优先设计必不可少
几乎 84% 的全球人口 拥有一部智能手机，并且通常拥有多种类型的移动设备。 这远远超过了 可以使用个人电脑和笔记本电脑的人.
事实上，许多人将智能手机用作他们唯一的电脑，使其成为他们与网络交互的唯一方式。 它通常是他们唯一可以使用的计算机。 不管怎样，大多数人都带着他们的智能手机 到处.
不出所料，移动流量在过去几年急剧增加。 它已经超过桌面使用，超过 54% 的流量 来自移动设备的网络。 相比之下，台式电脑的这一比例约为 43%。
实际上，这些数字意味着如果您的网站未针对移动设备进行优化，您可能会错失大量用户。 内容如此之多，您的潜在受众（和客户）不太可能忍受 用户体验差. 他们一定会到别处寻找他们想要的东西。
响应式网页设计意味着什么？
响应式设计意味着无论屏幕有多大，网站都会适当地填充它并以清晰的方式呈现信息。 这可以在手机、平板电脑、台式机甚至智能手表上。
当您浏览网站时，您应该注意到它会适应您的屏幕大小。 对于大屏幕，元素会放大到一定程度，因此它们看起来不会太大，但仍然很容易参与。
移动设备也是如此。 当您使用较小的屏幕时，您希望网站的内容按比例缩小，但又不至于变得不可读或无法与之交互：
可以实现这种微妙平衡的网站被认为是 反应灵敏. Web 设计和开发在这里齐头并进，因为网站的图形资产需要扩展。 在后台，有 CSS 和样式表来控制网站在不同尺寸屏幕上的显示方式。
直到最近，响应式设计才成为事后的想法。 我们过去常常围绕桌面体验设计网站。 既然移动流量是第一位的，那么移动设计也是如此。 这就是为什么您会经常在网页设计界听到“移动优先”一词。
了解响应式设计和自适应设计之间的区别很重要。 自适应设计涉及创建单个页面的多个版本并根据访问者使用的设备类型提供服务。 如今，这种网页设计方法被认为已经过时，因为响应性是更有效的选择。
将内容直接发送到您的收件箱
订阅我们的博客并接收像这样直接发送到您的收件箱的精彩内容。
在网页设计方面如何考虑移动优先
布莱恩克莱顿，首席执行官 绿宝，花了九个月的时间从头开始构建他公司的网站。 “刚出门，就出现了重大问题，” 他说。 “我们假设我们的大多数用户会通过他们的台式机或笔记本电脑购买草坪护理服务。 但很快就变得非常清楚，越来越多的人通过手机和平板电脑访问网站，而不是台式机或笔记本电脑——4 比 1。”
最初的全功能桌面体验包括各种花里胡哨的动画。 “我们有各种各样的其他功能，可以让桌面体验变得愉快，”他回忆道。 “这种方法的问题在于，桌面体验无法转化为移动网络浏览器。”
结果，该网站变得臃肿，并且在移动设备上运行不佳。 用户发现他们必须捏合和缩放才能完成注册过程。
“在我们的网站重建为移动优先体验之前，移动浏览器的转化率不到 4%，” 他说。 “这意味着尝试注册的人有 96% 的时间都放弃了。”
后 重建网站 为了以移动设备为先，Clayton 发现在启动注册过程以获取免费价格估算的人中，有 82% 是通过他们的移动设备和平板电脑完成整个过程的。 “我们的移动优先产品是我们今天参与游戏的唯一原因，” 他说。
在移动优先设计方面，我们可以从GreenPal的经验中学到很多东西。 让我们首先谈谈如何磨练您的听众。
深入了解您的听众并征求客户反馈
在重新设计网站时，您可能需要弄清楚客户当前如何与之交互。 这意味着查看分析并查看移动和桌面用户的参与度数字是否不同。
分析可能会显示移动访问者的跳出率更高或在网站上花费的时间更少。 这些都是糟糕的移动用户体验的死因。 如果数据指向那个方向，你最好的选择是 问 客户对您网站的喜欢和不喜欢的地方。
洛杉矶 Blu Skincare 的老板 Zondra Wilson 才发现， 她的网站不适合移动设备 当她开始征求客户的反馈时。
“我会让我的顾客写评论，他们会说找不到写评论的地方，” 她回忆道。 “我会向他们询问我发布的博客或文章，他们很难找到。 他们无法在手机上查看我的网站。 在我的第一张照片或关于我公司的任何信息弹出之前，他们不得不向下滚动很多次。 他们不知道如何浏览我的网站。 许多人很沮丧，没有翻过第一页。”
当 Wilson 将她的网站升级到更适合移动设备的版本时，她立即注意到用户开始查看比平时更多的网站页面。
为移动设备优化网站有许多久经考验的真实技术。 但是，客户反馈通常会揭示您可能会错过的部分用户体验。
想小（就屏幕尺寸而言）
现代智能手机功能强大，您的大部分观众都可以访问良好的互联网连接。 但是，您需要确保您的网站加载速度尽可能快。 这使得消除多余的混乱成为最好的设计策略之一。
维塔利·维诺格拉多夫，首席执行官 现代场所照明，发现与桌面相比，切换到移动优先设计可使转化率提高 30%。 “一件重要的事情是删除网站移动版本上多余的插件、弹出窗口或任何其他屏幕抑制器，” 他说。
他的团队对网站进行了梳理，删除了一些占用屏幕宝贵空间的社交分享插件。 当您在设计时考虑到大屏幕，您可能会发现您最终包含了很多对用户没有太大价值的元素。
“你需要为小而设计，” 洛杉矶的产品设计师 Matt Felten 解释道。 “你必须更专注一点。 你必须减少信息和内容。” 在您的移动网站就位后，您可能会发现您根本不需要向桌面版网站添加更多内容。
消除所有这些视觉混乱不仅会使您的网站更易于在移动设备上使用。 它还可以帮助访问者关注真正重要的元素。 这意味着号召性用语、表单、帖子和用户旅程中的其他关键元素。
完善您的设计美学
“如今的消费者期望更精致的设计”，费尔滕说。 “看到一个美观且性能良好的网站的商业案例有很大的推动力，” 他说。 “如果我是一个小企业主，并且所有竞争对手都有一个非常好的、响应迅速的网站，而我没有，不到一秒钟，人们就会对我的产品做出负面评价。”
具有专业外观的网站不仅反映了您的设计眼光，还表明您努力提供更好的用户体验。 除非你在一个非常小众的领域工作，否则客户总是有其他在线选择。 因此，您必须在网站设计中发挥最大的作用。
为移动设备优化网站的 8 种方法
现在我们已经阐明了为什么有必要为您的网站做好移动使用准备，让我们更实际一些。 在接下来的几节中，我们将向您介绍创建针对移动设备优化的网站的一些最关键的方面，从简单的到技术上更复杂的。
我们建议您花时间尽可能多地实施这些方法，以提高您的网站在所有设备上表现良好的几率（并受到谷歌移动优先指数的青睐）。 让我们开始工作吧！
1. 使用谷歌的移动友好工具测试你的网站
在采取任何进一步行动之前，明智的做法是查看您的网站在移动设备友好性方面的表现。 这将帮助您深入了解站点中需要改进的特定区域，并为您提供有关如何进行改进的有用信息。
一种方法是…
