Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML5 und CSS3 Tipps
27.01.2014

Windows-Kacheln konfigurieren mit der browserconfig.xml

Kategorie(n): HTML5 und CSS3 Tipps

Der Internet Explorer 11 unter Windows 8.1 bietet zwei Bedienoberflächen. Einmal die „herkömmliche“ Browseroberfläche und zusätzlich eine touchoptimierte Oberfläche. Wenn der Internet Explorer 11 mit der touchoptimierten Oberfläche aufgerufen wird, sucht der Browser automatisch nach der browserconfig.xml.

Features in XML-File für das Anheften von Kacheln deklarieren

In einer Konfigurationsdatei sucht der Internet Explorer 11 nach zusätzlichen Informationen, die für das Anheften („Pinnen“) von Kacheln an den Start-Bildschirm nützlich sind. Der Name dieser Konfigurationsdatei (XML) ist frei wählbar, sofern er per Meta-Tag im Seiten-Header bekannt gegeben wird, z.B.:

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

Falls Sie deklarieren wollen, dass es für diese Website keine zusätzlichen Informationen gibt, können Sie dies ebenfalls per Meta-Tag bekannt geben.

<meta name="msapplication-config" content="none" />

Dieses Meta-Tag ist allerdings optional. Falls das Meta-Tag nicht vorhanden ist sucht der Browser automatisch nach einer Datei namens browserconfig.xml im Rootverzeichnis der Website. Diese Variante würde ich z.B. bevorzugen, um die Anzahl der Meta-Tags in den Webseiten nicht noch weiter aufzublähen.

Bestandteile der browserconfig.xml

Den Grundaufbau der browserconfig.xml kann man bei Microsoft im Dev-Center nachlesen. Insofern möchte ich an dieser Stelle nicht für duplicate Content sorgen.

Grob kann man zusammenfassen, dass es zwei Sektionen gibt:

  • Informationen für statische Kacheln (um einfach eine Webseite an den Startbildschirm anzuheften).
  • Zusätzlich können bis zu 5 dynamische URL’s für Live-Kacheln konfiguriert werden, die in einer Schleife nacheinander aufgerufen werden (z.B. für einen Newsticker).

Die Kacheln sollten Sie in verschiedenen Größen bereitstellen. Des Weiteren soll bei der Verwendung von Bilder die Bildgröße in etwa dem 1,8 fachen der Kachelgröße entsprechen (um verlustfreies Zoomen zu ermöglichen).

Kachelgröße
Kachel-Abmessung
Bildgröße
Klein
70x70
128x128
Mittel
150x150
270x270
Breit
310x150
558x270
Groß
310x310
558x558

Praktischer Nutzen einer browserconfig.xml

Natürlich sei die Frage erlaubt: Welchen Vorteil bringt die bowserconfig.xml überhaupt? Nicht alle Features, die angeboten werden, lassen auf dem ersten Blick einen Vorteil erkennen. Zumal aktuell nur der Internet-Explorer 11 mit Touchoberfläche darauf reagiert. Für die statischen Kacheln sehe ich schon den Vorteil, dass hiermit das „Branding“ (Logo) gut transportiert werden kann. Für die Live-Kacheln könnte ich mir folgende praktischen Anwendungsfälle vorstellen:

  • Einblendung von aktuellen News
  • Auflistung von Veranstaltungshinweisen
  • Verwendung quasi als abgespeckten RSS-Feed

Generell soll hiermit die Interaktion der Besucher mit der Website gefördert werden.

Testvoraussetzungen für eine browserconfig.xml

Für Windows 8.1 Nutzer mit Internet Explorer 11 ist ein Test kein Problem. Aber diese Konstellation ist noch nicht so weit verbreitet. Leider habe ich keine Möglichkeit gefunden, um die browserconfig.xml online zu testen. So bleibt mir nur die Empfehlung Windows 8.1. als Testversion in einer virtuellen Box zu installieren.

Fazit

Auch wenn der Verbreitungsgrad des Internet Explorers 11 noch nicht so groß ist, sollten Sie das Feature nicht ignorieren. Ich denke, dass in Zukunft noch weitere Funktionalitäten konfigurierbar sind. Schon jetzt lassen sich komplexe Live-Kacheln mit Javascript erstellen. Dabei können auch HTML5-Features, wie z.B. Local-Storage, verwendet werden.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

74

Kommentare:

22.März2014

Super Anleitung!
Danke

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.