kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Mobile Bookmark Bubble

Vor einigen Tagen wurde ich per Mail gefragt, wie es möglich ist mobile Besucher dazu aufzufordern die Seite auf den Home-Screen eines iPhones zu speichern und ob dieser Vorgang eventuell sogar automatisiert werden kann. Mit diesem Beitrag möchte ich die Frage gerne öffentlich beantworten und im gleichen Zug die "Mobile Bookmark Bubble" als Tool und mögliche Lösung vorstellen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Was ist die Mobile Bookmark Bubble?

Die Mobile Bookmark Bubble ist ein Script das unter iOS funktioniert, und Besucher dazu auffordert die Seite auf den Home-Screen des Geräts zu speichern. Soweit ich richtig informiert bin, erlaubt Apple es nicht einen solchen Vorgang zu automatisieren. Es kann also lediglich ein Hinweis geschaltet werden der den User zur Aktion auffordert und Hilfestellung bietet.

Die Optik lässt sich natürlich individualisieren, die Demo-Version sieht so aus:

Das Scripte und Beispiele findet ihr unter code.google.com/p/mobile-bookmark-bubble/source/browse. Wenn ihr das Beispiel direkt mit euerem mobile iOS-Gerät testen möchtet, so ruft folgende URL auf: http://mobile-bookmark-bubble.googlecode.com/hg/example/example.html

Die Mobile Bookmark Bubble ist übrigens Bestandteil der Mobile Boilerplate. Solltet ihr die Boilerplate noch nicht kennen, lohnt es sich auch hier einmal vorbeizuschauen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. Kevin

    Verfasst am 6. Dezember 2011 um 22:18 Uhr.

    Interessante Möglichkeit um auf eine Webapp hinzuweisen. Gefällt mir sehr gut, da sie sich dezent in das Design der App einfügt.

    Funktioniert es denn auch auf dem iPad?

    lg
    Kevin

    • Jonas Hellwig

      Verfasst am 6. Dezember 2011 um 22:51 Uhr.

      @Kevin: Ich habe es gerade getestet. Es funktioniert auch auf dem iPad und zeigt die Bubble dort umgedreht an der oberen Browserleiste an. Das Icon zum Speichern einer Seite ist auf dem iPad nämlich an einer anderen Stelle wie mir gerade aufgefallen ist. Funktioniert also einwandfrei.

  2. Kevin

    Verfasst am 7. Dezember 2011 um 14:56 Uhr.

    Dann ist es wirklich ein gutes Tool, ich denke ich werde es bestimmt noch in einem Projekt nutzen können.

  3. Christian

    Verfasst am 20. Juni 2012 um 12:59 Uhr.

    Implementiere es auch gerade. Paralell empfiehlt es sich ein Apple-Icon zu setzen. Somit habt ihr noch die Kontrolle wie das Desktop-Icon aussehen soll. Es muss 57x57px haben.

    Gibt es eigentlich dazu das passende Gegenstück für Android? Vielleicht sogar ein Vollautomatismus es als Favorit abzulegen?

    LG
    Christian

  4. Christian

    Verfasst am 20. Juni 2012 um 14:53 Uhr.

    Ja genau, meine das Webclip-Icon! Dennoch war meine Frage ob es ein Script gibt womit man auf dem Android Betriebssystem Webclip-Icons automatisiert per Mausklick anlegen kann.

    Das Bubble-Script für das IPhone ist ja im Grunde nur ein guter Workaround, weil es direkt nicht geht.

    • Jonas Hellwig

      Verfasst am 20. Juni 2012 um 15:16 Uhr.

      Ahh, okay. Dann hatte ich dich falsch verstanden. Ein Script kenne ich dafür aber nicht. Ich könnte mir vorstellen, dass es aus Sicherheitsgründen verboten ist, bzw. vom Handy-Betriebssystem unterdrückt wird einen solchen Vorgang zu automatisieren.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.