Use Typecast to design for the reader by putting type first. Try it now

Improving Online Ads with HTML

Thursday 31st July 2014

 

Whether you design digital ads for your clients or customize third-party ads before publishing them on your domain, our newest additions can set you on the path to beautiful, scalable, responsive ads that are customized to customers’ needs and interests.

Let’s face it. Ads on the web need some love. While web fonts and responsive design have created more readable, seamless experiences for visitors, and many of us have improved workflow through closer collaboration with devs and embracing prototyping as part of our role, the process of designing and building digital ads has lagged behind and is still very much an over-the-fence approach. But we don’t think it has to stay that way.

The future of ads is HTML

Actually, it’s not the future. It’s now. 25% of all website visits are now from mobile browsers, and we can expect this to climb as tablet sales continue to skyrocket. With Apple TV, Google Chromecast, and Amazon Fire TV now in the marketplace, and games consoles enabling web browsing, large TV screens are also connecting more people to the web than ever before. In fact, 39% of TVs shipped in 2013 were smartTVs*.

But the two dominant ad formats, Flash and image-based ads, are flawed. Most mobile devices don’t support Flash, nor do most smartTV browsers. And using image-based ads as fallbacks (particularly when they include text as image) is problematic for obvious reasons; they don’t support dynamic content, native device functionality or any other delights that engage customers. They also pose the real risk that images and embedded text will render as blurry, pixelated messes as they’re scaled up to larger screens (screens that aren’t necessarily always of higher resolutions).

So those who publish Flash and image ads to the web face an unsavory tradeoff: they can either reach some of the browsing audience with engaging, media-rich creative or all of the audience on any device with static images. With HTML ads, on the other hand, there is no tradeoff. You can have the best of both: reach and richness.

Ads in Typecast

We see HTML ads as miniature webpages, so introducing digital ad design to Typecast® just made sense—helping you to create responsive HTML ads using the same visual controls you’ve grown used to.

New Ad Templates

Ad template dashboard
To get you started, we’ve added 5 new templates based on popular IAB standard ad units. Rather customize something unique? Then start from scratch with the blank ad template.

Greater Control Over Images

Improved Image Support
We’ve also improved image support. For the first time in Typecast® you can upload images, add background images, and control image, size, repetition, and position by eye.

Design Responsive Ads

Responsive Ads
More and more publishers are making the switch to responsive design, and we think it won’t be long before they start asking for ads that are formatted accordingly. Responsive design in Typecast is great because it feels like you’re designing static images, when in fact you’re creating fluid designs with the media queries baked in. Click our ‘Breakpoints’ menu to insert one of our device breakpoints, and then adjust the size of your ad’s container to suit the ad unit you want to transition to. Simply restyle and rescale your designs from there, and repeat if you need to add another ad state. The result is one ad file that can be served anywhere, easing handover and making changes and updates much faster.

To quickly see your media queries in action, hit Preview in the top right of your design canvas for a unified responsive prototype that you can drag to see scale. The Preview’s URL is also public (but not searchable), so you can quickly send it to clients to show them how the ad will behave and get feedback.

Readable, Scalable Text

Brand consistency across channels and devices, crisp legibility at any resolution, dynamic content, quick edits instead of twelve dozen image updates. These are just some of the benefits web fonts bring to the HTML ads party. And of course in Typecast you can experiment with over 100,000 web fonts from the web’s top providers.

Tidy Outputs

Download your project’s CSS, HTML and image folder with just a click. Then pass the package on to devs to add more magic, like database integration for dynamic pricing and geolocation, device event and other native functionalities.

More help making the switch

Monotype launches ads resource site for designers and brands

Landing pg for HTML5.monotype.com

We’re not the only ones keen to see online ads improve. This week Monotype launched a new site that will be exploring all things HTML-addy. Its aim is to probe the industry, track and report developments, and offer guidance and resources to any designers who are keen to make the switch to HTML ads. They’ll also be doing some HMTL ad experiments, identifying stumbling points and sharing their discoveries with the community. They’ve already got some sample ads, responsive demos, and free templates available. You should take a look and follow them on Twitter.

Watch our webinar to learn more

HTML ads webinar promo
Designer, author and speaker Mark Boulton joined us to talk about the current design landscape for digital ads. He also showed us some great examples of what’s possible with HTML, and we used Typecast to build up some designs. Watch the webinar to see what you missed.

Tell us what you know

Listen, we don’t pretend to be experts in digital advertising. And HTML ads are new territory for nearly everyone. But we believe its similarities to web design means there are things we can do to give brands and designers a hand at improving how their ads look and perform online. We’d love to learn more from those of you who are at the coalface designing digital campaigns, though. If you’d like to let us pick your brains, share your experiences, offer us feedback on our new features, test new features, etc, please let us know in the comments below and we’ll be in touch.

*Mobile browsing, tablet sales and TV shipment info sourced from the 2014 Internet Trends Report

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus