自适应网站建设原则
到2020年,全球智能手机用户数量预计将达到35亿,比2019年增长9.3%。现在有96%的国人拥有某种类型的手机,其中81%是智能手机。 人们越来越方便地浏览手机上的互联网,而不是坐在台式机或笔记本电脑上,并且比例还在增加。
在2019年第三季度,移动设备(不包括平板电脑)产生了全球网站流量的51.5%,这是巨大的。我们大多数人已经在对网站进行移动优化,但这并不一定意味着您所拥有的能够满足用户的需求。 为确保您的网站符合标准,以下是七个必不可少的响应式网站建设原则,这些原则将帮助您确保您的网站在2020年为所有设备提供顶级用户体验!
1、最小化和优先
受尺寸限制,移动设备在内容和图像方面根本无法提供更多的支持。
当您想到桌面网站页面时,自然会希望将我们需要显示的信息分解为“小节”。将这些部分视为新闻文章中的段落。这样,您就可以轻松分解并阅读页面的各个部分,而不会引起混乱。
以Slack为例,我们概述了他们主页的不同部分,以说明其外观。
这些部分的确使内容在桌面设备上显得井井有条,但是在移动设备上,您需要确保以不会过度增加页面长度的方式重新组织这些部分。
如果您的小块彼此相邻,例如Wistia的主页下方,则可以将四个块堆叠在一起。
这种技术适用于像这样的交互性较小或详细的部分。但是,如果此部分有15个块,或者仅在您悬停时发生特定的交互作用,该怎么办?
如果您尝试像上一个示例一样按比例缩小页面,则页面将明显更长,并且那些“悬停”效果将不再起作用(因为您未完全使用鼠标在手机上导航)。
正是这种情况促使人们以移动优先的思维方式访问他们的网站。这意味着您将移动用户的需求放在首位。
您不是要创建桌面网站,也不是要删除使网站在移动设备上不那么直观的功能。您首先要确定最佳的移动体验,然后将其调整为桌面布局,以便在桌面上布局,因为您在空间方面具有优势,因此可以确定是否要增强体验。
尽管这是理想的方案,但是您可能无法在网站改版中遵循这种方法。同时,请尝试通过优化桌面到移动设备的形式来提供最佳体验。
查看一些最重要或效果最好的页面,可以是您的主页,服务页面或产品页面。然后,比较它们在移动设备和台式机上的性能(使用百度统计之类的工具);查看页面上的时间,用于滚动和点击的热图,转换率等。这将有助于提供一些基准数据,以说明它们当前的表现。
然后,花一些时间查看您选择的页面,然后尝试回答“是”或“否”,以帮助评估是否需要调整:
某些部分占用的空间是台式机的四倍多吗?
某些互动在移动设备上无法像在台式机上那样有效吗?
字体大小难于在手机上阅读吗?你发现自己看不清了吗?
根据您的热图,与台式机相比,用户是否滚动相同或相似的距离?
用户是否被卡在某个地方,导致他们的页面停留时间大大减少了?
一旦确定了问题区域,就可以开始提出解决方案。您应该隐藏某些部分吗?是否需要缩短部分以更好地适合移动屏幕?您还可以通过其他方式安排版面,使它们仍然实现相同的目标吗?
要集体讨论特定的解决方案,请与您的网页设计师一起研究这些问题,以帮助您正确地调整网站的移动布局。
一旦确定了需要做什么,就可以在网站上一些最受欢迎的部分中开发这些解决方案。这使您有机会测试它们是否改善了您的指标。
一旦感到有足够的数据,就可以在站点的尽可能多的区域中实施这些解决方案。
谁做得很好:ESPN
由于ESPN是体育新闻网站,因此该网站在首页上会提供大量信息。
在台式机网站上,可以进行这种修饰,但在移动网站上则没有那么多。
在移动设备上,您会注意到第一眼看到的是桌面中心部分。现在,主标题下方的四个视频是滑块的一部分,而不是彼此叠加。
那些到站点其他部分的“快速链接”位于左列,不再可见。他们选择合并某些部分以使页面更短。
向下滚动时,您会注意到它们开始根据用户可能想要的内容以更特定的顺序排列信息。例如,在视频下方,他们会插入热门新闻列表,而不是直接进入较大的特色文章区域。
这样的策略将帮助您策略性地组织移动层次结构,从而首先为用户提供最有价值的信息。
2、轻松找到程序底部的号召性用语(CTA)
您的企业网站可能具有您希望用户完成的特定主要号召性用语。也许是购买软件,安排咨询或注册您的应用程序。
为了促使人们完成此目标,您可能在导航中以及整个网站(尤其是台式机)中都有一个主要的号召性用语。
如果要跟踪CTAs,您可能会注意到导航按钮是人们将其转换到将转换的网关页面的主要方法之一。因此,自然而然地,始终保持该按钮很关键。
人们忽视的机会之一就是确保其主要的号召性用语清晰易读。让我们以Brightedge为例。
Brightedge拥有一个非常出色的网站,可以非常清楚地阐明其产品的功能以及为用户提供的价值。不过,在仔细检查他们在移动设备上的网站时,请注意导航中不再有大型的“请求演示” CTA。
建议您谨慎删除移动设备上的导航CTA。这样做自然会使您的移动访问者更难找到该页面。我们建议在移动设备上保持一致并为其腾出空间。如果您绝对不能这样做,则至少应尝试使该按钮进入导航,并使其在屏幕上尽可能可见而不需要滚动。这样,该按钮仍然是您网站上经常访问的区域。
谁做得很好:Salesforce
Salesforce在所有设备的导航栏中保留其“免费试用”按钮,但仅更改其位置和颜色。
他们还在屏幕底部有两个附加的CTA,可以打电话给他们或与他们聊天。
但是,如果您是一家不需要“聊天”和“致电” CTA的企业,但需要一种方法来推广您网站的主要CTA(因为您无法将其放入导航区域),则可以实施类似的底部栏布局,您可以在其中放置该主要CTA。
对于CTA的互动,我还必须给Salesforce奖励积分。表单不会将访问者带到带有表单的单独页面(在桌面上也是如此),而是从移动设备屏幕的右侧滑出,类似于问候栏,从而将访问者留在页面上。
这是有好处的,因为用户不会被迫等待加载一个完全独立的页面,而在移动设备上,由于带宽或互联网速度,这可能会带来问题。它只是帮助用户更快地完成所需的操作。
3、使用可缩放矢量图形(SVG)
SVG或可伸缩矢量图形是任何利用插图或图标的响应式设计的必备条件。与图像文件(JPG / PNG)不同,SVG可以无限扩展。
您可以放心地知道任何图标或图形在所有体验中都将保持超清晰度,而无需担心分辨率或像素化。
无论如何查看网站,都可以产生始终如一的优美外观。
此外,SVG的文件大小通常较小,这可以帮助您更快地加载网站。没有人愿意坐在手机上观看图像缓冲区,因为它太大了。
(左侧为SVG,右侧为PNG)
需要说明的是,该文件类型不是普通摄影的选项,它仅适用于计算机生成的图形。
谁做得很好:HubSpot
HubSpot的网站几乎在每个页面上都依赖复杂的插图。
如果将这些另存为PNG,由于细节量,使用的颜色数量以及所需的大尺寸尺寸,它们的大小很容易是其五倍。
最重要的是,无论您是在台式机还是移动设备上查看这些图像,这些图像都看起来清晰。
4、标准化可点击区域和按钮
在移动设备上,将用人的手指轻敲按钮和链接,而不是通过精确的鼠标单击来轻敲,因此交互式区域需要具有较大的区域以适应这种差异。
他们需要多大?嗯,这取决于用户,但是平均而言,建议移动设备上的任何可点击元素的高度至少为48像素。
这意味着您需要优化按钮,表单输入,博客上的内联链接,卡片布局,导航链接等。
您可能会发现,最难以遵守内联链接(例如博客文章中的链接)上的此规则。如果您发现用户难以使用链接,则可以尝试使用这种技术来增加链接周围的可点击区域(注意:此解决方案确实需要开发人员来提供帮助)。
这将有助于确保通过您的网站进行导航时出现的错误更少,从而最大程度地减少潜在的挫败感,并使观众保持参与。
谁做得很好:Vidyard
Vidyard做得很好,可以将任何重要的可点击区域保持足够大,以免拇指摸索。
在图像中,您会注意到Vidyard实际上在第一屏的部分增加了两个按钮的大小,而不是使它们保持相同的大小。第一屏的正下方的三个方块也是完全可点击的,而不是仅使带有箭头的不同颜色的文字可点击。
此类类似的有目的的元素将应用到整个网站的大多数地方,从而使浏览变得容易。
5.响应式图像
不同的设备具有不同的图像大小需求。桌面页面在全分辨率下可能需要1200px宽的图像,而该页面的移动版本可能只需要400px宽的图像。
这实际上是物理大小的三分之一,也大致相当于文件大小的三分之一。要牢记这一点很重要。
过去的处理方式是加载高分辨率(1200px)图像,然后在所有设备平台上仅使用相同的文件-但是这些大文件会大大降低网站加载时间。
为了获得最佳的响应体验,最好在移动设备和台式机上使用同一图像的两个不同版本。
例如,在移动设备上,我们仅使用(或“调用”)所需的400px图像,而不是较大的1200px图像,一旦加载,该图像将缩小为400px。
在页面上将其与几个图像混合使用,您将获得明显更快的加载体验,尤其是在将移动网站加载到单元服务而非wifi上的情况下。
有一些非常深入的文章介绍了如何完成此操作,因此您可以指定要在特定屏幕尺寸下显示的图像。
谁做得很好:Adobe
与其他示例不同,此示例的视觉效果将更加注重代码,因此您可以看到此技术的示例。
以下是用于在Adobe网站上生成图像的代码。您会注意到有几个“ .jpg”文件分隔在不同的行上。
这些JPG各自代表两个以不同屏幕尺寸显示的图像。您可以通过与每个“源”对象相关联的“媒体”标签来分辨。
结果是,不同尺寸的图像将以不同的指定设备尺寸显示。根据您的网页,您可能会发现需要更多或更少的图像变体。
6.思考排版
重要的是要考虑网站在所有平台和设备上的可读性,但是在移动设备上,您需要更加注意用户的可读性需求。
如果人们无法阅读您的价值主张或您的任何内容,那么他们很可能不会留下来。
您想确保内容易于阅读并且针对设备大小进行了真正的优化,以确保访问者不会眼花乱。
这也意味着要记下要在网站上使用的字体,以及它们在小屏幕上的可读性好坏。
请记住,还要在设备尺寸的标题和正文字体大小之间取得平衡。您不希望您的字体大小彼此感觉完全不同,以至于阅读时感觉很尴尬和不自然。
标题在文字占据主导的页面上创建了一个很大的层次结构。在文章列表页面上,为文章标题提供了顶层层次结构,因此访问者可以在浏览内容时快速浏览它们。
内部文章的字体大小也足够大,可以容纳相当数量的内容,同时仍然可读。
尽管我们可以将字体大小设置为14px,以适应更多内容,但很大一部分读者将无法清晰阅读文章。较大的字体和较宽的行高也意味着您无需费力查找下一行。
7、利用设备功能
在智能手机上,您可以执行各种不同的任务。您可以直接从浏览器拨打电话,发送消息和打开应用程序。
利用您网站上的这些功能,不仅可以增强用户的移动体验,还可以增加转化次数并鼓励采取行动。
例如,在桌面站点上,您可以列出电话号码。在该网站的移动版本上,您可能希望在按钮或可单击区域内列出电话号码,单击该按钮或可单击区域将自动提示呼叫。
这个想法也可以应用于电子邮件地址,在电子邮件应用程序中单击时使用自动填充的收件人打开新消息。
社交媒体图标还可以通过以下方式进行编码:单击后,它们将直接在应用程序中打开,而不是移动浏览器。
所有这些都可以极大地简化访问者与您之间的联系和沟通。
有时,当您想获取信息时,立即与某人打个电话和交谈感觉很好。您应该意识到了这一点,并利用移动设备功能为您的移动站点带来便利。
您所做的就是将电话号码放在一个可点击的按钮内,然后将其放在移动设备上的导航下方。
我们可以通过添加少量的简单代码,在移动设备上轻按该代码时,它将询问用户是否可以拨打该号码。接受后,设备会自动开始通话。无需摆弄笔和纸,或试图记住要拨入的号码。d’d’d’d’d’d’d’d’d’d’d’d’d’d’d’d’d’d’d
总结
在2020年,如果您想为用户提供一个经过优化的网站,则以上所有这些都是必须的。您的网站访问量中有一半大可能来自移动设备;您有可能因为不良的移动体验来丢失客户。
通过考虑这些响应式网站建设的实践来查看您的网站,您将能够确定您的网站是否真正适合我们如今的互联网时代,或者是否需要进行一些更改。