Deine Jimdo Page auf dem iOS Homescreen

[via] Heute geht es darum eure Jimdo Seite ein Mal um ein kleines Goodie zu erweitern, welches besonders den iOS Device Nutzern unter euch gefallen sollte. Es geht darum eure JimdoPage als Icon direkt auf eurem Homescreen und natürlich dem eurer Nutzer unterzubringen. Das Ergebnis ähnelt dem kleinen Icon des JimdoWatchBlogs das ihr links im Artikelbild sehen könnt. Wir zeigen euch, was ihr braucht und wie es geht. Viel Spaß!

Das Ganze nennt sich in der Fachsprache Web Snippets, man kann es aber auch so beschreiben, dass man ein Lesezeichen (Bookmark) erstellt und dieses auf dem Homescreen ablegt. Web Snippets funktionieren mit allen Geräten ab iOS 1.1.3.

Standardmäßig wird für so ein Web Snippet ein verkleinerter Screenshot eurer Website verwendet, wir wollen dafür aber ein extra Icon. Zu aller erst müsst ihr also ein 57×57 Pixel großes Icon (60px sind anscheinend besser, da das Icon so etwas schärfer wirkt) im .png Format erstellen. Dieses sollte keine Transparenz beinhalten und im dem Fall, dass ihr ein Logo verwenden wollt, solltet ihr darauf achten das dieses nicht mehr als 54px des Icons einnimmt. Auch braucht ihr in eurem selbst erstellten Icon keinen Glossy (Glanz-) Effekt oder abgerundete Ecken einzubauen, dies wird später direkt vom Gerät erledigt.

Euer fertiges Icon könnte also am Ende in etwa so aussehen.

So weit so gut.

Sobald ihr mit eurem Icon zufrieden seid, können wir uns daran machen es in eurer Webseite einzubauen. Dafür müssen wir das Icon erst ein mal mit Hilfe eines Bild-Moduls auf eine versteckte Unterseite hochladen. Begebt euch nun in den Ansichtsmodus und kopiert die Grafik URL (z.B. Rechtsklick -> Bild-URL kopieren). Speichert diese am besten kurz zwischen, da wir sie erst gleich brauchen werden.

Der Einbau an sich funktioniert nämlich über einen sogenannten Meta-Tag den ihr im Head Bereich (Einstellungen -> Head) einfügen müsst.

<link rel="apple-touch-icon" href="Bildadresse"/>

Das Wort Bildadresse müsst ihr nun mit der Adresse eures eigenen Icons ersetzten. Bitte achtet darauf, dass die Anführungszeichen erhalten bleiben.

Jetzt nur noch speichern und fertig ist der Einbau eures eigenen Apple Touch Icons.

Nun fehlt eigentlich nur noch
ein kleines Ho-To wie wir
ein Web Snippet erstellen
können. Das präsentieren wir
euch hier als Bildergalerie.
Viel Spaß! 😉

Das JimdoWatchBlog Team wünscht euch reichlich Spaß beim ausprobieren!