Adding the Awesomesauce Flavor with IE9 Pinned Sites

Adding the Awesomesauce Flavor with Internet Explorer 9 Pinned Sites

John BristoweSr. Dev. EvangelistMicrosoft

@jbristowe

Internet Explorer 9 Pinned Sites


demo


BreakCNNeBayeHowfacebookFlixsterGiltHi5HotmailHuffington Post

hulukaboodleLinkedInMyspaceNAVERNetlogNew York TimesorbitzPandoraphotobucket

Rotten TomatoesSkyBeautifulSlacker RadioSohu NBATMobileTwitterWSJXingYahoo! Japan

Other examples from around the web


1,000+ sites globally currently leveraging this capabilityPuts your site at the center of the experience

Enables your users to open your site quickly and easilyImproves ability to navigate and interact with sites

Doesn’t break the webIt’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 SitesMassive returns for minor investments


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 engagementCompatible with existing sites and browsers

Uses <meta> tags inside the <head> element of your page

Massive returns for minor investments

Jump Lists


demo

Taskbar Notifications


demo

Thumbnail Controls


demo


Start URLBound to the domain of the webpage

Jump List TaskAny destination is valid

JavaScript APIsBound to the domain of the webpage

Security Model


Carefully consider your Jump List itemsConsider web analytics to see how visitors are leveraging your pinned sites in IE9Provide teasers to visitors via floating DIVs

Inspect the UA beforehandLeverage 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 moreLots of information on IE9 Pinned Sites

Developer documentationJavaScript referenceExamples

msdn.com/ie


Demos that highlight the features available through IE9 Pinned SitesJump List CategoriesOverlay IconsThumbnail ButtonsJump List Tasks and Navigation Button Colors

ietestdrive.com/browser/pinning


jQuery plug-in for adding IE9 features to your websites

Dynamic Jump List TasksOverlay IconsTeasers

Also available via NuGet

ie9ify.codeplex.com

Internet Explorer MIXtery MEGA

Box!<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>

Day #1 Puzzle – Fun with CSS3

Have more questions? Come meet me at the Internet Explorer Booth following this session!

Visit the IE demo stations at The Commons to crack the puzzle!

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 )

Internet Explorer MIXtery MEGA

Box!<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)); var tmp = 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>

Day #2 Puzzle – HTML5 Jumble

Visit the IE demo stations at The Commons to crack the puzzle!

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 )

Have more questions? Come meet me at the Internet Explorer Booth following this session!

© 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.

Technology

Adding the Awesomesauce Flavor with IE9 Pinned Sites