Les navigateurs récents permettent de personnaliser facilement certains composants, comme les icônes et la couleur de la barre d'adresse, et même d'ajouter des éléments tels que des tuiles personnalisées. Ces ajustements simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.
Les navigateurs récents permettent de personnaliser facilement certains composants, comme les icônes et la couleur de la barre d'adresse, et même d'ajouter des éléments tels que des tuiles personnalisées. Ces ajustements simples peuvent accroître l'engagement et inciter les utilisateurs à revenir sur votre site.
Fournir des icônes et des tuiles de qualité
Lorsqu'un internaute consulte votre page Web, le navigateur tente de récupérer une icône dans le code HTML. L'icône peut s'afficher à de nombreux endroits, y compris dans l'onglet du navigateur, dans l'onglet du navigateur, dans l'application qui a récemment changé d'application, sur la page du nouvel onglet (ou sur la page consultée récemment), et plus encore.
En fournissant une image de haute qualité, vous améliorez la reconnaissance de votre site pour permettre aux utilisateurs de trouver votre site plus facilement.
Pour assurer une compatibilité totale avec tous les navigateurs, vous devez ajouter quelques tags à <head>
de chaque page.
<!-- 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 et Opera
Chrome et Opera utilisent icon.png, qui est ajusté à la taille nécessaire par
l'appareil. Pour empêcher le scaling automatique, vous pouvez aussi fournir
en spécifiant l'attribut sizes.
Safari
Safari utilise également la balise <link> avec l'attribut rel: apple-touch-icon pour
indiquer l'icône
de l'écran d'accueil.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Un fichier PNG non transparent de 180 px ou 192 px carré est idéal pour l'icône Apple-touch.
Nous vous déconseillons d'inclure plusieurs versions via l'attribut sizes.
Auparavant, Safari pour iOS prenait en compte le mot clé -precomposed pour éviter
ajouter des effets visuels, mais cela n'est plus
nécessaire depuis iOS 7.
Internet Explorer et Windows Phone
Le nouvel écran d'accueil de Windows 8 prend en charge quatre mises en page différentes pour les sites épinglés. Il nécessite quatre icônes. Vous pouvez omettre les balises Meta correspondantes si vous ne souhaitez pas accepter une taille spécifique.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Tuiles dans Internet Explorer
Sites épinglés de Microsoft et faire pivoter des « Live Tiles » aller bien au-delà des autres mises en œuvre et sortent du cadre de ce guide. Pour en savoir plus chez MSDN comment créer des cartes actives.
Colorer les éléments du navigateur
En utilisant différents éléments meta, vous pouvez personnaliser le navigateur et
même des éléments
de la plateforme. Gardez à l'esprit que certains
peuvent ne fonctionner que sur certaines
plates-formes ou navigateurs, mais ils peuvent améliorer considérablement l'expérience utilisateur.
Chrome, Firefox OS, Safari, Internet Explorer et Opera Coast vous permettent de définir les couleurs des éléments du navigateur, et même la plate-forme, à l'aide de balises Meta.
Couleur du thème Meta pour Chrome et Opera
Pour spécifier la couleur du thème pour Chrome sous Android, utilisez la couleur du thème Meta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Style spécifique à Safari
Safari vous permet de styliser la barre d'état et de spécifier une image de démarrage.
Spécifier une image de démarrage
Par défaut, Safari affiche un écran vide pendant le chargement et après plusieurs
charge une capture d'écran de l'état précédent de l'application. Vous pouvez
éviter cela en
à Safari d'afficher une image de démarrage explicite en ajoutant une balise de lien, avec
rel=apple-touch-startup-image Exemple :
<link rel="apple-touch-startup-image" href="icon.png">
L'image doit avoir la taille spécifique de l'écran de l'appareil cible, ne sera pas utilisée. Consultez Consignes relatives au contenu Web de Safari pour en savoir plus.
Bien que la documentation d'Apple soit limitée sur ce sujet, la communauté des développeurs a trouvé un moyen de cibler tous les appareils en utilisant des requêtes média avancées pour sélectionnez l'appareil approprié, puis spécifiez la bonne image. Voici un une solution opérationnelle, conformément à l'approche générale de tfausak
Modifier l'apparence de la barre d'état
Vous pouvez remplacer l'apparence de la barre d'état par défaut par black ou
black-translucent Avec black-translucent, la barre d'état flotte au-dessus.
du contenu plein écran au lieu de le faire glisser vers le bas. Cela donne à la mise en page
plus haut, mais il masque le haut. Voici le code requis:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black