Pinned Sites in Windows 8


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.

We’ve written about Internet Explorer 10’s Metro style browsing experience on Windows 8. This post describes in detail IE10’s pinned sites and their availability on the Windows 8 Start screen—complete with site-centric visuals and badge notifications to let you know there is new content. We’ll also walk through the Web developer details to support pinned sites.

The following video shows pinned sites in action on Windows 8 Consumer Preview.


Pinned Sites in Windows 8

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, the Microsoft 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 is available.

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 notifications
Pinned sites on the Start screen showing site-centric visuals and badge notifications

Example of a badge notification on a pinned site’s tile
Example of a badge notification on a pinned site’s tile

Site-Centric 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 site’s tile
Screen shot of pinning a site with Metro style IE10 showing a preview of the site’s tile

IE10 extracts the dominant color from the icon and automatically uses it as the background color for the Start screen tile.

One tool for creating icons is x-icon editor. Use it to create the 32×32 icon for your site. It can also convert an image to the icon file format (.ico). Then associate the .ico using traditional favicon markup:

<link href=”testdrive.ico” rel=”shortcut icon” />

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

Badge Notification XML

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 schema defines this simple XML response. For example, to update the tile with the number “3,” you send the following XML:

<?xml version=1.0encoding=utf-8 ?>

<badge value=3/>

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 badge image on MSDN.

Pinned Site Meta Tags

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 “msApplication-badge” meta 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 (optional).

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

  • 30 (Windows will poll the URI every 30 minutes)
  • 60 (1 hour)
  • 360 (6 hours)
  • 720 (12 hours)
  • 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 minutes).

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 up-to-date.

When a user launches the pinned site tile through the Start screen, the Web site is running in its own session called SiteMode and can use the following JavaScript functions to update the badge.

window.external.msSiteModeClearBadge() clears 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.

window.external.msSiteModeRefreshBadge() calls 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 two.

In 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 Properties dialog.

Desktop Taskbar Notifications

Notifications that appear as icon overlays 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
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.

Conclusion

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, Program Manager, Internet Explorer

