移动网站设计至关重要。

为什么?由于移动设备正在彻底改变我们连接的方式,因此业务方式运行方式。事实上,现在大多数Web流量来自移动设备。

“移动设备不仅正在成为新的数字中心,而且也正在成为连接实体世界的桥梁,”Thomas Husson说他是弗雷斯特研究公司的副总裁兼首席分析师。“这就是为什么移动业务不仅会影响你的数字业务——它会改变你的整个业务。”

换句话说,您需要一个移动响应网站。

但是什么是移动友好的网站?在本文中,您将了解所有关于移动友好网站的所有网站,并看到九个最佳移动网站设计示例。此外,您将学习如何了解您的网站是否是移动友好的。

让我们来吧。

不要等着别人去做。雇佣你自己,开始发号施令。

自由开始

什么是移动友好网站?

简单地,移动友好的网站是一个为手持设备而设计和优化的网站,如智能手机和平板电脑。

而移动响应式设计的过程就是创建一个网站它适应屏幕尺寸,它已被视为。

在Oberlo,我们有一个移动友好的网站设计。让我们比较它在桌面和移动时看起来的样子。

在下面的图像中,您可以看到桌面网站有足够的空间,页面元素在地方并排排列,与屏幕大小相比,文本相对较小。

Oberlo桌面网站

另一方面,当你在手机上浏览网站时,页面元素会堆叠在一长列中,每个元素周围的空间更小。此外,按钮更大,便于点击,文本相对于页面大小更大,便于阅读。

Oberlo移动网站设计

“我们在移动应用程序上看的丰富和互动体验已经为包括网络的所有数字媒体创造了新的标准和期望”Raj说Aggarwal他是移动营销公司Localytics的首席执行官。“结果是,网站的功能越来越丰富,越来越像应用程序。”

移动网站设计的重要性

让我们削减追逐:在2019年的最后一个季度,智能手机负责往返占全球网站流量的52.6%

这意味着移动设备现在使用托管台式计算机。

此外,移动用户数量预计到2021年,全球人口将增长到38亿。

作为Cyndie Shaffstall营销公司Spider trainer的创始人说:“移动不是未来,而是现在。在客户选择的环境中去满足他们,而不是在你觉得方便的地方。”

移动设备也在改变购物习惯。

据谷歌称,59%的购物者说能够在移动设备上购物在决定从中购买哪些零售商或品牌购买。

另外,70%的智能手机用户谁在店内购买了商店转向他们的移动设备以预先研究购买。

如果这还不够,谷歌的算法在搜索结果中优先考虑移动友好的网站。

2020年3月,谷歌说“为了简化,我们将转向以移动优先为所有网站建立索引。”

如果你想知道这意味着什么,谷歌开发者提倡约翰·穆勒解释说

“目前,谷歌会先查看一个网站的桌面版本,然后根据这些信息对手机网站进行排名。一旦这个更新推出,就会出现相反的情况。谷歌将开始关注你的手机网站,并从中排名桌面网站。”

更新将于2020年9月正式生效,但是70%的网站显示在搜索结果中已经是基于这种移动优先索引算法进行排名。

谷歌统计

最后,许多用户使用缓慢、弱的手机连接来加载手机网站。因此,各大品牌必须创建一个加载迅速的移动网站设计。

总之,世界现在是移动优先的——这就是为什么你需要一个移动响应网站。

来自最佳手机网站的8个设计技巧

在本节中,我们将深入了解8个你可以使用的手机网站设计技巧。另外,你还可以在网上看到一些最好的手机网站的真实例子。

1.使用大按钮

手机友好型网站需要有足够大的按钮,让用户无需放大即可点击。

此外,超链接之间需要有空间。如果链接放置得太近,用户可能会试图点击一个链接,却意外地点击了另一个。

购物使用大按钮并在其移动网站设计上的超链接之间放置足够的空间。

Shopify大按钮

因此,当您设计移动响应网站时,请记住间距,并确保可以轻松地单击每个超链接。

2.使文本足够大,便于阅读

这一点可能看起来有点明显,但它对手机友好型网站设计也是至关重要的。

用户不应该在阅读时放大或左右滚动。文本要足够大,便于阅读。

在下面的例子中Beardbrand,你可以看到显示的所有文本完全符合屏幕的大小。

Beardbrand大文本

让你的文本在各种尺寸的屏幕上都足够大,这样用户就可以很容易地阅读你要说的话。

3.简化菜单

桌面网站菜单有很大的空间。它们可以占据屏幕顶部的整个栏位,并具有广泛的下拉选项,所有这些都不会影响用户体验。

但在移动设备上却不是这样——空间不够。

手机友好型网站应该使用简单的菜单来展示网站的概况。然后,用户可以使用分类、过滤或搜索功能来寻找他们想要的东西。

大多数移动友好型网站使用汉堡符号 - 由两条或三条水平线组成 - 表示菜单。

让我们看看最好的手机网站之一的一个好例子,凯莉皮

当用户点击屏幕右上角的双线汉堡机菜单时,它们将显示一个带有大按钮和文本的全屏菜单。

kylieskin移动菜单示例

