Ga london-html5&mobile advertising-tomlimongello

crisp HTML5 & Mobile Advertising Tom Limongello, VP Product Marketing CRISP MEDIA Wednesday, July 11th, 2012Thursday, July 12, 12

Agenda Mobile HTML5, state of the union HTML5 Containers & Optimized Ad Placements Responsive Design for Mobile Advertising Animation, Frameworks & Tools Tremendous Oﬄine Ads Mobile Advertising & Engagement Reporting Technological Enhancements to Ad Design Summary of Features Q&AThursday, July 12, 12

HTML5 Evolution: Slow and Steady http://mobileHTML5.orgThursday, July 12, 12

Respond to the terrain Ad Placements Need to be Optimized for Content crispThursday, July 12, 12

Support all content channels Desktop Sites Mobile Web Apps iframes inline native code crispThursday, July 12, 12

Support all content channels Desktop Sites Mobile Web Apps HTML 5 Container iframes inline native code crispThursday, July 12, 12

Ad placements: IAB Mobile Rising Stars adhesion Filmstrip Full Page Slider PushThursday, July 12, 12

Thursday, July 12, 12

Beware of heavy ads Those campaigns we loved on the web might not ﬁt anymore crispThursday, July 12, 12

Balance Features & Ad Weight 4G / WiFi ANIMATION ACCELEROMETER SOCIAL HOTSPOTS 300kb VIDEO SWIPE 3G CALENDAR GAMES 150kbNIMATION ACCELEROMETER 2.5GOCIAL HOTSPOTSDEO SWIPE 50kbALENDAR GAMES crisp Thursday, July 12, 12

crisp fonts web fonts for text and icons are important in scaling to retina quality screens font-family: crisp; crispThursday, July 12, 12

CSS designs are more ﬂexible than images CSS colors for backgrounds and buttons can scale to diﬀerent sized screens 400 x 75 Background Design 320 x 50 Text & Interactive Buttons iPhone Large Android Smartphones crispThursday, July 12, 12

Sprite Animations http://shortn.me/iHJ1Thursday, July 12, 12

Deal with Orientation crispThursday, July 12, 12

1/2 of iPad users read in Landscape So we use CSS to move the Tiﬀany boxThursday, July 12, 12

Putting it all together (___ -){ http://m.adweek.com http://touch.crispmedia.com 137kb 86kbThursday, July 12, 12

Frameworks for animation Frameworks add a lot of ﬁle size weight to ad packages hand coding is great if possible, if not try to use a solution that adds the least overheadThursday, July 12, 12

Frameworks for animation Frameworks add a lot of ﬁle size weight to ad packages hand coding is great if possible, if not try to use a solution that adds the least overhead Too Heavy: Adobe Edge = 150kb Google Swiﬀy = 116kb Much Lighter: Mobile JQuery = 24kb Sencha Animator = 9-25kb Zepto.js (JQuery replacement) = 9kb Handcoding = 0kbThursday, July 12, 12

The Great OS Divide iOS has always oﬀered 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 smootherThursday, July 12, 12

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 Reporting Mobile 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 aﬀair 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 adThursday, July 12, 12

Can technology enhance responsive design? crispThursday, July 12, 12

Can technology enhance responsive design? Yes. crispThursday, July 12, 12

Mouse...Over crispThursday, July 12, 12

Mouse...Over Use swipes and tilts to replace mouse movements, and create new, delightful experiences crispThursday, July 12, 12

Mouse...Over Use swipes and tilts to replace mouse movements, and create new, delightful experiences accelerometer tilt crispThursday, July 12, 12

Point of View Video See more about 180 degree video optimized by Condition One tilt http://www.conditionone.com/Thursday, July 12, 12

Image Recognition Intelligent HotspotsThursday, July 12, 12

What about the bleeding edge? Sure crispThursday, July 12, 12

Facial Recognition front facing camera + multiple creative treatments to optimize for gender, age, even disposition Creative OptimizationThursday, July 12, 12

Facial Recognition front facing camera + multiple creative treatments to optimize for gender, age, even disposition Eat at at Eat Joe’s Joe’s Creative OptimizationThursday, July 12, 12

All capabilities Visual Engagement Interac2ons Drawing & User Input Widgets Eﬀects Typography Gallery Transi2ons Games CSS Design Shake or Tilt Social Sign in Naviga2on Panels with Anima2ons HTML5 Video Hotspots Paint or Wipe Loca2on API data Non-‐linear Likes and Orienta2on Image Scaling Web Fonts Signups video Shares ChangeThursday, July 12, 12

crisp Thank You! Q&A @TomLimongelloThursday, July 12, 12

Ga london-html5&mobile advertising-tomlimongello

by Tom Limongello on Jul 18, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 4

Statistics

Ga london-html5&mobile advertising-tomlimongello Presentation Transcript

http://www.linkedin.com	3
http://pinterest.com	1