iMagazine

Daj swojej stronie ikonę dla iUrządzeń

07/04/2013, 21:43 · · · 3

Ponieważ w dobie obecnej wiele osób przegląda strony www za pomocą swoich stron mobilnych, a dodatkowo najwięszky ruch generują urządzenia spod znaku jabłka, warto pamiętać o wyposażeniu swojej strony w unikalną ikonę, która będzie nas reprezentować na Springboardach użytkowników.

Oczywiście ikoną nie może być byle jaki plik graficzny. Musimy pamiętać o paru zasadach:

  • ikoną musi być plik png,

  • dla najlepszej jakości ikona powinna być przygotowana w czterech rozmiarach:
    • dla iPhone’a i iPoda z ekranem typu Retina – 114px
    • dla iPhone’a i iPoda z ekranem zwykłym – 57px
    • dla iPada z ekranem typu Retina – 144px
    • dla iPada z ekranem zwykłym – 72px
  • domyślnie należy tworzyć ikony kwadratowe (iOS sam zaokrągla rogi)

  • należy również pamiętać, że iOS domyślnie dodaje efekt połysku i cienia do naszej ikony

  • jeśli chodzi o nazewnictwo, to przyjęło się, że każda ikona dla iUrządzeń nazywa się apple-icon- i zawierać jej rozmiar, czyli: apple-icon-114x114px.png, apple-icon-57x57px.png, itd.

  • ikony dodajemy na naszej stronie między znacznikami <head>...</head> wg poniższego schematu:

Ikony precomposed

Jak już wcześniej napisałem, iOS domyślnie zaokrągla oraz dodaje efekty do naszych ikon. Istnieje jednak możliwość zablokowania tego zachowania. Należy wtedy przygotować ikony do postaci „ostatecznej”, a w znacznikach na nie wskazujących, jak atrybut rel należy użyć apple-touch-icon-precomposed. Całość dla poszczególnych ikon wyglądać będzie następująco:

Dla czytelności do nazw ikon również można dodać nazwę precomposed.

Źródło:
Webdesigntuts+
3

Maciej Skrzypczak

Użytkownik sprzętu z nadgryzionym jabłkiem, grafik komputerowy, nałogowy gracz ARK: Survival Evolved. Redaktor iMagazine.pl.