Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Ga london-html5&mobile advertising-tomlimongello
1. crisp
HTML5 & Mobile Advertising
Tom Limongello, VP Product Marketing
CRISP MEDIA
Wednesday, July 11th, 2012
Thursday, July 12, 12
2. Agenda
Mobile 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
10. Beware of heavy ads
Those campaigns we loved on the
web might not fit anymore crisp
Thursday, July 12, 12
11. Beware of heavy ads
Those campaigns we loved on the
web might not fit anymore crisp
Thursday, July 12, 12
12. Balance Features & Ad Weight
4G / WiFi
ANIMATION ACCELEROMETER
SOCIAL HOTSPOTS
300kb
VIDEO SWIPE 3G
CALENDAR GAMES
150kb
NIMATION ACCELEROMETER
2.5G
OCIAL HOTSPOTS
DEO SWIPE
50kb
ALENDAR GAMES
crisp
Thursday, July 12, 12
13. crisp fonts
web fonts for text and
icons are important in
scaling to retina quality
screens
font-family: crisp;
crisp
Thursday, July 12, 12
14. CSS designs are more flexible than images
CSS colors for backgrounds and buttons can scale to
different sized screens
400 x 75 Background Design
320 x 50 Text & Interactive Buttons
iPhone
Large Android Smartphones
crisp
Thursday, July 12, 12
22. Frameworks for animation
Frameworks 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
23. Frameworks for animation
Frameworks 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
Too Heavy:
Adobe Edge = 150kb
Google Swiffy = 116kb Much Lighter:
Mobile JQuery = 24kb Sencha Animator =
9-25kb
Zepto.js (JQuery
replacement) = 9kb
Handcoding = 0kb
Thursday, July 12, 12
24. 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
25. Tremendous Ads
iPad has required the industry to adopt a
hybrid model where creative assets are
downloaded as content, while carrying
embedded web trackers crisp
Thursday, July 12, 12
28. 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 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
33. Mouse...Over
Use swipes and tilts
to replace mouse
movements, and
create new,
delightful
experiences
crisp
Thursday, July 12, 12
34. Mouse...Over
Use swipes and tilts
to replace mouse
movements, and
create new,
delightful
experiences
crisp
Thursday, July 12, 12
35. Mouse...Over
Use swipes and tilts
to replace mouse
movements, and
create new,
delightful
experiences
accelerometer
tilt
crisp
Thursday, July 12, 12
36. Point of View Video
See more about 180 degree video
optimized by Condition One
tilt http://www.conditionone.com/
Thursday, July 12, 12
37. Point of View Video
See more about 180 degree video
optimized by Condition One
tilt http://www.conditionone.com/
Thursday, July 12, 12
38. Point of View Video
See more about 180 degree video
optimized by Condition One
tilt http://www.conditionone.com/
Thursday, July 12, 12
42. What about the bleeding
edge?
Sure
crisp
Thursday, July 12, 12
43. What about the bleeding
edge?
Sure
crisp
Thursday, July 12, 12
44. Facial Recognition
front facing camera + multiple creative treatments to
optimize for gender, age, even disposition
Creative Optimization
Thursday, July 12, 12
45. Facial Recognition
front facing camera + multiple creative treatments to
optimize for gender, age, even disposition
Eat at
at
Eat
Joe’s
Joe’s
Creative Optimization
Thursday, July 12, 12
46. All capabilities
Visual
Engagement Interac2ons Drawing
&
User
Input Widgets
Effects 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 Change
Thursday, July 12, 12
47. crisp
Thank You!
Q&A
@TomLimongello
Thursday, July 12, 12