Responsive Design mit WordPress; Mobile Smart Phone Emulatoren

Responsive Design mit WordPress; Mobile Smart Phone Emulatoren

Ich war heute auf der Site von webdesignerdepot.com und habe dort einen sehr interessanten Artikel über „mobile smart phone emulatoren“ gelesen von Rohit Singhal. Den Artikel möchte ich gerne weiter empfehlen denn der praktischen Nutzen ist eben sehr groß.

In dem Artikel stellt er 6 Emulatoren vor die man für die Überprüfung seiner responsiven Website benutzen kann. Diese Emulatoren findet man unter folgende URL’s;

Fünf von sechs habe ich erfolgreich getestet; mit ipadpeek.com hatte ich auf die Schnelle ein Problem. Wird wohl an meine Ungeduld gelegen haben. 

Besonders gefreut hat mir die Lösung  von quirktools.com. Da kann man das Ergebnis für jedes mobiles Gerät getrennt  einstellen und abfragen.  Zudem kann man die Simulation mit einem Scroll-Balken bequem von oben nach unten scrollen.

Nachfolgend zeige ich Ihnen das Ergebnis von www.rohrreinigung-ok.com auf einem Apple iPod und einem Apple iPad.

screenfly emulator iPod5Die Website www.rohrreinigung-ok.com auf einem AppleiPod5 dargestellt mit dem smart Phone Emulator von Screenfly.

Apple iPad smart phone emulator

Die gleiche Website auf einem AppleiPad dargestellt mit dem smart phone emulator von screenfly.

Wie man sieht, ist das Ergebnis mehr als brauchbar. Deswegen möchte ich Ihnen diesen Emulator gerne weiter empfehlen und Rohit Singhal danken für den Artikel.   

 

 

Share and Enjoy

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS

Responsive Design mit WordPress; Beispiele

Es ist vielleicht ein halbes Jahr her, dass ich meine Websites mal über ein mobiles Gerät betrachtet habe. Das Ergebnis war nicht zufriedenstellend egal welchen Browser ich benutzt habe. Auf Grund dieser Erfahrung habe ich danach bei den WordPress-Seiten das Plug-In WP-Touch installiert. Das Ergebnis war besser aber nicht richtig schön und funktionell.

Seitdem bin ich auf der Suche gegangen nach WordPress-Themes, die bereits so gestaltet sind, dass sie die Darstellung der Inhalte auf Bildschirmen unterschiedlicher Größe automatisch ermöglichen. Ich war wie man sich in Fachjargon ausdruckt auf der Suche nach WP-Themes mit responsivem Design. Hier finden Sie einige der Beispiele für Responsive Design mit WordPress.

Wie groß war dann meine Überraschung  wenn ich das neue Default Theme 2013 oder auf Englisch das WP-Theme Twenty-Thirteen vor wenige Wochen ausprobiert habe.  Das Ergebnis finden Sie auf diesem Blog  unter www.daalmans-innovations.com/das-wp-theme-2013. Denn das Ergebnis ist derart gut, dass ich damit sehr glücklich bin und das Theme-2013 gerne weiter empfehlen möchte.

Da es Websites gibt die unterschiedliche Zwecke verfolgen, muss die Ausgestaltung der Website die Zielsetzung angepasst werden. Deswegen soll es unterschiedliche Themes geben die vom Layout her unterschiedlich aufgebaut sind. Der Gesichtspunkt hat das responsive Design auch zu berücksichtigen. 

Ganz grob unterscheide ich (subjektiv) die Websites in folgende Kategorien

  • CMS-Website mit Homepage Charakter
  • CMS-Website mit Blog Charakter
  • CMS-Website mit Blog ohne spezifischer Ausprägung
  • CMS-Website mit Portfolio Charakter

Diese Aufteilung ist zwar ganz persönlich aber sehr brauchbar auch bei der Analyse von responsive Design Themes wie Sie gleich sehen werden. Betrachten wir die verschiedenen Kategorien an Beispiele.

CMS-Website mit Homepage Charakter

