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.

Making Mobile Rich Media Front and Center in DoubleClick Studio

At the end of September, we announced the launch of Google Web Designer, Google’s new HTML5 authoring tool, and last week we propelled the conversation forward around Mobile and HTML5 in the industry with our iMedia article and our Digital Dialogue. Today, we want to give you the DoubleClick Rich Media perspective on building beautiful cross-screen creative and tell you about the investments we’re making to ensure you have what you need to create effective advertising across screens.

Our customers have made it clear that building for the cross-screen world continues to be a challenge. But in spite of these difficulties, we believe that adopting HTML5 is critical to success in today’s cross device world. To help creative agencies make this transition, we are focusing our efforts on the following areas of improvement within DoubleClick: 

1. Make it easier to build innovative mobile rich media formats
2. Center the DoubleClick workflow on HTML5
3. Make sure creatives built in DoubleClick can run everywhere

Make it easier to build innovative mobile rich media formats:

We have built a first-class integration between Studio and our recently launched HTML5 authoring tool, Google Web Designer (GWD). DoubleClick Rich Media creatives built in GWD will automatically include the Studio enabler and other metrics and can be uploaded seamlessly into Studio. We plan to enhance this integration with features that will ease the workflow between applications, such as an automated push of creatives from one tool to the other.

Further, to ensure we let our developers use the tools they prefer, we have released a number of templates that can be installed into Adobe Edge Animate. A developer can use these templates as a starting point for building a variety of mobile formats. The templates will automatically include the Studio enabler and automatically “polite-load” the creative, which is important due to the larger file sizes generally seen with HTML5.

Finally, we plan to release many more HTML5 Layouts as part of our Studio Layouts Gallery to add to the growing repertoire of available HTML5 formats available in our platform. 

Center the DoubleClick workflow on HTML5:

We’re making it easy to quickly add mobile features to your creatives to make them mobile-ready. We’ve built an HTML5 video player module that will work across browsers and operating systems. This will relieve developers from having to write many lines of code to deal with cross platform support. In November, we are also adding support for the new Expand-to-Full-Screen format for mobile web, which allows an in-page unit to expand to full screen regardless of the screen size. 

We’re also making it easier to upload your HTML5 creative into Studio. With our relative paths support, you’ll be able to upload HTML5 creative with nested folders and maintain that folder structure in Studio. You can also upload custom fonts with your creatives (the actual fonts, not the static images), improving workflow, file size and quality of the creatives.

With our Mobile Showcase App, you can push your creative preview to a mobile device. This means you can test and preview in-app and mobile web creative on the actual device where it will appear to an end-user, before you actually publish the creative. 

Make sure creatives built with DoubleClick can run everywhere:

In the desktop world, a lot of work has been done to ensure ads can run everywhere. Similar efforts are now being focused on mobile web and in-app environments. We are working to ensure our ads run on all major in-app networks, so you can be sure your creatives function properly across all desired inventory. In the coming months, we will build out support for MRAID v2, and you will see us push the boundaries on standards for serving in-app creatives.

We encourage all agencies, developers and designers to spend some time experimenting with all our new products and features. Making mobile work is one of our highest priorities at DoubleClick, and the features mentioned above are only the start of a long and exciting roadmap. We look forward to hearing your feedback and to working with you to push the industry forward!

Posted by Jordan Sumerlus, Product Manager, DoubleClick Rich Media

Join us for "Digital Dialogues: Making Mobile Work with HTML5" - 10/24 @ 10am PT

Following the recent launch of our Mobile White Paper, “Unlocking the HTML5 Opportunity: What’s the Holdup?”, this week we’re continuing the conversation around unlocking the mobile opportunity with a Digital Dialogues Hangout-on-Air.

There's no question that people are spending more time across screens, and the opportunity to reach them there is huge. Advertisers, media and creative agencies are still trying to figure out the best way to leverage mobile in their campaigns, optimize for it and build engaging multi-screen creatives. Publishers continue to strategize on ways to deliver and monetize engaging cross-screen consumer experiences.

Join us for a conversation on how technologies and solutions like HTML5 can make cross-screen creative and mobile advertising more accessible for the industry.

Speakers:

• Zach Chapman, VP of Digital Sales, ESPN.com
• Matt Cooper, Founder of Addroid
• Sissie Hsiao, Group Product Manager, Google

What: Digital Dialogues Hangout on Air: Making Mobile Work with HTML5

When: Thursday, 10/24 @ 10am PT / 1pm ET

Where: Think With Google G+ page.

RSVP here.

While you’re waiting, here’s some background reading:

• “Build Creative Campaigns Across Screens” -- Pete Crofut’s fourth iMedia article in his series “How Technology Makes Creative More intelligent”.
• “Unlocking the HTML5 Opportunity: What’s the Holdup?” -- DoubleClick/Illuminas Research White Paper and infographics

We hope you’ll be able to join us!

Posted by Becky Chappell, Product Marketing

Creatives and media agencies: get trained online with DoubleClick Rich Media

