Die IMAREAL-Website wird auf Geräten mit sehr unterschiedlichen Bildschirmgrößen verwendet – vom großen Desktop-Monitor über Tablets bis zum Smartphone. Responsive Design bedeutet, dass sich Aufbau und Darstellung einer Seite automatisch an die verfügbare Bildschirmbreite anpassen. Für Redakteure ist dabei vor allem wichtig, Inhalte so aufzubauen, dass sie auf unterschiedlichen Bildschirmgrößen funktionieren.

Desktop, Tablet und Smartphone#

Auf einem großen Bildschirm können mehrere Inhalte problemlos nebeneinander dargestellt werden. Auf einem Smartphone steht dafür deutlich weniger Platz zur Verfügung. Ein typisches Beispiel ist eine Row mit zwei Columns:

Desktop:

[ Text ] [ Bild ]

Auf einem kleineren Bildschirm können diese Columns untereinander angeordnet werden:

[ Text ]
[ Bild ]

Die Seite muss dafür normalerweise nicht für jedes Gerät separat erstellt werden. Das responsive Verhalten wird grundsätzlich durch die Website und WPBakery gesteuert.

Reihenfolge der Inhalte beachten#

Bei mehrspaltigen Layouts sollte bereits beim Aufbau berücksichtigt werden, wie die Inhalte aussehen, wenn die Columns untereinander dargestellt werden.

Beispielsweise:

Desktop:
[ Text ] [ Bild ]

kann am Smartphone zu:

[ Text ]
[ Bild ]

werden.

Die Reihenfolge der Columns ist daher nicht nur für die Desktop-Darstellung relevant. Besonders bei komplexeren Layouts sollte darauf geachtet werden, dass der Inhalt auch von oben nach unten gelesen noch logisch aufgebaut ist.

Responsive Einstellungen in WPBakery#

WPBakery bietet für Rows und Columns verschiedene Einstellungen, mit denen das Verhalten auf unterschiedlichen Bildschirmgrößen beeinflusst werden kann. Damit lassen sich beispielsweise Spaltenbreiten oder andere Layout-Eigenschaften für bestimmte Gerätegrößen anpassen. Solche Einstellungen sollten allerdings nur verwendet werden, wenn das normale responsive Verhalten nicht zum gewünschten Ergebnis führt. Bei bestehenden Seiten ist es sinnvoll, sich an vergleichbaren Bereichen zu orientieren und deren Einstellungen zu übernehmen.

Elemente ausblenden#

WPBakery bietet die Möglichkeit, bestimmte Rows, Columns oder Elemente abhängig von der Bildschirmgröße auszublenden. Damit kann beispielsweise ein Element am Desktop sichtbar sein, auf einem Smartphone jedoch nicht angezeigt werden. Diese Funktion sollte gezielt eingesetzt werden. Das Ausblenden wichtiger Inhalte ist keine gute Lösung für ein Layoutproblem. Wenn ein Inhalt für Besucher relevant ist, sollte zunächst versucht werden, ihn so aufzubauen, dass er auf allen Bildschirmgrößen sinnvoll dargestellt werden kann.

Keine eigenen Mobilseiten erstellen#

In der Regel ist es nicht notwendig, eine Seite oder einen kompletten Inhaltsbereich zusätzlich in einer eigenen Smartphone-Version anzulegen. Doppelte Inhalte erschweren die spätere Pflege: Wird ein Text geändert, müsste die Änderung an mehreren Stellen vorgenommen werden. Die vorhandenen Möglichkeiten des responsiven Layouts sollten daher bevorzugt werden.

Abstände auf kleinen Bildschirmen#

Abstände, die auf einem großen Bildschirm gut aussehen, können auf einem Smartphone zu groß wirken. Das gilt insbesondere für individuell eingestellte Padding- und Margin-Werte. Deshalb sollten zusätzliche Abstände sparsam verwendet und nicht eingesetzt werden, um ein Layout nur für eine bestimmte Bildschirmgröße „zurechtzurücken“.

Darstellung kontrollieren#

Nach Änderungen an Layout, Spalten, Bildern oder Abständen sollte die Seite auf unterschiedlichen Bildschirmgrößen kontrolliert werden.

Besonders wichtig sind:

• Reihenfolge der Inhalte
• Lesbarkeit von Texten
• Größe und Darstellung von Bildern
• Abstände zwischen Bereichen
• Buttons und Links
• mehrspaltige Layouts
• ausgeblendete Elemente

Eine erste Kontrolle kann über die entsprechenden Vorschau- bzw. Entwicklerfunktionen des Browsers erfolgen. Bei wichtigen oder umfangreichen Änderungen empfiehlt sich zusätzlich ein Test auf einem echten Smartphone oder Tablet.

Grundregel#

Eine Seite sollte möglichst so aufgebaut sein, dass sie ohne spezielle Korrekturen auf unterschiedlichen Bildschirmgrößen funktioniert. Responsive Einstellungen und das gezielte Ausblenden von Elementen sind zusätzliche Werkzeuge – sie sollten nicht notwendig sein, um einen grundsätzlich ungeeigneten Seitenaufbau zu reparieren.