使用 HTML5 展示廣告 – 如何製作自適應廣告

在本文中，我們解釋了為什麼 HTML5 響應式橫幅廣告是所有數字廣告商的必備品。 從設計師到數字專家，從代理商到內部團隊，HTML5 展示廣告現在是默認的橫幅格式。

特別是，隨著越來越多的設備和平台需要迎合，能夠適應觀眾的行為至關重要。 如果您的橫幅廣告不兼容、無法響應屏幕尺寸的變化或在移動設備上工作，那麼您就有麻煩了。 HTML5 響應式展示廣告為您的品牌在網上蓬勃發展提供了所需的靈活性和技術。

具體來說，HTML5 為數字營銷人員提供了以下能力：

• 快速擴展到多種格式和尺寸
• 擁有對設計的最終控制權
• 輕鬆創建廣告變體和翻譯
• 量產富媒體橫幅
• 利用視頻和移動顯示的增長
• 使用數據饋送動態更新橫幅
• 跨團隊、內部有效協作

是的，構建響應式展示廣告從未如此重要，尤其是在今天，您精美的展示廣告比以往任何時候都更有可能在移動設備上被觀看。 根據 Bannerflow 從 2020 年開始的研究，移動展示廣告在一定程度上超過了桌面廣告。 如今，近三分之二的展示廣告瀏覽量來自歐洲的移動設備。 此外，移動用戶每天在智能手機上花費超過四個小時——這是數字廣告商不能忽視的參與度。 靜態、gif 和 flash 橫幅的舊世界早已結束——或者至少應該如此。

為什麼要製作 HTML5 展示廣告？

需要更多理由來製作 HTML5 展示廣告？ 首先，我們的遊戲是關於轉換的，而且是有競爭力的。 每個人都渴望得到關注——如果沒有被吸引住，遊戲就結束了。 HTML5 通過富媒體和各種廣告格式提供無與倫比的設計機會。 如果您沒有遵循橫幅設計的最佳實踐，您可以打賭競爭對手會這樣做。 最重要的是，展示廣告的覆蓋面一直在增長——尤其是在程序化方面。

以英國正在發生的事情為例。 根據 eMarketer 的一份報告，2020 年，英國廣告商在程序化廣告上花費了 67.9 億英鎊。 儘管受到 Covid-19 大流行的影響，程序化展示廣告支出現在佔英國所有數字展示廣告支出的 92%。 而這一比例預計到2022年將達到94.5%，佔比90.1億英鎊！ 通過 HTML5 製作更好的廣告以充分利用這種增長需要成為優先事項。

此外，隨著企業現在在其所有數字營銷中採用“移動優先”思維，確保您的網站、登錄頁面和橫幅響應是最低要求。 HTML5 允許您創建移動就緒、響應迅速且功能豐富的橫幅。 您無需為桌面設計靜態廣告系列，然後單獨縮放每個橫幅，而是可以使用 HTML5 進行縮放！

廣告早已走向移動，HTML5 是製作您需要的橫幅的方式。

與 HTML5 有什麼關係？

在 HTML5 被普遍採用之前，在不同設備上投放廣告活動是一項艱鉅的工作。 為橫幅廣告可能出現的所有不同屏幕手動製作橫幅廣告是一項艱鉅的任務。 HTML5 是製作橫幅廣告的最佳方式，就像它用於響應式網站一樣。

HTML5 是超文本標記語言的最新更新。 它是用於描述網頁內容和設計的標準語言，包括響應式網頁。 HTML5 在在線廣告中很重要，因為它提供了跨設備運行橫幅廣告的靈活性。

它通過適合所有平台的橫幅為發布商和廣告商提供了創建適應性廣告活動的方法。 不像，說使用 Flash（哦，多麼古怪），這意味著您不必創建數百個版本的同一廣告。 減少廣告版本的數量也將減少錯誤的可能性並增加您的橫幅製作。

在 HTML5 橫幅廣告中，文本、圖像、視頻和 JavaScript 可以像任何網頁一樣進行調整——它們是可編輯的。 HTML5 橫幅廣告也會動態優化，因此廣告在任何地方看起來都很完美。 更重要的是，HTML5 橫幅廣告在移動設備上運行良好！ 在沒有功能損失的情況下，這意味著更容易接觸到更廣泛的受眾。

有兩種方法可以構建 HTML5 橫幅

從本質上講，您現在可以通過兩種不同的方式製作在線橫幅廣告。

首先，您可以自己手動編碼橫幅廣告以使其具有響應性。 是的，網上有很多教程和模板向您展示如何做到這一點。 但是，這個過程很慢，這意味著您需要具備良好的 HTML5 和 CSS 知識。 另外，當然你也需要有設計師的閃光點！ 難得的組合。

或者，您可以使用諸如 Bannerflow 之類的創意管理平台，該平台具有適合創意製作自動化的廣告創建者。 這些有助於為您處理編碼 - 只需單擊一個按鈕即可使您的所有橫幅響應。 另外，正如我們將發現的那樣，它們提供了大量利用 HTML5 的內置方法。 這些範圍從開發很棒的視頻橫幅到包含數據饋送的動態橫幅。

