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

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

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

Massive 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 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

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

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

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

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.

http://bristowe.com	717
http://coderwall.com	12

Adding the Awesomesauce Flavor with IE9 Pinned Sites

by John Bristowe on Apr 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 729

Statistics

Adding the Awesomesauce Flavor with IE9 Pinned Sites — Presentation Transcript