Mit modernen Browsern lassen sich bestimmte Komponenten wie Symbole und die Farbe der Adressleiste ganz einfach anpassen. Sie können sogar benutzerdefinierte Kacheln hinzufügen. Mit diesen einfachen Optimierungen können Sie das Nutzer-Engagement steigern und Nutzer dazu bringen, Ihre Website wieder aufzurufen.
Mit modernen Browsern lassen sich bestimmte Komponenten wie Symbole und die Farbe der Adressleiste ganz einfach anpassen. Sie können sogar benutzerdefinierte Kacheln hinzufügen. Mit diesen einfachen Optimierungen können Sie das Interesse der Nutzer steigern und Nutzer dazu bringen, Ihre Website wieder aufzurufen.
Gute Symbole und Kacheln bereitstellen
Wenn ein Nutzer Ihre Webseite besucht, versucht der Browser, ein Symbol aus dem HTML-Code abzurufen. Das Symbol kann an vielen Stellen angezeigt werden, z. B. auf dem Browsertab, beim Wechseln zwischen den zuletzt verwendeten Apps, auf der Seite „Neuer Tab“ (oder zuletzt besuchter Tab) und mehr.
Ein hochwertiges Bild macht Ihre Website erkennbarer und erleichtert Nutzern die Suche nach Ihrer Website.
Damit alle Browser vollständig unterstützt werden, musst du dem <head>-Element jeder Seite einige Tags hinzufügen.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome und Opera
In Chrome und Opera wird icon.png verwendet, das vom Gerät auf die erforderliche Größe skaliert wird. Wenn Sie die automatische Skalierung verhindern möchten, können Sie mit dem Attribut sizes zusätzliche Größen angeben.
Safari
Safari verwendet außerdem das <link>-Tag mit dem rel-Attribut apple-touch-icon, um das Symbol für den Startbildschirm anzugeben.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Für das Apple-Touch-Symbol eignet sich ein nicht transparentes PNG mit einer quadratischen Größe von 180 px oder 192 px.
Es wird nicht empfohlen, mehrere Versionen über das Attribut sizes anzugeben.
Bisher wurde in Safari für iOS das Keyword -precomposed berücksichtigt, um visuelle Effekte zu vermeiden. Seit iOS 7 ist das nicht mehr erforderlich.
Internet Explorer und Windows Phone
Der neue Startbildschirm von Windows 8 unterstützt vier verschiedene Layouts für angepinnte Websites und erfordert vier Symbole. Sie können die entsprechenden Meta-Tags weglassen, wenn Sie eine bestimmte Größe nicht unterstützen möchten.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Kacheln im Internet Explorer
Die angepinnten Websites und die rotierenden Live-Kacheln von Microsoft gehen weit über andere Implementierungen hinaus und fallen nicht in den Rahmen dieses Leitfadens. Weitere Informationen finden Sie im MSDN-Artikel Live-Kacheln erstellen.
Browserelemente färben
Mit verschiedenen meta-Elementen können Sie den Browser und sogar Elemente der Plattform anpassen. Einige funktionieren möglicherweise nur auf bestimmten Plattformen oder in bestimmten Browsern, können aber die Nutzung erheblich verbessern.
In Chrome, Firefox OS, Safari, Internet Explorer und Opera Coast können Sie mithilfe von Meta-Tags Farben für Elemente des Browsers und sogar der Plattform definieren.
Meta-Designfarbe für Chrome und Opera
Verwenden Sie die Meta-Designfarbe, um die Designfarbe für Chrome auf Android-Geräten anzugeben.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari-spezifische Stile
Mit Safari können Sie den Stil der Statusleiste anpassen und ein Startbild festlegen.
Start-Image angeben
Standardmäßig zeigt Safari während der Ladezeit und nach mehreren Ladevorgängen einen Screenshot des vorherigen Status der App an. Sie können dies verhindern, indem Sie Safari anweisen, ein explizites Startbild anzuzeigen. Dazu fügen Sie ein Link-Tag mit rel=apple-touch-startup-image hinzu. Beispiel:
<link rel="apple-touch-startup-image" href="icon.png">
Das Bild muss der Größe des Bildschirms des Zielgeräts entsprechen, da es sonst nicht verwendet wird. Weitere Informationen finden Sie in den Richtlinien für Webinhalte in Safari.
Die Dokumentation von Apple zu diesem Thema ist spärlich. Die Entwicklergemeinde hat jedoch eine Möglichkeit gefunden, Anzeigen auf alle Geräte auszurichten. Dazu werden erweiterte Medienabfragen verwendet, um das entsprechende Gerät auszuwählen und dann das richtige Bild anzugeben. Hier ist eine funktionierende Lösung, die tfausak's gist entnommen wurde.
Darstellung der Statusleiste ändern
Sie können die Darstellung der Standardstatusleiste in black oder black-translucent ändern. Bei black-translucent wird die Statusleiste nicht nach unten verschoben, sondern schwebt über den Vollbildinhalten. Dadurch wird das Layout höher, aber die Oberseite wird verdeckt. Der folgende Code ist erforderlich:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black