Mobiles Newsletter-Formular verstecken/zeigen

Newsletter-Formular erstellen für mobile Anwendungen: Mobile Geräte wie Smartphones sollen auch mein Newsletter-Formular ganz oben sehen. Das ist ein bisschen dumm, weil ein Besucher auf meiner Webseite, der gerade mit seinem iPhone oder seinem Samsung Galaxy auf meinen Blog kommt, nicht die Sidebar als erstes sieht, wo ich auf der PC-Version meiner Webseite das Newsletter-Formular ganz oben links sofort sichtbar habe.

In der mobilen Version der Webseite sieht er zuerst den Beitrag, nachdem er gesucht hat. Nun will ich nicht, dass dem mobilen Nutzer meiner Webseite langfristig die wertvollen Tipps und Angebote entgegen, die ihn höher bringen und erfolgreicher machen. In der PC-Version habe ich unter jedem Blog auch noch einmal das Newsletter-Formular gesetzt. Das sieht auch der mobile Nutzer, wenn er den Beitrag zu Ende liest. Er trägt sich ein, und alles ist fein. Aber die großen Lehrer des Newsletter-Erstellens sagen uns, das Opt-in-Formular für den Eintrag in den Newsletter muss OBEN stehen...kein Scrollen...und wenn es geht "links oben", weil dort jeder zuerst hinschaut, sagen die Experten. Doch es sähe blöd aus, wenn ich in der PC-Version (Desktop-Version) meines Blogs gleich oben im Beitrag ein Opt-in-Formular reinquetsche. Besonders blöd sieht das aus in der Übersicht aller Artikel. Auf die kommt ein mobiler Nutzer zuerst, wenn er meine Startseite angepeilt hat. Dort werden ihm unter dem Header die Ausschnitte der ersten Zeilen meiner zehn letzten Beiträge angezeigt. Und wenn da jetzt jedes Mal "Newsletter-Formular, Newsletter-Formular, Newsletter-Formular" erscheint, macht das keinen guten Eindruck.

DIE LÖSUNG heißt Twitter Bootstrap und ist der öffentlich verfügbare Code für die Verschönerung von Webseiten durch ein paar Handgriffe aus dem Hause Twitter. Hat man Twitter Bootstrap als Plug-In in seinem Wordpress-Blog aktiviert mit zweimal Klicken, schaut man auf der Twitter Bootstrap Seite nach, welche CSS-Klasse in das <div>- oder <a>-Tag passt...und schon sieht alles schön aus. Da gibt es zeitgemäße Designs für Button, Tabellen, Listen und sogar Menüs und aufklappbare Navigation etc....die Du alle nicht mit JavaScript und CSS selbst programmieren musst. Einfach... <a class="cool-button" href="url" >Hier klicken</a> ...und schon ist der Button schön. Kombinieren tut man so... <a class="cool-button cool-button-red funky-mouseover"> ...also immer zwischen den CSS-Klassen, die du kombinierst, ein LEERZEICHEN lassen. Und der Button wird noch schöner:-) (Das sind alles nur erfundene Beispiele, die das Prinzip zeigen. Wie das genau geht, erkläre ich Euch, wenn Ihr wollt...also sagt: "Bescheid!") WAS KANN TWITTER BOOTSTRAP für mein mobiles Opt-in-Formular tun? Bootstrap hat auch MOBILE KLASSEN. Nach dem Prinzip "show/hide" packst Du das Newsletter-Formular oben in Deinen Blog-Artikel und verpackst es in einem DIV-tag mit einer Klasse, die das Opt-in-Formular vor den PC-Nutzern versteckt, aber vor den mobilen Smartphone-Surfern sichtbar macht.

Hier sind die mobilen CSS-Klassen für das Versteckne/Zeigen Eures mobilen Newsletter-Formulars:

die CSS-Klassen von Twitter Bootstrap zur Verwendung für das mobile Newsletter-Formular (Einbauen wie oben gezeigt!)

Zum kostenlosen "Premium-Webinar" vom höchst-konvertierenden Autoresponder-Newsletter-Anbieter Deutschlands und für dauerhaft technische Begleitung hier eintragen & Termin machen:

Sie erhalten 1x pro Woche technische Begleitung und Tipps! Jederzeit kündbar! Ihre Daten gehen nicht an Dritte!