How to customize and modify the theme color of the address status bar of the mobile phone Chrome browser?

WhyTaobaoNet LOGO is orange?Interpret the secret of Alibaba LOGO color psychology!

From the beginning to the present, Taobao has been adhering to the orange UI design interface.

Whether it is from Taobao logo or mobile Taobao logo ▼

• The main color of Alibaba Group's website, AppsoftwareThe interface, the vast majority of the page layout, is mostly orange.
• Because orange generally gives a sense of life and energy, it often refreshes the original depression.
• This warm, safe feeling will calm you down as you read.
• Orange is also the warmest of all warm colors, orange symbolizes love andhappiness, a vibrant orange for a healthy feel.
• Some people say that oranges can improve appetite in people with anorexia.

The impact of warm and cool colors on users

warm color:

• Sensual, excited, impulsive
• Warm colors are easily reminiscent of sunshine, spring and summer, and are often used in commercial scenes to make users excited and impulsive.

Cool colors:

• rational, calm, calm
• Cool colors are easily reminiscent of frost, autumn and winter, and are often used in the industry to make users calm and high-end.

Why change the Chrome browser theme color?

There are manyE-commerceWebsites, when using Google Chrome browser to visit these websites:

• The color of the address bar of the mobile phone browser and the color of the status bar of the mobile phone system will automatically become the theme colors of these websites.
• Let the colors of the display interface match, very beautiful.
• in the text,Chen WeiliangWill show you how to modify the theme color of the mobile browser's address bar, as well as the phone's system status bar color, to match the colors of your website.

Starting with Android 5.0 (Lollipop) and Google Chrome version 39, the theme color of the theme-color meta tag used to change the theme color, has been added to the Chrome browser.

With the development of HTML5, mobile web application software, responsive web pages (adaptive pages) are getting closer and closer to mobile phone applications.

This ability to modify theme colors to further make web applications look like native applications.

• Please check the actual rendering before modifying the color.

Modify Chrome browser theme color instance

The following isChen WeiliangA screenshot of the blog's unmodified Chrome theme color▼

Note that the browser's address bar is gray, which is the default theme color for Google Chrome, and the phone's system notification bar is black by default.

这 是Chen WeiliangA screenshot of the blog's modified Chrome pageview theme color▼

• At this point, the browser's address bar turns orange, and the color of the phone's notification bar turns orange.
• These colors match the page colors very well, and the user experience is better.
• However, it's important to note that only Google Chrome has this feature.

How to modify the Chrome top navigation color?

The modification method is simple, add the theme color meta tag, you can do it,

We just need to add the pageAdd a meta tag in the middle of the tag, like this line of color code▼

<link rel="icon" sizes="192x192" href="nice-highres.png">

In addition, if you provide a high-resolution icon, Google Chrome can give priority to this more beautiful icon, Google Chrome will choose the icon with the highest resolution, the official recommendation is to use a 192×192px PNG image, such as:

Theme colors are only available for Google Chrome.If you want to modify the address bar demo in Safari for iPhone and IE for Windows Phone, please refer to the following code:

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

How to combine technology and marketing?

In fact, in simple words, it means not to consider those technologies and needs that are too cutting-edge.

You can make money with the most basic rigid needs.

In order to meet the demand, what is required is not deep technology, only the simplest technology to meet, which is the most powerful performance.

• Completely ignorant of technology, you can pay someone to develop software programs.
• So, technology is not the point, the point isInternet marketingStrategy.

The best way to succeed

Success is simple - success must be learned.

You don't need to mess around with ideas to succeed, the best way to do this is to:

1. Learn from a successful person
2. Imitation plus small innovation

There are many friends with very strong technology, but they do not have the marketing ability, and they do not understand the market at all.

invested a lot of moneyWeb Promotion, but still can't find the key to success.

Doing technology can not fall into the technical abyss

One of them has a friend who is on SogouAIBeen in the lab.

• Now, it's doing business with natural language, doing typo recognition, and getting stuck in the technical abyss.
• It has been two years now, WeChatPublic account promotionInvested a lot of money, but still can't find the key to success...
• This is actually a problem faced by many technologists...

Technology + Marketing Double Swords

For e-commerce practitioners, you should learn internet marketing strategy, a combination of technology and marketing that will get you off to a flying start.

either doSEOstill isWechat marketing, Marketing strategy is very important, many times, a simple strategy can bring you huge changes.

Conclusion

in"Drainage promotion"new flow theory(Chen WeiliangInitiated), it is mentioned thatdrainageIt is necessary to study the rules of the platform, and after comprehending the rules of the platform, it is practiced through technology;

• custom modificationGoogle ChromeAfter the Chrome address status bar theme color, be sure to record today's modification date.
• Then, use a week to compare and see if there is an increase in the click-through rate of the ad link?If the CTR drops instead, it must be changed back immediately.
• doemail marketingIt is also necessary to study user behavior. The purpose of studying user behavior is to improve the conversion rate of e-commerce.

To learn how to increase conversion rate, please click the link below to view ▼

What does conversion rate mean?How to calculate the conversion rate formula of e-commerce orders?

What does conversion rate mean?The conversion rate in internet marketing refers to the ratio of the number of conversions completed to the total number of clicks on the promoted content during a statistical period.Conversion rates are at the heart of a website’s ultimate profitability.Improve website conversion rate, is website...

How to increase conversion rate?Details page copy template with a conversion rate of over 85%

What if the conversion rate is too low?Just use this set of "Detailed Page Copy Template with a Conversion Rate Over 85%" to help you increase your conversion rate!Network marketing is to promote the sales of products or services scientifically through network promotion and publicity.At the heart of e-commerce is directed traffic, from search engines…

6 ways to promote transactions, quickly help you improve the e-commerce transaction rate

6 ways to promote transactions quickly help you improve the transaction rate What determines the user's purchase behavior?Many people attribute transactional behavior to sensory impulses, but the scientific explanation is that our brains decide to buy.The old brain (also known as the ancient brain) is the first brain to develop...