Vi fortsætter mini-føljetonen om responsivt webdesign til mobilen med særligt fokus på æble-apparater.
Når du nu har fået lokket brugeren til at gemme et bogmærke på Home Screen, vil du nok også gerne have, at bogmærket tager sig pænt ud. Som udgangspunk vil iOS bruge et nedskaleret screenshot af websiden og det er ikke nødvendigvis særligt kønt. Men ikonet, der repræsenterer sådan et bogmærke kan sagtens gøres ligeså nydeligt, som ikonet til en native app.
Design dit ikon
Først og fremmest må du naturligvis være i stand til at designe et pænt ikon. Du skal bruge 4 størrelser, for Apple har været så venlige at lave 4 forskellige formater på deres iDevices:
- iPhone uden Retina display, iPod Touch (samt Android 2.1+):
.png fil i størrelsen 57 × 57 pixels. - Første og anden generations iPad samt iPad Mini:
.png fil i størrelsen 72 × 72 pixels. - iPhone med Retina display:
.png fil i størrelsen 114 × 114 pixels. - Trediegenerations iPad med Retina display:
.png fil i størrelsen 144 × 144 pixels.
Der er dog hjælp at hente til en del af arbejdet.
Photoshop skabelon
Pixel-pusher Michael Flarup har skruet en skabelon sammen til Photoshop, der gør brug af Smart Objects til at automatisere processen med at generere de forskellige ikon-størrelser. Skabelonen indeholder også nogle baggrunde og effekter, der er fine som udgangspunkt.
Hent skabelonen på appicontemplate.com
PNG optimering
Når du har designet dine ikoner, kan det være en god ide at optimere dem, så de fylder mindst muligt. Det er Photoshop nemlig ikke så god til. Til det formål kan du køre dem igennem et af optimeringsværktøjerne TinyPNG eller Compress PNG.Dernæst skal det udføres i 4 forskellige størrelser.
Eksempel på de 4 ikoner fra min arbejdsplads, Horsens kommunes biblioteker:
Indsæt ikonerne i din webside
iOS Safari kan selv finde ikonerne, hvis du gemmer dem i rodmappen på dit websted og kan leve med at navngive dem på en helt bestemt måde. I så fald skal filerne hedde hhv.:
- apple-touch-icon-precomposed.png
- apple-touch-icon-72×72-precomposed.png
- apple-touch-icon-114×114-precomposed.png
- apple-touch-icon-144×144-precomposed.png
Vil du organisere dem i en undermappe, kalde dem noget andet eller bare være helt sikker på, at en hvilken som helst iOS browser kan finde dem, skal du smide nogle <link> tags ind i <head> elementet. Koden ser således ud:
<!-- For non-Retina iPhone, iPod Touch and Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="/some-folder/apple-touch-icon-precomposed.png"> <!-- For first-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/some-folder/apple-touch-icon-72x72-precomposed.png"> <!-- For iPhone 4 + 5 with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/some-folder/apple-touch-icon-114x114-precomposed.png"> <!-- For The New iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/some-folder/apple-touch-icon-144x144-precomposed.png">
Mere om touch icons
Læs evt. mere om touch icons hos belgiske Mathias Bynens, der har lagt et stort stykke arbejde i at undersøge sagen i denne artikel:
Everything you always wanted to know about touch icons