Creating custom tiles for IE11 websites
Create custom tiles and notifications for your sites in Internet Explorer in the new Windows UI to build interest and click through with your users. You can create customized static and live tiles for Internet Explorer 11, a process that's similar to Windows Store apps.
When a user first pins your site, it's displayed as a static tile on the Start screen. By default, the image on the tile is your website's favicon or a default IE11 logo. You can customize the image by adding metadata tags to your webpage's markup or adding a browser config file.
Small and medium tiles are available by default on the Start screen. A generic IE11 image is used if you don't supply one of your own. For wide and large tiles, you must supply the image.
Static tiles are shown whenever there are no notifications and use an image for each of the four tile sizes you want to offer your users. These are the standard sizes and the recommended image size for each:
|Tile size||Standard tile dimensions||Minimum image size||Recommended image size|
|Small||70 x 70||56 x 56||128 x 128|
|Medium||150 x 150||120 x 120||270 x 270|
|Wide||310 x 150||248 x 120||558 x 270|
|Large||310 x 310||248 x 248||558 x 558|
Here's how they look:
Small tile 70x70
Medium tile 150x150
Wide tile 310x150
Large tile 310x310
For use as live tiles, define a medium, wide, and a large image. The following table gives some guidelines on using the different sizes.
|Small||The small tile doesn't support notifications and only displays as a static tile.|
|Medium||Supported by default. Displays static or live. Will let you display text and images.|
|Wide||Optional. Displays static or live. Requires you to also define a medium size tile to add a wide tile.|
|Large||Optional. Displays static or live. Requires you to also define a medium, and wide tile.|
If you leave out a size (for example, large), that size tile isn't offered for resizing or notifications. Once a tile is pinned, you can change tile sizes between the defined sizes, but to add or remove sizes from the choice list requires you change your metadata, and have the user unpin and re-pin your tile.
This example defines an XML browser config file to set a default logo tile for all four available sizes and a background color. We've made this easy for you to test; just right-click and copy the food truck images shown above, and save them locally by the file names used in the example.
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="images/smalltile.png"/> <square150x150logo src="images/mediumtile.png"/> <wide310x150logo src="images/widetile.png"/> <square310x310logo src="images/largetile.png"/> <TileColor>#009900</TileColor> </tile> </msapplication> </browserconfig>
You can save this XML file as browserconfig.xml and save it at the root of your server. IE11 automatically reads the file when the user pins the site. If you want to specify a custom config file, use a meta element in the <head> portion of the page. In this example, see the meta element that declares the config file. If this meta element is missing from your page and a user tries to pin your site, IE11 looks for a file called browserconfig.xml that contains URLs of the individual notification files (tile schema files) and tells Windows to fetch that file at the intervals you specify.
<head> ... <meta name="msapplication-config" content="ieconfig.xml" /> ... </head>
IE11 live tiles work with Windows 8.1 to pull notification data from XML files on a website. When you pin a website, here's what happens:
- IE11 gets the browserconfig.xml file.
- IE11 tells the Windows 8.1 notification platform to get the notifications from the polling URI addresses specified in the browserconfig file at the specified interval.
- The notification platform gets the tile schema files and displays the text and images on a tile using the specified template. This repeats every interval set in the browserconfig.xml file, as explained in Build a live tile.
The client polls the website for updates and controls whether a site is polled, and how often, rather than having the website push the content to the client.
The website updates the tile schema files to provide images and text for a live tile. Up to five tile schema files can be defined to provide a constantly scrolling live tile. The tile schema files are updated by the website as new notifications are available, and the Windows notification platform pulls the files down and displays the content as live tiles.
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="images/smalltile.png"/> <square150x150logo src="images/mediumtile.png"/> <wide310x150logo src="images/widetile.png"/> <square310x310logo src="images/largetile.png"/> <TileColor>#009900</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig>
Here are the elements included in the browser config file:
|browserconfig||The root element. Required.|
|msapplication||A vendor specific element that defines the type of application the file applies to (pinned sites). This element is required and must be declared as a child element of the browserconfig element.|
|tile||Defines the default tile logo image. Includes up to four images with these attributes. |
The TileColor attribute takes an RGB format color such as #ff80aa.
|notification||Defines the URIs for the tile schema files. It can include: |
The five URIs that can be displayed are randomly displayed. These are the files you update with the latest news and info you want displayed on a users Start screen.
|frequency||The frequency (in minutes) between poll requests. Must be one of the following: 30, 60, 360, 720, or 1440.|
|cycle||Controls how the messages are cycled. |
A tile schema file contains the image and text for a single notification and a template that shows how to display the information. Tile schema files are updated periodically to provide changed notifications for your users. You can define up to three different sizes (at one template per size). The template's size is matched up with the size of the tile currently being displayed in Windows 8.1. For example, if your current tile size is set as for 310x150, you can use any template that has 310x150 in the name, such as TileWide310x150ImageAndText01.
Here's an example of a schema file in XML:
<tile> <visual lang="en-US" version="2"> <binding template="TileSquare150x150PeekImageAndText04" branding="name"> <image id="1" src="images/2.jpg"/> <text id="1">Serving Today: Samosas</text> </binding> <binding template="TileWide310x150ImageAndText01" branding="name"> <image id="1" src="images/2.jpg"/> <text id="1">Serving Today: Samosas</text> </binding> <binding template="TileSquare310x310ImageAndText01" branding="name"> <image id="1" src="images/2jpg"/> <text id="1">Serving Today: Samosas</text> </binding> </visual> </tile>
These elements make up a typical file schema:
|tile||The required root element.|
|visual||Tells Windows 8.1 to use the version 2 template names. Windows 8 Windows Store apps support templates as version 1. For Windows 8.1, the names were changed and called version 2. You need to specify version 2 to use live tiles with IE11.|
|binding||Defines the template, image, and text for a single sized tile. Attributes include:|
|image||Provides these attributes |
|text||Provides a line of text and an ID attribute. If there are more than one line of text for a binding, then multiple text elements with unique IDs are used.|
While there are only templates for three sizes of tile that support Live tiles, you have many template options. For example, a 310x310 pixel square tile can have plain text with or without a large title, a small image and a lot of text, a large image and text, and a number of other formats. The templates are defined by Windows 8.1, and can't be changed. For more information on templates, see Choosing a template. For the full list, see the Tile Template Catalog.
Now that you have the file formats, let's try coding this, as in Build a live tile.
- Build a live tile
- Choosing a template
- Pinned site enhancements
- Tile Template Catalog
- Using the notification queue