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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Adding the Awesomesauce Flavor with IE9 Pinned Sites

1,436
views

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,436
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
    John Bristowe
    Sr. Dev. Evangelist
    Microsoft
    @jbristowe
  • 3. Internet Explorer 9 Pinned Sites
    John Bristowe
    Sr. Dev. Evangelist
    Microsoft
    demo
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. 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
  • 20. 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
  • 21. Internet Explorer 9 Pinned Sites
    Massive returns for minor investments
  • 22. 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
  • 23. Jump Lists
    John Bristowe
    Sr. Dev. Evangelist
    Microsoft
    demo
  • 24. Taskbar Notifications
    John Bristowe
    Sr. Dev. Evangelist
    Microsoft
    demo
  • 25. Thumbnail Controls
    John Bristowe
    Sr. Dev. Evangelist
    Microsoft
    demo
  • 26. 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
  • 27. 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
  • 28.
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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!
  • 33. 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!
  • 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.
    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.