Kommentare 15

Tipps zur Umsetzung von responsive Webdesigns in WordPress

Ob bei einem Themedesigns oder einem individuellen Webdesign, die Flexibilität von WordPress sollte auch bei einem responsive Layout auf jeden Fall erhalten bleiben. Es ist schließlich wichtig, dass der Nutzer später eigene Texte und Bilder, Navigationspunkte und Widgets individuell anlegen kann. Die Schwierigkeit bei einem responsive Webdesign für WordPress besteht also vor allem darin, ein flexibles, anpassungsfähiges Layout zu erstellen, dass auch mit den unterschiedlichsten Inhalten noch funktioniert.

Durch die Entwicklung unsere WordPress-Themes konnten wir in der letzten Zeit etliche Erfahrungswerte sammeln. Die wichtigsten Punkte habe ich in diesem Artikel zusammen gefasst.

Die Seiten-Navigation

Anfangs ist es nicht ganz leicht, sich in ein flexibles Webdesign-Layout einzufinden. Das Navigationsmenü einer Webseite ist mit Sicherheit eines der wichtigsten Designelemente und sollte sorgfältig durchdacht und möglichst benutzerfreundlich sein. Der große Vorteil in WordPress ist ja, dass man eine flexible Navigation anlegen kann. Später können so über die individuelle Menüfunktion (Custom Menus) Navigationspunkte leicht angepasst und hinzugefügt werden.

Diese Flexibilität sollte natürlich auch im responsive Layout erhalten bleiben. Besonders kniffelig ist es, wenn man auch Submenüpunkte ermöglichen will. Denn da es auf Touchscreen-Monitoren kein Hovereffekt gibt, funktionieren die in WordPress sehr häufig verwendeten Dropdown-Menüs auf den mobilen Geräten nicht mehr.

Tipps responsive Webdesign in WordPress

Das Dropdown-Menü des Bugis Themes in der Desktop-Ansicht.

Tipps responsive Webdesign in WordPress

In der Ansicht für iPads oder andere Tablet PCs verwandelt sich das Menü entsprechend.

Mehrspaltigkeit

In der Layoutansicht für große Desktop-Bildschirme ist es angenehm, Textspalten nicht zu lang werden zu lassen, sondern sie in mehrere Spalten aufzuteilen. Dadurch wird ein Text sehr viel angenehmer lesbar. Wenn sich das Layout verkleinert, solltest du diese Mehrspaltigkeit mit der CSS-Eigenschaft float:none aufheben und in eine einspaltige Ansicht wechseln.

Tipps responsive Webdesign in WordPress

Aus Seiten ohne Sidebar hilft die Mehrspaltigkeit bei der Lesbarkeit von Texten.

Tipps responsive Webdesign in WordPress

Auf dem Smartphone wird der gleiche Text dann einspaltig angezeigt.

Das gleiche gilt natürlich auch für Bilder im Text. Auch diese sollten ab einer gewissen Bildschirmbreite einspaltig angezeigt werden.

Bilder, Video- und Audioinhalte

Fasst schon existentiell für responsive Webdesigns ist die CSS-Eigenschaft max-width 100%. Mit Hilfe dieses Wertes kannst du Bilder und aber auch Medienelemente wie video, audio oder auch iframe-Elemente skalierbar machen. Hier ein Beispielcode:

img,
embed,
object,
video, 
iframe {
  max-width: 100%;
}

Ein spannender Artikel zu diesem Thema ist auch “Fluid Images” von Ethan Marcotte auf dem A List Apart-Blog.

Touch Screens

Wichtig ist es auch, immer zu bedenken, dass auf mobilen Geräten Touchscreens genutzt werden. Die Navigation auf einer Webseite funktioniert also ganz anders als mit einer Maus und es gibt kein Hover-Status bei Links.

Daher sollten alle Links und Buttons bereits im Ausgangsstatus deutlich als solche markiert sein (z.B. mit einer Linkfarbe). Links sind auf dem Touchscreen vor allem von Smartphones angenehmer zu bedienen, wenn man ihnen etwas Platz im Layout gibt. So sind sie auch mit der Fingerspitze noch leicht zu bedienen.

Tipps responsive Webdesign in WordPress

Buttons sollten auch auf Touchscreens leicht zu bedienen sein.

Schriftgrößen und Lesbarkeit

Eine angenehme Lesbarkeit der Schrift für die unterschiedlichen Layoutgrößen zu erreichen ist ebenfalls nicht ganz einfach. Auf jeden Fall sollte man “em” als Größeneinheit für font-size verwenden, da dieser Wert sich am Standardwert des Browsers orientiert und nicht an einem festen Pixelwert.

Höchstwahrscheinlich muss man bei seinem Design in der Smartphone-Ansicht auch den line-height Wert etwas verringern, damit der Text auf kleinen Geräten nicht zu sehr in die Länge getreckt wird. Zu eng sollte man den Fließtext aber auch nicht anlegen, sonst wird das Lesen zu anstrengend.

WordPress-Plugins im Responsive Webdesign

