Mit modernen Browsern ist es ganz einfach, bestimmte Komponenten wie Symbole und die Farbe der Adressleiste anzupassen und sogar benutzerdefinierte Kacheln hinzuzufügen. Mit diesen einfachen Optimierungen können Sie Interaktionen fördern und Nutzer dazu bringen, Ihre Website erneut aufzurufen.
Mit modernen Browsern ist es ganz einfach, bestimmte Komponenten wie Symbole und die Farbe der Adressleiste anzupassen und sogar benutzerdefinierte Kacheln hinzuzufügen. Mit diesen einfachen Optimierungen können Sie Interaktionen fördern und Nutzer dazu bringen, Ihre Website erneut aufzurufen.
Ansprechende Symbole und Kacheln bereitstellen
Wenn ein Nutzer Ihre Webseite besucht, versucht der Browser, ein Symbol aus der HTML abzurufen. Das Symbol kann an vielen Stellen angezeigt werden, z. B. auf dem Browsertab, auf der kürzlich geöffneten App oder auf der Seite mit dem neuen (oder kürzlich besuchten) Tab.
Mit einem qualitativ hochwertigen Bild lässt sich Ihre Website besser erkennen und Nutzer können sie leichter finden.
Damit alle Browser vollständig unterstützt werden, musst du dem <head>
-Element jeder Seite ein paar 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
Chrome und Opera verwenden icon.png
, das vom Gerät auf die erforderliche Größe skaliert wird. Um das Autoscaling zu verhindern, können Sie auch zusätzliche Größen angeben, indem Sie das Attribut sizes
angeben.
Safari
Safari verwendet außerdem das <link>
-Tag mit dem rel
-Attribut: apple-touch-icon
, um das Startbildschirmsymbol zu kennzeichnen.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Eine nicht transparente PNG-Datei mit einer Größe von 180 oder 192 Pixel im Quadratformat ist ideal für das Apple-Touch-Symbol.
Es wird nicht empfohlen, mehrere Versionen über das Attribut sizes
anzugeben.
Bisher wurde in Safari für iOS das Keyword -precomposed
verwendet, um das Hinzufügen visueller Effekte zu vermeiden. Seit iOS 7 war das aber 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. Du kannst die entsprechenden Meta-Tags weglassen, wenn du eine bestimmte Größe nicht unterstützen möchtest.
<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 in Internet Explorer
Die von Microsoft angepinnten Websites und die rotierenden „Live-Kacheln“ gehen weit über andere Implementierungen hinaus und werden in diesem Leitfaden nicht behandelt. Weitere Informationen finden Sie unter Live-Kacheln erstellen von MSDN.
Farbbrowserelemente
Mit verschiedenen meta
-Elementen kannst du den Browser und sogar Elemente der Plattform anpassen. Einige funktionieren möglicherweise nur auf bestimmten Plattformen oder in bestimmten Browsern, sie können jedoch die Nutzererfahrung erheblich verbessern.
In Chrome, Firefox OS, Safari, Internet Explorer und Opera Coast können Sie Farben für Browserelemente und sogar für die Plattform mithilfe von Meta-Tags definieren.
Metadesign-Farbe für Chrome und Opera
Wenn Sie die Designfarbe für Chrome unter Android festlegen möchten, verwenden Sie die Metadesign-Farbe.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari-spezifische Stile
In Safari können Sie den Stil der Statusleiste anpassen und ein Start-Image angeben.
Start-Image angeben
Standardmäßig zeigt Safari während der Ladezeit und nach mehreren Laden eines Screenshots des vorherigen Status der Anwendung einen leeren Bildschirm an. Sie können dies verhindern, indem Sie Safari auffordern, ein explizites Start-Image anzuzeigen. Fügen Sie dazu ein Link-Tag mit rel=apple-touch-startup-image
hinzu. Beispiel:
<link rel="apple-touch-startup-image" href="icon.png">
Das Bild muss die entsprechende Größe des Zielgerätebildschirms haben. Andernfalls wird es nicht verwendet. Weitere Informationen finden Sie in den Richtlinien für Safari-Webinhalte.
Auch wenn die Dokumentation von Apple zu diesem Thema spärlich ist, hat die Entwickler-Community eine Möglichkeit gefunden, ein Targeting auf alle Geräte vorzunehmen. Dazu verwendet sie erweiterte Medienabfragen, um das entsprechende Gerät auszuwählen und dann das richtige Bild anzugeben. Hier ist eine funktionierende Lösung, mit freundlicher Genehmigung von tfausak's gist
Darstellung der Statusleiste ändern
Sie können die Darstellung der Standardstatusleiste entweder in black
oder black-translucent
ändern. Bei black-translucent
schwebt die Statusleiste über dem Inhalt des Vollbildmodus, anstatt sie nach unten zu schieben. So erhält das Layout mehr Höhe, verdeckt jedoch den oberen Rand. Hier ist der erforderliche Code:
<meta name="apple-mobile-web-app-status-bar-style" content="black">