Blue Angels Web Site <ul><li>Use of HTML5 Video </li></ul>
Tony Walt <ul><li>Director of 3D and Motion Design </li></ul>Tweeting: @tonyjwalt, #effectiveui
EffectiveUI <ul><li>User Experience Agency </li></ul>
Blue Angels <ul><li>Flying aerobatic team </li></ul>
 
 
 
 
 
 
Microsoft & EffectiveUI <ul><li>Build a better site </li></ul>
 
Challenges <ul><li>Non-HTML5 Browsers & Mobile </li></ul><ul><li>Inconsistent Playback </li></ul><ul><li>Encoding </li></u...
Non-HTML5 Browsers and Mobile
Video Ripping Inconsistent Playback
Animations Inconsistent Playback
<ul><li>Video Formats </li></ul><ul><ul><li>WebM, OGV, MP4 </li></ul></ul><ul><li>Audio Formats </li></ul><ul><ul><li>MP3,...
Video Ripping
Building for Beta
Event Model
Atypical Use
Results <ul><li>Site visitors more than doubled </li></ul><ul><li>Time on site went through the roof – due to video </li><...
Thank you.
Upcoming SlideShare
Loading in …5
×

Blue Angels Case Study

1,633 views

Published on

Presented at HTML5 Video Summit - November 2011 by Tony Walt

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

  • Be the first to like this

No Downloads
Views
Total views
1,633
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Tony Walt Director of 3D and Motion Design == My team is responsible for == Planning, Creation, Implementation of media across EUI projects Today – use of HTML5 Video – Navy Blue Angels Hashtag EffectiveUI @tonyjwalt
  • User Experience Agency Build applications focused on users Improving digital interactions Enhancing emotional engagement with companies and their brands
  • One group we had pleasure to work with Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations –millions spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound) Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations – 14 million spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound)
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Wanted to help, partnered with us Build site that extends their flight demonstration beyond the airshow to a wider audience and enhances that experience. Homepage was the primary point for HTML5. Let ’s take a look at that.
  • ====What you are looking at==== Animated UI (CSS3 Transforms, JS) Custom Loader - Audio player (Canvas, JS) Background video/audio (Video/Audio Tags) ====Why did we do this?==== Get people excited, draw them in. Will impact the rest of the experience Tie it to the Feature pages (Silverlight) Why not in Feature sections – Entry vs. Destinations within the site (IIS) ====Why HTML5==== Background element – no plugin prompts
  • NonHTML5 browsers Mobile – resolutions, inline playback , bandwidth, data plans (cost) progressive enhancement – baseline, then video Just delivered image
  • Inconsistent Playback - Injecting the video tag (stuttering) verse removing on detection
  • Supported was not standard. CSS3 Transforms behaving differently
  • Encoding Video - Mp4, OGV, WebM video size (baseline 12.7MB, MP4 high profile 6.38MB) Audio (MP3, OGG – 534KB) verse Wav (6MB)
  • Video Ripping – some animated elements delayed until after video
  • Browsers released while making the site: IE9, Firefox 3.5 &amp; 3.6 Lots of testing
  • Event Model – Firefox 3.5 “ended” event and looping, “progress” events (videoJS)
  • Atypical use – had to work with videoJS to play correctly
  • Results: =================== Site Visitors More than doubled Time on site went through the roof (mostly video)
  • Blue Angels Case Study

    1. 1. Blue Angels Web Site <ul><li>Use of HTML5 Video </li></ul>
    2. 2. Tony Walt <ul><li>Director of 3D and Motion Design </li></ul>Tweeting: @tonyjwalt, #effectiveui
    3. 3. EffectiveUI <ul><li>User Experience Agency </li></ul>
    4. 4. Blue Angels <ul><li>Flying aerobatic team </li></ul>
    5. 11. Microsoft & EffectiveUI <ul><li>Build a better site </li></ul>
    6. 13. Challenges <ul><li>Non-HTML5 Browsers & Mobile </li></ul><ul><li>Inconsistent Playback </li></ul><ul><li>Encoding </li></ul><ul><li>Video Ripping </li></ul><ul><li>Building for Beta </li></ul><ul><li>Event Model </li></ul><ul><li>Atypical Use </li></ul>
    7. 14. Non-HTML5 Browsers and Mobile
    8. 15. Video Ripping Inconsistent Playback
    9. 16. Animations Inconsistent Playback
    10. 17. <ul><li>Video Formats </li></ul><ul><ul><li>WebM, OGV, MP4 </li></ul></ul><ul><li>Audio Formats </li></ul><ul><ul><li>MP3, OGG </li></ul></ul><ul><li>Encoders </li></ul><ul><ul><li>Adobe Media Encoder </li></ul></ul><ul><ul><li>Handbrake (X264) </li></ul></ul><ul><ul><li>XMedia Recode </li></ul></ul><ul><ul><li>Firefogg </li></ul></ul>Encoding
    11. 18. Video Ripping
    12. 19. Building for Beta
    13. 20. Event Model
    14. 21. Atypical Use
    15. 22. Results <ul><li>Site visitors more than doubled </li></ul><ul><li>Time on site went through the roof – due to video </li></ul><ul><li>Link: www.blueangels.navy.mil </li></ul>
    16. 23. Thank you.

    ×