Twórcy stron internetowych i właściciele witryn internetowych zwracają uwagę: musisz ustawić ikonę zakładki iOS gotową do obsługi Retina. Ikony zakładek nazywane są ikonami Apple Touch, a te niestandardowe obrazy stają się ikonami wyświetlanymi na ekranie głównym użytkowników, którzy dodają witrynę internetową do zakładek na iPadzie, iPhone lub iPod touch w systemie iOS lub panel zakładek przeglądarki Safari w systemie OS X.Bez niestandardowego zestawu ikon dotykowych Apple użytkownicy otrzymają nudną i często brzydką miniaturę samej strony internetowej, a bez użycia ikony gotowej na siatkówkę ikona zakładek będzie wyglądać na pikselowaną i ogólnie okropną na ekranie nowego iPada.

Oto, co musisz zrobić, aby w kilku prostych krokach utworzyć idealną dla siatkówki ikonę Apple Touch dla dowolnej witryny internetowej.

1) Utwórz ikonę witryny dla systemu iOS z obsługą Retina

Użyj szablonu lub zaprojektuj własny. Użyłem łatwego zestawu ikon siatkówki DIY, o którym mowa w poprzednim poście, jest to plik PSD, który sprawia, że ​​​​projektowanie ładnie wyglądających ikon iOS jest tak proste, jak jedno lub dwa kliknięcia. Wklej stronę internetową lub logo firmy i gotowe. Jeśli nie masz czegoś do edycji plików PSD, Photoshop CS6 beta jest doskonały i można go bezpłatnie pobrać i używać do czasu ukazania się ostatecznej wersji w dalszej części roku.

2) Zapisz jako PNG i nazwij ikonę zakładki witryny Retina

Ikona musi być plikiem PNG i musi mieć jedną z dwóch nazw. Każda nazwa pliku oferuje nieco inny wygląd ikony wyświetlanej na ekranie głównym użytkownika:

• “apple-touch-icon.png” doda dymek podświetlenia do ikony
• “apple-touch-icon-precomposed.png” spowoduje wyświetlenie ikony w oryginalnej postaci, bez nakładki podświetlenia

Użyj tej drugiej opcji — wstępnie skomponowana, jeśli utworzyłeś własne wyróżnienie lub jeśli chcesz, aby ikona była bardziej płaska bez wszechobecnych bąbelków, które pojawiają się na większości domyślnych ikon Apple.

3) Prześlij ikonę dotykową zakładki witryny do podstawowego katalogu internetowego

Użyj klienta SFTP (OS X zawiera FTP w Finderze, a CyberDuck lub Filezilla są bezpłatne), aby skopiować plik apple-touch-icon.png do głównego katalogu internetowego. Zwykle jest to ta sama lokalizacja, w której znajduje się główny plik indeksu witryny. Po przesłaniu potwierdź, że znajduje się we właściwej lokalizacji, otwierając przeglądarkę internetową i przechodząc do „http://SITEURL.com/apple-touch-icon.png” i upewniając się, że się ładuje.

Oto przykład ikony zakładki 512×512 z obsługą Retina z OSXDaily.com:

Zauważ, że bez flagi -precomposed, powyższa ikona wyświetli dymek podświetlenia. Możesz zobaczyć różnicę między tymi dwoma, porównując rzeczywistą ikonę z tą pokazaną na zrzutach ekranu jako zakładkę.

4) Użyj urządzenia z systemem iOS i dodaj witrynę do zakładek

To najłatwiejsza część, chwyć urządzenie z systemem iOS (najlepiej iPada 3, aby potwierdzić aspekt siatkówki) i otwórz Safari.Odśwież witrynę internetową, do której przesłano ikonę, a następnie stuknij ikonę strzałki i wybierz „Dodaj do ekranu głównego”, nazwij zakładkę, a następnie wróć do ekranu głównego, aby potwierdzić, że się tam znajduje.

Mimo że ma rozmiar 512 x 512 pikseli, ikona Retina będzie się dobrze zmniejszać na starszych telefonach iPhone i urządzeniach innych niż Retina. Jeśli naprawdę chcesz, możesz użyć CSS i HTML do wyświetlania ikon o różnych rozmiarach na różnych urządzeniach, ale tak naprawdę nie jest to konieczne.

Teraz, gdy ktoś doda Twoją witrynę internetową do zakładek na iPadzie z wyświetlaczem Retina, będzie ona wyglądać o wiele lepiej na ekranie głównym. To naprawdę wszystko. I tak, pisaliśmy już o ikonie dotykowej Apple, ale teraz zasługuje ona na kolejną wzmiankę, ponieważ iPad 3 wymaga ikon i grafiki o znacznie wyższej rozdzielczości.