Standard Banners: What’s feasible within 150Kb?

Maximize animation with HTML5 Banners

The world of ads can be very confusing. Banners come in so many different shapes, sizes, types, formats, and specs that can make their production a bit complex. Let’s close the gap between creative ideation and the production of HTML5 ads.

In this post, we’ll be sharing insights on banner types and the topics below:

• How to build HTML5 banners
• Animation Routes to get different types of results
• Top 10 recommendations when designing banners

Whether you’re a seasoned designer, a marketing professional, or an aspiring digital advertiser, this article will help expand your knowledge and stay ahead of the curve.

Bridging the gap between creative ideation and digital production. From hopeful results to realistic expectations.

How to build HTML5 Banners

There are multiple ways to build HTML5 banners. Below you will find the most common routes used by designers and developers in the advertising industry along with their benefits and constraints.

Hand Coded (Powered by GreenSock)

• Uses GreenSock JavaScript which is hosted externally and doesn’t contribute to the overall file size
• Precise on set values to execute perfect timing and animation
• Efficient in implementing on multiple units at the same time
• Wide variety of easings and ability to use multiple properties in a single line of code

GWD – Google Web Designer

• Minimal HTML or JavaScript knowledge needed
• Offers components for more advanced animations. (i.e. 3D Models)
• Cons: Generally slow, font handling is inconsistent, auto generates coded files which adds to the file size

Adobe Animate CC

• Ability to create animations through a timeline based animation software
• Seamless integration with other Adobe products
• Cons: Bit of a learning curve. Working .fla files are required to make edits. Auto generates coded files which adds to the file size

Other banner builders

• Examples: Celtra, BannerFlow, Flexitive
• Easily creates ads using templates and design tools
• Can create generic transitions and subtle text animations
• Cons: Not meant to create highly customized animations, auto generate coded files which adds to the file size

Animation Routes: 

When building banners, there are multiple routes and libraries we can use to bring the animations to life. Below you will find some of the most common routes in hand coded banners that make use of GreenSock libraries.

1. Basic animation

When referring to basic animations, we are talking about banners that make use of the Greensock animation library. Basic animation effects include fade, scale, pan, rotate, amongst others.

2. PNG sequence

A PNG Sequence is a series of sequential images exported from a video animation. It’s an alternative way to run complex video animation & effects on HTML5 banners.  

3. SVG animations

• DrawSVGPlugin allows you to progressively reveal (or hide) SVG strokes to make them look like they’re being drawn. 
• MorphSVGPlugin allows you to Morph any SVG shape into any other shape smoothly regardless of the number of points in each. 
• MotionPathPlugin allows you to easily move any object along a path.

4. Canvas

On CANVAS animation, the HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).This enables us to create complex animations such as particles, smoke, draw text or graphics, and custom masking.

Top 10 Recommendations when designing banners:

1. Optimize, Optimize, Optimize
   • Keep your banner under 150KB for lightning-fast loading.
2. Mobile-First Design
   • Ensure your banner shines on smaller screens.
3. Clear Call-to-Action (CTA)
   • Guide users on what to do next.
4. Contrast is Key
   • Make text and elements stand out for maximum visibility.
5. Limit Text
   • Less is more. Convey your message succinctly.
6. Brand Consistency
   • Align your banner with your brand’s visual identity.
7. Test Across Devices
   • What looks good on desktop might not on mobile.
8. Compliance Matters
   • Adhere to platform and industry standards.
9. Interactive Elements
   • If using, ensure they enhance the user experience.
10. Analytics Integration
    • Track performance and refine your strategy.

Conclusion

Crafting HTML5 banners is an art form and a collaborative process between the creative and development team in order to maximize what’s feasible within 150Kb and use the power of animation to tell unique stories through standard banners. If you don’t have a banner team in place, we would be happy to help! Contact us anytime. (Contact us will link to [email protected])