Nowoczesne przeglądarki ułatwiają dostosowanie niektórych komponentów, takich jak ikony czy kolor paska adresu, a nawet dodawanie niestandardowych kafelków. Te proste zmiany mogą zwiększyć zaangażowanie i przyciągnąć użytkowników z powrotem do witryny.
Nowoczesne przeglądarki ułatwiają dostosowanie niektórych komponentów, takich jak ikony czy kolor paska adresu, a nawet dodawanie niestandardowych kafelków. Te proste zmiany mogą zwiększyć zaangażowanie i przyciągnąć użytkowników z powrotem do witryny.
Dodaj doskonałe ikony i kafelki
Gdy użytkownik odwiedza Twoją stronę internetową, przeglądarka próbuje pobrać ikonę z kodu HTML. Ikona może pojawić się w wielu miejscach, m.in. na karcie przeglądarki, przełączniku ostatnio używanych aplikacji lub na stronie nowej (lub ostatnio otwartej) karty.
Wysoka jakość obrazu sprawi, że witryna będzie bardziej rozpoznawalna, a użytkownikom łatwiej będzie ją znaleźć.
Aby w pełni obsługiwać wszystkie przeglądarki, do elementu <head> na każdej stronie musisz dodać kilka tagów.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome i Opera
Przeglądarka Chrome i Opera używa pola icon.png, który jest skalowany do odpowiedniego rozmiaru przez urządzenie. Aby zapobiec automatycznemu skalowaniu, możesz też podać dodatkowe rozmiary, określając atrybut sizes.
Safari
Do wskazywania ikony ekranu głównego Safari używa też tagu <link> z atrybutem rel: apple-touch-icon.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
W przypadku ikony apple-touch idealnie sprawdzi się nieprzezroczysty obraz w kształcie kwadratu o boku 180 lub 192 pikseli.
Nie zalecamy podawania wielu wersji za pomocą atrybutu sizes.
Wcześniej Safari na iOS używała słowa kluczowego -precomposed, aby uniknąć dodawania efektów wizualnych, ale od wersji iOS 7 nie było to konieczne.
Internet Explorer i Windows Phone
Nowy wygląd ekranu głównego Windows 8 obsługuje cztery różne układy przypiętych witryn i wymaga 4 ikon. Jeśli nie chcesz obsługiwać konkretnego rozmiaru, pomiń odpowiednie metatagi.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Kafelki w przeglądarce Internet Explorer
„Przypięte witryny” i obrotowe „kafelki” opublikowane przez firmę Microsoft wykraczają daleko poza zakres tego przewodnika i wykraczają poza zakres tego przewodnika. Więcej informacji na temat tworzenia aktywnych kafelków na stronie MSDN.
Kolorowanie elementów przeglądarki
Za pomocą różnych elementów meta możesz dostosować przeglądarkę, a nawet elementy platformy. Niektóre z nich działają tylko na określonych platformach lub przeglądarkach, ale mogą znacznie poprawić wrażenia użytkowników.
Chrome, Firefox OS, Safari, Internet Explorer i Opera Coast pozwalają definiować kolory elementów przeglądarki, a nawet platformy za pomocą metatagów.
Kolor metamotywu dla Chrome i Opera
Aby określić kolor motywu Chrome na Androida, użyj koloru metamotywu.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Styl charakterystyczny dla Safari
W Safari możesz dostosować styl paska stanu i określić obraz startowy.
Określanie obrazu startowego
Domyślnie Safari wyświetla pusty ekran podczas wczytywania i po wielokrotnym wczytaniu zrzutu ekranu poprzedniego stanu aplikacji. Aby temu zapobiec, zezwól Safari na wyświetlanie wyraźnego obrazu startowego. Aby to zrobić, dodaj tag link z parametrem rel=apple-touch-startup-image. Na przykład:
<link rel="apple-touch-startup-image" href="icon.png">
Obraz musi mieć odpowiedni rozmiar ekranu urządzenia docelowego. W przeciwnym razie nie będzie używany. Więcej informacji znajdziesz we wskazówkach dotyczących treści internetowych w przeglądarce Safari.
Dokumentacja firmy Apple jest obszerna, ale społeczność programistów opracowała sposób kierowania reklam na wszystkie urządzenia za pomocą zaawansowanych zapytań o multimedia, aby wybrać odpowiednie urządzenie i właściwy obraz. Oto działające rozwiązanie dzięki gistom tfausak
Zmienianie wyglądu paska stanu
Wygląd domyślnego paska stanu możesz zmienić na black lub black-translucent. W black-translucent pasek stanu przesuwa się po treści pełnoekranowej zamiast przesuwać ją w dół. Zwiększa to wysokość układu, ale zasłania górną część. Oto wymagany kod:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black