響應式網頁設計的三種內容策略:計劃、優先排序、提煉
已發表: 2015-09-17對於大多數營銷人員來說,“響應式網頁設計”一詞很可能會讓人聯想到網頁開發人員和線框的圖像。 但它應該讓人想起一連串的句子和大塊的文本。
內容是吸引潛在客戶的引擎,然後推動他們完成銷售週期。 響應式網頁設計的主要工作是確保內容易於消化,無論網絡訪問者是使用手機、平板電腦還是台式機。
響應式網頁設計是重新構想內容的機會,以便每句話吸引更多讀者並收集更多線索。
什麼是響應式設計?
首先,了解一下響應式網頁設計的背景知識。 這個概念很簡單——創建一個網站,根據網絡訪問者使用的設備自動優化其移動或桌面設計。 發現網站是否響應的一種簡單方法是:在桌面視圖(以及窗口視圖,而不是全屏視圖)中抓住網站的右下角,然後慢慢將其縮小到智能手機的大小。 如果網站在縮小時轉換為適合移動設備的視圖,則它是響應式的。 如果它只是縮小成一個難以閱讀、滾動和捏合的網站,那麼它就沒有響應。
響應式設計始於對移動不僅僅是相同內容的另一個平台的理解。 移動設備的迅速崛起改變了內容的形態、組織和大小。 而且,人們對移動內容的期望完全不同。
這些期望貫穿於公司內容活動的所有組成部分——無論是電子郵件營銷、社交還是網絡內容。 您網站的內容必須響應迅速並針對移動設備進行優化,但您的電子郵件營銷模板和社交活動也應如此。
為什麼需要響應式設計
如果您沒有響應式設計,那麼您需要它。 谷歌正在懲罰沒有響應式設計的公司的搜索排名。 移動網絡流量無處不在,所有網站都需要從同一網站智能地為移動和桌面用戶提供服務。
幾個快速統計數據:移動驅動了 41% 的所有付費搜索點擊和 31% 的所有付費搜索支出 (Merkle RKG) 和 53% 的所有電子郵件打開 (Litmus)。 鑑於移動趨勢,這些數字不會很快放緩。
創建真正針對移動設備優化的內容的結果可能是驚人的。 Act-On 發現響應式設計帶來的銷售線索增加了 93.5%。 還有哪些其他簡單的解決方案可以立即使您的銷售線索增加一倍?
為響應式設計優化內容的三個步驟。
- 跨部門計劃
響應式設計不僅僅是讓數字團隊在 Web 開發上鬆懈的問題。 這是撰稿人、設計師和戰略家之間的團隊合作。
有效的規劃將確保內容、編碼和設計完全吻合,使您的網站成為產生潛在客戶的機器。 從一開始就確定基礎知識:網絡訪問者資料、訪問者動機和期望的結果。 誰在訪問您的網站? 為什麼? 一旦他們到達您的網站,您希望他們做什麼?
從一開始的跨部門協作將確保該項目在花哨的設計與有條理和有效的內容之間取得平衡。

- 在清晰的層次結構中對內容進行優先排序
確定內容的優先級對於響應式網頁設計至關重要。 當桌面瀏覽器頁面的實際空間縮小到手持大小時,內容就會變得混亂。 一個寬闊的多欄網頁被壓縮到一個單欄的移動頁面中。 如果網站設計不當,一些最重要的內容可能會出現在頁面底部,需要很長(太長)的滾動才能到達。
為內容創建分配優先級將創建一個結構,確保您最重要的內容上升到頂部。 通過根據層級識別內容來創建內容層次結構。 這種識別最好出現在營銷或文案團隊中,並清楚地傳達給設計師和項目經理。 這種協作將導致一種為移動查看器保留內容層次結構的設計。
將內容縮小到移動大小
就像軟件或操作系統用戶期望功能性和直觀的設計一樣,今天的讀者期望內容被專業地製作成簡潔的塊。
將您的內容策略視為類似於讀者的 UI 或 UX。 就像用戶體驗設計需要時間、精力和迭代一樣,內容應該以讀者為中心進行多次設計。 隱藏結構將對可用性(或內容的可讀性)產生巨大影響。
如果在最終草稿之後您仍然向讀者展示大量灰色文本,則您需要進行另一輪內容提煉。 繼續分解內容,直到剩下要點、簡介和簡潔的文本,這些文本被照片和視頻等多媒體產品分解。 考慮將大量數據的複雜文本塊轉換為信息圖,其中文本和視覺效果的配對可以將數據轉換為易於理解的視覺效果。
垂直分塊——將文本分成可以並排放置的垂直塊,每個塊都有自己的標題和照片——允許讀者橫向掃描並逐個閱讀垂直塊。
這個一口大小的內容傳遞系統比灰色文字牆更具視覺吸引力,向讀者發出信號,表明作者和設計師已經完成了識別個人想法的工作,將它們製作成緊湊的文本,並以簡潔的方式呈現它們方式。
響應式設計不僅僅是添加到已經太長的待辦事項列表中的一件事。 這不是煩惱或低優先級。 這是一個在一個項目中完善內容、改進網頁設計並取悅移動買家的機會。
~ 想學習響應式網頁設計的所有技巧,包括管理開發流程、估算成本和移動優先嗎? 查看整個網絡研討會響應式設計:網頁和電子郵件的 10 個注意事項。