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

在移动设备、平板电脑和桌面设备上打开网站上转化率最高的页面。

真的，做吧。我会等的。

你的内容显示得和你预期的一样好吗？

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

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

这可能是个错误。

振作起来，内容营销伙伴。我是来帮忙做一点小调整的——COPE-m。

理解为什么COPE-M是必要的

使用传统的COPE策略，你一次上传一大块内容(定义、图片、描述等。)，CMS将该块拉入(而不是粘贴)到多个可交付成果中。当您更新原始内容时，更新会波及到您的存储库。

作为一种内容策略，COPE内容是优雅的。很有效率。这是合乎逻辑的。它提高了内容的重复利用率，并摊销了您在原始内容上的投资。它适用于文本、音频和视频。

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

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

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

图像不一定是COPE最好的朋友

自从2009年丹尼尔·雅各布森概述了这种内容重用策略的概念和技术方法以来，已经发生了很多变化。COPE仍然是一个坚实的概念，但今天内容是通过多种设备类型分发的。观众也消费更多格式的内容。

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

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

选择多源图像

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

回到我最初的请求——打开你的最佳转换页面，看看它在多台设备上是如何显示的。对你网站上的其他重要页面和图片也这样做。你可能已经在你的分析软件中标记了它们。

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

要确定哪些图像是多源图像，请在多个设备上测试所选页面。拿起一堆设备，找一个设计师、内容战略家或UX人。以客户的方式加载您的内容。如果一个图像看起来被压扁了，把它添加到一个多源图像列表中。

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

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

多屏幕设计

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

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

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

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

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

下面是原始示例的工作原理。这一次，我为每种尺寸拍摄了不同的照片——800、400和200像素宽。当出版时，他们的脸在每个中几乎是同样的大小。

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

这种方法不适合。这不是COPE-M的主要部分。我为自己创造了三倍多的工作。这就是为什么你应该限制这种时间密集型的工作，只有必要的转换内容。

了解多源图像是如何编码的

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

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

• 使用jpeg文件交换格式存储的编码图像文件扩展名
• 使用jpeg文件交换格式存储的编码图像文件扩展名
• 使用jpeg文件交换格式存储的编码图像文件扩展名

现在，每个图像将在到达断点时开始运行:

• 智能手机最大499像素



• 平板电脑最大799像素
• 桌面最低800像素

让COPE-M为您的品牌效力

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

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

你的团队怎么样？你有时会为你的重要图像创建多个版本来适应不同的屏幕尺寸吗？通过在多种设备上测试您的图像，您学到了什么？请在评论中告诉我。