ga london-html5&mobile advertising-tomlimongello

crispHTML5 & Mobile Advertising

Tom Limongello, VP Product MarketingCRISP MEDIA

Wednesday, July 11th, 2012Thursday, July 12, 12

AgendaMobile HTML5, state of the union

HTML5 Containers & Optimized Ad Placements

Responsive Design for Mobile Advertising

Animation, Frameworks & Tools

Tremendous Offline Ads

Mobile Advertising & Engagement Reporting

Technological Enhancements to Ad Design

Summary of Features

Q&A

Thursday, July 12, 12

http://mobileHTML5.org

HTML5 Evolution: Slow and Steady




Respond to the terrain

Ad Placements Need to be Optimized for Content crisp


Support all content channelsDesktop Sites Mobile Web Apps

iframes inline native code

crispThursday, July 12, 12

Support all content channelsDesktop Sites Mobile Web Apps

iframes inline native code

HTML 5 Container


Ad placements: IAB Mobile Rising Stars

Filmstrip Full Page

Slider Push

adhesion


Beware of heavy ads

Those campaigns we loved on the web might not fit anymore crisp


ANIMATION

SOCIAL

VIDEO

CALENDAR GAMES

HOTSPOTS

SWIPE

ACCELEROMETER

ANIMATION

SOCIAL

VIDEO

CALENDAR GAMES

HOTSPOTS

SWIPE

ACCELEROMETER

Balance Features & Ad Weight

150kb

50kb

300kb

4G / WiFi

3G

2.5G


crisp fontsweb fonts for text and icons are important in scaling to retina quality screens

font-family: crisp;


CSS designs are more flexible than images

CSS colors for backgrounds and buttons can scale to different sized screens

320 x 50

400 x 75

Text & Interactive Buttons

Background Design

iPhone

Large Android Smartphones


Sprite Animations

http://shortn.me/iHJ1




Deal with Orientation


1/2 of iPad users read in Landscape

So we use CSS to move the Tiffany box


Putting it all together

86kb137kb

(___ -){

http://m.adweek.com http://touch.crispmedia.com


http://m.adweek.com

http://m.adweek.com

http://touch.crispmedia.com

http://touch.crispmedia.com

Frameworks for animationFrameworks add a lot of file size weight to ad packages

hand coding is great if possible, if not try to use a solution that adds the least overhead


Frameworks for animation

Too Heavy:

Adobe Edge = 150kb

Google Swiffy = 116kb

Mobile JQuery = 24kb

Much Lighter:

Sencha Animator = 9-25kb

Zepto.js (JQuery replacement) = 9kb

Handcoding = 0kb

Frameworks add a lot of file size weight to ad packageshand coding is great if possible, if not try to use a solution that adds the least overhead


The Great OS Divide

iOS has always offered hardware acceleration for CSS, which makes animations work great on iPhone and iPad

Android has always had problems with animation, image scaling in particular

Good news is that Jelly Bean is making animations much smoother


Tremendous Ads

iPad has required the industry to adopt a hybrid model where creative assets are downloaded as content, while carrying

embedded web trackers crispThursday, July 12, 12

Engagement ReportingMobile is leading the way with Engagement Reporting

HTML5 ad experiences are not just a click to conversion, e.g. tap to appstore or tap to microsite affair

Rich HTML ads include the following stages:

• 1st engagement...usually a tap on a banner

• Navigation through content choices

• Engagement in playing a game, watching a video or animation

• Conversion to purchase or learn more outside of the ad


Can technology enhance responsive design?


Can technology enhance responsive design?

Yes.crisp


Mouse...Over


Mouse...Over

Use swipes and tilts to replace mouse movements, and create new, delightful experiences


Mouse...Over

Use swipes and tilts to replace mouse movements, and create new, delightful experiences

crisptilt

accelerometer


Point of View Video

tilt

See more about 180 degree video optimized by Condition One

http://www.conditionone.com/Thursday, July 12, 12

http://www.conditionone.com/

http://www.conditionone.com/

Image Recognition

Intelligent Hotspots


What about the bleeding edge?

Surecrisp


Facial Recognition

Creative Optimization

front facing camera + multiple creative treatments to optimize for gender, age, even disposition


Facial Recognition

Creative Optimization

front facing camera + multiple creative treatments to optimize for gender, age, even disposition

Eat at Joe’s

Eat at Joe’s


Visual Effects

Engagement Interac2ons Drawing & Typography

User Input Widgets

Transi2ons Games Gallery Naviga2on CSS Design Shake or Tilt Social Sign in

Anima2ons HTML5 Video Hotspots Paint or Wipe Loca2on Panels with API data

Image Scaling Non-‐linear video

Likes and Shares Web Fonts Orienta2on

Change Signups

All capabilities


crisp

@TomLimongello

Thank You!

Q&A


ga london-html5&mobile advertising-tomlimongello

Technology

content crispthursday

crisp crispthursday

steady http

condition onetilt http

engagement reporting

ad placementsresponsive

terrain ad placements

ad packageshand coding