Since launching our DoubleClick Rich Media Education Program, we've seen developers become more productive with ad creation and media agencies more effectively manage rich media creatives for display campaigns. But with increased adoption of HTML5 and the success of dynamic creative ad formats, we've heard from you that we need to both streamline training across products and customize it for the right user, while also adding more training content for advanced topics.

So, we've made a few changes to consolidate all training resources for each user, by role.

Rich Media and Studio training for creative agencies and developers

We've updated DoubleClick Rich Media Fundamentals eLearning & Certification to better align with Studio Certification. Focused toward creative agencies and developers, Rich Media Fundamentals eLearning provides an overview of DoubleClick Rich Media and Studio, and helps you ramp up on rich media basics at your own pace.

In Rich Media Fundamentals, you’ll learn how to:

• Build Flash and HTML5 creatives
• Publish to QA
• Use the API
• Build dynamic creatives and create/edit rules 
• Resolve common live issues

Rich Media Fundamentals includes a certification exam at the end of the course. Pass the exam and you'll get a printable certificate of completion you can use to show your proficiency.

Rich Media Fundamentals can benefit creative developers through faster creative builds, more efficient QA, and reduced turnaround times, and is a great introduction for Studio users who want to take Studio Certification to demonstrate expertise in building rich media ads.

Rich Media training for media agencies and marketers

1. We've revised DFA Academy to include a Rich Media Checklist (previously Rich Media Academy). If you're a media planner or ad trafficker, use the checklist to learn rich media during basic DFA training and be better equipped to know how rich media works in the context of display campaigns. (DFA Sign-in required) 
2. We've updated DFA Fundamentals eLearning & Certification to include an optional DoubleClick Rich Media module. Ad traffickers at a media agency might only need a higher level of training compared to a creative developer designing an ad, so we’ve added a rich media overview to DFA Fundamentals (Enroll -- DFA sign-in required) 
3. We've added a rich media live issues section to the DFA Help Center to help media agencies who manage rich media creatives in DFA to troubleshoot common issues. (DFA sign-in required)

Ready to get started? Sign up through the links above, and note any sign-in requirements.

Don’t forget to sign up to receive the latest news, product updates, features, tips, and research information from DoubleClick!

Posted by Hemmy Edge, DoubleClick Rich Media Product Trainer

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

Google Web Designer beta now available: Build beautiful HTML5 creative with ease.

By now, it’s evident that multi-screen consumption is the way of the future; mobile and tablet devices are becoming consumers’ first screens, so the content that is developed needs to work seamlessly across these screens. There are already more end-users in HTML5-compatible environments than there are in Flash-compatible environments, and HTML5 ad spend is expected to overtake Flash spend within the next two years. (1) But until recently, advertisers didn't have the tools they needed to easily develop content fit for today's cross-screen experiences.

“Unlocking the HTML5 Opportunity: What’s the Holdup?” 
To shine a light on the issues, we commissioned a research study with Illuminas to uncover the barriers that agencies face when buying on and developing for mobile platforms. We found that advertisers expect the amount of mobile and tablet work they do to increase by 41% over the next 12 months, and over 67% of respondents believe that it’s important to design specifically for mobile campaigns.

However, even though the amount of mobile and tablet work is expected to increase, cross-screen creative can be difficult to adopt. In our white paper, “Unlocking the HTML5 Opportunity: What’s the Holdup?” we present four main challenges that agencies face when approaching mobile advertising. One key challenge is that there are too many choices to make when developing for mobile -- too many platforms, browsers, and devices to build for, and no tools that simplify the development process.

Build once, run anywhere 
We’re working hard to solve this development challenge by offering agencies powerful yet easy-to-use tools for HTML5 production. In this vein, we announced DoubleClick Studio Layouts for HTML5 back in August, which lets you create HTML5 ads in minutes, and last week we announced Ready Creatives in AdWords, which creates HTML5 ads for you in seconds.

Today, we’re excited to announce the public beta of Google Web Designer, a new professional-quality design tool that makes HTML5 creative accessible to everyone from the designer to the dabbler.

Google Web Designer enables you to:

1. Create animated HTML5 creative, with a robust, yet intuitive set of design tools. 
2. View and edit the code behind your designs and see your edits reflected back on the stage automatically. 
3. Build ad creatives seamlessly for DoubleClick and AdMob, or publish them to any generic environment you choose. 
4. Receive updates to the product automatically, without having to re-download the application.
5. Access all of this entirely for free.

Watch the Demo: A quick glimpse of Google Web Designer

Ready to give it a spin? 

• Download Google Web Designer. 
• Read through our getting started guide. 
• Send us feedback! We need your input to make this tool even better, so share your ideas with us in our user forum or on our Google+ page. We’re working hard over the next couple quarters to add new features and improvements to make the product an even more robust offering. 

HTML5 is a universal language for building beautiful, engaging content that can run across desktops, smartphones, and tablets. We think that Google Web Designer will be the key to making HTML5 accessible to people throughout the industry, getting us closer to the goal of “build once, run anywhere.”

Posted by Sean Kranzberg, Engineering Manager, Google Web Designer 
(1) StatCounter, Top 12 Browser Versions in North America, February 2012 to August 2013