Derartige Websites öffnen mit der starren Homepage und Links zu weitere Seiten und Blogbeiträge. Beispiele für solche responsive design Themes sind

Als Beispiel habe ich das Ambrosia-Theme mal angewandt auf eine frische Site die mit dem WP-Theme 2013 ausgestattet war. Ohne etwas zu konfigurieren oder anpassen zu müssen konnte ich das Theme wechseln und ein ganz gutes Ergebnis erzielen wie Sie nachfolgend sehen können.

Ambrosia-Theme

Ambrosia-Theme

CMS-Website mit Blog Charakter

Derartige Websites haben im Wesentlichen nur eine Spalte wie früher bei Blogs üblich und öffnen meistens auch mit der Blog-Seite. Beispiele von Themes die derartige Websites erzeugen sind

Als Beispiel folgt die Website mit der Rohreinigung und dem Default Theme.

WP-Theme twenty-thirteen

CMS-Website mit Blog ohne spezifischer Ausprägung 

Derartige Websites präsentieren auf der Startseite sowohl die CMS-Website als auch die Blogposts mit Bild und Link in einem Slider. Der Zugriff zu den wichtigsten Blogposts ist somit von der Homepage sehr vereinfacht. Beispiele für Themes, die derartige Websites ermöglich sind

Als Beispiel das iTheme2 von/für Apple angewandt auf die obige Rohrreinigungswebsite ohne Anpassung. Da noch keine Blogposts mit Bildern vorhanden sind, steht der Slider, der direkt unter die Navigation angeordnet ist,  ziemlich leer da. Ansonsten finde ich das Ergebnis sehr anspruchsvoll.

wp-theme iTheme2

CMS-Website mit Portfolio Charakter

Fotographen, Maler, Graphiker, Buchhändler usw. haben das Bedürfnis ihr ganzes Portfolio zu zeigen. Dazu bedarf es ein Theme mit Kachelstruktur bzw.  Gridstruktur. Derartige Themes in responsive Design gibt es ziemlich viele. Ein paar Beispiele sind

Als Beispiel nur die Demo von Gridly, denn die Anwendung von Gridly auf die Rohrreinigungsseite bringt wenig da nur ein Element im Grid ausgefüllt wird.

WP-Gridly-Theme

Bei Gridly sind die Kachel bzw. die Grid-Elemente gefüllt mit Graphik und Text so ähnlich wie bei Pinterest. Das Theme ermöglicht es somit die wesentlichen Inhalte – Seiten und Posts – direkt für den Besucher auf der Homepage frei zu geben. 

Fazit:

Es gibt mittlerweile eine ganze Reihe an kostenlose Themes mit responsivem Design. Somit ist die Verfügbarkeit an responsive Design Themes für Mainstream Anwendungen gegeben. 

Ich möchte an der Stelle folgendes Artikel wärmstes empfehlen http://www.drweb.de/magazin/responsive-webdesign-15-kostenlose-wordpress-themes/

 

 

 

 

 

 

Share and Enjoy

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS

Landing Page erstellen; was ist eine Landing Page?

In 2010 hatte ich zum ersten Mal bewusst zu tun mit dem Begriff „Landing Page“ und zwar in englischsprachige Literatur. Kein Wunder, denn der Begriff wurde in USA geboren. Bei der wirtschaftlichen Nutzung vom Internet sind Landing Pages  etabliert. In Deutschland hat man entweder den Begriff wortwörtlich übernommen oder übersetzt als Landungsseite. Mittlerweile ist auch bei uns der Begriff „Landing Page“ eingebürgert.

Was ist eine Landing Page?

Eine Landing Page ist eine Internetseite, die den Betrachter zu einer Aktion bringen soll. Die Betonung fällt dabei auf EINER. Diese Aktion ist in fast 100% der Fälle 

  • entweder die Abgabe der Email-Adresse des Betrachters 
  • oder der Kauf eines Produktes bzw. einer Dienstleistung

