Maak je website geschikt voor Windows 8

OK, de titel is een beetje linkbait. Want dit bericht gaat niet over het aanpassen van een website zodat hij beter weergegeven wordt in Internet Explorer 10 op Windows RT/8. Het bericht gaat wél over het optimaliseren van je website zodat deze er zo optimaal mogelijk uitziet als iemand met Windows 8 de website op het startscherm van Windows 8.

Voor wie het niet wist: als je in Internet Explorer 10 op Windows 8 een webpagina oproept en er dan met de rechtermuisknop op klikt, dan verschijnt onder in het venster, naast de adresbalk ook een knopje met een punaise. Als je daar op klikt, dan kun je de webpagina vastpinnen op je startscherm. Alsof je een snelkoppeling op je bureaublad maakt waarmee je snel terug kunt schakelen naar die website. Standaard kiest Windows 8 dan een kleur en laat het logo van Internet Explorer zien. Als beheerder van een website kun je er echter voor zorgen dat het icoontje dat getoond wordt én de kleur die gebruikt wordt voor de tegel beter afgestemd zijn op jouw website. Je zult daarvoor een beetje extra metadata aan je webpagina toe moeten voegen.

Het gaat daarbij om twee tags:

<meta name="msapplication-TileImage" content="files/ICTOBlog_LOGO_144x144.png"/>
<meta name="msapplication-TileColor" content="#FFFFFF"/>


Hierboven zie je uiteraard een voorbeeld dat je voor je eigen site moet aanpassen. De meta-tag “msapplication-TileImage” bevat een verwijzing naar een afbeelding van 144×144 pixels. Ik heb er voor gekozen om een grotere versie van het logo te maken dat ook voor het .ico bestand gebruikt wordt. Echter, het is nu een .png bestand én ik heb de achtergrond transparant gemaakt. Dat had in dit geval niet gehoeven, want die achtergrond was al wit, maar als je wilt kunnen variëren met de tweede meta-tag, dan is dat wel handig.
Die tweede tag, “msapplication-TileColor”, geeft namelijk aan welke kleur de tegel in Windows 8 moet krijgen, de code #FFFFFF verwijst naar wit.

Ik heb de tags toegevoegd aan WordPress met behulp van de plugin Add Meta Tags, voor andere sites of tools moet je even kijken op welke manier dat moet.

Het resultaat zie je alleen in Windows 8. Als nu iemand dit weblog vast wil pinnen, dan wordt netjes het logo en de witte achtergrond gebruikt. Dat ziet er dan meteen een stuk netter uit op het startscherm:
.

Overigens: dit doe ik niet alleen voor Windows 8, ook voor iOS heb ik icoontjes toegevoegd zodat een link naar dit weblog op het beginscherm van een iOS-apparaat er netjes uitziet.
Met dank aan het IEBlog voor de uitleg.