Not all Digital Signage software is equal. Not all Digital Signage hardware is equal. But which combo is right for your network?

One key differentiator in your selection process should be HTML5 playback quality.

Will your software play that animation buttery-smooth, or stutter painfully along?

The issue is NOT about confirming HTML5 support under the spec sheet for the software (nearly ALL software today do). The issue is how well it can play the content.

Many software only support older versions of Chromium (or worse, Internet Explorer 😱), meaning some CSS or Javascript features needed to make your animation work, won’t be supported. Add to that a poor hardware platform and even supported features w. wl.l. wil.. will.. jitter in their playback.

If you plan to run HTML5 content on your network, running a complete HTML5 design/build while testing on multiple software/hardware contenders will make your selection extremely clear.

Let’s dig into some best practices and tips for creating and optimizing HTML5 Digital Signage content to make the test as beneficial as possible.

Collaborate from the Start

Have your developers and designers collaborate early in the development process. Your developers should be more in touch with what is “possible” in terms of software & hardware constraints. Also, if a developer ever gets “stuck” trying to implement a tricky part of an animation where there isn’t an obvious way to improve performance, a designer may be able to offer an effective alternative.

Test it Live–Early and Often

The best way to test your proposed hardware/software solution is to develop your HTML5 content while frequently testing playback on the proposed hardware/software (early and often)--not the personal PC/Mac browser of your developer. Playback quality and animation capabilities will not be the same.  In the end, it doesn’t matter if it plays back great on your developer’s PC, it matters how it looks out in the field. The sooner you can identify what animations will need to be optimized or design changes that need to happen by pushing some live code to the live setup, the less time will be wasted.

Our development team has rigged up a mobile testing lab allowing developers to test their animation code on a variety of players. As Zack is showing here, a bit of back-and-forth is always involved in getting our animated content to look and perform just right!

INSIGHT

Screenfeed’s product development process plans on our motion design team concepting amazing animations in After Effects that simply will not render on most digital signage players.  Don’t sacrifice the creativity of your motion designers for fear of software/hardware limitations—you may be surprised by what you CAN do.

Use the Right Tools

Chrome and/or Firefox Developer Tools are a powerful way to monitor the performance of your HTML content if you know how to use them.  They will help your development team quickly understand which parts of your code are causing performance issues — saving precious hours of “trial and error” troubleshooting.

TIP

Are some parts of your animation choppy while other parts are smooth? If so, there’s most likely a problem to solve in your code. Using the performance monitors above can help but there may be times when you’ve done the best you can to iron out code issues. All that is left is to modify your design concept to accommodate your hardware constraints.

Get Feedback

Different people will notice different things during content playback. Some folks have a really keen ability to spot when things aren’t lining up right in a design. Some are able to see animation jitters more easily. It’s almost always helpful to have numerous people review the content.

Test for Memory Leaks

Failing to test long-running content for a long time may come back to haunt you. Some content needs to be on 24/7 and needs to refresh data in the background. If you don’t test this content for long stretches of time you’ll probably miss some memory leak issues.

TIP

Read anything you can from Paul Lewis, Addy Osmani and Paul Irish (all Google folks). They put out some of the best writing on the topic of web performance issues.

How do you know which hardware/software combo is best?  

The less you have to simplify the animation to accommodate a particular hardware and software setup in order to produce a smooth playback, the more likely you have found a great combo to build your network with.