The Windows 8 Start screen is the
best place to find and stay connected to all your favorite apps and content.
App tiles are alive with activity and show you fresh and tailored content so
you know what’s new in your world.
the Internet Explorer 10 browsing experience on Windows 8. This articles shows
you how to put your site logo right next to apps on the Windows 8 Start Screen—complete
with site-centric visuals and badge notifications to let you know there is new
content. I’ll also walk through the few lines of code you need take your site
from looking like the left tile…to the right tile here:
Pinned Sites –
More than Favorites
Consumers on Windows spend most of
their time on the Web and we know from Windows opt-in telemetry (officially,
Customer Experience Improvement Program), that they go
back to the same set of sites time and again. Pinned sites on Windows 8 make it
fast and easy to immediately get to your sites. With badge notifications, site
tiles come alive with up-to-date information and help you know when new content
Developers can utilize pinned sites
to better connect their site with their users and promote their site’s brand
directly in the Windows start screen. We found that sites that used this
feature with IE9 on Windows 7 see anywhere from a 15 percent to 50
percent increase in site visits. In Windows 8 the experience for
consumers is even better with site tile updates, even when you don’t have the
site open in the browser.
The following two screen shots
illustrate pinned site tiles and badge notifications.
Pinned sites on the Start screen showing site-centric visuals and badge
Example of a badge notification on a pinned site’s tile
Visual on the Pinned Site Tile
As a Web developer, you can provide
a site icon (favicon) that
IE10 uses throughout the browser to represent the site, in the address bar, on
the new tab page, and on the Start screen. IE10 uses the large site icon (32 x
32 pixels) to identify the site when pinned to the Start screen the same way
that IE9 used it for pinning to the task bar.
Screen shot of pinning a site with Metro style IE10 showing a preview of the
IE10 extracts the dominant color
from the icon and automatically uses it as the background color for the Start
One tool for creating icons is x-icon editor. Use it
to create the 32x32 icon for your site. It can also convert an image to the
icon file format (.ico). Then associate the .ico using traditional favicon
<link href="testdrive.ico" rel="shortcut
Notifications That Update In the Background
Windows 8 can poll for updates for
pinned tiles on the Start screen. This works well for lightweight notifications
such as new messages from other users (email & social networking), new
discounts on a shopping site, new articles on a newsfeed etc.
With Internet Explorer 10 and
Windows 8, you can offer badge notifications directly on your pinned site
tiles. This means users get updates to their sites without the site being open
in the browser. As an example, pin the Fresh Tweets demo using
IE10 on Windows 8 Consumer Preview. The pinned site tile updates on a regular
basis and notifies the user when there are new tweets available.
Background notifications require
site-provided components. These are: (1) Badge Notification XML, an XML
response that describes the badge notification for Windows, and (2) Pinned Site
Meta Tags, Web page markup that points to the location which Windows should
poll for notifications and the frequency of polling.
Windows handles the polling and
drawing of badge notifications. Windows polls the badge notification XML that
describes the visual for the pinned site tile. The badge XML
defines this simple XML response. For example, to update the tile with the
number "3," you send the following XML:
Badges can be numbers or glyphs,
such as ‘alert’ and ‘new message’ indicators. For a full list of what a badge
can display, see Choosing a
Pinned Site Meta
The next step is associating the
badge notification XML to the Web page. IE10 uses the meta tag "application-name" to
determine if the Web page supports pinned sites capabilities like notifications
and jump lists. To support badge notifications, include a new meta-tag in your
markup with the URL of the badge notification XML and the frequency with which
Windows should request it. IE checks to see if the "
tag is present on the page at time of pinning, as well as on subsequent
launches of the site from the pinned site tile.
<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />
The value parameter has two parts: polling-uri
(required) and frequency
polling-uri is the absolute URI from which
Windows requests the simple XML document defined above.
frequency is an
optional number of minutes between updates and must be one of the following
(Windows will poll the URI every 30 minutes)
- 60 (1
- 360 (6
- 720 (12
- 1440 (1
day. This is the default.)
If frequency is omitted or has
a value other than one listed above, it defaults to daily updates (1440
Developer APIs for
updating Badge Notifications
You can also clear and refresh the
site tile badge from the Web page directly to ensure that the site tile is
When a user launches the pinned
site tile through the Start screen, the Web site is running in its own session
the badge notification on the tile. In the Fresh Tweets demo, when the
user receives a notification and taps on the tile to launch the browser, the
Web page uses msSiteModeClearBadge() to clear
the notification from the tile. The next time the tile lights up with a badge
update, the user knows there is new content.
Windows to update the badge on the site using the polling URI. As an example,
the user sees a pinned site tile indicating three unread messages and clicks on
the tile to return to the site. If he or she reads only the first update, you
can trigger an update so the badge reflects the correct read/unread count of
Windows 8 Consumer Preview, these two APIs only function on sites running in
the Local intranet or Trusted sites zones. This will be fixed in the next
preview. To test these APIs in the Consumer Preview on your own site, add its
domain to the Trusted sites list using the Security tab of the Internet
Notifications that appear as icon
for pinned sites on the desktop taskbar will continue to work for Windows 8 and
IE10 on the desktop. This form of notification is not available on the pinned
site for the Windows 8 Start screen. Windows 8 handles notifications for all
tiles on the Start screen and does so in a battery-efficient way.
Jump Lists to
Quickly Navigate Within the Site
Many top sites such as NYTimes.com,
CNN.com, and Amazon.com support IE9 pinned sites features such as jump lists to get to
a specific task or part of a site. With IE10, jump lists are available as part
of the navigation bar for a touch-friendly way to navigate the site.
When the user launches the site
from the Start screen, the pin button shows that there are jump lists available
for this site:
Screen shot showing the Fresh Tweets Demo’s jump list
The jump list displayed is the same
as IE9 displays on the Windows 7 taskbar.
You can add static tasks to your
site’s jump list via page markup (learn more) or
dynamically based on user interactions (learn more). Badge
and jump lists in Windows 8 are a site-centric feature. Each fully qualified
domain name can have one and only one set of polling data and jump list data.
Internet Explorer 10 puts sites at
the center of the experience through integration with the Windows 8 Start
screen. Web developers can create site-centric visuals for pinned site tiles,
share when there are new updates available for the site, and offer jump lists
to navigate quickly around the site.
We look forward to you adding these
simple features to your Web site to maximize their impact in Windows 8.
Rahul Lalmalani is a Program
Manager in the Internet Explorer team