使用 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 之类的平台如何帮助制作出色的广告，请联系我们。