IE9 FOR DEVELOPERS

Shaymaa Al-Terkait

Microsoft Kuwait

shaymaa@microsoft.com

http://ahamshay.com | @ahamshay

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.

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

Designing for the Customerlook 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

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?

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?

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

Introduction to Pinned Sites

The following graphic shows the taskbar elements in Windows 7:

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.

The Pinned Site APIYou 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.

How to Create a Basic Pinned SiteTo 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" />

How to Create a Basic Pinned SiteOne more line:

That’s it!

<meta name="msapplication-navbutton-color" content="#5f6dbd" />

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" />

Examples

The Bing.com Jump List includes Weather, Finance, and News among others.

The Facebook.com Jump List includes News, Messages, Events, and Friends.

Site Icons in Internet Explorer 9The 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" />

<div id="divPinSite"> <img src="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>

<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;}#divPinSite img{ 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

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

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

Site Experience Benefits• Created a personalized experience by

letting users pin the news content they want with one-click access

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

• Was low cost to code and easy to sustain using existing technologies like JavaScript

THANK YOU!