現實情況是，創意管理平台減少了構建和擴展活動所需的時間，同時將 HTML5 橫幅製作的重點牢牢地放在了設計上。

創建 HTML5 響應式展示廣告

創建 HTML5 響應式橫幅廣告相對簡單。 然而，像所有數字橫幅一樣，也有規則和最佳實踐需要遵循。 在構建 HTML5 展示廣告時，值得考慮：

檢查您的 HTML5 橫幅尺寸

創建 HTML5 響應式佈局時，要求元素具有可變寬度，類似於橫幅廣告必須遵循的約定。 您也可以使用您喜歡的任何高度，但這並不意味著您的廣告將保持在該高度。 製作響應式橫幅時的最佳做法是使用與傳統橫幅尺寸相同的高度。 這是為了保持與發布商和廣告網絡的兼容性。

始終針對廣告網絡和發布商提供的特定尺寸設計（或修改）HTML5 橫幅。 例如，以下是 Google Ad Manager 提供的尺寸列表。 如果您的橫幅廣告基於這些尺寸，則可以確保大多數設備在發佈時都能正確顯示您的廣​​告素材。

圖片、橫幅設計和 HTML5

在製作 HTML5 響應式橫幅時，您對設計和圖像的控制是無與倫比的。 消息幀和動畫很容易控制。 但是不要貪心！ 您的橫幅很可能只對查看者可見 5 到 15 秒 - 因此請充分利用這段時間並專注於您的設計選擇。

這就是事情變得有趣的地方！ 使用某些創意管理平台（如 Bannerflow）時，HTML5 橫幅中使用的圖像會自動調整和壓縮。 這意味著橫幅的圖像大小和重量經過微調以適應廣告網絡。

然而——即使擁有所有這些驚人的技術——值得嘗試將任何圖像保持在以像素為單位的最大尺寸為 4000×4000（寬度和高度）。 另外，如果超大原始文件超過 4000×4000，最好將它們編輯下來以獲得更好的效果。 事實上，最好的做法是盡可能使用最小的圖像。 這將有助於進一步減輕橫幅的重量。 圖像越小越好（但當然不會降低質量！）。

對於您在橫幅中使用的圖像類型，選擇最佳圖像格式也是值得的。 例如，JPEG 應始終用於背景。 如果它是透明的或對象，則使用 PNG。 對於徽標類型和繪製的對象（不包括照片） SVG——文件大小較小，但在擴展時能夠保持清晰度。 圖像文件類型的組合通常會提供更好的結果。

但請記住，有些事情是不言而喻的！ 例如確保您的主圖像完全聚焦。 同時，乾淨、簡單的設計總是最有效。

縮放、版本控制和翻譯

即使在創建自動優化的 HTML5 響應式橫幅時，您也需要創建盡可能多的版本，以覆蓋盡可能多的人。 橫幅尺寸越大越好。 根據媒體的類型，您擁有的橫幅越多，您贏得任何程序化競價的可能性就越大。

顯而易見的最佳實踐是在縮放和創建 HTML5 橫幅的多個版本時使用高效且快速的創意管理平台和廣告創建者。 更好的是，如果您可以復制、翻譯和製作展示廣告的變體，那麼在多個市場工作會容易得多。

切換 HTML5 橫幅中的內容也很容易。 此外，能夠在幾秒鐘內復制和擴展廣告系列，意味著在不同的日子安排不同的變體要容易得多。 簡而言之，HTML5 響應式橫幅非常適合用於自動化服務，例如程序化服務。

富媒體橫幅

如果沒有 HTML5，就不會有富媒體橫幅。 製作與觀眾互動的橫幅是不可能的，這些橫幅是響應式的，並且可以跨多個設備工作。 富媒體廣告可提高參與度，對您的品牌有好處。 從註冊表單、搜索欄到橫幅內嵌遊戲 HTML5 使數字營銷人員能夠以多種方式吸引觀眾。

但請注意如何使用富媒體橫幅。 它們的有效性很大程度上取決於您選擇使用的橫幅格式。 不要試圖添加太多信息，或者讓它過於復雜。 交互應該不超過一兩個步驟； 嘗試專注於一件事，讓觀眾更快速、更輕鬆。

例如，在線表單應包含所需的最少交互——不再是，它從橫幅開始，到登錄頁面結束。 一個好的 HTML5 富媒體橫幅廣告活動的關鍵是它必須認真執行並且設計直觀。

今天，您可以使用諸如能夠直接為橫幅中的產品付款等功能。 或者如在聊天機器人上方的展示廣告中所見——借助富媒體橫幅，未來的應用程序將無窮無盡！

視頻和 HTML5 展示廣告

在展示廣告中，視頻的使用一直在增長。 僅在歐洲，在線視頻顯示的速度就比非視頻顯示快三倍半。 在您的 HTML5 展示廣告中使用視頻有助於讓您看起來更真實並與觀眾建立聯繫，這反過來又有助於轉化。 HTML5 還使得創建使用視頻的橫幅易於批量生產。