Comments (38)

  1. Anonymous says:

    So, if I understood well, you don't get a jumplist if the site isn't pinned on the start screen? And what about the dynamic jumplist?

    And what about high res favicons? Please… we want bigger, colored icons on our start screen for pinned sites!

  2. pmbAustin says:

    Pinned Sites are okay for a handful of sites… but IE10 _REALLY_ must have access to "Favorites".  Because I have hundreds of "Favorites", and don't want a hundred tiles pinned on my start screen.

    I don't generally used Pinned sites to begin with.  I'm much more comfortable with favorites, and find that Favorites works better for me, since I'm already IN the browser, and Favorites are *right there*, without me having to jump back to the start screen, or move down to the task bar, etc.  Favorites also let me completely control whether the new site I'm jumping to opens in the same tab, or a different tab.

    Unless and until Metro-IE10 gets Favorites (ability to add current site to favorites, ability to browse favorites, including folders, in order to select a new site, etc), then Metro-IE10 won't be of any real use to me.  I find myself constantly frustrated by being in a "tiny constraining box" in IE10-Metro, and have to constantly go to IE10-Desktop in order to get anything done.  It really sucks.

    In my view, "Pinned Sites" are MUCH LESS THAN "Favorites", and of very limited utility.  I can imagine I'd only ever half a hand-full (half dozen?) sites I ever pinned (I currently have zero, so I'm being generous here that I'll change my usage from Win7/IE9 to Win8/IE10).  But I will always have hundreds of sites saved (and organized!) in my favorites folders.

  3. Anonymous says:

    Why reinvent the wheel with an msapplication tile tag and not just poll for rss feed titles?

  4. Anonymous says:

    The icon that appears on the pinned sites badges look really dinky. The icon is too small compared to standard or app tiles.

  5. Anonymous says:

    Looks great if your start screen is 3 apps and all pinned sites. But I'd really like to be able to get to Favorites from IE metro.

    Under Win 7 you didn't make me pin every site I wanted to remember to the task bar or start menu. Why do that now?

    Now I mention it, in Win 7 you didn't make me pin every app I wanted to use to the task bar as well.

    This obsession with pinning might be more efficient for 3 apps and 3 sites, but for tens of apps and sites, I don't think the model works.

  6. Anonymous says:

    As a web developer this is horribly depressing.  The best options we get is a tiny icon in brand colours, and a tiny badge?  You couldn't give us some user opted-in live tile functionality?  A life tile could be a mini-webpage!  Or we could at least get full icon control.  But no, *this* is what you give us?

    I was looking forward to Windows 8.  I was looking forward to an Operating System that embraced native applications and would help herald in the web as the future of the application platform.  But this just isn't good enough.

    If you want me to even consider not being a loyal Google user, you're going to have to do better than this.  Step up your game, Microsoft.  You were so close.  So very close.

  7. Anonymous says:

    Microsoft is still use their own private method (API) on IE 10. ***!

  8. TejasJ says:

    I agree with pmbAustin.

  9. Anonymous says:

    Opera has something similar, which you could have implemented:

    dev.opera.com/…/opera-speed-dial-enhancements

  10. Anonymous says:

    Love to see the video, but it isn't showing: "No video with supported format and MIME type found"

  11. Anonymous says:

    Follow-up with @Navarr comment above, I just want to confirm. So there is no way to update the favicon with certain frequency??

  12. Anonymous says:

    Display the jump list when they are already on the site is totally useless. All users will use the available navigation page. Council to provide the jump lists in start screen or delete it and replace it in the browser with bookmarks in high demand by users. There are 10000 users who have bookmarks to the start screen how many tiles can contain?

  13. Anonymous says:

    @ pmbAustin

    With hundreds of favorites I can understand that pinned sites are not the way to go. I am curious however that you do not use the information presented in the previous post to make D-IE your browser of choice (there is even the F11 button if you want a chrome-less experience) and ignore M-IE completely.

    The inclusion of both D-IE and M-IE in context with the choices you can make as to which one you want to use gives you all the choices you need. For those that have come to value the feature of pinned sites they are there for their use, and for those that prefer the favorites, they are still there and nothing has changed (except for the fact that you have to invest 20 seconds to change the settings as described in the previous post).

    Harry

  14. Anonymous says:

    Why doesn't this work like in WP7???

    Take a screenshot (or part of it) and update it once in a while to reflect the updated website.

    This just doesn't looks good. Wasn't metro created to get rid of those static icons? Especially low quality 32x32px ones?

  15. Anonymous says:

    Agree with a lot of the comments here so far… 32×32 icons on pinned web pages is ugly and makes me think Windows 3.1. I would expect a full tile image design space for web pages just like installed apps… or a screenshot like Windows Phone with an arbitrary small notification overlay. Pinned web pages not being "live" might be a reasonable trade-off vs. a Win8-style application, but ugly icons is going to dissuade me from pinning web pages to my beautiful new start screen!

  16. Anonymous says:

    EPIC FAIL.

    favicons for websites are 16x16px by default… 32×32 favicons are scaled to fit (with significant loss of picture quality and detail).  If you want to add a ***NEW*** icon for a website, you need to add a ***NEW*** tag! or an additional attribute to define its use (NO EXCEPTIONS!)

    Stop breaking the web Microsoft! you've done enough damage already!

    ************************++++++++++++++++++++*************************

    And for crying out loud… who the !@#$@#!@ do we have to talk to to get you to fix the comment form on this blog?!?!?! its @#$%@#$@ annoying that it never, ever !@#$@#$@@# works!

    If you forget to copy your comment to the clipboard first you lose EVERYTHING!!!! – worst comment form I have ever used on any site in over TEN !@#$@#$@ YEARS!!!!!!!!

    ************************++++++++++++++++++++*************************

  17. FremyCompany says:

    Well, I have to admit I dont like the small 32*32 lighter square in the big square. Use a glow effect on the icon if you want but, please, forget that ugly small square.

    Also, why couldn't websites have a fullsize logo for Windows 8 like on the iPhone?

  18. jader3rd says:

    Pinned is great for frequently used sites. I'd actually be open to a feature to have IE auto pin (and obviously auto unpin) frequented sites. But what's missing is a way to store non-frequent/favorite sites. They're known as bookmarks in every other browser. A website I know I'll want to visit in the future, as some type of reference.

  19. Anonymous says:

    tiny icons…do not look good.

  20. pmbAustin says:

    @Jacob, no you don't lose anything.  If you don't see the "Green" box informing you that your post was successful, just scroll down, and hit post again (the text of your post is still there).  Repeat until you see the green box… I've never had it take more than once through this cycle (i.e. fails to post, just immediate refresh with no green box, then click "Post" again, and voila, it posts).

    Are you seeing something different?

    I agree it's beyond annoying, and it's a huge bug that's been around way too long, and doesn't reflect well on Microsoft at all… but I've never actually LOST text or a post.

  21. pmbAustin says:

    @Harry Richter  … the thing is, if I'm in Metro, I want to stay in Metro.  If I'm in Desktop, I want to stay in Desktop.

    The current implementation of the 'dual mode' leaves a lot to be desired.  There need to be Metro and Desktop defaults for many applications, including the browser.  For instance:  I'm VERY annoyed that every time I click on a video or picture in Desktop Windows Explorer, I'm suddenly in the Metro viewer… rather than just seeing it in a window.

    And what if I want to use IE10-Metro and Chrome-Desktop?  can't be done.  But why not?  There's no reason I can think of.

    And IE10-Metro shouldn't be crippled with respect to Desktop by having NO WAY to view, go to, or add bookmarks/favorites.  There should at least be SOME way through the UI to do this.  And if one simply doesn't use Pinned sites, why can't that be hidden?

    Again, put the user in control, and stop dictating to the user that there's only "one right way".  I really want this "no-compromises" promise to be fulfilled, but right now, there's way, way too much compromising going on.

  22. Anonymous says:

    So you add "legacy" task bar pinning to Metro IE and the new start screen. Great. Then you discard favorites and act like nothing is lost. "Favorites" and "pinned sites" resolve two different use cases. Please quit pretending the are one and the same. "Metro IE — where less is more because we told you so."

  23. Anonymous says:

    Why not use the apple-touch-icon? That's already in place on many websites.

  24. FremyCompany says:

    It would be great if you could use the website screen capture as tile image, along with the favicon and badge (if any), using the Windows.UI.Notifications.TileTemplateType.tileSquareImage template [[ msdn.microsoft.com/…/windows.ui.notifications.tiletemplatetype.aspx ]]

    You could refresh the site view every time the user navigate to it (this is cheap in computer resources, since you have to render the site anyway) and maybe once a day, too. But, if you do so, please, don't update the tile if the website did load through a redirection (to avoid to use "login wifi pages" as tile image).

    It seems relatively easy to implement, and it's a nice way to represent a website. We usually remember the look of the website we would like to go to.

  25. Anonymous says:

    Very limited. Disappointing

  26. Anonymous says:

    Metro is a caotic gui .. and this new feature is terrible.. pls MS go back to desktop classic gui!

  27. Anonymous says:

    All touch displays have problem with Drop-down menus.

    131.0.img98.net/…/i280509_untitled.png

  28. Anonymous says:

    @pmbAustin – I'm not sure what browser you use but the comment entered in the form most definitely does get lost upon unsuccessful submission. (at least in Chrome and Firefox from my tests)

    There's over 5 or 6 years worth of comments by readers complaining about this problem on this blog.  It isn't new.  The problem is well known.  As is the solution.  However Microsoft insists on trying to use broken blog software because it was built using ASP technology.

    Hang your tail between your legs microsoft and install **ANY** version of **ANY** blog software available today… PHP, Python, WordPress, JSP, ColdFusion, whatever – but don't ever make the same mistake twice of using legacy ASP postback pages.  They don't work and this comment form just causes developers that use it more frustration targeted at Microsoft every time they try to use it.

    I think we should start an online protest on this blog until this is resolved.

    Everyone post (as often as you can, on every single blog entry)

    "Please Fix This Comment Form Microsoft!  We will not post any further questions and topical comments until the problem has been addressed!"

  29. Anonymous says:

    @Harry Richter

    Correct me if I am wrong: I believe there is no D-IE on Arm tablets? So for WOA users there is no way to organize their favorites similiar to the desktop version. Having hundreds of favorites myself I can see another huge pitfall here. One could argue that you would never have this number of favorites on your tablet. But the new options to synch setting via the cloud between different machines, could easily result inhaving all your desktop favorites in an unorganized manner on your tablet.

    No favorites for M-IE is definetly not the right choice.

  30. pmbAustin says:

    You're wrong, @Darren.  ARM tablets have a full desktop environment, including Desktop IE10.

    That doesn't mean that Metro-IE10 shouldn't have full access to favorites as well, of course.

  31. Anonymous says:

    ok

  32. Anonymous says:

    @pmBAustin

    Thanks for correcting me. You are right. There will be a D-IE version on ARM as well.

    Of course it will be funny to use with fingers only. Still the limiting factor is Metro. Either way seems to be terrible: 2 different versions of IE each has its own way of organizing favorites and each version has its own (?) set of favorites? There will be no plugins for the M-IE so if you need e.g. Flash, you have to switch between the two versions constantly. You cannot really discard the D-IE version if you want Metro only. And probably the M-IE version is easier to use on tablets. So you will have to live in both worlds switching back and forth.

    If there is no way to sync favorites between both versions, then you either have to manually save favorites in each IE version or you have to remember in which one you have stored it.

    Auto synching would be great but this would lead to having all favorites from D-IE in M-IE in an side by side unorganized manner oder having all M-IE in D-IE suddenly unorganized in a side by side manner. Again the limiting factor is Metro with its missing capabilities for hierachical and nested orginization.

    So instead of a simple browsing experience with one browser which fits it all, MS is making it over complicated having 2 different IEs, with different layout, different handling and as user while you wish these two would be compatible and tehy make your life easy by auto synching, at the same time you wish they would not. I really can´t see why the desktop is "legacy" whily in reality you can do much much more than whats currently possible in Metro (despite touch input).

    Firefox is using a different approach which looks more promising and more consistent at the early stage they are currently. It seems again that despite all the great telemtry data and user experience labs Microsoft has presented, they simply do not understand what users finally want. So they are mixing eveything together to an extent that users asking themselves if they really need this or if they really want this. Even from a consumer point of view: Do I want my collection of internet p*rn sites show up frontpage every time I start my tablet? Do I want them to show up automatically as last visited sites anytime someone else is using the device? Think about you are handing out the device and it requires only one click, not even a search, and anyone can see which sites you have visited frequently or if it has been pinned to the start screen the youp*rn tile advertises that there is new p*rn in the big t*ts section. Do I want this? Do I need this? Favorites are also good to move sites out of plain view. Metro is of no use here.

  33. Anonymous says:

    Why add all this burden on developers? Really?

    Allow us to specify an RSS feed to poll. RSS also has a field already to specify the polling time.

    It makes me sad that this is the best you can do; inelegant, and a burden to developers, companies, users and your staff.

  34. Anonymous says:

    Please ms, implement w3c gamepad api !

  35. Anonymous says:

    @Darren – you've found on the key stumbling block in Microsoft's strategy for design.  They base a lot of decisions on "Telemetry Data".  However there is a fundamental flaw in this.

    Your Telemetry Data will only show you what (A) users that had it turned on did (e.g. the ones that don't care about security, privacy and customizing their PC)  (B) data for **DESKTOP** usage only… which is 1,000% different than how users use tablets and (C) only shows what users had access to.  e.g. if the users didn't have a good or better way to do something they **HAD TO USE** inferior features and options provided in existing Microsoft products.

    It's like giving people an option to eat either a boiled ham sandwich, garbage, or cat food.  Your Telemetry data will show that a whopping 97% of users chose to eat the "boiled ham sandwich".  Microsoft would read this data to believe that almost everyone loves the boiled ham sandwich!  What is obviously missing is that NO OTHER CHOICES were available – thus you don't get any data for people that love salads, BBQ, steak, Chicken on a Kaiser, pasta, stir-fry, noodles, soup, etc.

    As far as ARM goes – it has been well documented in the tech community… for a tablet experience, ARM provides awesome hardware specs… however attempting to duct tape on a full Windows desktop OS (with no application compatibility) is an epic failure in the making that will affect all windows tablets.

    If I was in management at MSFT I would can this project ASAP before any more damage is done.

  36. Anonymous says:

    @Jarno

    I think the video in the post only works in internet explorer, the flash fallback doesn't work in Mozilla Firefox and I can't get it to work at all even using microsoft's html5 fallback plugin, so I'm assuming you will either need to use IE or Google Chrome to view it.

  37. Anonymous says:

    You could see Apple's touch icon meta tags as precedent for Microsoft offering an OS-specific way to specify tile images — either a monochrome png/svg that Windows scales and renders on the tile, or a precomposed tile image. Something like that couldn't be standard, but the goal is hard to achieve in a fully standard way.

    (Even if the actual Metro tile image can't be provided in a standard way, maybe vendors could start working on a _framework_ that would encompass iOS touch icons/Chrome app icons/Metro pinned site tiles etc.)

    A general but resource-efficient way for the site to provide info for a live tile (or any micro-view of the site) would be awesome, too. Maybe sites could flag that an RSS feed should be used for a tile, provide some Microsoft-specific settings (cycle through last n entries, choose from a couple tile layouts, which fields to use in the mini-display), etc.

  38. Anonymous says:

    Jeez, if I was a Microsoft employee, I'd quickly learn to avoid reading the comments on blog posts.

    …But, at the risk of bandwagoning, as pretty much any web developer would tell you, this is a horribly inadequate solution. Tiny branding for a huge tile without updating, and more proprietary tags and API calls. Hate it.