iOS: zakładki do stron WWW na ekranie początkowym

iOS8 Logo

W systemie mobilnym iOS, podobnie jak w innych wiodących systemach operacyjnych, możliwe jest dodanie zakładki do strony internetowej wśród ikon aplikacji. Dzięki temu uzyskujemy łatwy i szybki dostęp do interesujących nas treści, które chcemy mieć zawsze pod ręką. Oto garść ciekawostek związanych z dodawaniem zakładek do ekranu początkowego (home screen).

 

Dodawanie zakładki do ekranu początkowego

Czynność prosta i intuicyjna dla większości użytkowników – nie wymaga większego komentarza. Zakładki utworzone w ten sposób lądują wśród ikon aplikacji i zachowują się tak samo jak one: można je dowolnie przemieszczać, przenosić do folderów oraz usuwać.

Dodawanie zakładki do ekranu początkowego

 

Domyślny wygląd zakładki

Jeśli autor strony nie podjął odpowiednich kroków, by udostępnić nam ładną ikonę (będzie o tym w dalszej części artykułu), wówczas za ikonę będzie nam służył podgląd strony, do której dodajemy zakładkę.

Ikona zakładki nr 1

 

Dostosowanie ikony poprzez zmianę widocznego obszaru

Jeżeli podgląd, który uzyskaliśmy nie spełnia naszych oczekiwań, a wygląd ikony źle wpływa na nasze poczucie estetyki, istnieje drobna możliwość poprawy sytuacji. Podgląd zawsze jest generowany z aktualnie widocznego obszaru strony, dlatego odpowiednio przesuwając i/lub skalując zawartość możemy sprawić, że obrazek przypisany do zakładki będzie wyglądał bardziej akceptowalnie.

Zła wiadomość jest jednak taka, że tak uzyskana ikona jest niestabilna i może zostać przywrócona do domyślnego wyglądu po kolejnym odwiedzeniu danej strony.

Ikona zakładki nr 2

 

Bonus dla webmasterów: ikona zakładki zdefiniowana przez autora strony

Jak wcześniej wspominałem, webmasterzy mają możliwość dostarczenia swoim użytkownikom niestandardowej ikony, która będzie miłym dla oka elementem ekranu głównego i może przysłużyć się częstszym odwiedzinom strony. Wystarczy w katalogu głównym witryny umieścić plik o nazwie apple-touch-icon.png. Przy dodawaniu nowej zakładki ikona zostanie pobrana automatycznie.

Rezultat wygląda następująco:

Ikona zakładki nr 3

Chcąc dopasować ikonę do wszystkich urządzeń mobilnych Apple, należy przygotować ikonę w pięciu rekomendowanych wymiarach*:

  • 57x57px – dla starszych iPhone’ów
  • 76x76px – dla starszych iPadów
  • 120x120px – dla iPhone’ów z ekranem Retina
  • 152x152px – dla iPadów z ekranem Retina
  • 180x180px – dla iPhone’a 6 Plus

* aktualne dla iOS8