The Brief

“Tell us a bit about how a banner is built and how you put a website together”

MasterCard Digital Training

“Online Ads - 101”

Agenda

• Sit on my space

• How long’s a piece of string?

• Playing Big Brother

Sit on my space

The more common formats for online ads

Standard Banner ads

What are they?

• “Display ads”, “banner ads” or “creative placements” found on the majority of web pages linking users to other websites.

• Usually made in Flash (SWF files)

• Usually limited to between 30Kb and 40Kb file size

• There are many sizes but some standards:

728 x 90 pixels (leaderboard)

468 x 60 pixels (banner)

234 x 60 pixels (half banner)

300 x 250 pixels (tile / island / medium rectangle)

120 x 600 pixels (skyscraper)

160 x 600 pixels (wide skyscraper / vertical tower)

What can they do?

• Banners can be animated and animations can loop

• Banners can be interactive (roll-over or click interactions)

• Banners can read external XML files (e.g. News headlines, product prices etc.)

• Banners can drive response but are generally more passive

• The average click through rate for the financial sector is 0.04%*

• Standard banners are therefore often sold on a cost per click (CPC) or cost per acquisition (CPA) basis

*Source – EyeBlaster 2008 report

So why buy standard banners?

• Relatively inexpensive, leaving more budget for media buys

• Can be sold based on performance, helping to manage media costs

• Relatively quick to design and build (especially if a concept already exists)

• Wide range of formats available across websites

• Can be made to read external information sources so can be easily updated

Rich media ads

How are they different to standard ads?

• Larger file size allowance

• Wider range of interactions available

• Support more than just flash formats

• A lot more “engaging” from a user perspective, helping to drive response

What do they look like?

• Some of the more popular formats include:

Expandable ads

Overlay / Over The Page (OTP) / Floating ads

Synchronized ad units

Video or Streaming video ads

Data capture ads

Homepage take over or Site take over

Expandable ad

http://stage.mercerbell.com.au/ourwork/content/2008/MCA071/index.html

Other Examples http://creativezone.eyeblaster.com/

1. 2.

3. 4.

Over The Page ad (OTP or Overlay)

5.

2.

3. 4. 6.

1.

Medium rectangle ad appears on pageOn roll-over things start to happen

across a fixed area of the page

More stuff happens on the page, or within the medium rectangle ad space, resulting in a call to action

Synchronized ads (Sync ads or “Talking” ads)

1.

2.

3.

4.

5.

http://stage.mercerbell.com.au/ourwor

k/content/2008/MCA094/index.html

Other great example:

http://www.bannerblog.com.au/2006/1

2/mini_tug.php

Video ads

Video Egg

Increasingly popular formats

Rich media examples – Data capture

This ad was run as an OTP. The user entered their friends’ details and that person was “called” with a message.

Data captured was then added to a database for further promotions

Widgets

Video, additional navigation and

social bookmarking all included in

one ad

Homepage skin

Homepage takeover

http://creativezone.eyeblaster.com/?ItemName=Jumper%20Overlay

What else can they do?

Online chat

HD video

Interactive games

Data-driven functions (e.g. postcode locator)

File upload/download

So why buy Rich media ads?• More engaging, so excellent for driving direct response – CTR of 0.09% for financial sector (versus 0.02% for standard ads)*

Expandable ad 0.18%

Overlay/OTP/Floating ad 2.06%

Video ad 0.20%

Standard banner 0.06%

• Wider range of file formats and technologies can be supported (e.g. video, gaming and data capture)

• Rich media ads are starting to replace the traditional microsite

*Source – EyeBlaster 2008 report

So to summarise…

• There are several formats of standard and rich-media ad type available with more being developed every day

• Rich media ads will cost more to develop however, campaign managers (such as Eyeblaster and DoubleClick) are continually developing tools to help reduce development costs

• Rich media ads offer considerably more interactivity opportunities that standard ads and will return higher response rates

• Due to their comparatively low response rates, standard ads can be purchased on a cost per response basis

How long’s a piece of string?

How the media schedule & ad specs affect the design and build process

The build process

Concept creation

The media schedule (or at least an idea of the proposed schedule) will directly impact on the concept creation process

• Selecting a rich media campaign will offer the potential to develop a wider range of concepts

• Publisher file-size allowance will determine concept direction and asset selection

• Available ad formats (within a schedule) can also drive concept development…

The affect of the media schedule on….

http://www.bannerblog.com.au/2007/0

8/nt_tourism_map.php

So….

Where possible, ensure the creative team is involved in the media planning process – a strong creative concept can often help shape the media schedule.

Costing and timeline development• Multiple formats and file sizes take longer to produce

• Individual publisher requirements (odd sizes for example) can also heavily impact on timeline, effort and cost

• Rich media ads can take longer to develop than standard ads

• Skill-set requirements can be different between rich media and standard ad build jobs

• Additional producer time may be required to upload rich-media creative to ad servers

• Additional click-tagging requirements for rich media ads can take longer to implement

• Media agency’s lead time can be up to 10 days prior to live date

