ga london-html5&mobile advertising-tomlimongello
Post on 21-Jan-2015
660 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Thursday, July 12, 12
Respond to the terrain
Ad Placements Need to be Optimized for Content crisp
Thursday, July 12, 12
Respond to the terrain
Ad Placements Need to be Optimized for Content crisp
Thursday, July 12, 12
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
crispThursday, July 12, 12
Ad placements: IAB Mobile Rising Stars
Filmstrip Full Page
Slider Push
adhesion
Thursday, July 12, 12
Thursday, July 12, 12
Beware of heavy ads
Those campaigns we loved on the web might not fit anymore crisp
Thursday, July 12, 12
Beware of heavy ads
Those campaigns we loved on the web might not fit anymore crisp
Thursday, July 12, 12
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
crispThursday, July 12, 12
crisp fontsweb fonts for text and icons are important in scaling to retina quality screens
font-family: crisp;
crispThursday, July 12, 12
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
crispThursday, July 12, 12
Sprite Animations
http://shortn.me/iHJ1
Thursday, 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 Tiffany box
Thursday, July 12, 12
Putting it all together
86kb137kb
(___ -){
http://m.adweek.com http://touch.crispmedia.com
Thursday, July 12, 12
Putting it all together
86kb137kb
(___ -){
http://m.adweek.com http://touch.crispmedia.com
Thursday, July 12, 12
Thursday, July 12, 12
Thursday, July 12, 12
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
Thursday, July 12, 12
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
Thursday, July 12, 12
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
Thursday, 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
Thursday, July 12, 12
Thursday, 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
Thursday, July 12, 12
Can technology enhance responsive design?
crispThursday, July 12, 12
Can technology enhance responsive design?
Yes.crisp
Thursday, July 12, 12
Mouse...Over
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
crispThursday, July 12, 12
Mouse...Over
Use swipes and tilts to replace mouse movements, and create new, delightful experiences
crisptilt
accelerometer
Thursday, July 12, 12
Point of View Video
tilt
See more about 180 degree video optimized by Condition One
http://www.conditionone.com/Thursday, July 12, 12
Point of View Video
tilt
See more about 180 degree video optimized by Condition One
http://www.conditionone.com/Thursday, July 12, 12
Point of View Video
tilt
See more about 180 degree video optimized by Condition One
http://www.conditionone.com/Thursday, July 12, 12
Image Recognition
Intelligent Hotspots
Thursday, July 12, 12
Image Recognition
Intelligent Hotspots
Thursday, July 12, 12
Image Recognition
Intelligent Hotspots
Thursday, July 12, 12
What about the bleeding edge?
Surecrisp
Thursday, July 12, 12
What about the bleeding edge?
Surecrisp
Thursday, July 12, 12
Facial Recognition
Creative Optimization
front facing camera + multiple creative treatments to optimize for gender, age, even disposition
Thursday, July 12, 12
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
Thursday, July 12, 12
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
Thursday, July 12, 12
crisp
@TomLimongello
Thank You!
Q&A
Thursday, July 12, 12
top related