Windows Tiles für Websites erstellen

Mit Windows 8 wurden die Kacheln eingeführt, die auch Tiles genannt werden. Eine Website kann an das Startbildschirm angeheftet werden, sodass für die Website ein Tile angezeigt wird. Die Benutzer können mit einem Mausklick auf ein Tile die Website öffnen, ganz so, als würde man ein Programm starten.

Als Entwickler von Websites hat man die Möglichkeit, das Aussehen der Tiles für die angehefteten Seiten festzulegen. So kann man diese an das Design der Website anpassen und somit ein einheitliches Bild schaffen.

Tiles über browserconfig.xml festlegen

Ab Windows 8.1 und IE 11 können die Tiles über die Konfigurationsdatei browserconfig.xml festgelegt werden. Sobald eine Webseite angeheftet wird, wird die Datei automatisch abgerufen. In dieser Datei können Tiles in verschiedenen Größen festgelegt werden. Dabei muss man zwischen der angezeigten und tatsächlichen Größe unterschieden werden. Für eine bessere Bilddarstellung wird nämlich empfohlen, die Dateien so bereitzustellen, dass die Breite und Höhe größer ist als die Standardgrößen der Kacheln. Die Bilder werden dann auf die angezeigte Kachelgröße herunter skaliert.

Die Tiles können in folgenden Größen bereitgestellt werden.

Für kleine Kachel

Standardgröße der Kachel: 70 x 70 Pixel
Mindestgröße: 56 x 56 Pixel
Empfohlene Größe: 128 x 128 Pixel

Für mittelgroße Kachel

Standardgröße der Kachel: 150 x 150 Pixel
Mindestgröße: 120 x 120 Pixel
Empfohlene Größe: 270 x 270 Pixel

Für breite Kachel im Querformat

Standardgröße der Kachel: 310 x 150 Pixel
Mindestgröße: 248 x 120 Pixel
Empfohlene Größe: 558 x 270 Pixel

Für große Kachel

Standardgröße der Kachel: 310 x 310 Pixel
Mindestgröße: 248 x 248 Pixel
Empfohlene Größe: 558 x 558 Pixel

Die maximale Größe für alle Kachel ist 1024 x 1024 Pixel. Beim Vergeben der Dateinamen ist man weitestgehend frei, da diese in der Konfigurationsdatei browserconfig.xml angegeben werden. Als hilfreich hat es sich erwiesen, die Größe im Dateinamen ersichtlich zu machen, z.B. tile-558x558.png. Als Dateiformat für die Bilder wird PNG empfohlen. Geht man von der empfohlenen Größe aus, könnten folgende Dateien bereitgestellt werden.

tile-128x128.png
tile-270x270.png
tile-558x270.png
tile-558x558.png

Daneben braucht man die Konfigurationsdatei browserconfig.xml. Die Bilddateien werden darin mit dem SQUARE-Tag in der Form <square...x...logo src="..." /> angegeben. Die Tile-Hintergrundfarbe wird mit <Tilecolor>...</Tilecolor> angegeben. Bei den genannten Bilddateien könnte man in die Datei browserconfig.xml für die Standard-Konfiguration folgenden Code einfügen.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="http://www......../tile-128x128.png" />
      <square150x150logo src="http://www......../tile-270x270.png" />
      <wide310x150logo src="http://www......../tile-558x270.png" />
      <square310x310logo src="http://www......../tile-558x558.png" />
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Zu beachten ist beim Code, dass bei selbstschließenden Tags in XML der abschließende Trailing-Slash mit " /> benötigt wird. Bei der Pfadangabe ist empfehlenswert, absolute Pfade (mit dem Domainnamen) einzugeben, da es erfahrungsgemäß häufig passiert, dass fehlerhafte Zugriffe mit Fehlercode 404 (nicht gefunden) auf die Tiles erfolgen. Die fehlerhaften Zugriffe resultieren meistens dadurch, dass beim Zugriff mit relativen Pfadangaben vor dem Dateinamen der Seitenname angehängt wird, z.B. in der Form /seitenname/tile-270x270.png. Da die Tiles in diesem Beispiel jedoch im Wurzelverzeichnis liegen, werden sie nicht gefunden. Bei absoluten Pfadangaben wird das verhindert. Außerdem könnte man in die Datei .htacess folgenden Code einfügen, damit bei fehlerhaften Abrufen eine Umleitung erfolgt. Ein Beispielcode für .htaccess wäre wie folgt.

# Fehlerhafte Zugriffe auf Tiles umleiten
RewriteCond %{REQUEST_URI} ^/.+(/tile-.*\.png)
RewriteRule ^.*$ %1 [L,R=301]

Andere Konfigurationsdatei verwenden

Wenn man eine abweichende Konfigurationsdatei verwenden möchte, z.B. beim Einsatz von mehreren, dann kann man diese auf der jeweiligen Seite als META-Tag im HEAD-Bereich angeben. Ein Beispielcode.

<meta name="msapplication-config" content="anderekonfiguration.xml">

Live-Kachel erstellen

Neben statischen Kacheln sind für eine bessere Interaktion mit den Benutzern auch Live-Kacheln möglich, auf denen z.B. die neuesten Nachrichten in verkürzter Form angezeigt werden können. Hierfür wird zunächst die Konfigurationsdatei mit dem Bereich <notification>...</notification> erweitert, in dem die Schemadateien angegeben werden. Ein Beispielcode.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="http://www......../tile-128x128.png" />
      <square150x150logo src="http://www......../tile-270x270.png" />
      <wide310x150logo src="http://www......../tile-558x270.png" />
      <square310x310logo src="http://www......../tile-558x558.png" />
      <TileColor>#ffffff</TileColor>
    </tile>
    <notification>
      <polling-uri src="http://www......../schemadatei1.xml"/>
      <polling-uri2 src="http://www......../schemadatei2.xml"/>        
      <frequency>720</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

Mit frequency wird der Abrufintervall angegeben. Mit cycle wird die Größe definiert, welche Kachelgrößen durchlaufen werden sollen. Der Wert 1 steht für alle Kachelgrößen. Innerhalb der Schemadatei kann ein Eintrag mit Bild und Text definiert werden. Ein Beispielcode.

<tile>
  <visual lang="de-DE" version="2">
    <binding template="TileSquare150x150Text02" branding="name">
      <image id="1" src="http://www......../bild.jpg"/>
      <text id="1">Kurze Nachricht</text>
    </binding>
  </visual>
</tile>

Mit visual wird die Sprache und die Vorlagenversion angegeben, die verwendet werden soll. Bei Windows 8.1 wird die Version 2 verwendet. Mit binding wird die Vorlage für die Kachelgröße festgelegt. Darin wird der Pfad zum Bild und der Text eingegeben.