Jak zmieni膰 kolor paska adresu w mobilnym Chrome?

Z pewno艣ci膮 zauwa偶y艂e艣 przegl膮daj膮c strony internetowe, na swoim smartfonie z zainstalowanym Androidem, 偶e paski adresu niekt贸rych z nich maj膮 charakterystyczny kolor. Co wi臋cej, 偶e s膮 one dopasowane do og贸lnego layoutu strony, kt贸r膮 przegl膮dasz. Zastanawia艂e艣 si臋 pewnie, jak oni to robi膮, jak to jest mo偶liwe? Je艣li tak to w dalszej cz臋艣ci rozwiej臋 Twoje w膮tpliwo艣ci.

Od wersji mobilnego Chrome oznaczonego jako 39, mo偶na ustawia膰 sw贸j w艂asny kolor paska adresu wraz z belk膮 w telefonie. Co wi臋cej, ca艂a operacja jest banalnie prosta, tak banalnie 偶e m贸g艂by zrobi膰 to ka偶dy. Przynajmniej, ka偶dy mo偶e to zrobi膰, ale czy na pewno, czy ka偶dy zrobi to dobrze?

Co znajdziesz w tym wpisie?

Jak ustawi膰 w艂asny kolor paska adresu?

Mobilny Chrome obs艂uguje atrybut meta theme-color. Oznacza, to 偶e wystarczy w sekcj臋 HEAD danej witryny tylko go doda膰 wraz z odpowiednim atrybutem okre艣laj膮cym kolor w HEX-ie na jaki ma si臋 zmieni膰 pasek. Reasumuj膮c wystarczy jedna linijka kodu HTML:

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

i mo偶na si臋 cieszy膰 w艂asnym kolorem paska adresu w telefonach u偶ytkownik贸w odwiedzaj膮cych stron臋 z Chrome na Androidzie!

Przyk艂ady w艂asnego koloru paska adresu w Chrome dopasowanego do Brandu

Mimo, 偶e z pewno艣ci膮 mia艂e艣 styczno艣膰 z tego typu zabiegami, przedstawiam kilka ciekawych przyk艂ad贸w zastosowania, kolorowania paska adresu na kom贸rkach, kt贸re s膮 wizualnie atrakcyjne i warte uwagi:

  • surferseo.com
  • audytorium.xyz
  • chip.pl
  • bussinesinsider.com.pl
  • seoit.pl (co mo偶esz obserwowa膰 teraz je艣li przegl膮dasz ten wpis z mobilnego Chroma :))

Zazwyczaj warto by kolory by艂y to偶same z mark膮 i tym co jest na stronie.

Jaki kolor paska adresu najlepiej ustawi膰?

Najlepiej jak kolor paska adresu b臋dzie sp贸jny kolorystycznie ze stron膮. Jednak warto zwr贸ci膰 uwag臋, czy nie b臋dzie zbyt intensywny i ra偶膮cy dla potencjalnych u偶ytkownik贸w. W tym zakresie warto zapozna膰 si臋 chocia偶 cz臋艣ciowo z psychologi膮 kolor贸w by dobra膰 barwy tak, jak chcieliby艣my by potencjalni klienci nas odbierali. Najlepiej jest to zrobi膰 ca艂o艣ciowo projektuj膮c stron臋 i wizerunek pod wzgl臋dem barw pocz膮wszy od samej strony, przez logotyp, a偶 po inne elementy kierowane do klient贸w.

Jak szybko sprawdzi膰 kolor wyst臋puj膮cy na stronie?

Sposob贸w by to okre艣li膰 kolor na stronie troch臋 jest. Przedstawi臋 jeden z najprostszych.

  • Klikasz prawym przyciskiem na elemencie.
  • Wybierasz Zbadaj / Zbadaj element
  • I w wy艣wietlonej konsoli w sekcji Elements / Styles szukasz wyst膮pienia po偶膮danego koloru.

W ten spos贸b mo偶esz dopasowa膰 kolor paska adresu 鈥瀟heme-color鈥 a dok艂adniej jego atrybut content, tak by by艂 zgodny z kolorystyk膮 Twojej strony.

Czy warto ustawi膰 w艂asny kolor paska adresu dla u偶ytkownik贸w?

W wi臋kszo艣ci przypadk贸w warto si臋 wyr贸偶ni膰 na tle konkurencji z pomoc膮 w艂asnego wyr贸偶nionego paska adresu. O ile nie wspomo偶e to samego pozycjonowania, to przecie偶 po to strony si臋 pozycjonuje, aby po wej艣ciu na stron臋 u偶ytkownicy wykonywali okre艣lone akcje lub wracali na dan膮 witryn臋.

Zobacz: Co to w艂a艣ciwie jest pozycjonowanie stron? I o co tyle szumu.

Poniewa偶 coraz wi臋cej wyszukiwa艅 nast臋puje z poziomu mobilnego Chrome na Androidzie, to przykucie uwagi tych u偶ytkownik贸w jest jak najbardziej zasadnym dzia艂aniem. Grunt by nie popa艣膰 w u艂a艅sk膮 fantazj臋 z doborem barw. A Ty czytelniku wyr贸偶niasz si臋 ju偶 w ten spos贸b u偶ytkownikom mobilnym?

Mo偶e Ci si臋 r贸wnie偶 spodoba

1 Odpowied藕

  1. wodawfirmie pisze:

    Super napisane. Musz臋 podzi臋kowa膰 za Tw贸j trud. Mam nadziej臋, 偶e b臋dzie wi臋cej takich wpis贸w 馃檪 Po prostu super. B臋d臋 cz臋艣ciej zagl膮da艂.

Dodaj komentarz

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *