如何确保跨设备的最佳视觉体验

2022 年 8 月 22 日更新

在三种设备（移动设备、平板电脑和台式机）上打开您网站上转化率最高的页面。

真的，做吧。 我会等。

您的内容是否如您预期的那样显示？

许多营销人员会发现事实并非如此。 用户体验和消息传递的一致性并不令人满意。 有时，它是彻头彻尾的可怕。

你是怎么来到这里？ 毕竟，贵公司投入了大量资源来发布内容。 您甚至可以通过采用 COPE 方法来最大化这些内容资源——创建一次，到处发布。

这可能是错误的。

振作起来，内容营销人员。 我来这里是为了帮助进行轻微的调整——COPE-M。

了解为何需要 COPE-M

使用传统的 COPE 策略，您只需上传一次内容块（定义、图像、描述等），CMS 就会将该块提取（而不是粘贴）到多个可交付成果中。 当您更新原始内容时，更新会波及您的存储库。

作为一种内容策略，COPE 内容是优雅的。 这是有效的。 这是合乎逻辑的。 它增加了您的内容的重用性并摊销了您对原始内容的投资。 它适用于文本、音频和视频。

但 COPE 并不是您内容发布的灵丹妙药。 现代浏览器重排您的文本，但图像按比例缩小以适应您的设备。 在桌面上看起来很棒的图像在移动设备上可能无法识别。 （你的观众不喜欢这样，谷歌也不喜欢，这会损害你的内容排名。）

COPE 是一个很好的起点，但需要一种更分层的图像控制方法。 我称之为 COPE-M——创建一次，主要是到处发布。 COPE-M 可以成为良好用户体验和出色用户体验之间的桥梁。

对您的内容发布策略采用 COPE-M 方法可以提升您的用户体验、提高一致性，并通过更新的内容改进您的搜索引擎优化 (SEO)。

图像不一定是 COPE 的好朋友

自 2009 年 Daniel Jacobson 概述此内容重用策略的概念和技术方法以来，发生了很多变化。 COPE 仍然是一个可靠的概念，但今天的内容是通过多种设备类型分发的。 观众还以更多格式消费内容。

在多个浏览器中查看的单源文本仍然有效，但对于图像来说这是一个问题。 文本可以与其外观分开。 级联样式表使文本的外观（例如字体大小和列宽）可以在不更改原始源的情况下进行更改。

图像没有那么可塑性。 渲染的图形（例如 JPEG、PNG 文件）不能与其外观分开。 单一来源的一种尺寸并不总是适合所有人。 在桌面上看起来不错的信息图在 iPhone 上可能无法阅读。 它让观看者捏着、放大、眯眼和抱怨试图看到它。

选择要多源的图像

在内容管理系统变得足够智能以自动为每台设备上的每张图像提供理想的观看体验之前，您必须考虑何时应对以及何时不应对您的图像。

回到我最初的请求——打开你最好的转换页面，看看它在多个设备上的显示方式。 对您网站上的其他重要页面和图像执行此操作。 您可能已经在分析软件中标记了它们。

提示：将您的页面选择范围缩小到那些从移动设备获得大量流量的页面。

要确定要多源的图像，请在多个设备上测试选定的页面。 拿一堆设备和一个设计师、内容策略师或 UX 人员。 以客户的方式加载您的内容。 如果图像看起来被压扁，请将其添加到要成为多源的图像列表中。

提示：不要只看图像是否显示。 仔细看看它是如何显示的。 如果用户必须捏合和缩放才能查看所有图像，COPE 可能不是最好的方法。

与所有与内容相关的团队分享结果，包括内容策略、设计、内容工程和用户体验，他们应该知道您网站的图像如何加载。

多屏设计

由于图像在高端和低端被妥协以适应移动设备屏幕，上传多张图像并告诉系统在哪个断点处使用每张图像是值得的。

断点是系统停止拉取一个图像并拉取一个更适合查看设备的版本的点。 断点由设备宽度决定，因为用户可以垂直无限滚动但不能加宽屏幕。

此图显示了三个可能的断点：320 像素用于手机，720 像素用于平板电脑或大型手机，1,024 像素用于笔记本电脑：

在这个例子中，我的两个女儿和我们的狗的原始图像是 800 像素宽。 它在以全尺寸渲染的桌面上看起来很棒（图像左侧）。 在平板电脑大小的屏幕上，原始图像会丢失细节，从而减少其影响。

如果此图像是图表或信息图，则在较小的屏幕上可能会变得难以辨认。 这就是为什么你应该付出额外的努力来采购多个图像。 这种方法被称为“响应式艺术指导”。 这是一种浏览器技巧，可让您更好地控制图像向用户显示的方式。

这是原始示例的工作方式。 这一次，我为每种尺寸拍摄了不同的照片——800、400 和 200 像素宽。 发布时，他们的脸在每个中的大小大致相同。

在 800 像素水平版本中，一个女儿和我们的狗一起坐在楼梯上，而另一个女儿则站在栏杆上，瞥见背景中的邻居。 在 400 像素的垂直版本中，两个女儿都坐在台阶上，狗在其中一个旁边，两个栏杆都可见。 在 200 像素竖版中，每个女儿和狗都有自己的台阶，只能看到一个栏杆。

这种方法不能应付。 它不是 COPE-M 的主要部分。 我为自己创造了三倍的作品。 这就是为什么您应该将这种耗时的工作仅限于基本的转换内容。

了解如何对多源图像进行编码

虽然本文不是关于如何编写此类代码的教程，但您可能会发现看看它的样子很有用：

在“图片”标签之间，我指定了三个源图像，它们是根据图像宽度命名的：

• jpg
• jpg
• jpg

现在，每个图像都会在到达断点时启动：

• 智能手机 499 像素（最大）
• 平板电脑 799 像素（最大）
• 桌面 800 像素（最低）

让 COPE-M 为您的品牌服务

大多数数字资产管理 (DAM) 系统可以创建不同大小和比率的单个图像的多个输出。 如果您无法重新拍摄照片，请裁剪它们以确保在所有屏幕尺寸上都能获得最佳体验。 这可能需要大量工作，因此不要要求您的设计师或开发人员重新设计您网站上的每张图片。 专注于影响。

如果 SEO 是重中之重，请在实施多图像方法之前咨询您的 SEO 专家。 谷歌的算法可能会惩罚不能在桌面和移动设备上提供完全相同体验的网页。 即使您正在为人类提供更好的体验，Google 爬虫可能还不知道这一点。 当然，如果更多的人因为更好的图像体验而发现你的页面值得他们花时间，谷歌会喜欢的。

你的团队呢？ 您是否有时会创建多个版本的重要图像以适应各种屏幕尺寸？ 您从跨多个设备测试图像中学到了什么？ 在评论中告诉我。

Joseph Kalinowski/内容营销研究所的封面图片