如何確保跨設備的最佳視覺體驗

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/內容營銷研究所的封面圖片