通過使用 HTML5 橫幅，您在如何使用視頻方面有很多選擇。 在基本層面上，視頻可以用作橫幅的背景。 或者更有創意的是，它可以成為橫幅動畫的一部分。 例如，以號召性用語 (CTA) 框架結尾的預告片。

製作視頻展示廣告很容易

使用視頻時的一些重要提示是始終確保您的徽標在 HTML5 視頻橫幅中可見。 從您的主要信息開始，並確保視頻重複。 嘗試在視頻中也最多包含 1-3 個階段：吸引觀眾的注意力，加深參與度，並始終以 CTA 結束。 始終將您的視頻設置為“靜音”並啟用字幕（如果需要）。

HTML5 與良好的創意管理平台相結合，應該意味著也不需要編碼。 這意味著很多想法都可以成為現實，而無需在橫幅後端做任何事情。

此外，人們在手機上觀看視頻橫幅的數量越來越多。 因此，確保您擁有可移動設備的響應式 HTML5 視頻展示廣告是輕而易舉的事情。

此外，如果您可以選擇以 mp4 格式導出 HTML5 視頻橫幅，則可以在社交網絡上上傳這些視頻廣告。 內部團隊可以輕鬆製作視頻廣告、重複使用 HTML5 資源並擴大其數字廣告系列的覆蓋面。 以下是 Bannerflow 中的廣告創建者 Creative Studio 如何讓一切變得如此簡單：

創建移動 HTML5 響應式橫幅廣告

在製作移動 HTML5 響應式展示廣告時，首先要使用正確的格式。 與其將桌面橫幅縮小到移動尺寸，不如專門為移動設備設計廣告。 在某些圈子中，鑑於移動設備的普及和參與度，以移動設備為先設計所有活動被視為前進的方向。

值得記住的是 HTML5 橫幅的比例會縮放以適應任何屏幕。 但是，在設計橫幅時考慮到選定的移動格式仍然是最佳做法。

移動橫幅設計要考慮的一個方面是確保所有副本都是可讀的。 是的，這包括字體大小，但您是否也考慮過您的信息？ 您可能需要向移動 HTML5 橫幅添加更多框架，以表達與桌面橫幅相同的信息。 同樣，這取決於您使用的格式，但請盡量避免將更多內容壓縮到單個幀中。

此外，放下大量副本並專注於圖像的影響。 此外，鑑於屏幕尺寸，您的廣告必須引人入勝且不具侵擾性。 數字廣告早在很久以前就開始移動了——去你的消費者所在的地方，為他們製作很棒的 HTML5 響應式橫幅。

動態廣告素材

如果沒有 HTML5，您將無法創建和維護引人注目的動態、數據驅動的橫幅廣告。 限制自己只製作最基本的橫幅，你會發現自己被限制在一條信息上。 同時，競爭對手可能會提供 2000 個。是的，真的：通過一致的數據饋送更新和自動化。 一個 HTML5 響應式橫幅可以在靜態生成一條消息的時間內傳遞 2000 條消息。

如前所述，HTML5 的美妙之處在於它為您提供了完全的控制權。 連接到數據饋送的橫幅也是如此 - 但更重要的是：您可以選擇實時更新橫幅。

個性化您的自適應展示廣告

例如，以 HTML5 橫幅廣告系列為例，展示電子商務商店中最受歡迎的商品。 當一件商品售罄時，這會自動反映在動態橫幅中顯示的產品列表中。 這對觀眾和電子商務業務都非常有用！

iGaming 公司也可以使用相同的想法。 例如，在比賽期間，賠率可以在橫幅內動態變化。 您可以將多種不同類型的個性化廣告系列與基於 HTML5 的動態廣告素材結合使用。

此外，最佳做法是實時更新產品 Feed。 畢竟，您需要批判性地考慮數據顯示的格式。確保您在橫幅中使用的任何數據都能被觀眾理解是關鍵； 這可以從日期和價格到賠率。 這也可能因市場和語言而異。 例如，美國人寫日期的方式與瑞典人寫日期的方式不同。 或者英國人和瑞典人理解投注賠率的不同方式。

最後的建議是：像 Creative Studio 這樣的優秀廣告創建者或創意管理平台可以在處理數據饋送時輕鬆設置過濾器和排序選項。

後續步驟：構建您有史以來最好的響應式橫幅廣告！

希望到現在為止，您已經意識到構建 HTML5 響應式橫幅廣告是滿足您的數字展示廣告需求的最佳選擇。 憑藉如此多的靈活性和跨多個屏幕和平台的可視性，沒有比橫幅更好的技術了。 更好的廣告、更好的設計、更好的指標——一切皆有可能。

最後，借助創意管理平台，您可以為所有主要廣告網絡（以及社交網絡）製作活動，使用一個是提高內部團隊生產力的一種簡單方法。 花幾天（甚至幾週！）手動複製和擴展廣告系列不再是一種選擇。

在多個市場、實時優化和透明度的時代，採用 HTML5 正在幫助營銷人員實現他們渴望的廣告效果。

如果您有興趣了解 Bannerflow 之類的平台如何幫助製作出色的廣告，請聯繫我們。