Thursday, October 30, 2014

Pinned Website Live Tiles in Windows 8

Joe Meyer, Solutions Architect

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:

default tile

Bland, unassuming…basically a large favicon and some text that usually shows up in a tab. Sorry Rightpoint.com Sad smile.

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

For this experiment, I fired up Visual Studio 2013 & started a blank project. MVC Apps really lend themselves nicely to this experiment. Since most, if not all, of the work for this feature is controlled in the <meta> tags of a web page header, leveraging a single layout that all pages use means your users will always get your neat, rich content no matter what part of your site gets pinned. I instantiated a new web application & dove right into the provided layout. Live tiles come in three flavors that all serve the same purpose: HTML, Javascript, and XML (all of which are outlined in the API link above or in the docs . It's important to note that the richest live tile experience requires XML, so there's a little carryover between those silos, but for the purpose of this post I'm sticking with the (mostly) HTML implementation.

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:

    <meta name="msapplication-square70x70logo" content="Content/Images/70x70logo.png" />

    <meta name="msapplication-square150x150logo" content="Content/Images/150x150logo.png" />

    <meta name="msapplication-wide310x150logo" content="Content/Images/310x150logo.png" />

    <meta name="msapplication-square310x310logo" content="Content/Images/310x310logo.png" />

 

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

pin sitebasic tile

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

basic tile wide

basic tile small

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:

    <meta name="msapplication-notification" content="frequency=30;

          polling-uri=http://notifications.buildmypinnedsite.com/?feed=https://www.rightpoint.com/feeds/news&amp;id=1;

          polling-uri2=http://notifications.buildmypinnedsite.com/?feed=https://www.rightpoint.com/feeds/news&amp;id=2;

          polling-uri3=http://notifications.buildmypinnedsite.com/?feed=https://www.rightpoint.com/feeds/news&amp;id=3;

          polling-uri4=http://notifications.buildmypinnedsite.com/?feed=https://www.rightpoint.com/feeds/news&amp;id=4;

          polling-uri5=http://notifications.buildmypinnedsite.com/?feed=https://www.rightpoint.com/feeds/news&amp;id=5; 

          cycle=1" />

 

…Add that to the header and voilà:

simple live tile

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.

<tile>

<visual lang='en-US' version='2'>



<binding template="TileSquare150x150PeekImageAndText04" branding="name">

<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>

<text id="1">Serving Today: Tacos</text>

</binding>



<binding template="TileWide310x150ImageAndText01" branding="name">

<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>

<text id="1">Serving Today: Tacos</text>

</binding>



<binding template="TileSquare310x310ImageAndText01" branding="name">

<image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>

<text id="1">Serving Today: Tacos</text>

</binding>



</visual>

</tile>

 

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:

<meta name="msapplication-notification" content="frequency=30; 

          polling-uri=notifications/contoso1.xml; 

          polling-uri2=notifications/contoso2.xml; 

          polling-uri3=notifications/contoso3.xml" />

 

Which looks lovely on the Start Screen:

finished tile

And now you're finished: Spread the word folks, let’s make pinned sites pretty!