The affect of the media schedule on….

So….

When allocating budgets, be aware that rich media campaigns will cost more and take longer to produce.

They will drive a better response though!

Building the ads• Publisher permitted maximum file size will determine how the creative eventually looks

Use of vector images versus photo images

Ability to re-use assets within a banner

Complexity of patterns and assets

Nature of animations or interactions

For example…

The affect of the media schedule on….

Supplied artwork

Finished ad with a 25Kb file-

size allowance

Building the ads• Different publishers will have different maximum flash version requirements

• Different publishers will have their own requirements regards looping, interactions and user-initiated events

• Publishers may also have rules for back-up GIFs* (e.g. file size limit, static only, no animation)

* What’s a “back-up GIF”?...

The affect of the media schedule on….

99% of PCs in “Mature Markets” have a flash player installed – Millward Brown global survey 2009

So….

Keep in mind that even the simplest concept will be affected by publisher specifications. High-res and complex images can be used but will need to be reduced in quality or modified before being featured online.

Quick lesson on ad-serving……

Media agency

Ad server

Creative uploaded and trafficking schedule

specified

MercerBell

Creative handed-

off

Publisher ad-

servers

www.mastercard.com.au/debit

Ad server

Ad Server Records:

• Creative served

• No. of impressions served

• Clicks generated

• Other interactions

Trafficking the ads

• Rich media ads often require the creative agency to upload creative

• Delivering finished creative to media agency often problematic as there will be several files destined for several publishers websites

• Publishers will often change specs requirements from those provided requiring ads to be tweaked (file size, dimensions etc.)

The affect of the media schedule on….

So….

Even after the ads are built, there is a lot of work involved to get them up onto publisher websites, involving several parties, and despite everybody’s best efforts, ultimately, we are all at the mercy of the publishers!

To summarise

• Creative concepts are directly affected by the media schedule and publisher specs

• Costs and timelines will differ between ad-build jobs based on the complexity of the media schedule and types of media selected

• Publishers are prone to changing their specs so even handed-off creative can sometimes need re-working

Playing Big Brother

Tracking, Reporting and Optimising your campaign

What are Ad Tags?

• Ad serving will be charged to the media agency on a CPM (cost per thousand), CPC (cost per click) or CPI (cost per interaction) rate by the ad server

• Ad tags are inserted into flash ads (prior to hand-off) allowing click-through to be specified and allow campaign success to be measured by tracking and reporting on the number of impressions, clicks and interactions returned by the ad

• Corresponding “action” or “post-click” tags are often inserted into destination pages to track activity and conversions delivered by ads

www.mastercard.com.au/debit

Ad server

Ad Server Records:

• Creative served

• No. of impressions served

• Clicks generated

• Other interactions

• “Conversions”, allowing CPA measurement

Interaction

with web

page

recorded

Measurement and reporting• Reporting configured and provided by the media agency

• The Ad server will typically provide stats on:

Campaigns trafficked

Impressions served

Click through rates

Conversions

Flight comparisons (“Flight” refers to ads served in a position on publisher’s page)

Creative comparisons

Campaign optimisation

• The media agency can often specify an increase/decrease of impressions per ad type based on activity reports

• The media agency can set the weighting of creative per flight based on performance (e.g. Click through rate), or can request this of a publisher

• The media agency can (sometimes) set weighting of flights across publisher pages/sites for RON (Run Of Network) ads (negotiated by publisher)

• Additional creative can often be added to a campaign once scheduled (edited copy, new creative or updated links)

So…• Request frequent updates on your campaign from your media agency

• Optimise your campaign based on successful creative, flights and sites

• Update creative whenever necessary to ensure relevance and maximise response

• Always try to include conversion tracking in your campaign….where possible

Summary• Several types of online ad available – budget, timeline and campaign objectives should all be considered when selecting creative media type

• Budgets and timelines will be directly impacted by the media schedule and publisher specifications – highlighting their importance

• Ad build process consistent for most types of ad. Alterations at any point will often have a knock-on effect

• Campaign creative reporting is provided by your media agency for ads. Campaign effectiveness is relatively easy to track and should be requested during planning

• Monitoring effectiveness throughout campaign should be agreed to and optimization reviews scheduled

Resources

http://creativezone.eyeblaster.com/

http://www.bannerblog.com.au/

MasterCard Digital Training

“Building a MasterCard website”

Agenda

• Scoping the idea

• Designing a website

• Building

• Implementing

• Launching and updating your site

So whaddya want?So whaddya want?Scoping a projectScoping a project

What is “scoping”?

Scoping is the process by which we examine what we are trying to achieve with a website and decide how we are going to deliver it

• Through scoping,

you will determine how content will be included on your web pages

you will define the user-journey through your site

you will define how a user will interact with your site

you will decide upon and define the technical architecture for your site

you will define how much your website build will cost and how long it will take

…..to a degree of accuracy!

What’s involved?A number of tasks can be performed during the scoping phase of a project, producing a number of elements, including

• Stakeholder feedback/Executive summary

