COVID-19 Update

HTML5 Content Creation: What You Need to Know

Learn more about the tools, human resources, potential pitfalls and other issues for capitalizing on an HTML5-based ecosystem to create reliable and engaging digital signage.

CI Staff
Photos & Slideshow
View the slideshow View the slideshow

The rise of HTML5 as the modern web standard is impacting digital signage similar to the way it has changed the face of web sites and browsing. The challenge with the buzz-term HTML5 is that it isn’t actually a standard, but instead it is a collection of front-end coding languages.

Starting with the basics, here’s a brief overview of what’s involved in HTML5 and how digital signage integrators can use it to their advantage.

What are These Languages?

You can’t talk about HTML5 without talking about the underlying languages of JavaScript, jQuery and CSS3. JavaScript is the standard front-end programming language of the web and allows complex functions to take place on web pages. jQuery is a plugin set for JavaScript which helps developers handle complex tasks in far less code. CSS3 is the visual language of HTML5, defining how web applications look and feel. Typical HTML5 apps use all three in conjunction with one another.

Besides this, HTML5 is the standard markup language of the page or application itself. The actual HTML5 code of an app is sometimes very basic, with most of the heavy lifting handled by the other technologies.

Challenges of HTML5 for Digital Signage

One unique hurdle for this ever-growing technology is that any media player manufacturer or CMS (content management system) company can slap the HTML5 logo on their product, but they may not have the most modern rendering engine. This means that the HTML5 you create for your web browser may not work on your digital signage media player.

Related: Are We Facing an App Revolution?

The software inside the media player can be, and sometimes is, very out-of-date, and programming techniques you use today won’t work. Worse, some of the tools to make your job easier simply won’t play back on older hardware. 

Web developers have been dealing with this for years as they find that their code looks different depending on the browser, like Internet Explorer or Chrome. With digital signage, the complexity is that each media player and CMS essentially acts like a different browser, with its own unique way of presenting HTML5 content.

Maximizing Human Resources

As with any creative project, the people doing the work make or break the project. Because a standard visual or graphic designer might not have the complete skill set for creating HTML5 content, the best person for the job is typically a front-end web developer. This person is equal parts designer, animator and coder.

Typically, though, front-end web developers don’t have direct experience in digital signage and will have to unlearn a lot of web tricks that don’t work when you don’t have a person using a keyboard/mouse/touchscreen.

Enlisting Appropriate Software Tools

Let’s take a look at one tool in particular. As part of its Creative Cloud, Adobe makes its Edge suite for animation and coding rich HTML5 experiences. It’s a tool that offers a similar workflow experience to its After Effects motion graphics suite, but instead outputs HTML5 code instead of video.

This allows designers to rapidly make rich animated or interactive experiences with less actual software coding. However, this is where the challenges may pop up — Adobe Edge was built for modern web browsers, and many digital signage media players simply aren’t modern.

Related: Enplug’s Intuitive Software Disrupts Digital Signage

It’s common that code generated from Adobe Edge simply won’t play back on your digital signage media player or CMS, regardless of the manufacturer claiming it supports HTML5.

Adobe Edge includes a direct workflow with Adobe’s creative tools, like Photoshop and Illustrator. This allows designers to create designs in their standard toolsets, and then proceed into creating experiential content. When your media player supports Edge, a lot of great opportunities become available for rapidly deploying amazing animations.

CoronaVirus Update