Your SlideShare is downloading. ×
0
crisp                        HTML5 & Mobile Advertising                         Tom Limongello, VP Product Marketing      ...
Agenda                        Mobile HTML5, state of the union                        HTML5 Containers & Optimized Ad Plac...
HTML5 Evolution: Slow and Steady                         http://mobileHTML5.orgThursday, July 12, 12
Respond to the terrain                         Ad Placements Need to be                          Optimized for Content    ...
Respond to the terrain                         Ad Placements Need to be                          Optimized for Content    ...
Support all content channels                        Desktop Sites   Mobile Web     Apps                          iframes  ...
Support all content channels                        Desktop Sites       Mobile Web       Apps                             ...
Ad placements: IAB Mobile Rising Stars                 adhesion   Filmstrip      Full Page                Slider          ...
Thursday, July 12, 12
Beware of heavy ads                 Those campaigns we loved on the                    web might not fit anymore     crispT...
Beware of heavy ads                 Those campaigns we loved on the                    web might not fit anymore     crispT...
Balance Features & Ad Weight                                                          4G / WiFi                          A...
crisp fonts                         web fonts for text and                         icons are important in                 ...
CSS designs are more flexible than images                        CSS colors for backgrounds and buttons can scale to       ...
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                            ...
Putting it all together     (___ -){                                               http://m.adweek.com                    ...
Putting it all together     (___ -){                                               http://m.adweek.com                    ...
Thursday, July 12, 12
Thursday, July 12, 12
Frameworks for animation                     Frameworks add a lot of file size weight to ad packages      hand coding is gr...
Frameworks for animation                     Frameworks add a lot of file size weight to ad packages      hand coding is gr...
The Great OS Divide                        iOS has always offered hardware                        acceleration for CSS, whi...
Tremendous Ads                        iPad has required the industry to adopt a                         hybrid model where...
Thursday, July 12, 12
Thursday, July 12, 12
Engagement Reporting                         Mobile is leading the way with Engagement                         Reporting  ...
Can technology enhance                          responsive design?                                                 crispTh...
Can technology enhance                          responsive design?                                 Yes.                   ...
Mouse...Over                                crispThursday, July 12, 12
Mouse...Over                                crispThursday, July 12, 12
Mouse...Over                        Use swipes and tilts                        to replace mouse                        mo...
Mouse...Over                        Use swipes and tilts                        to replace mouse                        mo...
Mouse...Over                        Use swipes and tilts                        to replace mouse                        mo...
Point of View Video                               See more about 180 degree video                                  optimiz...
Point of View Video                               See more about 180 degree video                                  optimiz...
Point of View Video                               See more about 180 degree video                                  optimiz...
Image Recognition                 Intelligent HotspotsThursday, July 12, 12
Image Recognition                 Intelligent HotspotsThursday, July 12, 12
Image Recognition                 Intelligent HotspotsThursday, July 12, 12
What about the bleeding                                edge?                                 Sure                         ...
What about the bleeding                                edge?                                 Sure                         ...
Facial Recognition                        front facing camera + multiple creative treatments to                           ...
Facial Recognition                        front facing camera + multiple creative treatments to                           ...
All capabilities             Visual	      Engagement Interac2ons Drawing	  &	   User	  Input                              ...
crisp                        Thank You!                           Q&A                        @TomLimongelloThursday, July ...
Upcoming SlideShare
Loading in...5
×

Ga london-html5&mobile advertising-tomlimongello

697

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ga london-html5&mobile advertising-tomlimongello"

  1. 1. crisp HTML5 & Mobile Advertising Tom Limongello, VP Product Marketing CRISP MEDIA Wednesday, July 11th, 2012Thursday, July 12, 12
  2. 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&AThursday, July 12, 12
  3. 3. HTML5 Evolution: Slow and Steady http://mobileHTML5.orgThursday, July 12, 12
  4. 4. Respond to the terrain Ad Placements Need to be Optimized for Content crispThursday, July 12, 12
  5. 5. Respond to the terrain Ad Placements Need to be Optimized for Content crispThursday, July 12, 12
  6. 6. Support all content channels Desktop Sites Mobile Web Apps iframes inline native code crispThursday, July 12, 12
  7. 7. Support all content channels Desktop Sites Mobile Web Apps HTML 5 Container iframes inline native code crispThursday, July 12, 12
  8. 8. Ad placements: IAB Mobile Rising Stars adhesion Filmstrip Full Page Slider PushThursday, July 12, 12
  9. 9. Thursday, July 12, 12
  10. 10. Beware of heavy ads Those campaigns we loved on the web might not fit anymore crispThursday, July 12, 12
  11. 11. Beware of heavy ads Those campaigns we loved on the web might not fit anymore crispThursday, July 12, 12
  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
  13. 13. crisp fonts web fonts for text and icons are important in scaling to retina quality screens font-family: crisp; crispThursday, July 12, 12
  14. 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 crispThursday, July 12, 12
  15. 15. Sprite Animations http://shortn.me/iHJ1Thursday, July 12, 12
  16. 16. Deal with Orientation crispThursday, July 12, 12
  17. 17. 1/2 of iPad users read in Landscape So we use CSS to move the Tiffany boxThursday, July 12, 12
  18. 18. Putting it all together (___ -){ http://m.adweek.com http://touch.crispmedia.com 137kb 86kbThursday, July 12, 12
  19. 19. Putting it all together (___ -){ http://m.adweek.com http://touch.crispmedia.com 137kb 86kbThursday, July 12, 12
  20. 20. Thursday, July 12, 12
  21. 21. Thursday, July 12, 12
  22. 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 overheadThursday, July 12, 12
  23. 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 = 0kbThursday, July 12, 12
  24. 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 smootherThursday, July 12, 12
  25. 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 crispThursday, July 12, 12
  26. 26. Thursday, July 12, 12
  27. 27. Thursday, July 12, 12
  28. 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 adThursday, July 12, 12
  29. 29. Can technology enhance responsive design? crispThursday, July 12, 12
  30. 30. Can technology enhance responsive design? Yes. crispThursday, July 12, 12
  31. 31. Mouse...Over crispThursday, July 12, 12
  32. 32. Mouse...Over crispThursday, July 12, 12
  33. 33. Mouse...Over Use swipes and tilts to replace mouse movements, and create new, delightful experiences crispThursday, July 12, 12
  34. 34. Mouse...Over Use swipes and tilts to replace mouse movements, and create new, delightful experiences crispThursday, July 12, 12
  35. 35. Mouse...Over Use swipes and tilts to replace mouse movements, and create new, delightful experiences accelerometer tilt crispThursday, July 12, 12
  36. 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. 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. 38. Point of View Video See more about 180 degree video optimized by Condition One tilt http://www.conditionone.com/Thursday, July 12, 12
  39. 39. Image Recognition Intelligent HotspotsThursday, July 12, 12
  40. 40. Image Recognition Intelligent HotspotsThursday, July 12, 12
  41. 41. Image Recognition Intelligent HotspotsThursday, July 12, 12
  42. 42. What about the bleeding edge? Sure crispThursday, July 12, 12
  43. 43. What about the bleeding edge? Sure crispThursday, July 12, 12
  44. 44. Facial Recognition front facing camera + multiple creative treatments to optimize for gender, age, even disposition Creative OptimizationThursday, July 12, 12
  45. 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 OptimizationThursday, July 12, 12
  46. 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 ChangeThursday, July 12, 12
  47. 47. crisp Thank You! Q&A @TomLimongelloThursday, July 12, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×