Styling Chrome, Firefox, & Opera Mobile Theme Color with Meta Tag

In today’s internet world, having a website is not enough. With over 50 percent of web users browsing the internet via mobile devices — from mobile phones to tablets and even smart watches — it is important for your website to be responsive and mobile friendly. Sure, you have heard this many times before — it is sort of an obvious “rule of thumb” nowadays. More important than the site just looking good on mobile screens, however, is delivering a user experience to mobile users that is akin to the experience that they would get if they visited the site on a desktop or laptop.

Mobile visitors need to experience the level of care and detail that goes into a good responsive website. With mobile screens having very little real estate to display graphics, text, and animations compared to desktops and larger viewports, it is crucial that every detail on the site serves a purpose and adds to the user’s experience. High level animations, videos, and interactivity should also be kept to a minimum for mobile users, as this will slow down load times at mobile data speeds as well as eat up the user’s mobile bandwidth.

So, with all these limitations on what can be delivered to mobile users, how can a developer go above and beyond to show mobile users that they are valued just as much as desktop users? What extra elements can be added to the user experience that will have an impact on the appearance of the site without taking away from the load time, eating up the mobile user’s bandwidth, and compromising the experience that a desktop user would have?

First, it is important to make sure that every element of the site scales nicely to fit on mobile screens, and that as the size of the screen increases, the available real estate is utilized properly to balance out white space with content in a way that is visually appealing. Hiding small, less significant graphics and images on smaller screens and making them visible on larger screens where it makes sense to have them is one of the best ways to utilize the available viewport.

Another often overlooked element that can be added to mobile-friendly websites is the custom theme element meta tag. This single line of code can be added to the head section of the site’s pages and allows the developer to specify a custom color for the browser address and menu bar on mobile devices. The meta tag looks like this:

<meta name=”theme-color” content=”#EFEFEF”>

Adding this tag to your website’s theme will help ensure that your site stands out from other sites that do not utilize this simple yet powerful tip. This small line of code will give your website the feel of a mobile application, right in the user’s browser, which is a trend that continues to grow in the mobile web development world.

By customizing the color of the user’s browser with this single meta tag to match the overall color scheme of your website’s theme, your site will have a more app-like feel and it will add a level sophistication to the look and feel of the overall site theme. Your visitors will subconsciously feel the level of pride and professionalism that you have put into the user experience and overall design of the site. Plus, it will help your site stand out from ‘the crowd’.

There are a few important things to note about this meta tag, however.

First, if the user has their browser set up in dark or high-contrast mode, this tag will be ignored, and the color of the browser will not be affected. This is for accessibility and is perfectly fine. You should still include this tag in your site’s header section for users that do not use high-contrast and dark mode.

The second thing to note is that this tag is not compatible with all mobile browsers. The theme color works on Chrome and Safari (which make up a large portion of mobile devices that run on Android and Apple’s iOS). In recent years, it also works in Firefox as well. If, for some reason, a user is visiting the site from an unsupported browser, the tag will simple be ignored.

A final thing to note is that this tag only supports a single color (you cannot set gradients and multiple colors). It also only supports hexadecimal color values.

The bottom line is that you should start including this tag in the header section of any website that you build. Most mobile users will be visiting your site from a compatible browser, and only a handful will be using high contrast and dark themes, so the added benefit of changing the user’s browser color to match the overall theme of your website is worth it. In addition, this is a relatively small way to add an extra pop and wow-factor to the user experience, since this single line of code only takes about 43 bytes of data to load.

Even if your site’s primary color scheme is mostly white (for instance — a minimalistic or ‘material’ blog theme with a white background and black text, and no images or accent colors) it is still a good idea to include this tag and set the value to the hexadecimal value for white (#FFF or #FFFFFF). Again, this code takes very little data to load and adds virtually no time to the loading speed of the site.

For progressive web applications — a trend that is gaining traction and popularity quickly, especially for mobile sites — specifying the color that the browser should use for menu and tab colors is a must.