From time to time, I push interesting articles to my phone to read them on the go. So when I opened up an article about the upcoming ServiceWorker on HTML5 Rocks (something you should definitively read if you are interested in this stuff), I noticed something I haven't seen before: my headerbar changed to red. Being the webnerd that I am, I wanted to find out how they managed to do this and started investigating. Turns out it's pretty easy.
With Android Lollipop, Google added a new metatag that can be parsed by the latest mobile Chrome. So to put a little branding on the browser window, simply add this metatag to your header and pass in the hexcode of your corporate color:
<meta name="theme-color" content="#3e3e3e">Somehow, this reminds me a lot of the days when we inserted some nasty CSS into our websites to overwrite the default styling of the browsers scrollbars. Except that styling the headerbar actually serves a real purpose. The custom headerbar looks especially nice if you see it in the overview of your recently open applications. Seeing tabs branded with the corporate color of the opened website instead of Chromes default grey headerbar, makes it a little easier to quickly navigate between them and gives websites a tiny bit more of this native feeling.
Anyways, I think it's at least a nice improvement for the corporate style of a website, especially since it does not require a lot of effort to implement.
Having said that, you might wish to check out my website on you Android Lollipop phone now, to see the headerbar in action. Or simply have a look on the screenshots below :-)
