Learn: - Designing for the Customer - Customer Engagement - Customer Value - Engineering Values - Introduction to Pinned Sites - Benefits of Pinned Sites - The Pinned Site API - How to Create a Basic Pinned Site - How to Create Dynamic Jump Lists - Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites

1. IE9 for Developers Shaymaa Al-Terkait Microsoft Kuwait shaymaa@microsoft.com http://ahamshay.com | @ahamshay

2. Web Experience Do you want your web experience to feel more like an app?fast, clean, and trusted. Social engagement is also a priority because it means customer’s may visit more often, go deeper, and stay longer.

3. Agenda Designing for the Customer Customer Engagement Customer Value Engineering Values Introduction to Pinned Sites Benefits of Pinned Sites The Pinned Site API How to Create a Basic Pinned Site How to Create Dynamic Jump Lists Case Study: Huffington Post - Reinventing the “Big News” Experience with IE9 Pinned Sites

4. Designing for the Customer look for simple and high impact features that enhance the site experience and make an immediate difference based on three criteria: Customer Engagement Customer Value Engineering Values

5. Customer Engagement Does it reach the customer in a timely and relevant fashion? Is it part of the customer’s everyday workflow? Does it help the customer get to our content faster? Does it take our customer deeper into our web experience?

6. Customer Value Would it inspire the customer to stay and interact longer? Will it increase the opportunity for our customer to engage with ads and premium experiences? Is it “cutting edge” and “must have” for the customer? Does it enhance the everyday experience? Does it build loyalty and brand value?

7. Engineering Values Is it simple and sustainable from a Development perspective? Does it build on a credible, long-term platform with a mature customer base? Does it sync with our mission and values? Bottom line, it is profitable for use to do this project (“return on code”)?

8. 8

9. Introduction to Pinned Sites The following graphic shows the taskbar elements in Windows 7:

10. Benefits of Pinned Sites Websites that implement the Pinned Site API can feel more like a native Windows application. Site developers can build a more compelling website that have higher engagement by: Declaring a static list of tasks for fast navigation to common destinations within a site. Creating a dynamic list of destinations that are personalized and relevant to the user. Drawing the user back to the website by flashing the taskbar button or displaying a icon overlay. Adding remote controls and commands to the taskbar's preview window. Making the browser look and feel like your site by changing the color of the Back and Forward buttons. Promoting a high-resolution site icon that extends your site's brand outside the browser. Note Pinned site functionality is available in all document modes of Internet Explorer 9. You can add Pinned Site features without converting your site to support the latest version of HTML or CSS.

11. The Pinned Site API You implement Pinned Site functionality by using the following two programming models: Static site properties. The first group defines properties that apply to anyone who uses the Pinned Site. This basic functionality is defined by meta elements. Application name Desktop tooltips Site start URL Window size Back and Forward button colors Static Jump List tasks User-specific and dynamic customization. The second group includes features that are implemented with JavaScript, using the Pinned Site APIs. Dynamic Jump List tasks Thumbnail toolbar commands Notifications The scenarios in the topics that follow explain how to add Pinned Site features to your webpage. For an full index of development tasks, see How to Use this Documentation.

12. How to Create a Basic Pinned Site To do the following: Set the starting page of the Pinned Site Specify tooltip text that appears when you hover the mouse pointer over the Pinned Site button on the taskbar and desktop Constrain the initial size of the browser window Customize the color of the Back and Forward buttons in the Pinned Site browser window Add static tasks to the Jump List <meta name="application-name" content="Beauty Of The Web" /> <meta name="msapplication-tooltip" content="Start the Beauty Of The Web" /><meta name="msapplication-starturl" content="http://beautyoftheweb.com/" /> <meta name="msapplication-window" content="width=1024;height=768" /><meta name="msapplication-navbutton-color" content="#5f6dbd" />

13. How to Create a Basic Pinned Site One more line: That’s it! <meta name="msapplication-navbutton-color" content="#5f6dbd" />

14. How to Create Dynamic Jump Lists Jump Lists can contain both static and dynamic items. For example, to add a single task called "Check Order Status" specify a meta element in the head of your webpage, as follows: <meta name="msapplication-task" content="name=Check Order Status; action-uri=./orderStatus.aspx?src=IE9; icon-uri=./favicon.ico" />

15. Examples The Bing.com Jump List includes Weather, Finance, and News among others. The Facebook.com Jump List includes News, Messages, Events, and Friends.

16. Site Icons in Internet Explorer 9 The easiest way to create a site icon is by using X-Icon Editor. X-Icon Editor is a free application (based on HTML5 Canvas) that allows you to create high resolution icons directly from within the browser. X-Icon Editor creates high-resolution icons in sizes that are suitable for Pinned Sites, as well as the address bar and New Tab page in Internet Explorer 9. X-Icon Editor creates high-resolution icons in multiple sizes. http://go.microsoft.com/fwlink/?LinkId=206680 <link rel="shortcut icon“ href="/favicon.ico" />

17. <style type="text/css"> #divPinSite { position: fixed; padding: 5px; color: white; width: 380px; height: 20px; top: 0px; left: 70px; background-color: #c00; border-radius: 0px 0px 10px 10px; font-size: .87em; font-family:Arial, Helvetica, sans-serif; display:none; } #divPinSiteimg { height: 16px; width: 16px; vertical-align: top; float: left; margin-right: 5px; } #divPinSite a { float: left; padding-top: 1em; text-decoration: none; color: black; font-size: smaller; } </style> Prompting Users to Pin Your Site <div id="divPinSite"> <imgsrc="Images/whitearrow.ico" alt=""/> Drag the site icon to the taskbar to pin site <a href="javascript:void(0)" onclick="addSite();"> Or, click here to add to Start menu</a> </div>

18. Of course, there is no reason to display the prompt unless the user is browsing with Internet Explorer 9, so the CSS includes "display:none" to initially hide the div element from view. The following script runs as the page loads to determine whether to show the prompt: window.onload = function() { try { if (window.external.msIsSiteMode()) { // Continue intialization } else { document.getElementById('divPinSite').style.display = "block"; } } catch (e) { // Fail silently. Pinned Site API not supported. } }

20. So, what should you do next? Step 1: Your Website’s Look and Feel Step 2: Let Your Users Know Step 3: Your Website on Every Taskbar Step 4: Bring Them Back Again and Again! Step 5: Go Deeper with Jump Lists

22. Increased user engagement through notification, pulling users back into their “Big News”