Web programeri i vlasnici web stranica obratite pažnju: trebate postaviti ikonu oznake za retinu za iOS. Ikone knjižnih oznaka nazivaju se Apple Touch Icon, a te prilagođene slike postaju ikone koje se prikazuju na početnom zaslonu korisnika kada označe web mjesto na iPadu, iPhone ili iPod touch u iOS-u ili ploča s oznakama Safarija za OS X.Bez prilagođenog skupa datoteka ikona dodira jabuke, korisnici će dobiti dosadnu i često ružnu sličicu same web stranice, a bez korištenja ikone spremne za mrežnicu, ikona oznaka izgledat će pikselizirano i općenito užasno na novom iPad zaslonu.

Evo što trebate učiniti kako biste stvorili retina savršenu Apple Touch ikonu za bilo koje web mjesto u nekoliko jednostavnih koraka.

1) Napravite ikonu web stranice za iOS spremnu za Retina

Upotrijebite predložak ili dizajnirajte vlastiti. Upotrijebio sam jednostavan DIY retina icon kit spomenut u prethodnoj objavi, to je PSD datoteka koja dizajniranje lijepih iOS ikona čini jednostavnim kao klik ili dva. Zalijepite logotip web stranice ili tvrtke i gotovo ste spremni. Ako nemate nešto za uređivanje PSD datoteka, Photoshop CS6 beta izvrstan je i besplatan za preuzimanje i korištenje dok konačna verzija ne izađe kasnije tijekom godine.

2) Spremite kao PNG i dodijelite naziv ikoni knjižne oznake web stranice Retina

Ikona mora biti PNG i mora imati naziv jedne od dvije stvari. Svaki naziv datoteke nudi nešto drugačiji izgled ikone koja se prikazuje na početnom zaslonu korisnika:

• “apple-touch-icon.png” će ikoni dodati preklapanje s istaknutim mjehurićima
• “apple-touch-icon-precomposed.png” prikazat će ikonu onako kako je izvorno stvorena, bez isticanja preklapanja

Upotrijebite potonju -predkomponiranu opciju ako ste kreirali vlastito isticanje ili ako želite da ikona izgleda ravnije bez sveprisutnog mjehurića koji se pojavljuje na većini Appleovih zadanih ikona.

3) Učitajte ikonu dodira oznake web stranice u osnovni web imenik

Koristite SFTP klijent (OS X uključuje FTP u Finderu, a CyberDuck ili Filezilla su besplatni) za kopiranje datoteke apple-touch-icon.png u korijenski web direktorij. To je obično ista lokacija na kojoj se nalazi glavna indeksna datoteka web-mjesta. Nakon učitavanja, potvrdite da je na ispravnoj lokaciji otvaranjem web-preglednika i odlaskom na "http://SITEURL.com/apple-touch-icon.png" te provjerite učitava li se.

Evo primjera 512×512 ikone knjižne oznake spremne za mrežnicu s OSXDaily.com:

Primijetite da će bez oznake -pretpostavljeno gornja ikona prikazati oblačić za isticanje. Možete vidjeti razliku između ove dvije usporedbom stvarne ikone s onom prikazanom na snimkama zaslona kao oznaka.

4) Koristite iOS uređaj i označite stranicu

Ovo je najlakši dio, uzmite iOS uređaj (po mogućnosti iPad 3 da potvrdite aspekt retine) i otvorite Safari.Osvježite web mjesto na koje ste prenijeli ikonu, a zatim dodirnite ikonu strelice i odaberite "Dodaj na početni zaslon" dajte naziv knjižnoj oznaci, a zatim se vratite na početni zaslon kako biste potvrdili da je tamo.

Unatoč tome što ima 512 x 512 piksela, ikona mrežnice dobro će se smanjiti na starijim iPhone uređajima i uređajima bez mrežnice. Ako stvarno želite, možete koristiti CSS i HTML za prikaz ikona različitih veličina na različitim uređajima, ali to zapravo nije potrebno.

Sada ako netko označi vašu web stranicu na iPadu s retina zaslonom, izgledat će puno bolje na početnom zaslonu. To je zapravo sve. I da, već smo pisali o Appleovoj ikoni na dodir, ali zaslužuje ponovno spominjanje sada kada iPad 3 zahtijeva ikone i grafiku znatno veće rezolucije.