View
1.606
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
Adding the Awesomesauce Flavor with Internet Explorer 9 Pinned Sites
John BristoweSr. Dev. EvangelistMicrosoft
@jbristowe
Internet Explorer 9 Pinned Sites
John BristoweSr. Dev. EvangelistMicrosoft
demo
Internet Explorer 9 Pinned Sites
BreakCNNeBayeHowfacebookFlixsterGiltHi5HotmailHuffington Post
hulukaboodleLinkedInMyspaceNAVERNetlogNew York TimesorbitzPandoraphotobucket
Rotten TomatoesSkyBeautifulSlacker RadioSohu NBATMobileTwitterWSJXingYahoo! Japan
Other examples from around the web
Internet Explorer 9 Pinned Sites
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
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 engagementCompatible with existing sites and browsers
Uses <meta> tags inside the <head> element of your page
Massive returns for minor investments
Jump Lists
John BristoweSr. Dev. EvangelistMicrosoft
demo
Taskbar Notifications
John BristoweSr. Dev. EvangelistMicrosoft
demo
Thumbnail Controls
John BristoweSr. Dev. EvangelistMicrosoft
demo
Internet Explorer 9 Pinned Sites
Start URLBound to the domain of the webpage
Jump List TaskAny destination is valid
JavaScript APIsBound to the domain of the webpage
Security Model
Internet Explorer 9 Pinned Sites
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
Resources for Internet Explorer 9 Pinned Sites
Demos that highlight the features available through IE9 Pinned SitesJump List CategoriesOverlay IconsThumbnail ButtonsJump List Tasks and Navigation Button Colors
ietestdrive.com/browser/pinning
Resources for Internet Explorer 9 Pinned Sites
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.
Recommended