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 „theme-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 *