Choosing a template for live tiles in Internet Explorer 11

Article
03/03/2016

Use templates to define how live tiles look on the Windows 8.1 Start screen.

What's a live tiles template?

Templates are available for medium, wide, and large tiles (150x150, 310x150, and 310x310), and define how text and images are displayed live tiles. Internet Explorer 11 supports the same Windows template catalog as Windows Store apps. Live tiles have been available for Windows Store apps since Windows 8, but are now available for websites displayed in Windows 8.1 IE11 pages.

For Windows 8.1, the template names changed slightly. When using templates for both IE11 and Windows Store apps you'll want to use the newer names that are listed in the Tile Template Catalog. The newer names all have the dimensions of the tile in their title. For example, TileSquare150x150Text02 is newer than TileSquareText02.

Declaring a template

Templates are declared in an tile schema XML file and can contain up to three tile sizes. Here's an example of a live tile using simple text square template:

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileSquare150x150Text02"
      <text id="1">Text Field 1 (larger text)</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

Each tile size you want to support on the Start screen needs a binding element that includes the template, text, and images as child elements. For more info, see the binding element reference content. The text element can be one or more strings of text. The text element requires an id attribute for each unique line of text, and optionally can include a lang attribute. For more info, see the text element reference content

This example shows how to add an image:

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

This example provides an image, alt text, and a single text string. The image element requires an id and a src attribute. Optionally you can add alt text for users of assistive technologies. For more info, see the image reference content.

The TileWide310x150ImageAndText01 template provides a wide image at the top of the tile, with a string of regular text that can be wrapped over two lines. When you choose an image for a tile, it must be under 200kb in file size and less than or equal to 1024x1024 pixels. For more info about choosing an image size, see Tile and toast image sizes.

Some templates offer more than one line of text. This example shows a template that uses five lines of text:

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150Text05"
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
      <text id="5">Text Field 5</text>
    </binding>  
  </visual>
</tile>

About Template formats

There are two families of templates: square and wide. Square templates come in medium and large sizes. The small size tile doesn't display notifications, so it doesn't have any templates. Wide tiles are rectangular and a combination of medium in height and large in width. Each template can display text, or images and text.

Most of the image/text templates put the text part on the same tile as the image. However, templates with Peek in the title alternately switch between image and text on the tile.

This table describes a few of the many templates you can use to create live tiles. For more templates, see the Tile Template Catalog.

Windows 8.1 template	Description
TileSquare150x150Text02	Use for shorter titles and a small description.
TileSquare150x150Text04	Use for long titles.
TileSquare150x150PeekImageAndText02	Switches between an image and text on the tile. Use for short titles and a small description.
TileSquare150x150PeekImageAndText04	Switches between an image and text on the tile. Use for long titles and an image.
TileWide310x150Text03	One string of large text wrapped over a maximum of three lines. Use for medium length titles.
TileWide310x150Text04	Regular sized text wrapped over a maximum of five lines. Use for long titles.
TileWide310x150Text09	Contains a single line of large title text and a wrapped string of regular text. Use for short titles and some description.
TileWide310x150ImageAndText01	Contains an image and small wrapped text. Use for big images and medium titles.
TileWide310x150SmallImageAndText01	Contains a small image on the left, and large text wrapped for a maximum of three lines. Use for a small image and medium titles or descriptions.
TileWide310x150PeekImageAndText01	Switches between a large image and a string of regular text wrapped over a maximum of five lines on the tile. Use for a large image and long titles or descriptions.
TileWide310x150PeekImage01	Switches between a large image, and a large title and a string of regular text wrapped over a maximum of four lines on the tile. Use for an image with a short title and some description.