Making Mobile Work Across the Advertising Industry

<$BlogItemBody$>

Tutorial Tuesday: Create interstitial and expandable ads

Thanks for following along with our Google Web Designer Tutorial Tuesday series over the past few weeks. In the series, we’ve covered a number of basics to get you started with the tool: we’ve taken a tour of the user interface, created animations, and learned how to use the CSS Panel. Today, for our last post in the series, we’ll be focusing on creating interstitial and expandable ads.

Interstitial ads

Interstitial ads give users a full page ad experience at natural transition points such as page changes or app and video launches. Interstitial ads are displayed in an iFrame that floats over a web page or app, and users can click or tap a close button to hide an ad from their screen. Many people using Google Web Designer will want to design interstitial ads with multiple pages, so we’ve created three step-by-step videos to help you do just that. 

Start with the first video>> 

Expandable ads

Expandable ads are small banner-size ads which expand when clicked. Expandable ads are displayed in an iFrame that's the size of the expanded page, and a user can click or tap a close button to collapse an ad to its original size. As with interstitial ads, we’ve created three step-by-step videos to help you design expandable ads using Google Web Designer. 

Start with the first video>>

Don’t let the learning stop here

While our Tutorial Tuesday series has come to completion, you can keep learning about Google Web Designer via our help center and YouTube Channel, and our user forum and Google+ page are additional outlets where you can both learn and share feedback about GWD. 

We’ll be sure to post about other exciting developments as we release them, so stay tuned to the blog for the latest information.

Google Web Designer: Thoughts from the Field

Last week, we announced the public beta of Google Web Designer, a pro-grade HTML5 authoring tool that helps you create HTML5 ads with ease. We caught up with two creative professionals who participated in the private beta of Google Web Designer -- Francois Girardot, Creative Director and Co-founder of Biborg, and Marius Veltman, Rich Media Expert at Artis Universalis -- to get their thoughts on the new product.

How would you describe the importance of HTML5 to creative development?

Francois: By 2015 there will be more tablet sales than desktop computer sales. As a result of this shift, advertisers need ads that work across all screens. Flash can’t do that, but HTML5 can. We’re focused on responsive advertising and we believe HTML5 is the key to effective multi-screen ad campaigns.

Marius: Since Flash isn’t supported on mobile devices, HTML5 is filling the gap. HTML5 is great because it allows you to develop quickly and add complexity to your designs with each iteration.

How was your transition from Flash to HTML5? Which HTML5 tools did you use before Google Web Designer?

Francois: For us, the transition from Flash to HTML5 has been gradual over the past two years. Clients want more and more campaigns that run on all devices. 

Marius: We've been working with Flash for about 15 years. The transition from Flash to HTML5 has not been without frustration. 
I've always felt I was missing the essential tools to create fast and efficient workflows. 

What are your thoughts on Google Web Designer?

Marius: The learning curve is very manageable, and even if you only have a basic level of knowledge you can build cool HTML5 creatives in a relatively short time.


 

Francois: The code generated is clean, which makes it easier for designers and developers to work together. GWD will surely become the reference for HTML5 animation.

What impact will Google Web Designer have for creative developers and designers?

Marius: Google Web Designer offers an easy way to create HTML5 content. This enables more people to build multi-screen content in the future.

Francois: Designers typically use After Effect or Flash to provide developers with the animation they want. With Google Web Designer, they will have a tool they can use to experiment with animation and code. 

What feature/functionality of Google Web Designer are you most excited about?

Marius: I’m most excited about the 3D functionality - it offers new ways of animating content in HTML5. The speed with which the GWD development team launches iterations is impressive. Clearly Google is really serious about pushing HTML5 onto the market. And we feel that there is much more to come.

Francois: We’re most excited about the integration of Google Web Designer with other Google tools, like DoubleClick. We know that Google will do everything they can to enable creativity and increase advertising quality, especially for ads on mobile.

**Bonus: Marius was the winner of our Google Web Designer Beta competition with his “Magic Island” HTML5 ad. Check out his ad on the Rich Media Gallery!

Tutorial Tuesday: Learn the Google Web Designer Interface

Yesterday we launched the public beta of Google Web Designer – a professional-quality design tool that makes it easy to design HTML5 creative, for free.

While we built the tool to be fairly intuitive, we want to make sure you have the resources you need to get started. So beginning today and continuing through the month of October, we’ll be posting “Tutorial Tuesday” blog posts to highlight important aspects of the tool.

This week, we’ll give you a general overview of the tool and show you how to add text and tags to your projects. Over the next few weeks, we’ll post on additional topics such as making your projects more interactive with motion, making them more beautiful with design elements, and transforming your work into rich media ad creative. 

Take a tour of Google Web Designer
When you first download Google Web Designer, you’ll want to get to know the interface. With Google Web Designer, you can: 

• Start designing immediately with familiar menus and panels
• Design the way you like by toggling between Design view and Code view
• Test your work in a number of browsers with the Preview button
• Get your work on the ad networks of your choice by publishing your projects

Take a full walk-through of the Google Web Designer interface in this video. 

Add text

With Google Web Designer, it’s easy to add text to your projects. You can transform text into headings, paragraph text, and links, and make your text stand out with hundreds of free, open source web fonts. Learn more.

Add tags

Google web designer has a Tag menu that helps you add div img, video, or custom HTML elements to your documents. You can change the color and the border radius of your tags in just a few clicks. Learn more.

Can’t wait until next Tuesday?

In our next Tutorial Tuesday post, we’ll talk about how to use Google Web Designer’s Timeline to add motion to your creative. If you can’t wait until next week, you can watch our two Timeline videos here and here, and you can watch all of our videos on the Google Web Designer YouTube Channel. You can also check out our getting started guide for more information. 

Join the conversation

We want to hear what you think of Google Web Designer, so feel free to send us feedback on our user forum or our Google+ page. We’re excited to have you help us shape the future of our new tool.

Posted by Jasmine Rogers, Program Manager, Google Web Designer