Book Image

iAd Production Beginner's Guide

By : Ben Collier
Book Image

iAd Production Beginner's Guide

By: Ben Collier

Overview of this book

Think of an iAd as a micro-app contained within an app on a user's iPhone or iPad that they've downloaded from the App Store. When the user taps your advert's banner it bursts into life filling the entire screen of their device. iAd Beginner's Guide takes you through the start to finish process of building rich, compelling, interactive iAds. You will learn to create beautiful multi-page ads with store finders, social sharing, 3D images and video galleries. You will create ads that utilize the powerful technologies in the iPhone to make your brand shine. Once you have engaged the user you can carry out targeted advertising campaigns with location-based coupons, store finders and social engagement. Using the iTunes Store you will see how it's even possible to add one-click digital content purchasing right within your ad. Learn how iAd producer manages all the HTML5, JavaScript, and CSS3 behind your iAd. You will be creating emotive, gripping and effective mobile advertising campaigns in no time.
Table of Contents (18 chapters)
iAd Production
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Describing the anatomy of an iAd


An iAd consists of four key parts, which are as follows:

  1. 1. A banner ad.

  2. 2. Transition from the banner to the main advert.

  3. 3. A splash page.

  4. 4. The core ad unit.

Understanding the banner's role

The banner is the first impression of your advert; it's vital that it inspires the user to tap on it and explore all the other great content you've got waiting in your iAd. Banners are identifiable by their small logo in the bottom-right of the banner, as shown in the following screenshot:

The iAd logo increases the chance of the user tapping on your advert, as they know they'll be delivered a rich immersive ad without losing the place of the app they're in.

The banner is typically displayed either at the bottom of the screen or above the tab bar of a user's application, as shown in the following screenshot:

Using different banner types

There are two types of banners you can use for your iAd - a static image banner or a dynamic HTML5 banner.

Static image banner

A static image banner is a much more traditional banner and is often chosen because it's quick and simple to create.

Your static banner can either be the size of the banner frame or can be a screen-size static banner with only a slice of the image visible in the banner, revealing the full image when the user taps to view your ad.

Dynamic HTML5 banner

An HTML5 dynamic banner opens up much more opportunity for user engagement, as it allows for animated text and graphics. Adding motion and animation to your banner makes it stand out on the user's device, drawing their attention to your ad and increasing the chance they'll tap to find out more about your brand.

With an HTML5 banner you're able to update data in the banner remotely with real-time information, like latest sports scores or stock quotes.

Transitioning into the ad

The transition occurs when the user taps the banner to enter your iAd; it softens the entry to the splash page and creates a visual connection between the two. The transition can either be a slide or a reveal.

Slide transition

The slide transition is the most common way of presenting your splash page. It pushes a full color block up from your banner covering the app the user is currently in. A progress bar shows the status of the loading of your splash screen.

Reveal transition

You should only use reveal transition if you're using a screen-size static banner. It pushes apart the user interface elements in the users app to reveal your iAd splash screen. The following screenshot shows the reveal transition in an ad that we'll create later in the book:

Making loading interesting with the splash page

The splash page is an optional screen; it is shown while the main iAd resources load, in between the user's tapping of your banner and their being able to interact with the core ad unit.

Although the splash page is optional, it's an ideal opportunity to convey your brand message while the resources for your ad load.

Apple estimates you've got 15 seconds to win the user's attention once they've entered your iAd, so an engaging splash page ensures that we keep them happy while they wait.

The splash page can be used to show interesting stats or features about your brand or product before transitioning into the main ad.

Note

Even if you think your iAd is lightweight and won't need time to download, users are often on slow mobile data connections where small ads won't load immediately.

A pre-roll video can also be used in the splash page although, with the lightweight CSS3 animations and styles available, we can apply dynamic effects to images and text that can often mimic video, without the large (and slow) download associated with streaming video.

Exploring the core ad unit

This is the main part of your iAd where there is a real opportunity to deliver your content in a range of exciting ways. The core ad unit is built up of multiple views; think of these as different pages of a website, each with a range of media and content to excite the user about your brand or product.

The ad unit starts with the root view, which is generally used for navigation, to toggle between the different views within your iAd.

The subpages of the root view offer the chance to provide: dynamic maps showing the location of the user to your nearest store or retailer, amazing 3D interactive video carousels and image galleries, or a blank canvas only limited by your own imagination! Here is a selection of the templates that can be used in your iAd to give you an understanding of the types of the content you can include: