IE9 for developers

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

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”)?

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

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

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

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!

IE9 for developers

by Shaymaa

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 20

Statistics

IE9 for developers Presentation Transcript

http://blogs.msdn.com	17
http://speakerrate.com	3