Webudviklere og webstedsejere er opmærksomme: du skal indstille et nethinde-klar iOS-bogmærkeikon. Bogmærkeikonerne kaldes et Apple Touch Icon, og disse brugerdefinerede billeder bliver det ikon, der vises på en brugers startskærm, når de bogmærker et websted på en iPad, iPhone eller iPod touch i iOS eller bogmærkepanelet i Safari til OS X.Uden et brugerdefineret apple-touch-ikon-filsæt vil brugerne få et kedeligt og ofte grimt miniaturebillede af selve websiden, og uden at bruge et nethinde-klar ikon, vil bogmærkeikonet se pixeleret og generelt forfærdeligt ud på den nye iPad-skærm.

Her er hvad du skal gøre for at skabe et retina-perfekt Apple Touch-ikon til ethvert websted med nogle få nemme trin.

1) Opret det Retina-klare iOS-webstedsikon

Brug en skabelon, eller design din egen. Jeg brugte det nemme DIY retina-ikonsæt nævnt i et tidligere indlæg, det er en PSD-fil, der gør det nemt at designe flotte iOS-ikoner som et klik eller to. Indsæt et websted eller firmalogo, og du er stort set god til at gå. Hvis du ikke har noget til at redigere PSD-filer, er Photoshop CS6 beta fremragende og gratis at downloade og bruge, indtil den endelige version udkommer senere på året.

2) Gem som PNG og navngiv Retina-webstedets bogmærkeikon

Ikonet skal være en PNG, og det skal hedde en af ​​to ting. Hvert filnavn giver et lidt anderledes udseende af ikonet, som det vises på en brugers startskærm:

• “apple-touch-icon.png” tilføjer den fremhævede bobleoverlejring til ikonet
• “apple-touch-icon-precomposed.png” vil vise ikonet som det oprindeligt blev oprettet uden den fremhævede overlejring

Brug den sidstnævnte -prækomponerede mulighed, hvis du har oprettet din egen fremhævning, eller hvis du vil have ikonet til at fremstå mere fladt uden en allestedsnærværende boble, der vises på de fleste af Apples standardikoner.

3) Upload webstedets bogmærke berøringsikon til basiswebkataloget

Brug en SFTP-klient (OS X inkluderer FTP i Finder, og CyberDuck eller Filezilla er gratis) til at kopiere filen apple-touch-icon.png til rodwebbiblioteket. Dette er norm alt det samme sted, som webstedets hovedindeksfil er placeret. Når den er uploadet, skal du bekræfte, at den er på den rigtige placering ved at åbne en webbrowser og gå til "http://SITEURL.com/apple-touch-icon.png" og sørge for, at den indlæses.

Her er et eksempel på et 512×512 nethinde-klar bogmærkeikon fra OSXDaily.com:

Bemærk, at uden det -prækomponerede flag, vil ovenstående ikon vise fremhævelsesboblen. Du kan se forskellen mellem de to ved at sammenligne det faktiske ikon med det, der vises på skærmbilleder som bogmærket.

4) Brug en iOS-enhed og bogmærke webstedet

Dette er den nemmeste del, tag en iOS-enhed (helst en iPad 3 for at bekræfte nethinden) og åbn Safari.Opdater webstedet, du har uploadet ikonet til, og tryk derefter på pileikonet og vælg "Tilføj til startskærm" navngiv bogmærket, og vend derefter tilbage til startskærmen for at bekræfte, at det er der.

På trods af at det er 512 x 512 pixels, vil nethindeikonet skalere fint ned på ældre iPhones og ikke-retina-enheder. Hvis du virkelig vil, kan du bruge CSS og HTML til at vise ikoner i forskellige størrelser på forskellige enheder, men det er virkelig ikke nødvendigt.

Nu, hvis nogen bogmærker dit websted på en iPad med en nethindeskærm, vil det se meget bedre ud på deres startskærm. Det er virkelig alt, hvad der er til det. Og ja, vi har skrevet om Apple touch-ikonet før, men det fortjener endnu en omtale nu, hvor iPad 3 kræver ikoner og grafik med markant højere opløsning.