Веб-розробники та власники веб-сайтів зверніть увагу: вам потрібно встановити retina-ready значок закладки iOS. Піктограми закладок називаються Apple Touch Icon, і ці спеціальні зображення стають піктограмою, яка відображається на головному екрані користувача, коли вони створюють закладки для веб-сайту на iPad, iPhone або iPod touch в iOS або панель закладок Safari для OS X.Без спеціального набору файлів значків apple-touch користувачі отримають нудну та часто потворну мініатюру самої веб-сторінки, а без використання піктограми, готової до сітківки, значок закладок виглядатиме піксельним і загалом жахливим на екрані нового iPad.

Ось що вам потрібно зробити, щоб створити ідеальну піктограму Apple Touch на сітківці для будь-якого веб-сайту за кілька простих кроків.

1) Створіть піктограму веб-сайту iOS із підтримкою Retina

Використовуйте шаблон або створіть власний. Я використовував простий набір піктограм Retina, згаданий у попередній публікації, це файл PSD, який спрощує створення гарних піктограм iOS одним чи двома клацаннями. Вставте логотип веб-сайту або компанії, і все готово. Якщо у вас немає чого редагувати файли PSD, бета-версія Photoshop CS6 чудова. Її можна безкоштовно завантажити та використовувати, доки остаточна версія не з’явиться пізніше цього року.

2) Зберегти як PNG і назвати значок закладки веб-сайту Retina

Піктограма має бути у форматі PNG і мати одну з двох назв. Кожне ім’я файлу пропонує дещо інший вигляд значка, який відображається на головному екрані користувача:

• “apple-touch-icon.png” додасть накладення підсвічування до піктограми
• “apple-touch-icon-precomposed.png” відображатиме піктограму у тому вигляді, у якому вона була створена, без накладання виділення

Використовуйте останню -попередню опцію, якщо ви створили власне виділення або якщо ви хочете, щоб піктограма виглядала більш плоскою без повсюдної бульбашки, яка з’являється на більшості стандартних піктограм Apple.

3) Завантажте піктограму дотику закладки веб-сайту до основного веб-каталогу

Використовуйте клієнт SFTP (OS X включає FTP у Finder, а CyberDuck або Filezilla безкоштовні), щоб скопіювати файл apple-touch-icon.png у кореневий веб-каталог. Зазвичай це те саме місце, де знаходиться основний файл індексу сайту. Після завантаження переконайтеся, що він знаходиться у правильному місці, відкривши веб-переглядач, перейшовши на «http://SITEURL.com/apple-touch-icon.png» і переконавшись, що він завантажується.

Ось приклад піктограми закладки 512×512, готової до сітківки, з OSXDaily.com:

Зверніть увагу, що без прапорця -precomposed піктограма вище відображатиме підсвічування. Ви можете побачити різницю між ними, порівнявши фактичну піктограму з тією, що зображена на знімках екрана як закладка.

4) Використовуйте пристрій iOS і додайте сайт у закладки

Це найпростіша частина, візьміть пристрій iOS (бажано iPad 3, щоб перевірити аспект сітківки) і відкрийте Safari.Оновіть веб-сайт, на який ви завантажили піктограму, а потім торкніться піктограми зі стрілкою та виберіть «Додати на головний екран», назвіть закладку, а потім поверніться на головний екран, щоб підтвердити її наявність.

Незважаючи на 512 x 512 пікселів, значок сітківки добре зменшуватиметься на старих iPhone та пристроях без сітківки. Якщо ви дійсно хочете, ви можете використовувати CSS і HTML для відображення піктограм різного розміру на різних пристроях, але це насправді не обов’язково.

Тепер, якщо хтось створить закладки для вашого веб-сайту на iPad із дисплеєм Retina, він виглядатиме набагато краще на головному екрані. Це насправді все. І так, ми вже писали про сенсорну піктограму Apple, але вона заслуговує на повторну згадку, оскільки iPad 3 вимагає значно вищої роздільної здатності піктограм і графіки.