WordPress-Plugins solltest du auf alle Fälle auf so vielen Geräten und Bildschirmgrößen wie möglich testen, bevor du sie für dein Design verwendest. Gerade bei JavaScript-Effekten (z.B. Lightboxes oder Slider) sind viele Plugins noch nicht auf mobile Geräte optimiert.

Noch nicht sehr viele kompatible Lösungen zur Auswahl gibt es meines Wissens auch bei Media- und Audio-Playern, da diese bisher meist mit Hilfe von Flash gelöst waren, was auf den Apple-Geräten iPad und iPhone nicht unterstützt wird.

Um Codeschnipsel auf mobilen Geräten anzuzeigen, kannst du das WordPress-Plugin Syntax Highlighter Evolved nutzen. Vertikale Scrollbalken funktionieren auf den meisten mobilen Geräten nämlich nicht. Mit Hilfe des Plugins kann die Codebox dann aber in der Breite skaliert werden.

Webdesign-Elemente mit großen Datenmengen

Meiner Ansicht nach ist es außerdem wichtig, wenn möglich auf Elemente wie Bilder-Slider etc. zu verzichten, da diese meist sehr große Datenmengen haben und dann nur sehr langsam auf den mobilen Geräten geladen werden können.

display:none

Das Verbergen von Elementen wie Slidern und großen Bildern mit display:none; in der Smartphone-Ansicht solltest du bei deinem responsive Layout auch möglichst selten einsetzen. Vor allem nicht bei Elementen wie Slidern oder großen Bildern, da diese auch bei display:none dennoch in den Browser geladen werden. Die Ladezeit der Seite erhöht sich so unnötig.

Testen, Testen, Testen

Der wichtigste Tipp insgesamt ist wohl, ein responsive Webdsign auf so vielen Geräten wie möglich zu testen. Und wenn du dich erst einmal ein wenig mit den Besonderheiten eines solch flexiblen Webdesigns vertraut gemacht hat, ist es eigentlich gar nicht so schwierig, dein Webdesign in WordPress auch für mobile Geräte fit zu machen.

Zum Weiterlesen und Inspirationen sammeln kann ich auf auf jeden Fall das neue Buch von Ethan Marcotte “Responsive Webdesign” von Ethan Marcotte empfehlen. Du kannst dir das Buch z.B. für 9 Dollar als Ebook bei A Book Apart kaufen.

Ein weiterer Tipp ist der aktuelle Artikel “Fit to Scale” von Trent Walton über das Redesign seiner eigenen Webseite. Um Inspirationen und Lösungsansätze zu sammeln, kannst du dich außerdem von den Webdesign-Bespielen auf mediaqueri.es inspirieren lassen.

Fallen dir noch weitere Tipps und Hinweise ein, auf welche Probleme man bei einem responsive Webdesign in WordPress eingehen sollte und was zu beachten ist? Über deine Erfahrungen und Tipps freue ich mich sehr!

