How HTML5 can up your digital out-of-home game

August 13, 2018Samantha Brault

In the world of advertising, making an impact can be challenging. With consumers being exposed to hundreds, if not thousands, of ads each day, every brand is vying for their attention. So how do you make your campaign stand out from the crowd? By creating an exciting, eye-catching and contextual digital out-of-home campaign, of course!

Digital out-of-home has been shown to have a greater recall than other mediums, and its ability to leverage technology makes DOOH an ideal option for advertisers – and one of these technologies is HTML5.

HTML5, the latest markup language that combines HTML, CSS and JavaScript,  is now common across the web. It’s a fair assumption to say that you have likely visited a website using HTML5 already today. It’s a tool that enables almost any content, app or media to run without needing additional plugins, and offers immense creative flexibility.

But these creative and technical benefits aren’t only for the web! Read on to see why your next DOOH campaign should be built with HTML5.

Stand out with the creative benefits of HTML5

More and more advertising agencies and brands are becoming familiar with HTML5 and are leveraging the creative benefits of the medium:

1. Customize your creative for each audience

While a simple campaign can do well, a well-targeted one can really pack a punch. With HTML5 content, audience data can be used to change campaign text, images or animations in real-time. Analytics software like Quidivi can be set up to analyze viewers to determine age, gender, expression, clothing, accessories and more, customizing the experience for each person.
This campaign from GMC is a great example of how audience data can be used to create a fun, immersive DOOH experience:

2. Update your content based on contextual triggers

HTML5 content in digital out-of-home

Using HTML5, any data point is your canvas. Live sports scores, current weather, stock market prices, flight details, current traffic, inventory levels and virtually any data that is relevant to your business can be used to modify campaign creatives. Text, images and animations can be updated in real-time to add more context to the campaign.
HTML5 makes for a more exciting DOOH campaign, helps reach your business goals and better inform customers. Burger King did just that in this bus shelter campaign, where the time of day and store location were used to create a simple yet effective dynamic campaign.

3. Allow for interaction with your viewers

When creating a piece of DOOH content in HTML5, you are essentially creating a mini-webpage for your screens. This means that your DOOH campaign can do virtually anything that is possible on the web. It can respond to touch, lead to new ‘pages’ of the campaign, host a video and more. This adds interaction potential that would otherwise have been impossible with predefined content.
This campaign by French bank, Banque Populaire, used data, interaction and great design to engage viewers and encourage them to check out the cost of living in various locations across the globe.

4. Integrate third-party software and feeds into your campaign

HTML5 content in digital out-of-home

With HTML5, it is simple to integrate third-party software and feeds into your digital signage content. Social media can be used to encourage interaction and add a level of authenticity to the campaign. Widgets can be integrated into your content to display relevant information like current news, the weather forecast and more. Wayfinding is another example of an easy integration to guide and inform your customers.
This cute integration for Boise State University used TINT software to stream live user-generated content on their jumbotron and get everyone involved in the game.  

5. Push the limits with cool and creative campaigns

HTML5 content in digital out-of-home

As a whole, HTML5 is simply wonderful for campaign creativity. Combining any of the above points –  all of them if you’re feeling adventurous – in your next DOOH campaign will pique your audience’s interest and make for a truly unique campaign! Even the simplest campaign, like this one from McDonalds, can really pack a punch!

Leverage the technical benefits of HTML5

Not only is HTML5 an ideal tool to stretch your creative muscle, you can also make the most of your campaign with these technical benefits:

1. Create content that is responsive to all screen sizes and orientations

Similar to the way standard web pages adjust to your laptop or mobile phone, one of the most practical benefits of HTML5 DOOH content is that it adjusts automatically to every screen, no matter its size, resolution or orientation. Rather than creating, rendering and uploading various versions of the same content, a single HTML5 file is used for an entire campaign. Text, images and backgrounds automatically resize, preserving the look and legibility of the content, no matter the screen.

2. Make and deploy content changes easily and quickly

Updating text, images or other content is easy and efficient with HTML5 content. Rather than having to manually change each version of the creative, a single edit can be made to the master file. HTML5 is also a great option for networks who want to enable local users, like store managers or office assistants, to make changes to the content. Using templates with limited editing capabilities, the head office can maintain branding and design while without having to micromanage every content change.

3. Share content across all your digital marketing platforms

HTML5 isn’t limited to DOOH, as the same content can be used across a variety of online advertising channels, including mobile and online display. This is ideal for a multi-channel marketing campaign, as content can be quickly adapted for each channel.
However, there are a few additional considerations to be made when adapting an online ad for DOOH, including a viewer’s proximity to the screen and appropriate text size. For example, a small online banner ad might have text across the entire creative. However, this text might be overkill on a bus shelter screen. Your HTML5 developer can easily define a few extra rules for certain screen sizes, ensuring your content is optimal on every mobile, online and DOOH screen.

4. Play your campaign without any special software

Previously, Flash was the standard in creating animated and dynamic content. However, HTML5 does not require any specialized software to display correctly, making it a more viable choice for a DOOH campaign. Some of the most popular web browsers no longer support Flash, including Chrome and Firefox, and Adobe itself has said it will discontinue the software by 2020.

5. Get on board with the new standard in web

HTML5 has quickly risen in popularity in the last few years and has since become one of the standards in dynamic web design. Many developers are familiar with the technology, and for those with less technical skills, animation tools like Google Web Designer are becoming more common and powerful.

Are you ready to get started with HTML5?

HTML5 enables flexibility that was previously not possible in digital out-of-home. With its creative and technological benefits, the sky is really the limit for advertisers and brands to share their stories, and get noticed doing so.

If you’re thinking of using HTML5 for your next marketing campaign, download our dynamic content ebook to get your creative juices flowing.

And for DOOH media owners, it important to ensure you are working with digital signage software, hardware and integrations that are robust enough to support HTML5 campaigns. This will be a strong selling point to encourage advertisers to select your network for their campaign.

HTML5 is also a great option if you have multiple screens on which you want to enable local users, like retail store managers or office assistants, to display custom content. It allows you to maintain brand control on the content without having to manually schedule every message.

Download our ebook to see how Broadsign Publish can help you avoid these 5 common digital signage content mistakes.