• Statement of work

• Functional specification (often also called a Scoping Document)

• Technical specification

• User, Functional or Data work-flows

• Tracking requirements

• Site map

• Page wireframes

• Timeline

• Cost estimate

For MasterCard projects, the functional spec will form part of the DIF to be supplied to the GTO

Why is it important?

Should go without saying, but:

• Allows both consumer and business goals to be identified and set

• Allows all appointed stakeholders to input into project and agree outcomes

• Allows content inclusions, priorities and layout to be specified and reviewed before any design or build has commenced

• Allows timeframes and cost estimates to be identified

How long does it take?

Typically, the scoping phase of a web-build project will count for 40% of the total project timeline

For MasterCard projects, this would include (several) conversations with the GTO to discuss functional requirements, timelines, resource requirements and CMS access

Making pretty picturesMaking pretty picturesConcepting and creative designConcepting and creative design

The Creative brief

• Written by the Account Service team, the creative brief outlines the campaign requirements, objectives and brand considerations

• It dictates the desired tone and style of both the copy and creative concept

• It indicates where inspiration should be drawn from (if specific sites have been identified)

• It identifies the target audience and communications objectives

• It allows all parties (internal departments and the client) to input into the desired outcomes from a creative perspective

The result of which will be…..

And…

The studio brief (Task brief)

• Written by the Digital Producer, the task brief outlines to the digital studio the “nuts and bolts” of the design build

• Identifies the selected concept with any amends

• Provides the location of any supplied assets or outlines sourcing requirements

• Details technical requirements relating to design including minimum supported screen resolution, style guide to follow and CMS or other code restrictions affecting design

• Will incorporate the functional and technical specification documents

The result is “pixel-perfect” PSDs which can be used to create page code…..

How long does it take?

Typically, the concepting and design phase of a web-build project will account for 20% of the project timeline

Slice ‘n’ diceSlice ‘n’ diceFront-end codingFront-end coding

Front-end coding

• The front-end developer (often called a Web Designer) will take the PSD files and use Photoshop to “slice” them into assets

Like this…

Front-end coding

• Images then need to be made “web-ready” and resized to between 72 and 96DPI

• Colours matched and made “web-safe”

• Flash elements will also be developed at this time

• They will then produce a mixture of HTML and CSS code which will replicate the design in a web-browser

• They will produce the code in line with SEO best practice standards

• They will adhere to W3C standards for accessibility

• They will liaise with the back-end developers (GTO) to ensure the code they provide is usable in the CMS

• They will provide place-holders for additional functions to be included later (e.g. XML files, Video player, Photo gallery etc.)

• They will set up their code in a “development” environment where all parties can review and comments on design and layout

The result will be the “shell” of the website with a completed design, but without the functionality.

HTML code

CSS+ Assets+

=

How long does it take?

Typically, the front-end development phase of a web-build project will account for 20% of the project timeline

<Code> Monkey Business<Code> Monkey BusinessBack-end coding and implementationBack-end coding and implementation

Back-end coding and implementation

• At this stage, front-end code is handed off to the GTO for implementation onto the CMS

• Code is also provided to dload so form pages can be created

• Javascripts (allowing interaction and functionality) are also added at this point

• The front-end developer will work closely with the GTO, dload and other back-end developers to ensure code is implemented correctly and all assets are provided

• The Producer will begin uploading materials (images, videos, flash files etc.) to the CMS

• The Producer will work with dload to set-up the required databases and data-capture requirements

• Tracking tags will usually have been created by this point and provided directly to the GTO for inclusion within page code

• The pages will be uploaded to a staging environment for review and testing

How long does it take?

Typically, the technical implementation phase of a web-build project will account for 10% of the project timeline

It is also typically one of the largest cost-points

Go for launchGo for launchTesting, fixing and launching a websiteTesting, fixing and launching a website

Testing and bug-fixing

• Well-run projects will contain several testing phases throughout the development phases

• A master bug-list should always be prepared for the final testing phase

• Typically done in a staging environment

• Amends made in a local development environment then pushed to staging for review

• Once all amends are made and site is approved, the site can be launched

GTO

Development environment

CMS Templates created and page code implemented

MercerBell

Page coded

handed off

Amends briefed and staging site updated

Amends pushed to live site

Post-launch

• Live-site should be checked following same process as pre-launch testing

• Tracking code should be checked to ensure it is working

• Typical live-site updates will follow the same process as launch

• Larger updates may require coding by MercerBell and review on local staging environment

How long does it take?

Typically, the launch phase of a web-build project will account for 10% of the project timeline

Finished!.....almost

In summary

There are 5 major phases of a web-build project for MasterCard

Scoping, specification and technical design can contribute to 40% of the overall timeline but is by far the most important phase

Agreeing page layout and content inclusions during scoping will save time later in the process

Front-end coding not only covers design, but also search, accessibility and browser compatibility

While back-end implementation can be a relatively short phase, it is often one of the more costly

Testing is vital at all stages of the project, even after a site has launched

•

Thank you