SlideShare ist ein Scribd-Unternehmen logo
1 von 47
Downloaden Sie, um offline zu lesen
crisp
                        HTML5 & Mobile Advertising
                         Tom Limongello, VP Product Marketing
                                   CRISP MEDIA




                              Wednesday, July 11th, 2012
Thursday, July 12, 12
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
HTML5 Evolution: Slow and Steady




                         http://mobileHTML5.org
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 channels
                        Desktop Sites   Mobile Web     Apps




                          iframes         inline     native code


                                                                   crisp
Thursday, July 12, 12
Support all content channels
                        Desktop Sites       Mobile Web       Apps




                                        HTML 5 Container




                          iframes             inline       native code


                                                                         crisp
Thursday, July 12, 12
Ad placements: IAB Mobile Rising Stars
                 adhesion   Filmstrip      Full Page




                Slider              Push




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
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
crisp fonts
                         web fonts for text and
                         icons are important in
                         scaling to retina quality
                         screens
                        font-family: crisp;

                                                     crisp
Thursday, July 12, 12
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
Sprite Animations




                         http://shortn.me/iHJ1

Thursday, July 12, 12
Deal with Orientation




                                                crisp
Thursday, 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     (___ -){
                                               http://m.adweek.com
                                           http://touch.crispmedia.com




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




                         137kb                   86kb
Thursday, July 12, 12
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 great if possible, if not try to use a solution that adds the least overhead




Thursday, July 12, 12
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
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               crisp
Thursday, July 12, 12
Thursday, July 12, 12
Thursday, 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 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?




                                                 crisp
Thursday, July 12, 12
Can technology enhance
                          responsive design?




                                 Yes.
                                                 crisp
Thursday, July 12, 12
Mouse...Over




                                crisp
Thursday, July 12, 12
Mouse...Over




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




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




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


                accelerometer




                              tilt
                                               crisp
Thursday, 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
Point of View Video




                               See more about 180 degree video
                                  optimized by Condition One
                        tilt     http://www.conditionone.com/
Thursday, 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 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?




                                 Sure
                                                  crisp
Thursday, July 12, 12
What about the bleeding
                                edge?




                                 Sure
                                                  crisp
Thursday, July 12, 12
Facial Recognition
                        front facing camera + multiple creative treatments to
                              optimize for gender, age, even disposition




                 Creative Optimization
Thursday, 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 Optimization
Thursday, July 12, 12
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
crisp
                        Thank You!


                           Q&A

                        @TomLimongello
Thursday, July 12, 12

Weitere ähnliche Inhalte

Ähnlich wie Ga london-html5&mobile advertising-tomlimongello

3 Strategies for Going Mobile with Drupal
3 Strategies for Going Mobile with Drupal3 Strategies for Going Mobile with Drupal
3 Strategies for Going Mobile with DrupalForum One
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementPaul Irish
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5C4Media
 
Screen Based Design for Graphic Designer
Screen Based Design for Graphic DesignerScreen Based Design for Graphic Designer
Screen Based Design for Graphic DesignerBow Kraivanich
 
Faster, Cheaper, Better - Replacing Oracle with Hadoop & Solr
Faster, Cheaper, Better - Replacing Oracle with Hadoop & SolrFaster, Cheaper, Better - Replacing Oracle with Hadoop & Solr
Faster, Cheaper, Better - Replacing Oracle with Hadoop & SolrKen Krugler
 
Faster Cheaper Better-Replacing Oracle with Hadoop & Solr
Faster Cheaper Better-Replacing Oracle with Hadoop & SolrFaster Cheaper Better-Replacing Oracle with Hadoop & Solr
Faster Cheaper Better-Replacing Oracle with Hadoop & SolrDataWorks Summit
 
Adapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureAdapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureChris Mills
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsMidori Connolly
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & YouDave Olsen
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceDee Sadler
 
Joshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of DevicesJoshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of DevicesFrancois Daoust
 
React Native: Trends For Digital Transformers
React Native: Trends For Digital TransformersReact Native: Trends For Digital Transformers
React Native: Trends For Digital TransformersSara Jones
 
Resolution Independence - Preparing Websites for Retina Displays
Resolution Independence - Preparing Websites for Retina DisplaysResolution Independence - Preparing Websites for Retina Displays
Resolution Independence - Preparing Websites for Retina Displayssteveschrab
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With DrupalJesper Wøldiche
 
Managing Technical Debt
Managing Technical DebtManaging Technical Debt
Managing Technical Debtspullara
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTEfidibiko
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCritical Mass
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Ram Singh
 
Social ROI and Value modeling
Social ROI and Value modeling Social ROI and Value modeling
Social ROI and Value modeling Peter H. Reiser
 

Ähnlich wie Ga london-html5&mobile advertising-tomlimongello (20)

3 Strategies for Going Mobile with Drupal
3 Strategies for Going Mobile with Drupal3 Strategies for Going Mobile with Drupal
3 Strategies for Going Mobile with Drupal
 
Progressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancementProgressive Advancement, by way of progressive enhancement
Progressive Advancement, by way of progressive enhancement
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5
 
Screen Based Design for Graphic Designer
Screen Based Design for Graphic DesignerScreen Based Design for Graphic Designer
Screen Based Design for Graphic Designer
 
Faster, Cheaper, Better - Replacing Oracle with Hadoop & Solr
Faster, Cheaper, Better - Replacing Oracle with Hadoop & SolrFaster, Cheaper, Better - Replacing Oracle with Hadoop & Solr
Faster, Cheaper, Better - Replacing Oracle with Hadoop & Solr
 
Faster Cheaper Better-Replacing Oracle with Hadoop & Solr
Faster Cheaper Better-Replacing Oracle with Hadoop & SolrFaster Cheaper Better-Replacing Oracle with Hadoop & Solr
Faster Cheaper Better-Replacing Oracle with Hadoop & Solr
 
Adapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the futureAdapt and respond: keeping responsive into the future
Adapt and respond: keeping responsive into the future
 
Tech Tools for Meeting Professionals
Tech Tools for Meeting ProfessionalsTech Tools for Meeting Professionals
Tech Tools for Meeting Professionals
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
 
NCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experienceNCDevCon2012_designing the mobile experience
NCDevCon2012_designing the mobile experience
 
Joshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of DevicesJoshfire Factory: Building Apps for Billion of Devices
Joshfire Factory: Building Apps for Billion of Devices
 
React Native: Trends For Digital Transformers
React Native: Trends For Digital TransformersReact Native: Trends For Digital Transformers
React Native: Trends For Digital Transformers
 
Resolution Independence - Preparing Websites for Retina Displays
Resolution Independence - Preparing Websites for Retina DisplaysResolution Independence - Preparing Websites for Retina Displays
Resolution Independence - Preparing Websites for Retina Displays
 
Going Mobile First With Drupal
Going Mobile First With DrupalGoing Mobile First With Drupal
Going Mobile First With Drupal
 
Managing Technical Debt
Managing Technical DebtManaging Technical Debt
Managing Technical Debt
 
Responsive Design - ISCTE
Responsive Design - ISCTEResponsive Design - ISCTE
Responsive Design - ISCTE
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
 
Social ROI and Value modeling
Social ROI and Value modeling Social ROI and Value modeling
Social ROI and Value modeling
 
Anurag jangra
Anurag jangraAnurag jangra
Anurag jangra
 

Kürzlich hochgeladen

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 

Kürzlich hochgeladen (20)

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 

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
  • 3. HTML5 Evolution: Slow and Steady http://mobileHTML5.org Thursday, July 12, 12
  • 4. Respond to the terrain Ad Placements Need to be Optimized for Content crisp Thursday, July 12, 12
  • 5. Respond to the terrain Ad Placements Need to be Optimized for Content crisp Thursday, July 12, 12
  • 6. Support all content channels Desktop Sites Mobile Web Apps iframes inline native code crisp Thursday, July 12, 12
  • 7. Support all content channels Desktop Sites Mobile Web Apps HTML 5 Container iframes inline native code crisp Thursday, July 12, 12
  • 8. Ad placements: IAB Mobile Rising Stars adhesion Filmstrip Full Page Slider Push 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
  • 15. Sprite Animations http://shortn.me/iHJ1 Thursday, July 12, 12
  • 16. Deal with Orientation crisp Thursday, July 12, 12
  • 17. 1/2 of iPad users read in Landscape So we use CSS to move the Tiffany box Thursday, July 12, 12
  • 18. Putting it all together (___ -){ http://m.adweek.com http://touch.crispmedia.com 137kb 86kb Thursday, July 12, 12
  • 19. Putting it all together (___ -){ http://m.adweek.com http://touch.crispmedia.com 137kb 86kb 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
  • 29. Can technology enhance responsive design? crisp Thursday, July 12, 12
  • 30. Can technology enhance responsive design? Yes. crisp Thursday, July 12, 12
  • 31. Mouse...Over crisp Thursday, July 12, 12
  • 32. Mouse...Over crisp 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
  • 39. Image Recognition Intelligent Hotspots Thursday, July 12, 12
  • 40. Image Recognition Intelligent Hotspots Thursday, July 12, 12
  • 41. Image Recognition Intelligent Hotspots 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