From Flash to HTML5: How Banner Ads Have Evolved and Stayed Relevant

Adam Napoli
Graphics & UX Designer

Introduction

Remember when clicking a banner ad was a one-way ticket to Spamville? Long ago, the flashy excitement of epilepsy-inducing digital display ads caught the eye of many unsuspecting internet browsers enamored with the interactivity on offer. These kinds of banners still exist, but nowadays, brands big and small occupy the digital advertising space with thought-out, well-planned and well-executed ad campaigns. 

So much has changed in the digital landscape in such a short period of time. Does anyone remember 1991? We won’t blame you if you don’t. That was when the World Wide Web was born and changed everyone’s lives. Wired.com (formerly known as HotWired) invented the first web banner ad in 1994, which then set in motion a digital advertising boom that according to IAB and PriceWaterhouseCoopers, was worth $124.6 billion in 2019. In comparison, advertisers spent about $70 billion dollars on television advertising in the same year. These numbers make it clear that internet advertising is by far the largest ad medium for marketers.

Source: Bannersnack

Whether you’re a fan of ad banners or you’re the type of person to block any ad banner getting in your way, there is no denying the advertising industry has been forever altered and revolutionized by their impact.

Mobile banner ads are the most popular form of mobile digital advertising for a reason. They generate very high impression rates and are the second highest revenue generating format globally. They also are very clear about branding and message due to the limited space and time that the ad has to deliver its purpose. The ads offer a solution to a potential problem, which causes the user to click through to find out more information. A poorly designed ad may not give you the same results you desire however, so if you’re looking for high quality and professional creatives for your next campaign or product, our design experts can help you!

From static to animated

Ad formats have developed and changed over time as internet speeds and technology has progressed. Static banners came first, followed by animated GIFS. From the start of the new millennium up until just a few years ago, flash banners dominated the online advertising space. Now HTML5 ads have pulled focus from these other formats, although the other formats still remain popular and successful for marketers as they have evolved in their own ways. Here is a quick rundown of the different ad types mentioned:

Static Ads

Usually in GIF or JPEG format, static banner ads contain no animation or interactivity. JPEG ads are known for a high colour count and can be saved in Low, Medium or High quality versions. The downside is that as a lossless image format, the image quality will gradually decrease as it is compressed or downsized to be able to be uploaded. 

PNG image files typically have a better resolution and can also have transparency in layers, allowing for more depth in the composition. They do however, export larger than a JPEG image, and this can cause problems when using it for web ads. Larger file sizes take longer to load, and depending on someone’s internet speed, this could be problematic as the ad might not even be seen. The files may also be too big to be uploaded onto the web in the first place.


Here is a comparison of PNG v JPEG:

Source: Techsmith

Animated GIFS

GIF banners can be static or animated, as long as they carry the .gif extension to the file. Basically, GIFs are the in-between between static and video. They are made from a number of frames that when exported, appear as an animated format. GIFs are smaller in size than a video file, but still allow for exciting animation and transitions.

GIF banners are generally accepted by most ad networks, although the file size needs to be small (max 150kb). Animations are also limited to 30 seconds or shorter, although they can be looped. They must also be exported at a low frame rate (less than 5FPS). The ads are also suitable for mobile devices and are easy to make, which makes them a popular marketing choice.

Flash

Flash was launched in 1999 by a company called Macromedia (later acquired by Adobe). The next year, it became the king of the digital ad hill, overtaking QuickTime and Java as the market leader for the digital advertising space. It’s rise can be attributed to the fact that it facilitated video streaming, and at the time, a huge jump in quality and standards to previous advertising found on the Internet. After the Adobe acquisition, Flash grew in popularity after allowing advertisers to create more interactive banners, gaming content and more. 

After a long period at the top, the final days of Flash appear imminent, though the demise of this format is not very surprising. Many advertising platforms have banned flash banners and many internet browsers are no longer compatible with the format. Flash ads led to many security breaches, which after many updates and patches led to incompatibility with browsers and websites. What showed on a banner one day, simply did not render the next. Users also had to download the third party software from Adobe to even view the ads, which is a huge negative for marketers.

HTML5

HTML5 ads have been around for quite some time, but have only recently become a force to be reckoned with in the digital advertising space. While more complicated to produce, the benefits are far superior to Flash ads. File sizes are small, the format is accepted by every single internet browser, and it can be embedded with audio and video content. HTML5 ads use CSS and javascript to create animated effects, allowing for more content to be visible on the ad due to the ability to switch layers around, and basically manipulate it anyway you want. Though difficult to create compared to other ad formats, it doesn’t require expert coding experience to generate these ads. There are tools and programs available that have a slight learning curve, but are easy to adjust to if one already has a background in motion graphics, animation and general video editing. 

This is an example of a hugely successful html5 ad from Nike, which features a great video, concise and legible copy and a fun user experience for the consumer:

Source: Digitaland

The ad had over 50.000 views and a click-through rate (CTR) of 22.3 percent, which is much higher than the average CTR for search and display ads which sets at around 2%.

So, what does the future of digital advertising look like?

Recent trends indicate that digital advertising via the internet will continue to rise. Many advertisers and marketers are moving their budgets online, preferring online ads over television and other ad mediums. 

Personalisation has become important to consumers and marketers as they try to create content that reflects obtained user data and interests, cleverly using budgets and time to target specific individuals. You and your colleague sitting next to you may see the same brand advertising on your browser, but be flooded with completely different ads. This is the norm and is set to continue as marketers pinpoint efficient ways to optimize consumer engagement no matter what budget. Relevancy is key to consumer targeting, and will also be key to the future of digital advertising. 

While HTML5 ads are the most popular ads to create at this point in time, even more advanced formats are beginning to trend and may soon become the norm. As virtual and augmented reality technology continues to evolve, and designers learn how to master these tools, what is currently expensive cutting edge technology may soon be available to the many, prompting a different and exciting future for web ads. 

Looking to increase your CTR and impressions? Boost your mobile marketing game today by working with the creative experts here at Customlytics. Head to our contact page or get in touch with us at [email protected] and let’s get to work.

💡 Knowledge sharing is at the core of what we do. Learn more about the app industry and discover useful resources by signing up for our newsletter or by bookmarking the Customlytics App Marketing blog in English or German.

📚 We love useful stuff. That’s why we co-wrote the Mobile Developer’s Guide to the Galaxy. Get your free paperback copy or download the eBook here providing you with all the mobile knowledge you need.💜  Become part of our community on LinkedIn, Twitter, Xing, Glassdoor or Medium.

Like this post? Don't forget to share it!

Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on twitter
Twitter

You may also like...