I was recently made aware of a feature of Windows 8 that I was not leveraging to its fullest; the Pinned Website Live Tile. Yes, just like the active, dynamic tiles of Windows 8’s full-fledged apps (which you've either come to love, or love to hate) websites too, through the power of IE11 can dance & play across start-screens the world over.
Is this a recent development? Well no, not any more recent than Windows 8 as an OS, but in the years I've spent pinning random sites to the start menu for later reading (eventually replaced by the Reading List app included in 8.1), I came to accept, nay, even expect pinned websites to look like, well, this:
Bland, unassuming…basically a large favicon and some text that usually shows up in a tab. Sorry Rightpoint.com .
So when I jokingly proposed a live-tile enabled application tie-in for Righpoint's Pourcast web app , I was stunned to be presented with literature describing how to make a live tile for the existing web page, thoroughly outlined in IE11's API documentation. A little digging found that quite a few big-name sites have rudimentary live tiles, which are more or less static tiles styled to look clean & trim on a start menu (see LinkedIn, pretty much any Microsoft store page, or PCWorld ) and some sites even went well beyond that to implement fully functional pinned website tiles (see Bing, The Verge, and CNet). And with that knowledge in hand, I set out on a grand adventure to try it myself, & found I was able to spin up a live tile of my own in just under an hour.
Just the Basics
The required tags include an application name, a tile color, and an asset source for any of the four possible tile sizes, Small, Medium, Wide, Large:
And if all you want for a site is just a spiffy logo and a site name that is all you need! Compile, run, and pin - you can see the result immediately
You can pan left and right between the various tile sizes right from IE11, but it defaults to Wide (or Medium if Wide has not been defined). Of course, I immediately tried all sizes myself via the start menu
Not five minutes after I started, I already have a pinnable tile that looks slick & professional. But the adventure has only just begun…
But Wait! There's More!
As you can see from the screen capture, The Verge has a very impressive tile that cycles through articles as their feed is updated. In the interest of trying it myself, I decided to borrow the RSS from Rightpoint's blog as a data source for my website. To have my tile cycle through a feed, I needed to add "msapplication-notification" to the meta tags and do a few more configuration steps, all of which can be expedited by this helpful tool. Note: there is a similar tool for Windows 7, which can help you build rich, pinned icons for the toolbar.
Both tools can help you configure tile color & icons, but at the moment, I'm only interested in the chunk of code that shows the feed data, since I handled the rest manually:
…Add that to the header and voilà:
It's important to note that as soon as the tile starts to cycle, it will hide your tile assets and instead show your favicon in the lower left corner, so now is a good time to add one if you haven't already. However, if no feeds are available or a user manually disables the tile, it will switch back to the plain, static assets configured earlier. If you're still not satisfied (which, for just a little more effort, why would you be?), you can make the tile richer yet with some XML templates. The whole smorgasbord of possibilities, most of which work for both the desktop and phone, can be viewed in this gallery, or the documentation.
A tile template is little more than a few lines of xml added someplace convenient in your project structure & more complex tile layouts only require a few more lines of XML in order to render the content.
In the interest of simplicity, I'm just using an example set provided by Microsoft, taking a moment to swap out content. Notice that the more tile sizes you want to support, the more bindings you’ll need to define. Of course, in the real-world, you'd ideally customize text & images in an autonomous fashion, rather than by hand for each item. Back on the layout page, updating the notification tag appropriately now yields:
Which looks lovely on the Start Screen:
And now you're finished: Spread the word folks, let’s make pinned sites pretty!