Deswegen werden Landing Pages auch wohl Money Pages genannt, denn der erfolgreiche Einsatz dieser Seiten führt zu Geldeinnahmen. Landing Pages für das Einsammeln von Email-Adressen werden Squeeze Pages oder Optin Pages genannt. Landing Pages für den Verkauf eines Produktes werden Sales Pages oder Verkaufsseiten genannt.

Landing Pages haben eine ganz bestimmte Struktur und eine schlichte Gestaltung. Man könnte behaupten es ist Minimaldesign. Denn Landing Pages haben keine Navigationsleiste und selten Sidebars. Sie sind ausgerichtet auf nur eine Handlung und alles was davon ablenken kann, ist entfernt. Es gibt nur eine Schaltfläche entweder zum Abschicken der Email-Adresse oder zum Schließen des Kaufs. Somit gibt es für Besucher einer Landing Page nur die Möglichkeit seine Email-Adresse einzutragen oder ein Produkt zu kaufen oder die Seite zu verlassen.

Gestaltung einer Squeeze Page

Eine Squeeze Page besteht im Wesentlichen aus folgenden Elementen

  • Eine Überschrift bzw. zwei Überschriften, die ein Problem mit Problemschmerz benennen und eine Lösung versprechen. Denn die Überschrift soll Emotionen abrufen und Neugierde wecken, damit der Betrachter aufmerksam wird und nicht gleich die Seite verlässt.
  • Das Lösungsversprechen ausgedrückt in Vorteile für den Nutzer. Der Nutzer sollte wissen was für ihn drin ist.
  • Die Lösung verfasst in einem kostenlosen Ratgeber, den der Nutzer sofort per Email abrufen kann, wenn, ———– ja wenn er seine Email-Adresse bekannt gibt.
  • Eine Garantie, dass die Email-Adresse nicht misbraucht wird sondern gewissenhaft genutzt werden wird.
  • Ein Formular zum Eintragen der Email-Adresse
  • Eine Schaltfläche „Abschicken“

Ein Beispiel für so eine Squeeze Page finden Sie hier. Man kann die Squeeze Page für den Betrachter hübscher machen durch Hinzunahme eines Videos oder Hinzunahme eines Bildes. Ob dies aber fördernd wirkt bei der Durchführung der Aktion ist nicht vorhersehbar. Das hängt vom Produkt und von der Zielgruppe ab; man kommt in der Praxis eben nicht daran vorbei verschiedene Variationen der Landing Page auszuprobieren. Bei diesem Splittesten bietet man abwechselnd hinter einander die erste und die zweite Version an und analysiert welche Version zu mehr Aktionen (Konversionen) der Besucher führt. Es gewinnt die Version mit den meisten Konversionen.

Gestaltung einer Sales Page oder Verkaufsseite

Die Gestaltung einer Verkaufsseite ist einzig und alleine ausgerichtet auf den Verkauf einer Ware oder einer Dienstleistung. Deswegen soll jede Information die ablenkt vom Verkaufsprozess weggelassen werden so ähnlich wie bei der Squeeze Page. Also auch in der Verkaufsseite nur eine Schaltfläche für den Verkaufsabschluss einbauen und verzichten auf eine Navigationsleiste. Allerdings braucht man im Verkaufsprozess mehr Aufwand in Zeit und Information um Interessenten zu überzeugen Ihre Kreditkarte zu ziehen. Deswegen sind Verkaufsseiten üblicherweise viel länger als Squeeze Pages. Es gibt aber auch kurze Verkaufsseiten, die jede Information in einem Video verpackt haben.

