Seite wird geladen
Wenn man seine Website oder seinen Blog für mobile Devices optimieren will sollte man auch daran denken Icons in der jeweils richtigen Auflösung zu erstellen. Diese “Homescreen-Icons” fungieren dann als Lesezeichen Icon.
Speichert man die Seite am Homescreen wird das jeweils verlinkte Icon angezeigt. Standardmäßig legt Apple, besser gesagt Safari einen sogenannten Icon Gloss über jedes Icon. Dies kann man jedoch auch unterbinden…
Zunächst will ich einmal ganz kurz darauf eingehen wie man unter WordPress solche Icons richtig einbindet. Dies ist mittlerweile ohne große Schwierigkeiten realisierbar. Zunächst bindet man in der header.php irgendwo im <head> Bereich folgenden Code ein.
<!-- iPad (Retina) --> <link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_stylesheet_directory_uri()?>/images/144x144.png"> <!-- iPhone (Retina) --> <link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_stylesheet_directory_uri()?>/images/114x114.png"> <!-- iPad --> <link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_stylesheet_directory_uri()?>/images/72x72.png"> <!-- iPhone --> <link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_stylesheet_directory_uri()?>/images/57x57.png">
Hiermit werden die jeweils benötigten Icons für das entsprechende Device bzw. die jeweilige Auflösung eingebunden. Die Pfade für eure Icons müssen eventuell angepasst werden.
Wer noch seine Icons erstellen möchte, sei folgende .psd Vorlage, sehr ans Herz gelegt. Ihr könnt übrigens quadratische Icons erstellen, die Rundungen werden wiederum von Apple automatisch hinzugefügt.
Somit haben wir die Icons auch schon eingebunden, jedoch mit Apple’s standardmäßigen Gloss-Effekt, was in den meisten Fällen nicht wirklich gut aussieht. Ohne diesen kann man sein Icon vielschichtiger gestalten bzw. ganz darauf verzichten. Um den Gloss nicht automatisch hinzufügen zu lassen genügt eine kleine Anpassung im vorher eingefügten Code-Attribut.
Ändert dieses für das jeweilige Icon auf folgendes:
<!-- iPhone Retina--> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_stylesheet_directory_uri()?>/images/114x114.png">
Das wars auch schon. Viel Erfolg!
Sehr guter Hinweis. Kommt aber immer auf das jeweilige Icon an – bei manchen ist der Effekt ja nicht schlecht. Allerdings sollte man den konsequenterweise dann auch in Photoshop gleich mitgestalten.
17. Januar 2013 @ 13:17