Windows 8 Tile

Create A Windows 8.1 Tile For Your Website Part Two

Written by - Published on

In the first part of this tutorial we covered creating basic Windows 8.1 Tiles for your website using a range a different META tags. Although this method will fulfill most designer’s requirements, there are a few amendments we can make to firstly reduce the amount of META tags we integrate into our <head> and secondly to maximize on the marketing potential Windows Live Tiles offers us.

Tidying up your META area

Firstly, lets start by tidying up our META area by not solely relying on individual META declarations but by instead using a separate XML file. Simply replace your existing META code from the previous tutorial, with the following two META tags below.

<meta name="application-name" content="Title" />
<meta name="msapplication-config" content="/browserconfig.xml" />

We now need to create the browserconfig.xml file, implement the following XML code and upload this onto our root.


<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="tiny.png"/>
      <square150x150logo src="square.png"/>
      <wide310x150logo src="wide.png"/>
      <square310x310logo src="large.jpg"/>
      <TileColor>#83382b</TileColor>
    </tile>
  </msapplication>
</browserconfig>

The above code is quite self-explanatory, it defines the relevant imagery for each tile, simply run through the above code and ensure source values link correctly to your images.

Windows Live Tiles

With Windows Live Tiles we can pull notifications data from an XML file onto our tiles. We can specify up to five tile schema files to run through our notifications.

All we need to do is add the notification section into our browserconfig.xml file.

<notification>
<polling-uri  src="notifications/one.xml"/>
<frequency>1440</frequency>
<cycle>0</cycle>
</notification>

The above notification section points to one new XML file. The frequency attribute tells Windows 8.1 how regularly to check back for new notifications. We have set ours to 1440, which is the equivalent to 1 day in minutes. You will find if you create more than just the one notification, Windows 8.1 switches between the tiles every couple of seconds. Lastly the cycle attribute controls how the notifications are cycled. Follow the following guidelines

  • 0: (default if only one notification) Don’t cycle.
  • 1: (default if multiple notifications) Cycle notifications for all tile sizes.
  • 2: Only cycle notifications for medium tiles.
  • 3: Only cycle notifications for wide tiles.
  • 4: Only cycle notifications for large tiles.
  • 5: Only cycle notifications for medium or wide tiles.
  • 6: Only cycle notifications for medium or large tiles.
  • 7: Only cycle notifications for wide or large tiles.

How to write your notification file

The notifications are sent to Windows 8.1 through our notifications XML file, we can use a range of pre-defined templates to display our results. We won’t cover all of the templates in this tutorial however Microsoft has very kindly covered the different templates, which are available here.

We are going to define a notification to display an image and a line of text for our 310×150 tile.

We will therefore be using the following template TileWide310x150ImageAndText01.

Add the below code into your one.xml file, and update both the image src and the text attributes to meet your requirements. Upload this file to the correct location on the server, and your pinned tiles should update.

<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150ImageAndText01”>
<image id="1" src="images/image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>

Congratulations, you have just updated your pinned tiles with your own personalized notification. With this now set up you can now update the above schema whenever you have any new notifications for your users. I would personally recommend using this functionality wisely, you have the potential to advertise your companies offers and deals right under your customer noses, but be wary, ensure you do not exploit this marketing opportunity or risk being unpinned!

This blog only scratches the surface on the potential live tiles offers designers. I would recommend reading the following blogs, which will help you understand all of the different areas involved with Windows 8.1 tiles.

Building A Live Tile: http://msdn.microsoft.com/en-us/library/ie/dn439794(v=vs.85).aspx

Choosing a Template: http://msdn.microsoft.com/en-us/library/ie/dn456348(v=vs.85).aspx