Die wesentlichen Elementen einer Verkaufsseite sind

  • Die Überschrift, die potentielle Nutzer des Produktes fesseln und zum Weiterlesen animieren sollte
  • Ein Einführungstext, der die herausragenden Vorteile des Produktes als Kundennutzen herausarbeitet. Es sollte dabei die Frage „was ist für mich drin?“ beantwortet werden. Wie diese Vorteile zustande kommen ist hier weniger relevant. Das wird Ihre Kunden weniger interessieren; Ihre Mitwettbewerber um so mehr.
  • Ein Beweis, dass Ihr Produkt tatsächlich den Kundennutzen generiert der versprochen wird. Also Aussagen von Kunden, die bestätigen, dass Ihr Produkt tatsächlich in der Praxis mindestens so viel bringt wie von Ihnen versprochen.
  • Weitere Informationen zum Produkt und seine hervorragenden Eigenschaften. Dabei sit eine sinngemäße Wiederholung nicht abwegig, denn bewusst wahrnehmen erfolgt nur durch Wiederholung.
  • Bei digitalen Produkten eine bedingungslose Rückgabegarantie innerhalb ein bis zwei Monate. Somit kann der Besucher in Prinzip ohne Risiken einkaufen; denn bei Nicht-Gefallen ohne Wenn und Aber Geld zurück. 
  • Der Einkaufsbutton gut sichtbar mit viel Kontrast und über die Länge der Seite ein- bis zweimal wiederholt.
  • Die künstliche Verknappung des Produktes durch Zeitdruck oder Preisdruck einzubauen.

 Zum Schluß finden Sie hier ein Beispiel für eine lange Verkaufsseite von Trustwizz.com. Ein Beispiel einer extrem kurzen Verkaufsseite dank Nutzung eines Videos finden Sie hier bei Video-Experte Chris Soemer.

Landing Page erstellen mit HTML

Das Erstellen von Landing Pages kann eigentlich mit jedem Web-Editor erfolgen, da Landing Pages für sich alleinstehende Webseiten sind die frei sind bei der Wahl der Style Sheets (CSS-Elemente). Deswegen kann man Landing Pages erstellen in HTML mit Dreamweaver oder KompoZer und die anschließend mit FTP hochladen auf dem Server. Die Erstellung von Landing Pages mit HTML hat wie immer Vor- und Nachteile. Kommen wir erst zu den Vorteilen

  • Einzel HTML-Seiten sind unattraktiv für Hacker, da es statische Seiten sind ohne Administrierbereich. Man könnte höchstens ein Produkt klauen wenn man den Downloadlink ausspionieren kann. Es gibt zudem kaum Synergie-Effekte; jede Seite muss für sich geknackt werden. Das ist ziemlich anstrengend. 
  • HTML-Seiten existieren immer auf Ihrem PC, denn dort wurden sie erstellt. Demzufolge kann ein Server-Crash Ihnen nicht langfristig schaden, denn Sie laden Ihre Seite nach dem Crash einfach wieder hoch.

Jetzt die Nachteile

  • Die Erstellung von HTML-Seiten ist ziemlich zeitintensiv. Eine Seite eines CMS-Systems erstellen geht wesentlich schneller.
  • Die Erstellung von HTML-Seiten verlangt mehr Sachkenntnis

Hier finden Sie ein Beispiel einer HTML Landing Page für die Vermarktung einer Dienstleistung.

Landing Page erstellen mit WordPress (CMS-System)

