Content writing and its pitfalls

到2020年,全球智能手机用户数量预计将达到54亿,比2019年增长9.3%。

现在有96%的美国人拥有某种类型的手机,其中81%是智能手机。 

人们越来越不方便地浏览手机上的网络,而不是坐在台式机或笔记本电脑上,并且有数据在备份。

在2019年第三季度,移动设备(不包括平板电脑)产生了全球网站流量的51.5%。这是巨大的。

我们大多数人已经在对网站进行移动优化,但这并不一定意味着您所拥有的能够满足用户的需求。 

为确保您的网站符合标准,以下是七个必不可少的响应式设计良好实践,这些优秀实践将帮助您确保您的网站在2020年为所有设备提供良好的体验!

1.最小化和优先

受尺寸限制,移动设备在内容和图像方面根本无法提供最多的支持。 

当您想到桌面网站页面时,自然会希望将我们需要显示的信息分解为“小节”。将这些部分视为新闻文章中的段落。这样,您就可以轻松分解并阅读页面的各个部分,而不会引起混乱。 

以Slack为例,我概述了他们主页的不同部分,以说明其外观。

这些部分的确使内容在桌面设备上显得井井有条,但是在移动设备上,您需要确保以不会过度增加页面长度的方式重新组织这些部分。 

如果您的小块彼此相邻,例如Wistia的主页下方,则可以将四个块堆叠在一起。

 资料来源:Wista

这种技术适用于像这样的交互性较小或详细的部分。但是,如果此部分有15个块,或者仅在您悬停时发生特定的交互作用,该怎么办?

如果您尝试像上一个示例一样按比例缩小页面,则页面将明显更长,并且那些“悬停”效果将不再起作用(因为您未完全使用鼠标在手机上导航)。 

正是这种情况促使人们以移动优先的思维方式访问他们的网站。这意味着您将移动用户的需求放在首位。

您不是要创建桌面网站,也不是要删除使网站在移动设备上不那么直观的功能。您首先要确定优秀的移动体验,然后将其调整为桌面布局,以便在桌面上布局,因为您在空间方面具有优势,因此可以确定是否要增强体验。

尽管这是理想的方案,但是您可能无法进行完整的网站重新设计并遵循这种方法。同时,请尝试通过优化桌面到移动设备的形式来提供良好体验。 

查看一些重要或效果好的页面-可以是您的主页,服务页面或产品页面。然后,比较它们在移动设备和台式机上的性能(使用Google Analytics(分析)之类的工具);查看页面上的时间,用于滚动和点击的热图,转换率等。这将有助于提供一些基准数据,以说明它们当前的表现。然后,花一些时间查看您选择的页面,然后尝试回答“是”或“否”,以帮助评估是否需要一点TLC: 

  • 某些部分占用的空间是台式机的四倍多吗?
  • 某些互动在移动设备上无法像在台式机上那样有效吗?
  • 字体大小难于在手机上阅读吗?你发现自己斜眼了吗?
  • 根据您的热图,与台式机相比,用户是否滚动相同或相似的距离? 
  • 用户是否被卡在某个地方,导致他们的页面停留时间大大减少了?

一旦确定了问题区域,就可以开始提出解决方案。您应该隐藏某些部分吗?是否需要缩短部分以更好地适合移动屏幕?您还可以通过其他方式安排版面,使它们仍然实现相同的目标吗? 

要集体讨论特定的解决方案,请与您的设计师一起研究这些问题,以帮助您正确地调整网站的移动布局。 

一旦确定了需要做什么,就可以在网站上一些受欢迎的部分中开发这些解决方案。这使您有机会测试它们是否改善了您的指标。

一旦感到有足够的数据,就可以在站点的尽可能多的区域中实施这些解决方案。

谁做得很好: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上的情况下。

有一些非常深入的文章介绍了如何完成此操作,因此您可以指定要在特定屏幕尺寸下显示的图像。

