Weboví vývojáři a vlastníci webových stránek věnujte pozornost: musíte nastavit ikonu záložky iOS připravené pro sítnici. Ikony záložek se nazývají Apple Touch Icon a tyto vlastní obrázky se stanou ikonou, která se zobrazí na domovské obrazovce uživatele, když si web uloží do záložek na iPadu, iPhone nebo iPod touch v systému iOS nebo panel záložek Safari pro OS X.Bez vlastní sady souborů ikony apple-touch uživatelé získají nudnou a často ošklivou miniaturu samotné webové stránky a bez použití ikony připravené pro sítnici bude ikona záložek na nové obrazovce iPadu vypadat pixelově a obecně příšerně.

Zde je to, co musíte udělat, abyste v několika snadných krocích vytvořili dokonalou dotykovou ikonu sítnice Apple pro jakýkoli web.

1) Vytvořte ikonu webu iOS Ready pro sítnici

Použijte šablonu nebo si navrhněte vlastní. Použil jsem snadnou DIY sadu ikon sítnice zmíněnou v předchozím příspěvku, je to soubor PSD, díky kterému je navrhování pěkně vypadajících ikon iOS tak snadné jako jedno nebo dvě kliknutí. Vložte webové stránky nebo logo společnosti a můžete začít. Pokud nemáte co upravovat soubory PSD, Photoshop CS6 beta je vynikající a zdarma ke stažení a použití, dokud konečná verze nevyjde později v tomto roce.

2) Uložit jako PNG a pojmenovat ikonu záložky webu Retina

Ikona musí být ve formátu PNG a musí být pojmenována jednou ze dvou věcí. Každý název souboru nabízí mírně odlišný vzhled ikony, jak je zobrazena na domovské obrazovce uživatele:

• „apple-touch-icon.png“ přidá bublinu zvýraznění k ikoně
• “apple-touch-icon-precomposed.png” zobrazí ikonu tak, jak byla původně vytvořena, bez překrytí zvýraznění

Použijte druhou možnost – předem vytvořenou, pokud jste si vytvořili vlastní zvýraznění nebo pokud chcete, aby ikona vypadala plochěji bez všudypřítomné bubliny, která se objevuje na většině výchozích ikon společnosti Apple.

3) Nahrajte dotykovou ikonu záložky webové stránky do základního webového adresáře

Použijte klienta SFTP (OS X obsahuje FTP ve Finderu a CyberDuck nebo Filezilla jsou zdarma) ke zkopírování souboru apple-touch-icon.png do kořenového webového adresáře. Obvykle se jedná o stejné umístění, kde se nachází hlavní indexový soubor webů. Po nahrání potvrďte, že je na správném místě otevřením webového prohlížeče, přejděte na „http://SITEURL.com/apple-touch-icon.png“ a ujistěte se, že se načte.

Zde je příklad ikony záložky připravené pro sítnici 512×512 z OSXDaily.com:

Všimněte si, že bez příznaku -precomposed bude výše uvedená ikona zobrazovat bublinu zvýraznění. Rozdíl mezi těmito dvěma můžete vidět porovnáním skutečné ikony s ikonou zobrazenou na snímcích obrazovky jako záložka.

4) Použijte zařízení iOS a uložte si web do záložek

Toto je ta nejjednodušší část, vezměte si zařízení se systémem iOS (nejlépe iPad 3 pro potvrzení aspektu sítnice) a otevřete Safari.Obnovte webovou stránku, na kterou jste ikonu nahráli, a poté klepněte na ikonu šipky a vyberte „Přidat na domovskou obrazovku“, pojmenujte záložku, poté se vraťte na domovskou obrazovku a potvrďte, že tam je.

Navzdory tomu, že má velikost 512 x 512 pixelů, ikona sítnice se na starších telefonech iPhone a zařízeních bez sítnice jemně zmenší. Pokud opravdu chcete, můžete použít CSS a HTML k zobrazení ikon různé velikosti na různých zařízeních, ale opravdu to není nutné.

Nyní, když si někdo uloží vaši webovou stránku do záložek na iPadu s displejem sítnice, bude to na jeho domovské obrazovce vypadat mnohem lépe. To je opravdu vše. A ano, o dotykové ikoně Apple jsme již psali dříve, ale nyní si zaslouží další zmínku, protože iPad 3 vyžaduje ikony a grafiku s výrazně vyšším rozlišením.