Si vous avez l’habitude de visiter des sites comme celui du guardian avec l’app Chrome installée sur votre téléphone, vous avez dû remarquer que la couleur de l’en tête ainsi que celle de la barre d’adresse changent une fois arrivé sur la page d’accueil de ces sites.
Ce n’est pas le fruit du hasard : cette déclinaison de couleur se fait en accord avec la charte graphique du site et permet ainsi d’accentuer le « branding » du site. Si vous êtes un développeur, vous vous demandez comment cela est possible : et bien, c’est aussi simple que de rajouter 3 balises meta dans la section <header> de votre site.
Ce n’est pas le fruit du hasard : cette déclinaison de couleur se fait en accord avec la charte graphique du site et permet ainsi d’accentuer le « branding » du site. Si vous êtes un développeur, vous vous demandez comment cela est possible : et bien, c’est aussi simple que de rajouter 3 balises meta dans la section <header> de votre site.
<meta content= »#000000″ name= »theme-color »/>
<meta content= »#000000″ name= »msapplication-navbuton-color »/>
<meta content= »#000000″ name= »apple-mobile-web-app-status-bar-style »/>
où vous remplacerez #000000 par le code css correspondant à la couleur que vous souhaitez pour la barre d’adresse de votre site web.
En pratique, voici ce que ça donne
avant l’ajout des balises |
Après l’ajout des balises |