Webontwikkelaars en website-eigenaren opgelet: u moet een retina-ready iOS-bladwijzerpictogram instellen. De bladwijzerpictogrammen worden een Apple Touch-pictogram genoemd, en deze aangepaste afbeeldingen worden het pictogram dat wordt weergegeven op het startscherm van een gebruiker wanneer ze een bladwijzer maken voor een website op een iPad, iPhone of iPod touch in iOS, of het bladwijzerpaneel van Safari voor OS X.Zonder een aangepaste Apple-Touch-icon-bestandsset krijgen gebruikers een saaie en vaak lelijke thumbnail van de webpagina zelf, en zonder een retina-ready-pictogram te gebruiken, ziet het bladwijzerpictogram er korrelig en over het algemeen afschuwelijk uit op het nieuwe iPad-scherm.

Dit is wat u moet doen om in een paar eenvoudige stappen een perfect Apple Touch-pictogram voor elke website te maken.

1) Maak het Retina-Ready iOS-websitepictogram

Gebruik een sjabloon of ontwerp je eigen sjabloon. Ik heb de eenvoudige doe-het-zelf-retina-pictogramkit gebruikt die in een vorige post werd genoemd, het is een PSD-bestand waarmee het ontwerpen van mooie iOS-pictogrammen zo eenvoudig is als een paar klikken. Plak een website of bedrijfslogo en je bent zo goed als klaar om te gaan. Als u niets hebt om PSD-bestanden te bewerken, is de bètaversie van Photoshop CS6 uitstekend en gratis te downloaden en te gebruiken totdat de definitieve versie later in het jaar uitkomt.

2) Opslaan als PNG en het bladwijzerpictogram van de Retina-website een naam geven

Het pictogram moet een PNG zijn, en het moet een van de twee volgende namen hebben. Elke bestandsnaam biedt een iets ander uiterlijk van het pictogram zoals weergegeven op het startscherm van een gebruiker:

• “apple-touch-icon.png” voegt de overlay met markeringsballonnen toe aan het pictogram
• “apple-touch-icon-precomposed.png” geeft het pictogram weer zoals oorspronkelijk gemaakt, zonder de markeringsoverlay

Gebruik de laatste vooraf samengestelde optie als je je eigen highlight hebt gemaakt, of als je wilt dat het pictogram platter lijkt zonder de alomtegenwoordige luchtbel die op de meeste standaardpictogrammen van Apple voorkomt.

3) Upload het Website Bookmark Touch-pictogram naar de Base Web Directory

Gebruik een SFTP-client (OS X bevat FTP in de Finder en CyberDuck of Filezilla zijn gratis) om het bestand apple-touch-icon.png naar de root-webdirectory te kopiëren. Dit is meestal dezelfde locatie als het hoofdindexbestand van de site. Controleer na het uploaden of het op de juiste locatie staat door een webbrowser te openen en naar "http://SITEURL.com/apple-touch-icon.png" te gaan en te controleren of het laadt.

Hier is een voorbeeld van een 512×512 retina-ready bladwijzerpictogram van OSXDaily.com:

Merk op dat zonder de -precomposed vlag, het bovenstaande pictogram de markeringsballon zal weergeven. U kunt het verschil tussen de twee zien door het daadwerkelijke pictogram te vergelijken met het pictogram dat in schermafbeeldingen als bladwijzer wordt weergegeven.

4) Gebruik een iOS-apparaat en maak een bladwijzer voor de site

Dit is het gemakkelijkste deel, pak een iOS-apparaat (bij voorkeur een iPad 3 om het netvliesaspect te bevestigen) en open Safari.Vernieuw de website waarnaar u het pictogram hebt geüpload en tik vervolgens op het pijlpictogram en selecteer "Toevoegen aan startscherm", geef de bladwijzer een naam en keer terug naar het startscherm om te bevestigen dat deze er is.

Ondanks dat het 512 x 512 pixels is, wordt het retina-pictogram prima verkleind op oudere iPhones en niet-retina-apparaten. Als je het echt wilt, kun je CSS en HTML gebruiken om pictogrammen van verschillende grootte op verschillende apparaten weer te geven, maar dat is echt niet nodig.

Als iemand nu een bladwijzer voor uw website maakt op een iPad met een retina-display, ziet deze er op zijn startscherm een ​​stuk beter uit. Dat is echt alles wat er is. En ja, we hebben al eerder geschreven over het Apple-aanraakpictogram, maar het verdient nog een vermelding nu iPad 3 pictogrammen en afbeeldingen met een aanzienlijk hogere resolutie vereist.