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.

0 0 stemmen
Bericht waardering
13 Reacties
Inline Feedback
Bekijk alle reacties
trackback

Maak je website geschikt voor Windows 8 http://t.co/oLknmffQ

Willem Karssenberg
11 jaren geleden

Leuk dit soort tips! Vraag me alleen af hoeveel mensen bijvoorbeeld mijn weblog op hun startpagina vastpinnen. Eerlijk gezegd heb ik liever dat ze gewoon RSS (blijven) gebruiken. Ik vind het echt verontrustend dat ik die aantallen terug zie lopen. Er zijn nu al bloggers die zelf niet weten wat ze met RSS moeten en wat het is!
Maar ik ga jou natuurlijk even vastpinnen. Dan gebruik ik IE 10 tenminste ook een keer:-)

Willem Karssenberg
11 jaren geleden

Helaas, slecht nieuws: Bij mij werkt het niet. Ik krijg geen pinnetje te zien zoals in jouw screenshot.
Ik gebruik IE 10 want zit nu op Windows 8 maar ik heb de adresbalk ook niet onderaan mijn scherm maar bovenaan. Wat heb ik verkeerd staan?

Willem Karssenberg
11 jaren geleden
Reageer op  Pierre

Oei, nu val ik door de mand!
De Modern UI? Ik heb echt geen idee wat je daarmee bedoelt, honest!
Wat ik al wel gemerkt heb is dat er een verschil is tussen Google Chrome opstarten vanuit het startscherm of vanaf het bureaublad. Dat zijn echt twee aparte instanties.
Maar IE ziet er in beide gevallen bij mij hetzelfde uit volgens mij. Ik ga nog een keer kijken.

Willem Karssenberg
11 jaren geleden
Reageer op  Pierre

Tsja, die versie heb ik dus gewoon niet. Geen idee hoe ik hem tevoorschijn zou moeten toveren. Mis ik er veel aan?

Willem Karssenberg
11 jaren geleden
Reageer op  Pierre

Dat zal het zijn. Ik heb inderdaad Chrome als standaard browser gekozen.

trackback

[…] "Ik hoor de Apple-fans al schreeuwen: Wat? Een website aanpassen voor een besturingssysteem?! Wat een onzin! Maar gelukkig gaat het ook niet over het aanpassen van de website zelf…   …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…  […]

trackback

[…] 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 …  […]

trackback

[…] Maak je website geschikt voor Windows 8 […]