你还记得上一次你访问手机网站时出现的——嗯哼——吗静止的经验吗?(双关语)。也许是网站没有响应。或者,也许真的很难找到你想要的东西。或者,可能它加载得很慢。

不管它是什么,你可能因此离开去了另一个网站。谷歌知道,不开心的网站访问者会去其他地方,从而提高跳出率,降低网站在移动搜索中排名的机会。

这就是为什么谷歌在四月份发布了他们备受期待的手机更新--这让营销界的评论如火如荼。

你的网站有多强大?使用HubSpot的免费网站分级器对其进行分级。

数百万条关于手机更新的推文被发布,数十万人在谷歌上搜索“mobilegeddon”,人们制作了许多类似于此的图形:

mobilegeddon.jpg

形象信贷:搜索引擎地

虽然有些骚动确实有点极端,但这次更新是一件大事,这是一件大事,意味着未来几年将获得或损失数十亿美元的收入。这一点在移动搜索查询已经出现的情况下尤其如此已经开始超越台式机.

全球许多品牌都在努力改善其手机网站体验。为了帮助激发你自己的移动网页设计,这里的团队蜡笔收集了16家在移动优化方面做得很好的公司。让我们来看看他们的手机网站设计,看看是什么让它们如此出色。

16个最佳手机网站

1)Beaglecat

Beaglecat的手机主页以其大胆的色彩和简单的设计,为访问者提供了许多有用的信息,而不会让人感到不知所措。通过一些快速滚动,访问者可以快速了解Beaglecat的使命、他们提供的价值以及团队中的成员。要了解更多关于这些事情的信息,你可以点击大的行动按钮,上面写着“更多细节”和“了解更多”。最后,他们页面上的表格非常简短,在移动设备上填写起来也很容易。

beaglecat-mobile-website.png

2)奥克利大厅酒店

当你在寻找一家酒店时,你最想看到的三件事是房间和空间的大图、房间的可用性和价格信息,对吗?Oakley Hall通过大而清晰的图像和便于移动的可用性功能,引导用户选择价格,在捕捉酒店本质方面做了大量工作。他们还提供了简洁而诱人的房间风格描述,并为想要了解更多婚礼和专属餐饮俱乐部信息的用户提供了行动按钮。

oakley-hall-hotel-mobile-website.png

3)影响力品牌与设计

Impact的移动站点是一个很好的例子,它将您的价值主张的多个元素融合到一个简洁的滚动页面中。从易于点击的按钮开始,用户可以了解更多关于影响的作用和它们提供的价值的信息——接着是客户推荐信,一个关于什么是入站营销的图形,最后是一个链接到他们的学习中心的大型行动号召按钮。

impact-branding-design-mobile-website.png

4)斑点男孩

Speckyboy是一个设计博客——所以你希望他们能给你带来很棒的移动体验,对吧?好吧,他们能做到。浏览Speckyboy博客的体验是完美无瑕的,包括有趣的图片、大字体的文章标题,以及一段简单易读的介绍性段落,挑逗每篇文章,如果用户想阅读其余的文章,可以点击该段落。

对于lead capture,Speckyboy提供了一个方便移动的表单,可以邀请订阅他们的时事通讯:您只需输入您的电子邮件地址。在主页的底部,Speckyboy提供了两个单独的历史博客raybetapp帖子列表,用户可以点击,其中包括“最受欢迎”和“推荐”来吸引用户

speckyboy-mobile-website.png

5)景观领导力

用户在Landscape手机主页上看到的第一件事就是一个直接连接到公司的按下拨号电话号码。我们喜欢这个行动呼吁的位置。网站的其余部分接着解释了Landscape擅长什么,然后是有用的内容,包括博客文章、网站链接和大的、易于按下的社交媒体按钮。对于想要了解更多信息的用户,Landscape在移动页面的底部提供了一个大的搜索框。

景观-领导力-手机-网站.png

6)同步节目

SyncShow手机网站的一切都清晰、清晰、简洁。他们的手机主页立即提供了不容错过的行动号召按钮,随后是对目标市场B2B和B2C制造公司的完整描述。当你向下滚动时,你会发现制造业如何变化的简洁解释,这与他们的目标受众非常相关。您还将看到对公司价值主张的简短描述和一个案例研究,其中强调了最近5倍的客户投资回报。这里的模式是什么?为想了解更多信息的访问者提供简短的宣传语,然后是行动号召按钮。raybet电子竞技

syncshow-mobile-website.png

7)NudeAudio

NudeAudio销售便携式扬声器,他们的手机主页为访问者提供了他们在网站上想要的东西:引人注目的产品图片、功能细节和巨大的行动按钮。它们还包括产品更新链接,可将人们直接发送到他们的博客,以及一个字段表单,在该表单中,访问者可以输入他们的电子邮件地址以注册时事通讯。raybetapp

nudeaudio-mobile-website.png

8)影响公司。

在Influence and Co.的移动网站的顶端是一个引人注目、诱人且易于理解的价值主张:“我们与您合作,将您发布在有针对性的在线出版物中,向您的确切受众展示您的专业知识。”他们接着展示戴尔的视觉推荐,以及一个非常简短的,为感兴趣的潜在客户触摸友好表单,以快速删除他们的联系信息。

influence-and-raybet电子竞技company-mobile-website.png

9)1252年小吃酒吧

