FREE HTML5 FLEX AD TEMPLATE
The FREE flexible html5 template is ready! I designed this to be as simplistic as possible, keeping in mind often designers only have a general understanding of HTML5 and CSS3. Of course the template is simply that, I’ve included several additional optional media-queries to provide ultimate customization in order for you to take this and run with it. With the rise of HTML5 lean and responsive ads, the industry requires templates like this that are not reliant on 3rd party software or serving conditions. By modifying the template to suit your brand and advertisement needs, you have direct access to the final HTML5 files and can serve them programmatically through an ad server or exchange of your choice directly.
It may take a bit of fiddling around with to understand the logic of the template but the basic premise is:
- Set up the HTML5 to contain all the elements just as you would in a normal webpage. (div’s, images, copy, logos, etc)
- In the CSS apply general rules to common HTML and shared elements, objects and IDs.
- Starting with the smallest HEIGHT the ads will be shown at, define the constant rules for this height (ie: font-size:1em)
- After which defining the optional CSS layout changes per width. (ie: changing – display:block to display:inline)
- Working your way through, all the HEIGHTS and corresponding WIDTHS until you’ve reached the maximum height and maximum width the ad will be displayed at.
Working directly on the ad.html file and keeping the ad_size_assistant.html page loaded into your browser will make this development easier. You can make changes to your code and refresh the browser to view the changes immediately. Switching back and fourth between them, at least for your first development. While the first ad does take a significant development time, because of the learning curve, it’s entirely worth it. In the end, you have not only one but literally any size ad available on market today. Think of the inventory. I mean the standard bigbox (300×250 aka tile 1:1) probably has the most ad space availability but because it does and everyone builds this size, it has to bid against a lot of competition and this can get pricey. However the alternative size of (250×250 aka tile 1:1) hasn’t got a lot of inventory, so less bidders, which mean cheaper ad serving. Well at least for now, until there is a equal amount of placements for all the different sizes, so they can sell them interchangeably.
This template took me a few days to complete with an approximate retail value of $1400. I’m offering it to you FREE. Digital designers and developers need to have resources that are non-restrictive, open and not hidden behind walled gardens. I invite you to subscribe, download and build upon what I’ve created here. Animate it to your hearts content. I’d suggest CSS transitions or the Greensock library if you do.
If this template helps you, I’d love to see what you produce with it. Please leave a link in the comments. You can download the flex ad template v1.0 through the widget in the right panel, just provide your name and a valid email address. Feedback is much appreciated and will be considered for incorporation in the next iteration.