15 Kommentare

  1. Hallo Ellen,

    ich habe deinen Artikel interessiert gelesen, ich arbeite ja momentan selber an meinem Blog (inklusive meinen PHP-Kenntnissen), und habe mich mit Media Queries und Responsive Layouts beschäftigt C=

    Im ewigen Grasen im Web ist mir eure Webseite hier aufgefallen, und eure tollen Themes die Ihr erstellt habt, und ich muss zugeben das ihr das Responsive-Layout bei allen sehr schön gelöst habt! Deswegen wollte ich mal mein Lob aussprechen ;)

    • Hallo Johannes,

      vielen Dank für deinen Kommentar und das tolle Feedback zum Elmastudio-Blog und den Themes. Es freut mich sehr, dass dich das Thema responsive Webdesign interessiert. Klasse, dass du du auch gerade an einem eigenen Blog-Design arbeitest. Hoffentlich können dir meine Tipps hier im Artikel ein wenig bei deiner eigenen Arbeit weiterhelfen :-)

      Viele Grüße,
      Ellen

  2. Peter

    Hallo Ellen,

    du schreibst “Das Verbergen von Elementen wie Slidern und großen Bildern mit display:none; in der Smartphone-Ansicht soll­test du bei deinem responsive Layout auch mög­lichst selten ein­setzen.”

    Oftmals bleibt einem beim umsetzen eines Responsive Layouts keine andere Wahl, display:none; zu verwenden.
    Klar könte ich den User Agent auslesen und so weniger Inhalte (z.B.Bilder etc) ausliefern, aber man sollte sich nicht zu 100% darauf verlassen können.

    Liebe Grüße aus Berlin,

    Peter

    • Hallo Peter,

      vielen Dank für deinen Kommentar und dein Feedback zum Thema Responsive Layouts. Du hast natürlich Recht, in einigen Fällen kann man auf die Option display:none natürlich nicht verzichten und das ist auch in Ordnung so. Ich wollte im Artikel nur auf alle Fälle darauf hinweisen, dass große Bilder / JavaScript Slider die Ladezeit in den mobilen Versionen sehr verlangsamen können. Auf jeden Fall ist es sinnvoll, die Ladezeiten zu testen und eventuell auf das ein oder andere, nicht unbedingt nötige Feature zu verzichten, um das Webdesign auch für mobile Geräte noch benutzerfreundlich zu machen.

      Viele Grüße,
      Ellen

      • Peter

        Hallo Ellen,

        leider ist es so, das oftmals viel mehr mit geladen werden muss. Da sollten sich viele Leute zu Ihrem eigenen Interesse noch das Thema Bildkomprimierung anschauen. Ich sehe das selber bei unseren Projekten, welch großen Bilder z.T. geliefert werden oder sogar auch auf Websites geladen werden.
        Und manche Sites soll man dann in dem Zustand einem mobilen Endgerät zumuten ^^

        Bez. Javascript kann man ja recht schön das Gerät abfragen und dementsprechend die Scripte angepasst ausliefern.

        Liebe Grüße aus BErlin,

        Peter

      • Michael

        Genau mit dem Thema beschäftige ich mich momentan auch. Eine recht pragmatische Lösung wäre bei z.B. Slidern, wenn man die Bilder als Hintergrundbilder per CSS einbindet. Dann kann man für kleine Auflösungen auch kleinere Bilder laden.
        Nachteil: Ältere Browser, welche keine CSS3-Mediaqueries beherrschen, würden kein Bild anzeigen. Für den IE kann man das aber mit Conditional Comments und separaten IE-Stylesheets lösen.
        Die Browser, welche nach dem IE übrig bleiben, kann man dann meiner Meinung nach ignorieren oder halt den Slider im Standard-CSS auf display:none setzten und nur in den Mediaqueries und IE-Stylesheets einblenden.

        Eine weitere Möglichkeit, welche sich für größere Bilder lohnen könnte, wäre diese hier: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

  3. Peter

    @Michael: das wäre eine Möglichkeit. Allerdings haben Grafiken in slidern in 99% der Fälle einen inhaltlichen Sinn und keinen layouttechnischen Sinn.
    Das sollte natürlich auch bedacht werden. Ins CSS gehören nur Grafiken/Bilder die zum Layouten genutzt werden.

    • Michael

      @Peter: Das mag durchaus sein, dass die Bilder einen inhaltlichen Sinn haben. Ich sehe aber des öfteren, dass man Bilder nutzt, welche man mit Photoshop erstellt hat und dann auch Texte, Hintergrund (z.B. Verlauf) und ein beworbenes Produkt enthalten. Natürlich ist es einfacher alles in ein großes Bild zu packen, aber hier wäre eine Trennung wohl besser.

      Grundsätzlich ging es mir auch mehr um die Möglichkeiten, welche man hat. Diese sind leider noch sehr eingeschränkt. Ideal wäre z.B. ein HTML-Attribut, mit welchem man steuern könnte, bei welcher Auflösung oder welchem Gerät der Inhalt geladen wird. Nur leider gibt es das meiner Erfahrung nach nicht.

      Zudem habe ich eine Alternative genannt, welche deinen Anforderungen dann genügen sollte.

  4. Max

    Hallo!

    Kann ich in einem Responsive-Layout (bspw. YOKO) im Header ein animiertes GIF einsetzen? Wird das dann genauso gehandelt wie bspw. ein jpg bzgl der Skalierung (IPhone)?

    Grüße vom Max

  5. Felix

    In einem Artikel in eurem blog, den ich leider nicht mehr finde, wurde ein Bilder-slider erwähnt, der sich hervorragend für responsive Webdesign eignet. Könntet ihr mir bitte mitteilen, welche Bildergalerie dies ist und vielleicht auch den dazugehörigen Artikel. Vielen Dank.

  6. Felix

    Hallo Ellen

    recht herzlichen Dank für deine Antwort! Auf die photoswipe-Galerie wurde ich auch schon aufmerksam und ich finde sich für eine Bildergalerie in Bezug auf responsive Webdesign wirklich hervorragend, aber ich bringe Sie leider nicht dazu, dass sich diese in meine Seite integriere. Ich würde sie gerne in einem div unterbringen, aber wenn ich dann die Seite aufrufe, dann werden die Fotos vergrößert und nur diese auf der Seite angezeigt. Wirklich blöd.

  7. daniel

    hallo ellen,
    spannende sache! scheint mir sehr relevant künftig zu sein, ich habe mich damit aber bisher überhaupt nicht beschäftigt bei den paar vereinsseiten, die ich betreue – daher entschuldige bitte meine einsteigerfrage: was ist genau mit responsive gemeint? flexibles design auf mobilen geräten? ich hatte das ehrlich gesagt erstmals auf eurem blog gelesen und dann auch noch in dieser häufigkeit. gibts dazu eine gute grundsätzliche einsteigeranleitung, wie meine style.css beispielsweise aussehen könnte? oder unter berücksichtigung des einsatzes von wordpress? so etwas wäre genial und du weisst vielleicht, wo ich anfangen könnte.
    viele grüße aus baden ;-)
    daniel

Schreibe eine Antwort