你想从tapas酒吧的手机网站上看到什么?如果你回答了美食图片,关于美味的本地食物和菜单的宣传,那么你会像我们一样喜欢这个网站。他们的完整菜单设计为移动响应,所以不需要缩放。他们还在主页上讲述了一个关于他们的主厨韦斯·泰勒(Wes Tyler)的迷人故事,这给了这家当地餐厅一种欢迎的感觉。

虽然页面上有所有相关的联系信息和营业时间,但我们喜欢页面底部的特别优惠,它突出了1252的每周食品和饮料的特色和美味的描述。

tapas-bar-mobile-website.png

10)潮流风筝

TrendKite将桌面网站的所有优点都放在他们的手机页面上。他们的主页从一个美观的视觉效果开始,然后解释他们的价值主张和联系信息。继续滚动,你将能够点击电子书,阅读更多专门为你提供的信息,因为它们将“品牌”和“公关机构”的内容分开。整个页面都有位置良好的行动按钮。

trendkite-mobile-website.png

11)Dog-a-holics

伟大的手机网页上有很多引人注目的图片——狗狗队知道用他们最好的K-9脸来领导。在一张可爱的第一张图片之后,访客可以阅读三条公司喜爱狗的简洁理由,它们之间用可爱的小图标隔开。在提供商店位置、营业时间和可点击联系信息的所有详细信息之前,Dog-a-holics包括一些关于该公司的人性化细节,以使他们感觉更接近客户:创始人的照片,以及行动号召,让游客可以选择加入该商店作为“特别会员”。raybet电子竞技

dog-a-holics-mobile-website.png

12)罗孚实验室

罗孚实验室的移动主页有三件事做得非常好。首先,该页面讲述了一个简单易懂但引人注目的故事,讲述了它们存在的原因以及目标受众需要它们的原因。其次,它们包括一些非常棒的产品快照,在手机上很容易消化。最后,整个体验简洁明了,为用户提供了大量信息,并呼吁用户采取行动了解更多信息。

rover-mobile-website.png

13)文丘里法

VentureFar的手机网站有一个困难的目标:他们需要说服用户去攀登乞力马扎罗山……通过手机。这个网站让人印象深刻的是他们确实做得很好。从一张山的明信片图像开始,他们立即为用户提供了比较旅游运营价格的功能。(是的,他们非常了解自己的人口结构。)他们还提供了一个我们见过的更好的移动响应图表,其中包括一个设计简单但详细的图表,显示了他们提供的所有行程。最后,他们的主页以简短的简介结尾,回答常见问题,比如“为什么要爬?”和“你什么时候走?”作为一家远程旅游公司,VentureFaraybet电子竞技r也一定会提供他们的许可证/验证和直接预订的详细信息。

venturefar-mobile-website.png

14)蓝区支援

Blue Zone SUP是哥斯达黎加的一个单人划桨冲浪营地,在看到他们的移动网站后,我们完全想去。他们的网站以一个迷人的英雄形象开始,接着是一个快速的公司描述和制作良好的视频,在手机上运行得非常好。他们还向游客展示了一张很好的图表,他们可以用一到五分制来衡量自己的技能水平。这样,当浏览营地日期(通过视频下方的“行动号召”按钮提供)时,访客将知道哪几周最适合他们的技能水平。为了展示raybet电子竞技更多的公司文化,Blue Zone提供了博客文章和其他图片的链接。

blue-zone-sup-mobile-website.png

15)小脉冲

tinpulse的手机主页上有许多视觉效果,包括来自更知名品牌的客户和来自国家出版物的公关功能。他们的手机网站上没有大量的文本价值主张,而是视觉化且简洁明了,他们还在后面添加了一个手机响应式产品视频。

tinypulse-mobile-website.png

16)AX健身,有限责任公司

AX Fitness毫不浪费时间来展示他们的文化:当你进入他们的手机网站时,你首先看到的是一组人在用脚梯进行锻炼的大图,旁边还有这句话(全是大写):“真人”。严重的健康。”我们赞扬这种有重点的做法。继续滚动,你会立即看到一个“首个免费课程”的行动按钮,以及一个特殊的第一个月优惠。它还包括店主的几句话,向来访者展示她作为健身房老板和健身爱好者对顾客的热情和承诺。从那里,用户可以了解个人训练、团体健身、阅读博客文章,并获得有关激动人心的、即将举行的活动的信息。

ax-fitness-mobile-website.png

(要查看本文中介绍的所有设计,请访问HubSpot COS网站收藏以及Squarespace与WordPress收款处蜡笔.)

通常,您网站的访问者将从桌面和移动设备访问您的网站。也许他们会在浏览手机推特订阅源时找到你的网站,然后切换到桌面进行更深入的研究,然后从桌面研究会话中给自己发一篇文章,在回家的火车上用手机阅读。

这里的外卖吗?重要的是你的内容可以在任何地方轻松阅读。

那么,还有哪些公司拥有出色的移动网站呢?与我们分享您的最爱,并确保提及它们为何如此伟大。

编者按:这篇文章最初发表于2013年12月,现已更新,力求新颖、准确和全面。

用有效的技术搜索引擎优化改进你的网站。从进行审计开始。

用有效的技术搜索引擎优化改进你的网站。从进行审计开始。

最初发布于2015年7月23日上午8:00:00,更新于2020年5月28日

话题:

响应性设计