Уеб разработчиците и собствениците на уебсайтове обръщат внимание: трябва да зададете готова за ретина икона на отметка на iOS. Иконите за отметки се наричат ​​Apple Touch Icon и тези персонализирани изображения стават иконата, която се показва на началния екран на потребителя, когато те маркират уебсайт на iPad, iPhone или iPod touch в iOS или панела с отметки на Safari за OS X.Без персонализиран набор от файлове с икони за докосване на ябълка, потребителите ще получат скучна и често грозна миниатюра на самата уеб страница, а без да използват икона, готова за ретината, иконата на отметките ще изглежда пикселирана и като цяло ужасно на екрана на новия iPad.

Ето какво трябва да направите, за да създадете перфектна Apple Touch икона на ретината за всеки уебсайт в няколко лесни стъпки.

1) Създайте иконата на уебсайта на iOS, готова за Retina

Използвайте шаблон или проектирайте свой собствен. Използвах лесния комплект икони за ретина „направи си сам“, споменат в предишна публикация, това е PSD файл, който прави проектирането на добре изглеждащи икони на iOS толкова лесно, колкото едно или две кликвания. Поставете лого на уебсайт или фирма и сте почти готови. Ако нямате нещо за редактиране на PSD файлове, Photoshop CS6 beta е отличен и безплатен за изтегляне и използване, докато окончателната версия излезе по-късно през годината.

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 с ретина дисплей, той ще изглежда много по-добре на началния му екран. Това наистина е всичко. И да, писали сме за сензорната икона на Apple и преди, но заслужава да я споменем още веднъж, тъй като iPad 3 изисква икони и графики със значително по-висока разделителна способност.