Your SlideShare is downloading. ×
0
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Adding the Awesomesauce Flavor with IE9 Pinned Sites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Adding the Awesomesauce Flavor with IE9 Pinned Sites

1,459

Published on

By now, you’ve heard about pinned sites in Internet Explorer 9. And, you’ve probably even used them yourself. But, did you know that this feature can help increase site visits and engagements by as …

By now, you’ve heard about pinned sites in Internet Explorer 9. And, you’ve probably even used them yourself. But, did you know that this feature can help increase site visits and engagements by as much as 50%? In this session, you’ll hear stories of Pinned Site implementations by some of the most popular websites on the web today. You’ll also discover how to support pinned sites with a few lines of markup. Finally, you’ll learn best practices that will help you deliver an awesome experience to your visitors.

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 2. Adding the Awesomesauce Flavor with Internet Explorer 9 Pinned Sites<br />John Bristowe<br />Sr. Dev. Evangelist<br />Microsoft<br />@jbristowe<br />
  • 3. Internet Explorer 9 Pinned Sites<br />John Bristowe<br />Sr. Dev. Evangelist<br />Microsoft<br />demo <br />
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. Internet Explorer 9 Pinned Sites<br />Break<br />CNN<br />eBay<br />eHow<br />facebook<br />Flixster<br />Gilt<br />Hi5<br />Hotmail<br />Huffington Post<br />hulu<br />kaboodle<br />LinkedIn<br />Myspace<br />NAVER<br />Netlog<br />New York Times<br />orbitz<br />Pandora<br />photobucket<br />Rotten Tomatoes<br />SkyBeautiful<br />Slacker Radio<br />Sohu NBA<br />TMobile<br />Twitter<br />WSJ<br />Xing<br />Yahoo! Japan<br />Other examples from around the web<br />
  • 20. Internet Explorer 9 Pinned Sites<br />1,000+ sites globally currently leveraging this capability<br />Puts your site at the center of the experience<br />Enables your users to open your site quickly and easily<br />Improves ability to navigate and interact with sites<br />Doesn’t break the web<br />It’s time to think outside the browser box!<br />Zero-to-pinned in about five minutes<br />Your sites, now with added awesomesauce<br />
  • 21. Internet Explorer 9 Pinned Sites<br />Massive returns for minor investments<br />
  • 22. Internet Explorer 9 Pinned Sites<br />Quick and easy to implement<br />“Basic experiences” can be built in an hour<br />“Deeper experiences” can be built in a day<br />Users have a better experience that translates to measurable results<br />15-50% increase in site visits and engagement<br />Compatible with existing sites and browsers<br />Uses <meta> tags inside the <head> element of your page<br />Massive returns for minor investments<br />
  • 23. Jump Lists<br />John Bristowe<br />Sr. Dev. Evangelist<br />Microsoft<br />demo <br />
  • 24. Taskbar Notifications<br />John Bristowe<br />Sr. Dev. Evangelist<br />Microsoft<br />demo <br />
  • 25. Thumbnail Controls<br />John Bristowe<br />Sr. Dev. Evangelist<br />Microsoft<br />demo <br />
  • 26. Internet Explorer 9 Pinned Sites<br />Start URL<br />Bound to the domain of the webpage<br />Jump List Task<br />Any destination is valid<br />JavaScript APIs<br />Bound to the domain of the webpage<br />Security Model<br />
  • 27. Internet Explorer 9 Pinned Sites<br />Carefully consider your Jump List items<br />Consider web analytics to see how visitors are leveraging your pinned sites in IE9<br />Provide teasers to visitors via floating DIVs<br />Inspect the UA beforehand<br />Leverage cookies or local storage to show/hide teasers<br />Some Best Practices<br />
  • 28.
  • 29. Resources for Internet Explorer 9 Pinned Sites<br />MSDN portal for Internet Explorer 9, HTML5, CSS3, Compatibility, and more<br />Lots of information on IE9 Pinned Sites<br />Developer documentation<br />JavaScript reference<br />Examples<br />msdn.com/ie<br />
  • 30. Resources for Internet Explorer 9 Pinned Sites<br />Demos that highlight the features available through IE9 Pinned Sites<br />Jump List Categories<br />Overlay Icons<br />Thumbnail Buttons<br />Jump List Tasks and Navigation Button Colors<br />ietestdrive.com/browser/pinning<br />
  • 31. Resources for Internet Explorer 9 Pinned Sites<br />jQueryplug-infor adding IE9 features to your websites<br />Dynamic Jump List Tasks<br />Overlay Icons<br />Teasers<br />Also available via NuGet<br />ie9ify.codeplex.com<br />
  • 32. Have more questions? <br />Come meet me at the Internet Explorer Booth following this session!<br />Internet Explorer MIXtery MEGA Box!<br />Day #1 Puzzle – Fun with CSS3<br /><style><br />.row {display: -ms-box; -ms-box-orient: horizontal;}<br />div div {width:100px;height:100px;border:1px solid #000; <br />margin-bottom:10px; margin-right:10px; <br />border-radius:5px;}<br /></style><br /><h2>Puzzle #1</h2><br /><div class="row"><div>The</div> <div>Thing</div> <div>About</div><div>Coding</div><div>Colors</div></div><br /><div class="row"><div>In</div> <div>Hex</div> <div>Is</div><div>That</div><div>Many</div></div><br /><div class="row"><div>Web</div> <div>Developers</div> <div>Value</div><div>Simple</div><div>Commands</div></div><br /><div class="row"><div>Like</div> <div>#ccc</div> <div>Instead</div><div>of</div><div>Powerful</div></div><br /><div class="row"><div>But</div> <div>Longer</div><div>Commands</div><div>Like</div><div>RGB(73,69,49)</div></div><br />Follow @IE to find each day’s MIXtery box drop (twitter.com/IE)<br />Follow IE on Foursquare to join us at our Wednesday pre-party Tweet Up/Meet up!<br />(foursquare.com/IE )<br />Visit the IE demo stations at The Commons to crack the puzzle!<br />
  • 33. Have more questions? <br />Come meet me at the Internet Explorer Booth following this session!<br />Internet Explorer MIXtery MEGA Box!<br />Day #2 Puzzle – HTML5 Jumble<br /><canvas id="canvas" width="300" height="225"></canvas><br /><script><br />String.prototype.shuffle = function () {<br />var a = this.split(""), n = a.length;<br /> for(var i = n - 1; i > 0; i--) {<br />var j = Math.floor(Math.random() * (i + 1));<br />vartmp = a[i];<br /> a[i] = a[j];<br /> a[j] = tmp;<br /> }<br /> return a.join("");<br />}<br />var s = "ltw..wbyiw";<br />var context = document.getElementById("canvas").getContext("2d");<br />context.font = "bold 50px sans-serif";<br />context.fillText(s.shuffle(), 0, 100);<br /></script><br />Follow @IE to find each day’s MIXtery box drop (twitter.com/IE)<br />Follow IE on Foursquare to join us at tonight’s pre-party Tweet Up/Meet up!<br />(foursquare.com/IE )<br />Visit the IE demo stations at The Commons to crack the puzzle!<br />
  • 34. © 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.<br />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.<br />

×