In the latest major release for Android called Lollipop, Google added the ability to change the header and address bar colour in Google Chrome to whatever colour you would like, which makes it easy to add your own brand to the whole screen.
It turns out this change has been around for a while now, but I only noticed last week when looking up who to bet for on the Grand National on William Hill that it was a possibility. It seems that although the feature has been around for a while now, it isn’t a very well known, or much used feature, meaning we might as well get ahead of the game!
If you do know of any sites which have this feature implemented, let me know in the comments, I would love to see some more.
Luckily adding the feature is as simple as adding a little snippet of code to your header section. Take a look at the code below, this is the code I have used on SoPlayNice, so if you want to take a closer look, hop onto your phone and go onto this website or take a lot in the source code.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
The ‘name=”theme-color”‘ tells Chrome what to do with the information. Currently the feature is only supported in Chrome, but I wouldn’t be surprised if it starts appearing on more browsers.
You should now have something like the screenshots below. It is such a small part of a website, but it adds that extra bit of branding and like it did with the William Hill website, it makes your website stand out that little bit more.