尽管许多公司所有者已采用移动设备与移动客户进行互动,但并非所有人都拥有适合移动设备的网站。此外,在谷歌移动友好升级之后,移动友好网站的必要性从未如此强烈。
使您的网站对移动设备友好是一项明智的投资,可以让您在竞争对手中脱颖而出,而实现这一目标的一种方法是拥有一个可靠的网站建设者。但是,大多数网站所有者都关心如何提高其网站的移动兼容性。我们列举了一些在构建适合移动设备的网站时要考虑的最佳实践,以在此过程中为您提供帮助。
您可以通过多种方式使您的站点具有响应性。然而,有这么多的选择,初学者很容易不知所措,做出错误的选择或根本没有选择。
问:我有适合移动设备的网站吗?
您聘请的设计师或网站建设者可能在创建或更新您的网站时考虑到了移动设备。在您花时间和金钱考虑使您的网站对移动设备友好之前,先看看它的表现如何。
谷歌有一个适合移动设备的测试工具。把它放在搜索框中。如果您的网站不适合移动设备,您还会收到智能手机上的页面快照以及改善移动设备用户体验的建议列表。
使用 Google 手机测试您的移动网站
如果测试表明您的网站需要大量改进,移动友好应该是您的首要关注点。因此,您可以提高网站的搜索引擎曝光率,增加访问者保留率并增加转化率。
如果谷歌的工具给你竖起大拇指,那么在移动设备上更新你的网站不需要同样重要。您的用户的移动体验可能仍会受益于改进。小事情加起来。
让我们来看看开发适合移动设备的网站的最佳实践:
1. 改进您的网站:移动优先的方法
您是否曾在桌面和智能手机上看到相同的网站?
随着移动上网几乎超过桌面,设计师被迫放弃桌面网站作为“主”的概念。这就是为什么设计移动优先(在桌面之前)一直是一种长期推荐的做法。
通过专注于移动体验,设计师被敦促在他们的设计选择上受到限制。除了尺寸限制之外,移动用户通常只用一只手参与,这使得除了点击和滑动之外的输入比在桌面上更复杂。考虑需要鼠标输入的悬停动画:如果您的桌面版本过于依赖视觉反馈,则会导致移动设备出现问题。
因此,移动优先设计从一开始就强调简单性和可用性。请记住,这并不意味着桌面版本将是极简主义的。相反,可以比复杂布局更快地扩展基本布局。
为横向创建的照片或电影可能不适用于纵向。面部和背景组件在很小的尺寸下可能难以阅读。此外,如果您首先构建了一个包含大量图像的桌面网站,则可能不需要在移动设备上滚动浏览每张图片。
考虑以下建议以避免再次发生这种情况。
为了使您的网站在移动设备上有效运行,您必须对其进行优化以使其垂直浏览。
您的内容必须优先放在适合移动设备的网站上。从演示文稿中删除分散注意力的元素。
您想要尽可能少的列。一列是理想的。
2. 使查找信息更易于访问。
大多数时候,当人们拿出智能手机时,他们是在寻找特定的东西——问题的解决方案、附近餐馆的地址或客户服务的联系电话。通常,他们希望尽可能快速有效地找到所需的信息。
每当移动访问者访问您的网站时,请考虑他们最有可能寻求哪些信息,并将该信息放在显眼且易于从移动主页上找到的位置。此外,想想人们在访问您的网站时最常问的问题。每个问题的答案在您的移动主页上都可能没有意义,但请确保在移动设备上易于查找和导航。
如果您不确定移动用户访问您的网站时正在搜索什么,请使用您的分析。您可以添加移动流量以观察移动用户如何与您的网站互动。
3. 优化你的 CTA
在通过手机访问您的网站时,您的客户不应被剥夺关键的用户界面组件。因此,您应该确保不会发生这种情况。
您可以在号召性用语按钮中包含这些组件,以确保将来不会再次发生这种情况。这无疑将有助于您吸引观众的兴趣。
当谈到在便携式设备上使用号召性用语按钮时,您的移动网站的成功将取决于您有效执行此操作的能力。
因此,请务必将号召性用语放在用户能够快速注意到的最显眼的区域。
4. 让你的菜单更简单。
根据用户的选择,导航也可能很快变得复杂。尽管大多数桌面网站都有一个完整的标题导航栏,其中包含几个主菜单和子菜单,但汉堡符号已经变得很熟悉了。因此,大多数移动网站标题仅包含符号和徽标。
流行的菜单设计是滑出式侧边栏,它覆盖了屏幕的一部分,带有导航选项。这将菜单与页面内容的其余部分分开,同时允许用户返回上一个屏幕。
根据菜单的复杂程度,任何选择都可能有子菜单。当用户选择这些子菜单之一时,新的选项列表应替换旧菜单。
将导航栏固定在屏幕上将阻止用户滚动回顶部查看。移动用户经常隐藏改进的导航以专注于内容,然后在向上滚动时暴露它。
可以使用替代导航方法来代替传统菜单或除了传统菜单之外。选项卡使用户能够在内容区域之间快速切换,而无需重新加载页面。
5. 打开桌面视图的开关。
虽然一些移动访问者可能会选择在他们的移动设备上查看您的网站,但其他人可能更喜欢在他们的台式计算机上查看您的网站。
如果他们愿意,请给他们一种方法。通过为访问者提供切换视图的选项,让他们以对他们有意义的方式与您的网站进行交互。
6. 让你的表格更简单。
考虑您网站上的所有各种形式。向访问者询问大量信息并不是一个很好的策略。
取而代之的是修改设计,使表单尽可能简短。如果有人在他们的计算机上填写表格,这不是什么大问题,因为在更大的屏幕上书写和浏览更简单。然而,对于智能手机和平板电脑,情况并非如此。
检查您的表格并确定是否需要每一行。您不需要用户的家庭住址或电话号码,例如,如果您试图说服他们订阅您的电子邮件列表。
为了转换销售,表单不应该询问用户他们喜欢的颜色。获取他们的帐单和运输信息,然后收工。
7.不要忘记搜索功能。
当涉及到您的菜单选择时,这个设计理念可以追溯到我已经说过的。你们中的一些人现在可能正在查看一个包含 20 或 30 个不同决定的菜单。
将所有这些选择浓缩到一个页面上似乎具有挑战性,但它是可行的。幸运的是,这是可能的,主要是如果您在移动网站上包含搜索栏。
由于鼓励用户搜索他们正在寻找的内容,用户将减少对广泛而复杂的菜单的依赖。过多的选择会让访问者不知所措并降低您的转化率。
为使电子商务网站正常运行,该功能必须包含在网站的网页设计中。
8. 分解你的次要内容
桌面网站上通常提供深入的正文、产品规格和其他信息。然而,由于移动网站必须简洁,设计者必须删除或压缩任何非必要的材料。在这种情况下,可折叠/可扩展部分很有帮助。
使用诸如三角形或加号之类的指示符来扩展或暴露隐藏材料,使解释性信息成为可选内容称为折叠内容。虽然隐藏您的内容似乎是一件消极的事情,但在引人注目的标题的帮助下更容易浏览的好处大大超过了丢失信息的风险。切换是另一种微交互,它邀请用户与网站互动,而不是简单地阅读它。
创建者应保存折叠材料以用于标题下方的副本。可以混合重复材料以覆盖相同区域,而不是相互堆叠。
9. 删除您网站上的所有弹出窗口。
没有人喜欢它们的任何格式,但是当您试图在一个小屏幕上阅读内容时,一个大广告或弹出窗口覆盖了您对网站的看法,那就更令人恼火了。
您的大多数访问者不会费心寻找可以让他们最小化弹出窗口的小 X;相反,他们会点击离开并访问另一个网站。为了提供良好的用户体验,您应该避免允许完全掩盖网站内容的广告或弹出窗口。
如果您认为它们太重要而不能完全删除,至少,您应该为移动用户停用它们,或者将其设置为仅在用户滚动到页面下方后才显示弹出窗口,而不是在他们刚刚到达页面。此外,请确保 X 足够大,以便他们轻松定位和选择它。
10. 将速度放在首位。
也许您还记得拨号上网的日子和等待网页加载缓慢的痛苦。然而,今天,每个人都期望更快的互联网连接;如果您的网站继续以过去缓慢的速度运行,您的访问者会变得不耐烦。
无论您对移动网站进行何种修改,请记住牢记速度。
简化设计是尽可能减少网站加载时间的最有效方法。
删除任何不需要的大图形或闪光灯。简单的网站加载速度更快,转化率更高。
我们的最终建议:移动友好的设计将继续存在,因此请开始接受它们。
移动网站冲浪是未来的方式,基于其全球流量如何持续增长。但是,当您考虑到与桌面网站相比,设计必须克服的所有限制(缺乏空间和用户外围设备)时,这似乎是一种负担而不是机会。这些困难并非不可克服,但不应低估。
尽管本文中的想法将为您提供解决适合移动设备的网站设计问题的实用解决方案的起点,但掌握它们需要时间和练习。聘请经验丰富的网站设计师来开发一个适合移动设备的网站,这对您的访问者来说是有益的而不是负担。