Design | 08 MIN READ

8 ways to create perfect HTML5 Christmas banner ads

Creating perfect Christmas banner ads should be easy. It’s something those of us in the display advertising business strive for! But every year there are plenty of ads that fail. They either don’t take advantage of advances in display advertising, or are poorly designed and executed.

Christmas is the time of year when a UK department store can splash £7m on a Michel Gondry directed TV campaign. But if the ad fails to lift sales then what’s the point? The good news is that with online display you’re in the driving seat when it comes to creating, analysing and optimising your advertising.

Here are our 8 tips on how to create awesome HTML5 Christmas banner ads…

1. Think Christmas, think imagery then, duh!

Let me be blunt: use imagery, patterns, and colours related to Christmas. Sounds simple but you want viewers to identify that your banner is part of a unique campaign. Use colours such as red and white, which are typical of the holiday season. As well as dashes of green or gold depending on your brand. For example, white and gold might be perfect for an upmarket clothing retailer.

Another tip is to always use high-resolution imagery. Low-resolution imagery looks cheap – especially when scaling – and can hurt your brand’s image. For your perfect Christmas banner ads use positive backgrounds such as wintery locations and Dickensian interiors. Plus, images and symbols of snowflakes, presents under trees, open fires, and families, etc. Nothing too tacky though. To show how this can be done, I’ll provide examples of best practice through a fake brand – “Sound of Sweden” . (It’s an e-commerce shop that specialises in audio equipment – perfect holiday gifts!)

Adding an image to Christmas banner ads

Think about how you can quickly adapt your Christmas banner ads too. For example, if your brand runs a Green Monday change the banner so green replaces red as the main colour. Or black becomes the prominent colour for a Black Friday push, etc. Remember to be consistent, use the same images and patterns for your Christmas campaign but make banners appropriate for specific shopping days by adjusting colours.

2. Christmas imagery is good but don’t obscure your brand

The key to a strong Christmas campaign is to make your brand recognisable, and instil a festive feeling in your banner! In theory it’s easy. Make your ad totally unique, while still keeping a strong seasonal theme. But be warned! The last thing you want to do is overload your Christmas banner ad with holiday imagery that blocks your brand’s message. Instead, play on your  brand’s strengths, and showcase the style of your brand in your banner design. Highlight the elements of your branding that connect with Christmas.

For example, there are particular visuals that are synonymous with the days themselves, so use them in a unique and interesting way. Think about Coca-Cola’s Christmas ads across all channels during the holiday season. The simplicity of the white images and logo on the red background is not only Christmassy but is instantly distinguished as an advertisement from Coca-Cola. Find your brand’s niche and reflect it in your banner design.

3. Does your banner stand out from the crowd?

Today it’s a given that using HTML5 your banner ads will be responsive, and dynamically show a scaled version of your ad. But just like a web page this means your Christmas banner ad’s text, images, video and javascript is adjustable. Which begs the question why not make it more special? What can you add to make it stand out? Yes, it may display across multiple devices but what’s to stop a viewer from ignoring it?

Well, there are ways of doing this and it means harnessing the power of HTML5. Using javascript it’s possible to add effects and mini-animations that grab the viewers’ attention. For a Christmas banner ad this could include everything from a flickering fire, to snow falling, and even fairy dust, as demonstrated in the ad above. Plus, by using even the most basic of HMTL5 animations, and slides, it’s possible to tell a mini narrative within your ad – ending of course with a clickable CTA. If you have access to a coder – or pre-coded widgets – then experiment and sees what works best for your brand for your latest Christmas campaign. But remember less is more! Be careful not to annoy the viewer with poor animation.

4. Is the banner design appropriate for the product?

Think about it for a second. You see a banner for a Caribbean cruise and the ship is covered in photoshopped snow. Pretty unconvincing right? Or confusing… How? Well, those of us in Northern Europe can tell you all about Winter Cruises, better yet there’s an entire industry taking people around the Antarctic. The lesson is: make sure your Christmas offering and design make sense together.

Returning back to the banner for “Sound of Sweden”, let’s say the brand wants to focus on cordless headphones, instead of portable speakers. Headphones tend to be associated with movement and activity, so placing them in stationary space doesn’t work. The lesson is to change the banner design to make it more appropriate.

As you can see the video in the ad is energetic and wintery. But it’s still connected to the idea of giving presents – an appropriate Christmas banner for headphones.

5. Use video in Christmas banner ads

Using video in your Christmas banners can help your campaign stand out. Display advertising that uses video creates dynamism, and grabs the viewer’s attention far more than a static banner. Across Europe, using video within display advertising is multiplying three-and-a-half times faster than non-video display. It now accounts for one fifth of the total display market. The truth is if you’re not using video within your ad then your competitor probably is.

