How To Pin Web Apps As Tiles To The Brand-New Startscreen Of Windows 8

The new user interface of Windows 8 needs a lot of getting used to. The upside is, the introduction of the so-called tiles, which are intended as the main way of interacting between user and system, brought new possibilities to provide the user with additional information. Tiles are not limited to showing an icon, the way it was before Windows 8, only without the tiles ;-) Inside the tiles notifications can be placed and kept in sync. This is not only possible for apps, but also for websites. Microsoft provides several specialized meta-tags to customize the looks and contents of tiles with links to websites. Windows 8 Tiles With Apps And Website Connections

Definition Of Title, Image and Tile Color

Three different meta tags are at hand to manipulate the looks of a tile connected to a website. We can assign a title, an image and a background color. This is how we do it:

<meta name="application-name" content="drweb.de"> 
<meta name="msapplication-TileImage" content="drweb.png">
<meta name="msapplication-TileColor" content="#3da3b6">

The image embedded via msapplication-TileImage must be in PNG format and sized 144 pixels squared. It is advisable to choose an image with a transparent background. A background color is defined via msapplication-TileColor using hexadecimal values. Image and title are displayed among one another inside the tile. To attach a website to the startscreen you need to run Internet Explorer in Windows 8 mode, formerly know as Metro mode. Its toolbar delivers a dedicated function to pin website shortcuts to the startscreen. Given no meta information is attached, Windows per default chooses the favicon of the website and adds a fitting background color.

Showing Notifications Inside The Tile

If you are using Windows 8, you are aware of the notifications shown in the lower right corner of tiles connected to any app with often changing content, such as a mail app for example. A mail app informs about the number of new and unread items, the store app informs about the number of available updates. Equivalent use cases are thinkable when it comes to web apps. First thing we need is an XML file, responsible for the so-called signal updates, as the notifications are named in Microsoft lingo. This XML does not carry more than one single element, containing the the number of notifications and their type:

<badge value="15" />

As long as the value contains a number between 1 and 99, badge carries the number of notifications. Alternatively we can set a specific type of notification. The mode newMessage for example shows a mail-icon. You can choose from eleven different types, informing about different kinds of information. This XML file, generated dynamically, needs to be integrated to the HTML via a meta tag like this:

<meta name="msapplication-badge" content="frequency=30; polling-uri=http://www.drweb.de/notifications.xml"/>

The value frequency defines the checking interval in minutes. Conclusion: Using simple meta tags we can easily attach a website shortcut to a Windows 8 startscreen. The service www.buildmypinnedsite.com helps with the construction of the necessary sourcecode. Be aware that these tiles only work properly as long as Internet Explorer is set as default browser. As soon as you define a different browser, the nice tiles fall back to a simple icon. (pot/dpe)

Article first published in the German Dr. Web Magazin, written by Denis Potschien