Веб-разработчики и владельцы веб-сайтов обращают внимание: вам нужно установить значок закладки iOS с сетчаткой. Значки закладок называются значком Apple Touch, и эти пользовательские изображения становятся значком, который отображается на главном экране пользователя, когда они добавляют закладки на iPad, iPhone или iPod touch в iOS или панель закладок Safari для ОС X. Без пользовательского набора файлов с яблочным прикосновением пользователи получат скучную и часто уродливую миниатюру самой веб-страницы, и без использования значка с сетчаткой значок закладки будет выглядеть неровным и вообще ужасным на новом iPad экран.
Вот что вам нужно сделать, чтобы создать идеальную иконку Apple Touch для сетчатки для любого веб-сайта за несколько простых шагов.
1) Создайте иконку веб-сайта iOS для Retina-Ready
Используйте шаблон или создайте свой собственный. Я использовал простой набор значков сетчатки DIY, упомянутый в предыдущем посте, это PSD-файл, который делает проектирование красиво выглядящих значков iOS такими же легкими, как щелчок или два. Вставьте на веб-сайт или логотип компании, и вы очень хорошо пойдете. Если вам нечего редактировать PSD-файлы, Photoshop CS6 beta отлично и бесплатно загружается и используется до тех пор, пока окончательная версия не появится позже в этом году.
2) Сохранить как PNG & Назовите сайт Retina Bookmark Icon
Значок должен быть 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. Обновите веб-сайт, на который вы загрузили значок, затем нажмите значок стрелки и выберите «Добавить в Homescreen» название закладки, затем вернитесь на Homescreen, чтобы подтвердить, что он есть.
Несмотря на то, что он имеет размер 512 х 512 пикселей, значок сетчатки будет уменьшаться на старых устройствах iPhone и не-сетчатки. Если вы действительно этого хотите, вы можете использовать CSS и HTML для отображения значков разного размера для разных устройств, но это действительно не нужно.
Теперь, если кто-то закроет ваш веб-сайт на iPad с дисплеем сетчатки, он будет выглядеть намного лучше на своем домашнем экране. Это действительно все, что нужно. И да, мы уже писали о значке Apple touch, но теперь заслуживает упоминания о том, что iPad 3 требует значительно более высокого разрешения значков и графики.