Mit WordPress gibt es nach meiner Kenntnis 3 Möglichkeiten Landing Pages herzustellen und zwar durch

  • Anpassung des Templates des Standard-Themes (twentyten, twentyeleven, twentytwelve etc.). Diese Anpassungen erfordern eingreifen im Code und sind deswegen für Anfänger und Anwender, die Zeit sparen möchten, nicht sonderlich geeignet. Als Beispiel möchte ich noch einmal meine Squeeze Page in Erinnerung rufen.
  • Die Integration eines spezifischen Plug-Ins mit einem Template im Standard-Theme. Das Plug-in bestimmt das Template für  die jeweilige Landing Page. Die meisten Plug-Ins bieten nur ein einziges Template an für entweder eine Squeeze Page oder eine Sales Page. Die Lösung mit solchen Plug-Ins erfordert deswegen eine spezifische WordPress Installation nur für entweder Squeeze Pages oder Sales Pages. Die eigentliche Website – Home, Unterseiten und Blog-Seite – erfordert eine getrennte WordPress Installation. Ein derartiges Plug-In, ist  das WP Optins Plug-In von Derrick van Dyke. Es ist einfach in der Bedienung und sehr leistungsfähig. Es ermöglicht die Erstellung von klassischen Squeeze Pages sowohl als auch Guru-Type Squeeze Pages. Schauen Sie doch mal das obige YouTube Video von Derrick an.
  • Die Integration eines spezifischen Plug-Ins mit mehreren Templates im Standard Theme. Ein sehr gutes Beispiel für ein solches Plug-In ist das WP Instabuilder Plug-In von Martin Crumlish. Es erlaubt die Erstellung von Squeeze Pages, Verkaufsseiten und Launch Seiten. Hinzu kommt, dass diese Seiten mit responsive Design auch auf mobilen Geräten gezeigt und mit einem eingebauten Splittest-Tool getestet werden können.  
  • Die Integration eines spezifischen Themes, das Profits Theme von Welly Mullia, in der WP Standard Installation.  Ich nenne Ihnen jetzt nur dieses Theme, da es ausserordentlich gut ist und ich es persönlich einsetze. Dieses Theme kann ja alles; Homepage, Unterseite, Blogseite, Membershipsite und Landing Pages aller Art. Deswegen ermöglicht dieses Theme die Erstellung einer ganzen Website inklusive Landing Pages mit EINER WordPress Installation; einfach genial.



Share and Enjoy

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS

Tabellen in WordPress erstellen

Tabellen in WordPress erstellen bzw. darstellen ist mit mehreren Methoden bzw. Tools möglich. Persönlich habe ich 3 Methoden praktiziert, die ich hier kurz vorstellen möchte. Es handelt sich dabei um folgende Methoden

  • Die Erstellung einer HTML-Tabelle, die als Bild-Datei in WordPress eingefügt wird
  • Die Erstellung einer Tabelle direkt in WordPress mit einem besseren Editor
  • Die Erstellung einer Tabelle direkt in WordPress mit einem Tabellen Plug-In

Die Ergebnisse sind ganz unterschiedlich in der Qualität und natürlich auch in dem Aufwand. Schauen wir uns nachfolgend kurz die verschiedenen Methoden an.

Tabelle erstellen in HTML und darstellen als JPG in WordPress

Wer sich etwas länger mit Website-Erstellung beschäftigt, hat wahrscheinlich seine Karriere angefangen mit der Erstellung von Webseiten mit HTML und weiß, dass sich die Website-Erstellung mit HTML im Wesentlichen aus Tabellen und Inhalte in Zellen der Tabellen entwickelt hat. Es liegt deswegen auf der Hand Tabellen in HTML zu erstellen, denn die besseren HTML-Editoren wie Dreamweaver und Kompozer ermöglichen Tabellen mit ganz schöner Optik wie Sie im nachfolgenden Bild sehen können.

Tabelle in HTML

                                              Tabelle in HTML

Wenn ein Kunde großen Wert legt auf die Art der Ausgestaltung der Tabellen, benutze ich nach wie vor einen HTML-Editor zur Erstellung der Tabelle. Nachfolgend schaue ich mir das Produkt im Browser an und fotografiere den Bildschirm ab. Das Ergebnis wird zugeschnitten und als JPG-Datei gespeichert. Diese Bild-Datei wird danach in WordPress integriert.  

Der Vorteil ist die schöne Optik; allerdings erkauft man die mit einem Nachteil. Denn man kann die schöne Tabelle nicht im WordPress editieren. Somit ist dieser Weg umständlich.

Tabelle erstellen in WordPress mit dem Editor UltimateTinyMCE

UltimateTinyMCE ist für WordPress Verhältnisse ein sehr guter Editor und ermöglicht die direkte Integration der Tabelle im Editor so ähnlich wie in Word-Dokumenten. Man gibt die Zahl der Zeilen und Kolommen vor und schreibt in den Zellen die Information.

Tabellenfunktion in Ultimate Tiny ECM Editor

         Tabellenfunktion im Ultimate Tiny ECM Editor

