Now, that Google update for mobile-friendly websites has rolled out and you made many efforts on making your website “Google-friendly”, because this is what actually the update was all about, wasn’t it? Getting higher mobile rankings in Google mobile search.
Don’t stop there! It’s not all about ranking high, you have to give a certain view and impact for visitor, otherwise it’s all just wasted effort and traffic. I’m not going to give you a mobile website design lesson, I just found a great code that you can add to your website to make the mobile experience of the visitor even better. It’s not that big of the deal, you just colour the bar of the mobile browser using a simple meta-tag.
The update comes as a surprise to many designers, but we are sure a large amount of UX designers have already implemented this.
Starting in version 39 of Chrome for Android on Lollipop, you’ll now be able to use the theme-color meta tag to set the toolbar color—this means no more gray toolbars! The syntax is pretty simple: add a meta tag to your page’s <head> with the name=”theme-color”, and set the content to any valid CSS color.
Here is the example of our website being loaded on a mobile Chrome Browser:
We’ve just added the following code to the <head> section: <meta name=”theme-color” content=”#3376B6″>
See, it’s really easy to use and has a huge impact on the visitor. You can customize it to your brand’s colour.
