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.   

 

 

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/