Das Interview mit Nur Sharina Shariff ist noch gar nicht so lange her. Aber es hat mich selbst sehr für mobile Blogs und mobile Inhalte sensibilisiert 🙂
Sicherlich sind die mobilen Inhalte des GeldSchritte-Blogs noch nicht ganz „rund“. Hier und da muss ich noch nachbessern, teils geht das aber nur in Zusammenarbeit mit dem Headway Support, weil ich an manchen Stellen (noch) nicht allein weiterkomme.
Falls du mit deinem Smartphone GeldSchritte besuchst, dann sieht die Startseite zwar schon ganz passabel aus, aber in der Ansicht der einzelnen Artikel stören die beiden Navigationen oben beispielsweise noch bzw. müssten durch eine andere ersetzt werden.
Ich habe also noch hier und da ein paar „Baustellen“, die ich hoffentlich nach und nach abarbeiten kann.
Was jetzt aber ganz neu ist und ich unter Anleitung von Sharina gebastelt habe, ist der QR Code rechts in der Sidebar.
Sharina hat in ihrem Blog-Artikel zwar schon grundlegend aufgezeigt, wie die Erstellung eines solchen QR Codes geht. Aber da ich hier jetzt so ein schönes Beispiel habe, kann ich daran einmal ganz konkret mein Vorgehen schildern.
Wenn du Sharinas Artikel kennst, wirst du natürlich vieles wiedererkennen 😉
Optin QR Code erstellen in Sharinas 3 Schritten
Im ersten Schritt habe ich mir eine extra E-Mail-Adresse samt Weiterleitung bei meinem Webspace-Hoster All-Inkl angelegt.
Die E-Mail-Adresse „newsletter@geldschritte.de“ ist einzig und allein für die Weiterleitung aller an sie gesendeten E-Mails zu „geldschritte-b@aweber.com“ zuständig (falls du dir also einen Jux erlauben möchtest und an diese E-Mail-Adresse schreibst – kein Problem, du landest dann lediglich im Doppel-Optin-Verfahren meiner E-Mail-Liste 😉 :D).
Wie du in einem späteren Screenshot noch sehen wirst, taucht diese E-Mail-Adresse nach dem Scan des QRCodes auf. Und ich stimme Sharina da zu, dass es einfach schöner aussieht, wenn dort eine E-Mail-Adresse steht, die auf die Domain und nicht (in meinem Fall) auf „aweber.com“ endet…
Die E-Mail-Adresse „geldschritte-b@aweber.com“ wurde übrigens bei meinem Mailservice AWeber automatisch angelegt. Für jede E-Mail-Liste, die man dort erstellt, wird solch eine E-Mail-Adresse automatisch generiert, nach dem Muster „listname@aweber.com“. Schickt man an diese E-Mail-Adresse eine E-Mail, dann landet die Absender-Mail-Adresse automatisch im Doppel-Optin-Verfahren.
Genau das soll hier passieren: Eine E-Mail an „newsletter@geldschritte.de“ wird weitergeleitet an „geldschritte-b@aweber.com“ und landet somit im Doppel-Optin-Verfahren, d.h. an die Absender-Adresse wird die Bestätigungsmail herausgeschickt.
Im zweiten Schritt habe ich dann den von Sharina empfohlenen Service von QuickResponseCo.de genutzt. Mit Hilfe dieses Services konnte ich mir jetzt – völlig kostenlos! – meinen eigenen QR Code basteln.
- Zunächst habe ich auf „E-Mail“ geklickt, weil nach dem Scan des QR Codes eine E-Mail verschickt werden soll. An den Optionen hier siehst du aber schon, dass du im Grunde auch alles mögliche andere erstellen könntest…
- Dann habe ich die Größe des QR Codes auf 100×100 Pixel verringert – das reicht für meine Zwecke, finde ich.
- Jetzt habe ich eingegeben, an wen die E-Mail verschickt werden soll und was der Betreff und der Inhalt sein sollen. Im Grunde ist es (zumindest bei AWeber) egal, was genau du hier eingibst. Sei dir nur im Klaren darüber, dass alles, was du hier eingibst auch später für deine Interessenten sichtbar sein wird (siehe unten).
- Dann habe ich auf „QR Code generieren“ geklickt und…
- …habe rechts den QR Code (hier unkenntlich gemacht auf dem Bild und damit auch unscannbar), eine URL, eine Short-URL und eine Download-Bilddatei erhalten. Ich habe die Download-Bilddatei genutzt und habe sie dann auf den GeldSchritte-Server hochgeladen. Das kam mir irgendwie sicherer vor, als die angegebene URL zu verwenden (was, wenn es den kostenlosen Service mal nicht mehr gibt?), aber ist letztlich Geschmacksache.
Im dritten Schritt bin ich dann zu AWeber gegangen und habe mein Optin-Formular editiert.
Einfach oben rechts (siehe Pfeil) auf „Image“ klicken und die URL zur Bilddatei auf dem GeldSchritte-Server hinterlegt und die QR Code Grafik dann an die gewünschte Stelle gebracht – fertig.
Ein Klick auf „Save Web Form“ und schon erscheint das aktualisierte Formular auf GeldSchritte (da es mittels JavaScript eingebunden ist, nicht mittels des „Raw HTML-Codes“).
Testen!
Wichtig ist natürlich, dass du den QR Code dann auch selber testest!
Ich habe das übrigens nicht erst jetzt am Schluss, sondern schon bei QuickResponseCo.de gemacht 😉
Erst als ich sicher war, dass alles funktioniert, habe ich den QR Code auch auf GeldSchritte eingebaut.
Natürlich solltest du selbst für einen Test ein Smartphone zur Verfügung haben. Auf meinem iPhone nutze ich die kostenlose App „QR Code Scanner“.
Nach dem Scan des QR Codes erscheint das hier auf dem iPhone:
Du siehst genau den Inhalt, den ich angelegt habe. Einmal auf „Send Email“ tippen, meinen gewünschten Mail-Account auswählen und schon wird die Mail versendet und ich brauche nur noch auf die Bestätigungsmail warten 🙂
Fazit
Einen eigenen Optin-QR Code zu erstellen ist nicht schwer!
Den gesamten Blog dagegen „mobilfreundlich“ zu gestalten dagegen momentan schon eher 😉
Was ich z.B. noch nicht raus habe ist, wie ich mobile Blog-Besucher in meinen E-Mail-Verteiler einladen kann. Der QR Code hilft da auch nicht. Ironischerweise richtet dieser sich an Desktop-Surfer, die aber ein Smartphone zur Hand haben und lieber einen QR Code scannen als ihren Vornamen und ihre E-Mail-Adresse in ein kleines Formular einzugeben… 😉
Um aber auch mobile Nutzer in meinen Verteiler einzuladen, brauche ich im Grunde ein extra Optin-Feld, das nur mobilen Nutzern angezeigt wird (denn das aus der Sidebar wird auf Smartphones versteckt, aus Platzgründen).
Ich arbeite dran und GeldSchritte wird definitiv nach und nach immer „mobilfreundlicher“ werden – Sharina hat da einfach eine neue Leidenschaft in mir geweckt 😉 😀
Hallo Gordon,
ich habe dein QR-Code-Optin gleich mal getestet und will dir meine Eindrücke auch nicht vorenthalten. Die Umsetzung hat auf jeden Fall erstmal funktioniert, zumindestens rein technisch. Ein QR-Code-Optin macht aber (abgesehen vom Lerneffekt) aus meiner Sicht erforderlich, dass man den ganzen Vorgang vom Ende her denkt, also aus Sicht der Mobile-Subscriber. Und da ist offensichtlich einiges noch nicht ganz stimmig.
Den QR-Code habe ich ja logischerweise mit meinem HTC (Android) gescannt. Meine E-Mail, die dafür verwendet wurde, ist dann auch diejenige, die in meinem Smartphone hinterlegt ist. Damit gehe ich also nach Bestätigung auch per Handy auf die Landingpage, richtig? Diese sollte demnach unbedingt(!!) „mobile-friendly“ sein. Wahrscheinlich ist es das Beste, hierfür extra eine einfache Mobiseite zu kreiren.
Das gleiche trifft dann natürlich auch für den Report zu. So, wie er momentan daherkommt, kann ich ihn schlichtweg am HTC zwar runterladen und aufrufen, aber leider nicht wirklich lesen. Das format passt einfach nicht. Und um den Faden noch weiter zu spinnen, erwarte ich als Mobile-Subscriber natürlich auch die Newsletter in einem „mobile-friendly“ Format. Da gehört z.B. das Riesen-Logo einfach nicht rein…
Ich habe ein paar Handy-Screenshots (Android)gemacht. Wenn es dich interessiert, schicke ich sie dir gern, falls dein Kontaktformular Dateien zulässt. Sonst schreibe mir einfach eine E-Mail-Adresse.
Viele Grße, Frank
Hi Frank,
vielen dank für Dein Feedback! Klasse!
Ich sehe, dass ich noch viel zu tun habe um „mobilfreundlich“ zu werden 😉
Ich werde Deine Anregungen nach und nach versuchen umzusetzen und meinen Fortschritt hier zu dokumentieren.
Liebe Grüße
Gordon
Hey Frank,
habe den QR Optin Prozess auf meinem iPhone nochmal genau und komplett durchlaufen. Ich kann Deine Kritik nicht rekonstruieren… bei mir klappt alles – E-Mail absolut ok, auch mit dem Logo (und das iPhone hat ja nicht gerade ein Riesen-Bildschirm) und auch der PDF-Report wird gut dargestellt (PDF ist ja auch das gängige Format).
War Deine Kritik daher „nur“ GESCHMACKSACHE oder hattest Du echt richtige technische Probleme?
Wäre wichtig für mich zu wissen… Danke 🙂
Liebe Grüße
Gordon
Hallo Gordon, nein, grundsätzliche techn. Probleme hatte ich natürlich nicht, habe ich ja auch geschrieben. Der Optin-Ablauf ist ok.
Meine Bemerkungen zur Darstellung auf meinem(!) Smartphone sollten eigentlich nur dazu dienen, dir ein Feedback aus meiner, ganz individuellen Mobi-Nutzer-Sicht zu geben. Was davon Betriebssystem- oder Modell-spezifisch sein könnte, ist nicht der Punkt und mag ich auch hier nicht zwischen Tür und Angel diskutieren.
Zur PDF noch ein Gedanke. Klar kann ich die in deinem A4-Format auf meinem Handy lesen, ich muss aber zoomen und dann hin und her wischen… Das ist das Gleiche wie „normale“ Webseiten am Smartphone surfen, oder wie macht das ein iPhone?
Eine überlegenswerte Lösung wäre z.B., deinen Report in das ePub-Format zu konverteren, viele Geräte bringen einen kompatiblen E-Book-Reader mit oder er lässt sich als App nachrüsten. Selbst Kindle-Format (prc) wäre möglich. Auch dafür gibt es eine Reader-App und Reader für den PC. Ein teures Kindle wird also gar nicht gebraucht.
Ich schicke dir deinen Report mal als ePub- und prc-Datei. Layout ist natürlich nicht überarbeitet, ich habe einfach nur die pdf konvertiert. Schaue es dir in deinem iPhone mal an.
Gruß, Frank
Okay, danke für die Anregungen. Und ist ja auch total okay, dass Du Deine persönliche Mobil-Nutzer-Sicht hier schilderst, mit Deiner Hardware! 🙂
Wir hatten uns da nur missverstanden, ich dachte Du hättest technische Schwierigkeiten oder so gehabt.
Zwecks Format muss ich mir dann noch einmal etwas überlegen. Auf meinem iPhone wird das E-Book als normale Seite angezeigt und die Schrift ist gut lesbar – wie auf einer mobilen Webseite oder in E-Mails oder so. Ich muss also nicht „wischen“ oder so (falls Du nicht das normale Scrollen meinst ;)). Zoomen brauchte ich auch nicht, das iPhone hat gleich eine bequeme Lese-Größe geöffnet.
Schaue gleich mal in meine Mails.
Liebe Grüße
Gordon
Guten Morgen Gordon, das ist ein Android-Problem. Die unterschiedlichen Smartphones zeigen das unterschiedlich an. Lösung: Image einfach kleiner machen oder das Image mit width:100% height:auto einbinden.
LG Nur Sharina
Ah, okay, danke für die Ergänzung. Ich werde dann mal die Größe der Grafik in der Mail auf height: auto stellen. Ich hoffe, dass dann schonmal funktioniert (denn ich kann das leider nicht testen; ich habe kein Android-Gerät zur Hand).
Hallo Gordon, die QR Codes sind in erster Linie die schnelle Verbindung zwischen on- und offline. QR Codes auf Desktop Webseiten sind lediglich die Vereinfachung für diejenigen, die Deine Webseiten surfen und feststellen – gefällt mir, das hatte ich gerne auch für das Handy. Der QR Code erspart das eintippen von URls, Kontaktdaten usw.
Der klassische Einsatz für QR Codes ist die Verbindung zwischen on- und offline herzustellen. Wie z.B. in meinem Beispiel mit dem virtuellen Shop, das Scannen von Visitenkarten, Werbeanzeigen aus Printmedien usw.
Seit dem ich in meinem Blog für jeden Beitrag einen QR Code anbiete hat sich die Anzahl der Besucher ständig gesteigert, die die Codes scannen und anschließend mobil meine Beiträge surfen. In Zukunft werde ich das noch mit einer App für iPhone und Android etwas vereinfachen. Wer die App nutzt braucht keine QR Codes auf dem Blog scannen und erhält eine Push Notifikation wenn es neuen Content gibt.
LG Nur Sharina
Hallo Gordon!
Coole Idee mit dem QR Code, ich glaube das werde ich in nächster Zeit mal umsetzen. Auch die Idee von Nur Sharina mit den QR-Codes unter Artikeln ist Gold wert.
Danke und liebe Grüße
Daniel