There are many ways of using video in your HTML5 Christmas banner ads, not all are obvious. One way is to use a video as background. For example, you may want the viewer to focus on the products of your e-commerce business. These could be dynamically generated in the foreground, while in the background, a video sets a scene. In particular, a wintery and cosy scene is ideal for Christmas. Think log fire burning, candles flickering, Northern lights, or even a cottage billowing smoke in a cold landscape.

Winter video for Christmas banner ads

But what about if you want to grab the viewer’s attention that little bit more, or even link to your Christmas TV spot? You could easily integrate a campaign across channels using video. Simply embed into the narrative of animation. Adding video to your banner should be easy and relatively pain free too. Try to use a creative management platform that offers you the ability to add video to Christmas banner ads without the need to code.

6. Is your perfect ad mobile ready?

Stop, everything. Seriously, if you’re not contemplating scaling out your perfect Christmas banner ad to mobile formats then you should be. The latest IAB Europe report into display advertising shows that nearly all growth in online ad spend was on mobile. Mobile display grew by 45.9% while desktop display shrank by 1.4%! The fact is if you fail to design an ad that performs as well on mobile as on desktop then you’re missing out on conversions. For Guido Fambach, SVP EMEA of comScore, this means digital markets must do the obvious thing. Advertisers “must engage with their customers in the most frequently used formats and platforms”. And that ladies and gentlemen means designing remarkable mobile Christmas banner ads!

Remember, when scaling out your Christmas banner ads to mobile formats, browsing on desktop is different to how you do it on your phone. You need to try and take advantage. As opposed to moving a mouse cursor and clicking, you tap, scroll and swipe. Think about this when you’re adapting your banner. It’ll help you design an ad which your audience can naturally interact with. Better yet, why not start by designing your banner in a mobile format and then scaling out your design?

7. Focus your ads on specific events

Christmas isn’t just one day, it’s a series of days spread over a month. Knowing which days are when, and their focus, is vital when building display advertising campaigns. From Single’s Day in November, all the way up to Christmas Eve, these are important dates for consumers across the world. There is an expectation that your brand acknowledges these days with some sort of offer. Why not recreate a sense of urgency for these shopping days in your banner ads?

Christmas banner ads countdown

Responsive HTML5 banner ads allow you to create ads that target your audience with products or offers that they’re interested in. Using feeds and dynamic banners, product lists can show the real-time availability of stock of items. While using a countdown to a specific date (as seen in the gif), combined with an offer, can inspire viewers to make a purchase before the offer expires. Typically, you’d want to push your campaign a couple of weeks before the date. Do this and your allowing time for processing and delivery. It’s a super effective way of driving conversion through your Christmas banners.

8. Optimise your Christmas banner ads

Excellent! Your perfect Christmas campaign is gracing quality pages and the clicks are being counted. But working on your perfect banner doesn’t stop there. In fact, it’s only just beginning. Now is the moment to review via analytics and refine your Christmas banner ads. No matter well your campaign is performing, there is always the possibility of improve performance.

More to the point, if you’re not monitoring your campaign’s progress then a lot of what we’ve discussed before is irrelevant. By monitoring your campaign from the moment you launch, you will be able to see if you are on track to reach your campaign goals. Which is especially important for any holiday campaign! Better yet use analytics, combined with heatmaps, to gather creative insights to pass on to designers. Maybe that bauble designed button was really turning off your audience? Or perhaps you want to experiment with different copy and variations of banners during a campaign?

Add copy to Christmas banner ads

Optimising your campaign in real-time is a reality – a feature offered by the best creative management platforms. Use real-time updates to A/B test your display ads and landing pages. Do this and your making sure the best and most effective content in front of your viewers. For example, you might notice that your Christmas banner ads have a low click-through rate. A misaligned call-to-action button, or copy that’s simply not working; being able to update your banner ads in real-time could be a campaign saver! By optimising your perfect Christmas banner ads from the start you can maximise their success.

Take-aways for Christmas banner ads

Creating successful HTML5 Christmas banner ads that convert doesn’t need to be difficult. As listed there are plenty of ways to create awesome holiday campaigns. To recap here are what you should do when creating your Christmas display advertising:

  • Use imagery and colours that are associated with Christmas
  • Play on your strengths – don’t obscure your brand
  • Use creative that works with the product or offer being advertised
  • Try to make your banner design special and stand out by taking advantage of HTML5
  • Use video in your ad either as a background or something more substantial
  • Think mobile first and then scale – if you can!
  • Focus your Christmas banner ads on specific events so to maximise impact
  • Optimise and constantly refine your Christmas banner ads throughout a campaign – even when they are live.

Finding a tool that can do all this and more should be a priority if you haven’t already. Use a creative management platform such as Bannerflow and you’ll be able to do all of what I’ve described and more. Good luck and happy Christmas banner building!

Get our latest Ebooks here!

The world of e-commerce is a competitive one with millions upon millions of online shops out there, so you need to stand out from your competitors. Follow these 11 awesome digital marketing strategies to get one, or rather eleven, steps ahead.