Een iOS-bladwijzerpictogram maken en instellen voor een website
Webontwikkelaars en website-eigenaren letten erop dat je een retina-ready iOS-bladwijzersymbool moet 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-bestandenset krijgen gebruikers een saaie en vaak lelijke thumbnail van de webpagina zelf, en zonder gebruik van een pictogram dat klaar is om een retina te gebruiken, ziet het pictogram van de bladwijzer er korrelig en over het algemeen vreselijk uit op de 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 Website-pictogram
Gebruik een sjabloon of ontwerp je eigen sjabloon. Ik gebruikte de eenvoudige DIY-retina-pictogramset die in een vorige post werd genoemd, het is een PSD-bestand dat het ontwerpen van leuk uitziende iOS-iconen zo eenvoudig maakt als een paar klikken. Plak in een website of bedrijfslogo en je bent best goed om te doen. Als je niets hebt om PSD-bestanden te bewerken, is de Photoshop CS6-bèta uitstekend en gratis te downloaden en te gebruiken tot de definitieve versie later in het jaar verschijnt.
2) Sla op als PNG & geef het Retina Website Bookmark-pictogram een naam
Het pictogram moet een PNG zijn en moet een van twee dingen worden genoemd. Elke bestandsnaam biedt een iets ander uiterlijk van het pictogram zoals weergegeven op het startscherm van een gebruiker:
- " Apple-touch-icon.png " voegt de highlight-bubble-overlay toe aan het pictogram
- " Apple-touch-icon-precomposed.png " geeft het pictogram weer zoals oorspronkelijk gemaakt, zonder de highlight-overlay
Gebruik de laatste -voorkeuzeoptie als u uw eigen markering hebt gemaakt of als u wilt dat het pictogram vlakker wordt zonder alomtegenwoordige bubbels die op de meeste standaardpictogrammen van Apple worden weergegeven.
3) Upload de website-bladwijzer Raak het pictogram aan in de basiswebdirectory
Gebruik een SFTP-client (OS X bevat FTP in de Finder en CyberDuck of Filezilla zijn gratis) om het Apple-touch-icon.png-bestand naar de hoofdmapwebdirectory te kopiëren. Dit is meestal dezelfde locatie waar het hoofdindexbestand van de site zich bevindt. Na het uploaden bevestigt u dat het op de juiste locatie staat door een webbrowser te openen en naar 'http://SITEURL.com/apple-touch-icon.png' te gaan en ervoor te zorgen dat het wordt geladen.
Hier is een voorbeeld van een 512 × 512 retina-ready bladwijzerpictogram van OSXDaily.com:
Merk op dat zonder de vlag -precomposed, het bovenstaande pictogram de highlight-bubble zal weergeven. U kunt het verschil tussen de twee zien door het daadwerkelijke pictogram te vergelijken met het pictogram in schermafbeeldingen als de bladwijzer.
4) Gebruik een iOS-apparaat en voeg een bladwijzer toe aan de site
Dit is het gemakkelijkste onderdeel, pak een iOS-apparaat (bij voorkeur een iPad 3 om het netvlies-aspect 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", noem de bladwijzer en keer terug naar het Home-venster om te bevestigen dat het daar is.
Ondanks dat het 512 x 512 pixels is, zal het retina-pictogram op oudere iPhones en niet-retina-apparaten prima worden verkleind. Als je het echt wilt, kun je CSS en HTML gebruiken om verschillende pictogrammen op verschillende apparaten weer te geven, maar dat is echt niet nodig.
Als iemand een bladwijzer maakt voor uw website op een iPad met een retina-display, ziet deze er op het startscherm er een stuk beter uit. Dat is echt alles wat er is. En ja, we hebben al eerder geschreven over het Apple touch-pictogram, maar het verdient nu een andere vermelding dat iPad 3 pictogrammen en grafische afbeeldingen met een hogere resolutie vereist.
