Adding the Awesomesauce Flavor with IE9 Pinned Sites

Adding the Awesomesauce Flavor with Internet Explorer 9 Pinned Sites John Bristowe Sr. Dev. Evangelist Microsoft @jbristowe

Internet Explorer 9 Pinned Sites John Bristowe Sr. Dev. Evangelist Microsoft demo

Internet Explorer 9 Pinned Sites Break CNN eBay eHow facebook Flixster Gilt Hi5 Hotmail Huffington Post hulu kaboodle LinkedIn Myspace NAVER Netlog New York Times orbitz Pandora photobucket Rotten Tomatoes SkyBeautiful Slacker Radio Sohu NBA TMobile Twitter WSJ Xing Yahoo! Japan Other examples from around the web

Internet Explorer 9 Pinned Sites 1,000+ sites globally currently leveraging this capability Puts your site at the center of the experience Enables your users to open your site quickly and easily Improves ability to navigate and interact with sites Doesn’t break the web It’s time to think outside the browser box! Zero-to-pinned in about five minutes Your sites, now with added awesomesauce

Internet Explorer 9 Pinned Sites Massive returns for minor investments

Internet Explorer 9 Pinned Sites Quick and easy to implement “Basic experiences” can be built in an hour “Deeper experiences” can be built in a day Users have a better experience that translates to measurable results 15-50% increase in site visits and engagement Compatible with existing sites and browsers Uses <meta> tags inside the <head> element of your page Massive returns for minor investments

Jump Lists John Bristowe Sr. Dev. Evangelist Microsoft demo

Taskbar Notifications John Bristowe Sr. Dev. Evangelist Microsoft demo

Thumbnail Controls John Bristowe Sr. Dev. Evangelist Microsoft demo

Internet Explorer 9 Pinned Sites Start URL Bound to the domain of the webpage Jump List Task Any destination is valid JavaScript APIs Bound to the domain of the webpage Security Model

Internet Explorer 9 Pinned Sites Carefully consider your Jump List items Consider web analytics to see how visitors are leveraging your pinned sites in IE9 Provide teasers to visitors via floating DIVs Inspect the UA beforehand Leverage cookies or local storage to show/hide teasers Some Best Practices

Resources for Internet Explorer 9 Pinned Sites MSDN portal for Internet Explorer 9, HTML5, CSS3, Compatibility, and more Lots of information on IE9 Pinned Sites Developer documentation JavaScript reference Examples msdn.com/ie

Resources for Internet Explorer 9 Pinned Sites Demos that highlight the features available through IE9 Pinned Sites Jump List Categories Overlay Icons Thumbnail Buttons Jump List Tasks and Navigation Button Colors ietestdrive.com/browser/pinning

Resources for Internet Explorer 9 Pinned Sites jQueryplug-infor adding IE9 features to your websites Dynamic Jump List Tasks Overlay Icons Teasers Also available via NuGet ie9ify.codeplex.com

Have more questions? Come meet me at the Internet Explorer Booth following this session! Internet Explorer MIXtery MEGA Box! Day #1 Puzzle – Fun with CSS3 <style> .row {display: -ms-box; -ms-box-orient: horizontal;} div div {width:100px;height:100px;border:1px solid #000; margin-bottom:10px; margin-right:10px; border-radius:5px;} </style> <h2>Puzzle #1</h2> <div class="row"><div>The</div> <div>Thing</div> <div>About</div><div>Coding</div><div>Colors</div></div> <div class="row"><div>In</div> <div>Hex</div> <div>Is</div><div>That</div><div>Many</div></div> <div class="row"><div>Web</div> <div>Developers</div> <div>Value</div><div>Simple</div><div>Commands</div></div> <div class="row"><div>Like</div> <div>#ccc</div> <div>Instead</div><div>of</div><div>Powerful</div></div> <div class="row"><div>But</div> <div>Longer</div><div>Commands</div><div>Like</div><div>RGB(73,69,49)</div></div> Follow @IE to find each day’s MIXtery box drop (twitter.com/IE) Follow IE on Foursquare to join us at our Wednesday pre-party Tweet Up/Meet up! (foursquare.com/IE ) Visit the IE demo stations at The Commons to crack the puzzle!

Have more questions? Come meet me at the Internet Explorer Booth following this session! Internet Explorer MIXtery MEGA Box! Day #2 Puzzle – HTML5 Jumble <canvas id="canvas" width="300" height="225"></canvas> <script> String.prototype.shuffle = function () { var a = this.split(""), n = a.length; for(var i = n - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); vartmp = a[i]; a[i] = a[j]; a[j] = tmp; } return a.join(""); } var s = "ltw..wbyiw"; var context = document.getElementById("canvas").getContext("2d"); context.font = "bold 50px sans-serif"; context.fillText(s.shuffle(), 0, 100); </script> Follow @IE to find each day’s MIXtery box drop (twitter.com/IE) Follow IE on Foursquare to join us at tonight’s pre-party Tweet Up/Meet up! (foursquare.com/IE ) Visit the IE demo stations at The Commons to crack the puzzle!

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Adding the Awesomesauce Flavor with IE9 Pinned Sites

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Adding the Awesomesauce Flavor with IE9 Pinned Sites

Semelhante a Adding the Awesomesauce Flavor with IE9 Pinned Sites (20)

Mais de John Bristowe

Mais de John Bristowe (8)

Último

Último (20)

Adding the Awesomesauce Flavor with IE9 Pinned Sites