如果您使用带有HubSpot的网站页面来构建网站,那么您会很幸运!实际上,默认情况下, HubSpot 允许对内容自动调整图像大小。 

谁做得很好:Adobe

与其他示例不同,此示例的视觉效果将更加注重代码,因此您可以看到此技术的示例。 

以下是用于在Adobe网站上生成图像的代码。您会注意到有几个“ .jpg”文件分隔在不同的行上。

这些JPG各自代表两个以不同屏幕尺寸显示的图像。您可以通过与每个“源”对象相关联的“媒体”标签来分辨。 

结果是,不同尺寸的图像将以不同的指定设备尺寸显示。根据您的网页,您可能会发现需要更多或更少的图像变体。

6.思考排版

重要的是要考虑网站在所有平台和设备上的可读性,但是在移动设备上,您需要更加注意用户的可读性需求。 

如果人们无法阅读您的价值主张或您的任何内容,那么他们很可能不会留下来。

您想确保内容易于阅读并且针对设备大小进行了真正的优化,以确保访问者不会眼花乱。 

这也意味着要记下要在网站上使用的字体,以及它们在小屏幕上的可读性好坏。

请记住,还要在设备尺寸的标题和正文字体大小之间取得平衡。您不希望您的字体大小彼此感觉完全不同,以至于阅读时感觉很尴尬和不自然。

我还写了整篇博客文章,介绍如何发现适用于台式机和移动设备的正确字体大小,建议您深入研究以帮助更具体地了解字体大小规则。

谁做得很好:北京永灿

我知道,我知道。。。有些不合常规的例子,但我们一直在根据访问者的来信不断测试和调整字体大小,所以我无能为力! 

标题在文字占据主导的页面上创建了一个很大的层次结构。在博客列表页面上,为博客标题提供了顶层层次结构,因此访问者可以在浏览内容时快速浏览它们。  

内部文章的字体大小也足够大,可以容纳相当数量的内容,同时仍然可读。

尽管我们可以将字体大小设置为14px,以适应更多内容,但很大一部分读者将无法清晰阅读文章。较大的字体和较宽的行高也意味着您无需费力查找下一行。

7.利用设备功能

在智能手机上,您可以执行各种不同的任务。您可以直接从浏览器拨打电话,发送消息和打开应用程序。

利用您网站上的这些功能,不仅可以增强用户的移动体验,还可以增加转化次数并鼓励采取行动。

例如,在桌面站点上,您可以列出电话号码。在该网站的移动版本上,您可能希望在按钮或可单击区域内列出电话号码,单击该按钮或可单击区域将自动提示呼叫。

这个想法也可以应用于电子邮件地址,在电子邮件应用程序中单击时使用自动填充的收件人打开新消息。

社交媒体图标还可以通过以下方式进行编码:单击后,它们将直接在应用程序中打开,而不是移动浏览器。

所有这些都可以极大地简化访问者与您之间的联系和沟通。

谁做得很好:联合卫理公会

有时,当您想获取信息时,立即与某人打个电话和交谈感觉很好。UMH(我们的客户)意识到了这一点,并利用移动设备功能为其移动站点带来了便利。  

他们所做的就是拿走他们的电话号码,将其放在一个可点击的按钮内,然后将其放在移动设备上的导航下方。

通过添加少量的简单代码,现在在移动设备上轻按该代码时,它将询问用户是否可以拨打该号码。接受后,设备会自动开始通话。无需摆弄笔和纸,或试图记住要拨入的号码。

当今的响应式设计

在2020年,如果您想为用户提供一个经过优化的网站,则所有这些都是强制性的。您的网站访问量中有一半可能来自移动设备;不能通过给他们低于标准的移动体验来疏远他们。

通过考虑这些响应式设计*实践来审核您的网站,您将能够确定您的网站是否真正适合我们所居住的现代移动优先时代,或者是否需要进行一些更改。

也许是经过全面的重新设计才能使您的网站成为响应迅速的超级巨星。还不确定吗?聊聊吧!我们很乐意帮助您弄清楚今年及以后的情况。