Der Prozess funktioniert zwar, ist aber langwierig und das Ergebnis ist abhängig vom benutzten Theme. Deswegen ist das Ergebnis üblicherweise nicht sonderlich ansprechend. Persönlich benutze ich diese Alternative kaum.Trotzdem können auch derartige Tabellen – abhängig von der Anwendung – völlig ausreichend sein.

Stundenplan
Montag Dienstag Mittwoch Donnerstag Freitag
9.00 – 10.00 Gymnastik Gabriel 9.00 – 10.00 Gymnastik    Gabriel 9.00 – 10.00    Kein Betrieb 9.00 – 10.00 Gymnastik        Gabriel 9.00 – 10.00 Gymnastik  Gabriel
15.00 – 16.00 Yoga      Melanie    15.00 – 16.00  Kein Betrieb 15.00 – 16.00 Yoga         Melanie 15.00 – 16.00 Yoga         Melanie 15.00 – 16.00 Yoga         Melanie

 

Tabelle erstellen in WordPress mit einem speziellen Tabellen Plug-In

Dieses Plug-In von Tobias Bäthge trägt den Namen „TablePress“ und war früher bekannt als „WP-Table Reloaded“. Nach der Installation wird das Plug-In im Dashboard an zwei Stellen sichtbar wie im Bild mit roten Kreiseln festgehalten wurde.

Table Press Plug-In

                             Table Press im Dashboard

Der rechte Link im Editor vermittelt lediglich wie viele und welche Tabellen (Name) im Artikel eingefügt wurden; also nur ein Monitor. Der Link in der linke Leiste gibt Zugang zum Program und ermöglicht die Erstellung und Ausbesserung von Tabellen. Klickt man auf diesen Link, dann kommt man in die Editierebene. Erst wird man aufgefordert eine neue Tabelle anzulegen mit Zahl der Zeilen und Kolommen und Name und Beschreibung.

Neue Tabelle anlegen

                              Neue Tabelle anlegen

Nach klicken auf „Tabelle hinzufügen“ kommt man in die eigentliche Editierebene wo man die Inhalte der Tabelle einfügen kann.

Daten hinzufügen

                                                 Daten hinzufügen

Nachdem man seine Daten eingegeben und gesichert hat, kann man die Tabelle per Shortcode einfügen. Das Ergebnis sehen Sie nachfolgend.

MontagDienstagMittwochDonnerstagFreitag
9.00 - 10.00
Gymnastik 1
Gabriel
9.00 - 10.00
Gymnastik 1
Gabriel
9.00 - 10.00
Kein Betrieb
9.00 - 10.00
Gymnastik1
Gabriel
9.00 - 10.00
Gymnastik 1
Gabriel
11.00 - 12.00
Zumba Fitness
Melanie
11.00 - 12.00
Zumba Fitness
Melanie
11.00 - 12.00
Zumba Fitness
Melanie
11.00 - 12.00
Indoor Cycling
Melanie
11.00 - 12.00
Indoor Cycling
Melanie
17.00 - 18.00
Pilates
Brigitte
17.00 - 18.00
Pilates
Brigitte
17.00 - 18.00
Pilates
Brigitte
17.00 - 18.00
Pilates
Brigitte
17.00 - 18.00
Pilates
Brigitte
19.00 - 20.00
Yoga
Melanie
19.00 - 20.00
Yoga
Melanie
19.00 - 20.00
Yoga
Melanie
19.00 - 20.00
Yoga
Melanie
19.00 - 20.00
Yoga
Melanie

Die Tabelle ist zwar keine Schönheit; ist aber sehr gut lesbar und schnell erstellt bzw. abgeändert. Deswegen ist dieses Plug-In mit Sicherheit eine Empfehlung. Weitere Informationen finden Sie unter  http://www.perun.net/2012/03/31/umfangreiche-tabellen-in-wordpress-erstellen/.

Share and Enjoy

  • Facebook
  • Twitter
  • LinkedIn
  • Email
  • RSS