bowdenweb

Browser ux - User-Agent Optimization Series ie9 Part One

Pinned Sites in ie9 allow developers to add to the ux of the overall site by providing unique experiences to the user by utilizing ie specific tools like Jump Lists. Developers can use Pinned Sites to make their sites feel more like a native Windows application. Users can add tasks to behavior(s) specific to pinned sites. Pinned Sites are drag and drop, the user simply has to drag the browser tab down to the Windows 7 taskbar.

Jump Lists

Pinned Sites using Jump Lists allow developers to control how a site is accessed by declaring a common entry point via meta name="msapplication-starturl" content="".

Jump List items sit on the taskbar and are doorways to the pinned site even when ie is not running. You can add common destinations and tasks or site-specific/user-specific tasks on the Jump List.

Pinned Sites can only contain one static and one dynamic list at a time.

A task is a site-specific action in a pinned site that can be simple site functionality. Static Tasks are set when the site is pinned, but notificiations and user-specific tasks are set dynamically.

Pinned Site functionality can be accessed via the Pinned Site api. You have two choices, static site properties, which are easily defined in meta elements, and user-specific/dynamic customization which are implemented using the api.

You can use the following meta elements to control your Pinned Site shortcut. Note: these meta elements are only used when the user pins the site, after this occurs they have no value on the pinned site and are thus called, “install-time” values.

Static Tasks are defined using meta Elements

meta	Definition
meta name="application-name"	Defines the name of the Pinned Site application instance. It appears in a tooltip when hovering over the pinned site on the Windows 7 taskbar. This is also appended to the window title of the pinned site application instance. If missing, the document title will be used.
meta name="msapplication-tooltip"	Provides additional tooltip data that appears when hovering over pinned site shortcut or on the desktop.
meta name="msapplication-starturl"	Contains the root url of the application. The start url can be fully qualified or relative to the current document. Only http and https are allowed; if missing, the address of the current page is used. Runtime metadata declared in the start page redefines the navigation button color and static Jump List tasks each time the site is launched. Use this to control how users access your site. When combined with Jump List metadata in the start page, you can easiliy control how users select styles they want to use. If your start url redirects to a new path, it must include the path and a trailing slash (/).
meta name="msapplication-window"	Sets initial size of Pinned Site window when launched bby the user. Should the user alter these dimensions, they will be retained when launched again. Minimm window width is 800 pixels and minimum window height is 600 pixels.

Run-time meta

The following meta elements are read each time the user launches the pinned site, and therefore can and should be used to modify the user experience over time.

meta	Definition
meta name="msapplication-navbutton-color"	Defines custom color of back/forward buttons of the browser window of the pinned site. All named colors and/or hex colors are valid for use. If missing, default color is taken from the sites favicon color palette.
meta name="msapplication-task"	Define static tasks for use with Jump Lists.
meta name="msapplication-task-separator"	Used to place a visible barrier between tasks in the Jump List menu. Separators must be unique, done so by adding content="unique-value" for more than one value.

meta name="msapplication-task"

When you declare a default task(s) they appear in the jump list under the Tasks category. A task in this case is a site-specific action and they can be static or dynamic. The following are the allowed parameters of the content="" attribute of meta name="msapplication-task".

attribute	Definition
meta name="msapplication" content="name="	Defines a string that is the task name that appears in the Jump List.
meta name="msapplication" content="action-uri="	Defines a fully qualified or relative uri, where the browser goes on click.
meta name="msapplication" content="icon-uri="	Defines a fully qualified or relative uri, the icon that shows in the Jump List for the Task.
meta name="msapplication" content="window-type="	Defines how browser handles opening site in Jump List. Can be: tab (default) - a new tab in the current window. self (default) - the current tab. window (default) - a new Pinned Site window.

I created a demo here. Below are screenshots of what pinned sites static properties can do for you.

I used the X-Icon Editor to create my favicon; its an html5 canvas tool that allows you to upload and create favicons in-browser.

References

• ie9 Site Pinning
• Adding Tasks and Jump Lists to Pinned Sites in ie9
• Declaring Pinned Site Metadata
• Adding Tasks to a Jump List
• Prompting Users to Pin Your Site
• Pinned Sites