当创建一个移动响应网站时,保持你的菜单简单,让用户更容易找到他们想要的东西。

4.提供一个简单和直观的搜索功能

您的网站搜索功能对移动用户尤为重要。

如上所述,简化的菜单可以使移动浏览更容易。然而,它们也会让用户更难找到特定的商品。

为了让用户毫不费力地找到他们想要的东西,把搜索功能放在前面和中间。

Shopify用户Gymshark将搜索功能放置在页面的顶部栏。还有一个直观的过滤功能,让用户更容易找到特定类型的产品。

Gymshark搜索和过滤功能

关键的外卖吗?在你的手机网站设计中加入一个简单有效的搜索功能。

5.让联系变得容易

如果客户在寻找你的联系方式,他们可能遇到了麻烦——这意味着他们可能已经有点沮丧了。不要让别人很难联系到你,这是雪上加霜。

特别是当84%的消费者考虑客户服务在决定是否购买时是一个关键因素。

客户服务统计

这是另一个来自Shopify用户的很棒的手机网站设计例子Bremont.这个奢侈手表品牌在屏幕右下角放置了一个聊天图标,这使得网站访问者可以快速方便地联系代表。

Bremont联系方式选项

如果您无法在时钟周围提供现场聊天,请考虑链接到aFacebook Chatbot.,或简单地提供用户可以通过菜单中的“联系人”链接访问的联系表单。

6.创建简单的形式

用户可能更倾向于在电脑上填写长表格,因为屏幕更大,用键盘打字更容易。

在移动设备上,表单需要更短的文本字段和按钮。

例如,如果您要求用户注册您的邮件列表,您不应该要求更多的名字和电子邮件地址。

如果您需要包含更多问题,请使它们快速且易于回答。

在此移动网站设计示例,来自ShoadIfy用户QuadLock,您可以看到带有简单表单需求的大字段。甚至还有一个下拉菜单,帮助用户提供有关查询的信息。

QuadLock触点形式

简而言之,确保您的表格很短,甜蜜。

7.创建引人注目的呼叫动作

一种文字-动作——也被称为CTA——是一幅图像、横幅或一段文字,字面上号召用户采取某种形式的行动。

例如,您可能会提示用户注册您的邮件列表,了解有关要约的更多信息,或购买产品。

这种营销策略在手机网站设计中起着至关重要的作用。

然而,在如此有限的屏幕空间中创造引人注目的行动召唤可能是一种挑战。

在这个手机网站的例子来自Shopify用户Luxy头发,你可以看到两个横幅,呼吁采取行动。第一个促销新产品,附带免费礼品,第二个提示用户更多地了解该品牌的免费送货和90天兑换政策。

Luxy头发号角

当为你的移动友好网站创建cta时,把它们放在页面上方,用户无需向下滚动就能看到它们,让它们脱颖而出。

8.避免弹出窗口

让我们面对现实吧:大多数人讨厌弹出窗口。事实上,如果你谷歌“我讨厌弹出式广告”,你会发现近4800万个结果。

难怪谷歌推出了2017年算法变化这就惩罚了那些在移动设备上提供特定类型弹出窗口的网站。

这些天,你的搜索排名可能会受到影响,如果你:

  • 显示一个涵盖主要内容的弹出窗口
  • 显示一个独立的独立式,用户必须在访问主要内容之前解雇。
  • 让页面顶部看起来像一个独立的插页,把原始内容放在下面。

吮吸的弹出窗口

也就是说,某些类型的弹出窗口不会对你的排名产生负面影响,比如

  • 插播广告用于履行法定义务,如年龄验证,cookie许可,或GDPR
  • 登录Windows访问私人内容,例如PayWall后面的电子邮件或内容。
  • 小横幅很容易拆除,并“使用合理的屏幕空间”,例如App安装Chrome和Safari使用的横幅。

不错的弹出窗口

底线,移动弹出窗口挫败了用户,可以伤害你的搜索排名,所以在绝对必要时才使用它们。

如何知道你的网站对手机是否友好

如果你想知道你的网站是否适合移动设备,只需要一点时间就能知道谷歌的移动友好测试工具-只需输入一个链接到您的网站,并单击“测试URL。”

该工具将评估你的网站在移动设备上的友好程度,并详细分析你可以做些什么来改进它。

谷歌的页面测试

2021年手机网站设计

移动友好的网站是一个旨在在智能手机和平板电脑上工作的网站。现在世界是移动的第一,您的网站也应该是。

总之,以下是8个手机网站设计技巧:

  1. 让按钮足够大以便人们点击。
  2. 确保文本足够大,用户无需放大即可阅读。
  3. 简化你的菜单,使其易于在小屏幕上导航。
  4. 放置搜索功能前和中心并允许用户过滤搜索结果。
  5. 让用户毫不费力地联系您。
  6. 创建简单且快速使用的表单。
  7. 把“行动呼吁”放在最上面,这样它们就很显眼了。
  8. 除非他们绝对必要,否则避免使用弹出窗口的用户。

您对移动网站设计的看法是什么?我们错过了任何伟大的移动网络设计最佳实践吗?让我们在下面的评论中了解!

想了解更多吗?