Vom sogenannten „Responsive Webdesign“ hat inzwischen schon fast jeder irgendwie einmal gehört, oder? Wenn man selbst eine Website erstellt oder wartet, muss man sich in der heutigen Zeit der zahllosen Bildschirmgrößen aber auch der Frage stellen: Verwendet meine Website eigentlich responsive Webdesign? Und wenn nicht, dann stellt sich die Frage:
Wie erreiche ich responsive Webdesign?
Die einfachste Möglichkeit ist durch Verwendung eines CMS oder Baukastensystems, das die eigene Website automatisch an die Bildschirmgröße und das Endgerät des Besuchers anpasst. Manchmal muss diese Funktion in einem Theme oder Baukasten erst aktiviert werden. Alternativ muss man seine Website mit HTML und CSS selbst geeignet aufbauen.
Nach dieser kurzen Antwort sollen aber die Details nicht zu kurz kommen.
Was ist eigentlich responsive Webdesign?
Responsive Webdesign sorgt dafür, dass eine Website auf verschiedenen Endgeräten mit verschiedenen Displaygrößen jeweils ideal dargestellt wird.
Dabei ändert sich fast immer das Layout, d.h. die Elemente auf der Seite werden so umgeordnet, dass sie gut sichtbar sind und z.B. nacheinander statt nebeneinander angezeigt werden.
Weiters ändern sich meist die Schriftgröße, die Behandlung der verwendeten Bilder und der Header. Prominent wird z.B. im Header der Website das Menü auf einem Smartphone nicht voll angezeigt, sondern durch ein Symbol mit drei parallelen Linien untereinander dargestellt.
Die Darstellung ändert sich für verschiedene Elemente stufenlos mit der Größe des Displays, das Layout ändert sich bei verschiedenen vorgegebenen Displaygrößen, die den Gerätetypen Smartphone, Tablet und PC entsprechen. Dabei kann sich z.B. die Anzahl der verwendeten Spalten in einer Zeile ändern oder die Anzahl der Bilder, die nebeneinander in einer Gallery angezeigt werden.
Ziel des responsive Design ist unter anderem, zu kleine Schrift zu vermeiden und Links, die auf einem PC mit dem Mauszeiger relativ zielgenau geklickt werden können, auch auf dem Touch-Display eines Smartphones mit dem Finger einfach antippbar zu machen.
Anders beschrieben: Jeder, der bereits einmal auf einem Smartphone eine Website ohne responsive Webdesign bedienen musste, hat erlebt, dass das eine sehr schlechte Benutzerfreundlichkeit bedeuten kann. Auch deshalb gehört responsive Webdesign zu meinen 21 unverzichtbaren Funktionen einer modernen Website.
Wie weiß ich, ob meine Website responsive Webdesign unterstützt?
Dazu sollte man die eigene Website auf verschiedenen Geräten mit verschiedenen Bildschirmgrößen und Auflösungen aufrufen, z.B. Smartphone, Laptop, PC, Tablet, Smart-TV und dem Smartphone einer Bekannten. Wenn die Darstellung überall exakt gleich aussieht (nur verschieden geschrumpft), hat man kein responsive Webdesign.
Wenn hingegen die Darstellung an des Gerät angepasst ist, dann reagiert das Design zumindest auf die verschiedenen Bildschirmgrößen. Das kann dann zwar trotzdem noch grausam aussehen, aber man hat wenigstens den Ansatz von responsive Webdesign auf der eigenen Website gefunden.
Ein weiterer Test ist, auf dem Smartphone oder Tablet beim Betrachten einer Website das Gerät von aufrecht auf quer zu drehen und wieder zurück. Auch dabei sollte sich die angezeigte Website bei responsive Design dem Wechsel entsprechend anpassen.
Als Beispiele habe ich auf meinem Smartphone zwei Screenshots des österreichischen Nachrichtenportals orf.at gemacht. Das linke Bild zeigt die Desktop-Version, das rechte die mobile Version.
Die Desktop-Version der Website orf.at
Die mobile Version der Website orf.at
Wie finde ich heraus, ob meine Website ein CMS, einen Baukasten oder sonst etwas benutzt?
Hinweise auf Herkunft und verwendetes System beim Erstellen einer Website finden sich oft im Quellcode. Dazu klickt man z.B. in Chrome oder Firefox mit der rechten Maustaste auf den Hintergrund einer Seite und geht zu „Quelltext anzeigen“ oder „View Page Source“.
Dort finden sich im HTML Header eventuell Informationen über Author der Website, verwendete Software, und eben auch das CMS oder den Baukasten, wenn es sich denn um so etwas handelt. Am besten öffnet man für den Quellcode ein Suchfenster und tippt, der Reihe nach, die folgenden Wörter ein, um zu sehen, ob etwas davon im Quellcode der Seite steht:
- author
- cms
- wordpress
- joomla
- typo3
- wix
- jimdo
- sonstige Wörter, die man als CMS oder Autoren im Verdacht hat.
Wenn man für einen dieser Einträge etwas findet, dann hat man höchstwahrscheinlich den Ursprung der Seite identifiziert.
Meine WordPress Website hat kein responsive Webdesign. Was tun?
Bei WordPress hat man den Vorteil, dass man mit dem meistgenutzten CMS der Welt arbeitet. Trends wie responsive Webdesign sind längst zentraler Bestandteil der Denkweise der Developer der Themes und von WordPress selbst. Daher sollte man sich von vornherein ein Theme aussuchen, das responsive ist, oder schnellstens zu einem solchen wechseln.
Auch über Plugins konnte man vor einiger Zeit noch mobile Versionen der eigenen WordPress-Website erzeugen lassen, diese Zeiten sollten aber vorbei sein. Also: Wer noch kein Theme hat, das responsive reagiert, unbedingt bald umsteigen.
Wenn die Website nicht responsive reagiert, obwohl sie das eigentlich sollte oder auf dem Smartphone plötzlich ungewohnt, seltsam oder irgendwie zerstört aussieht, kommen folgende Situationen als Ursache in Frage:
- Konflikt des Themes mit einem Plugin. Ich habe so etwas z.B. mit dem Jetpack-Plugin von wordpress.com erlebt, das eine Option zur Aktivierung eines „mobilen“ Themes hat. Da die Darstellung einer Website im Browser durch einen Style-Sheet (CSS) bestimmt wird und jedes Theme bzw. Plugin eigene Style-Sheets benutzt, können sich diese durchaus gegenseitig überschreiben. Dabei können sehr seltsame Darstellungen herauskommen.
- Eigener CSS-Code, der Theme- oder Plugin-CSS überschreibt. Falls man nicht mit zusätzlichen CSS-Dateien oder Befehlen arbeitet, scheidet diese Möglichkeit aus.
- Eingebundene Teile der Website (Werbeeinblendungen, externe Inhalte) können schlecht oder nicht für mobile Endgeräte optimiert sein. Dadurch kann es zur Störung der Darstellung kommen.
Als Lösungen für solche Probleme kann daher die folgenden Schritte setzen:
- Nachsehen, ob eins der Plugins Einstellungen zum mobilen Design hat. Wenn ja, diese Einstellungen deaktivieren und testen, ob das die Probleme bei der Darstellung durch das bereits responsive eingestellte Theme behebt.
- Nachsehen, ob man an irgendeiner Stelle selbst CSS-Befehle eingegeben hat. Wenn das der Fall ist, die Befehle temporär entfernen und testen, ob sich etwas ändert. Danach kann man sie wieder aktivieren.
- Wenn das Problem bestimmte eingebundene Inhalte betrifft oder Seiten, auf denen externe Inhalte eingebunden sind, diese Inhalte testhalber durch ein selbstgemachtes Bild jenes Inhalts (z.B. über einen Screenshot) ersetzten und testen, ob das Darstellungsproblem bestehen bleibt.
Wer Probleme beim Installieren oder Überprüfen von Plugins in WordPress hat, findet vielleicht Hilfe in meinem Artikel Warum kann ich bei WordPress keine Plugins installieren?
Meine Joomla! Website hat kein responsive Webdesign. Was tun?
Auch bei Joomla! sollte es inzwischen keine Probleme mit responsive Webdesign geben, wenn man ein entsprechendes Theme verwendet. Die Probleme, die dennoch auftreten können, haben die gleichen Ursachen wie bei WordPress: Konflikte zwischen Theme und Plugins und eigene CSS-Einstellungen.
Die Ähnlichkeit zu WordPress ist keine Überraschung, da beide CMS das gleiche System benutzen: Mit PHP-Code werden HTML- und CSS-Dateien erstellt, und die Struktur des PHP-Systems hat ein Kernsystem und Plugins.
Meine Typo3 Website hat kein responsive Webdesign. Was tun?
Auch bei Typo3 sollte es inzwischen keine Probleme mit responsive Webdesign geben, wenn man ein entsprechendes Design-Template verwendet. Die Probleme, die dennoch auftreten können, haben die gleichen Ursachen wie bei WordPress: Konflikte zwischen Templates und Extensions und eigene CSS-Einstellungen.
Wieder überrascht die Ähnlichkeit zu WordPress und Joomla! nicht. Letztlich hat man es immer mit den am Ende entstehenden CSS Dateien und den darin eventuell entstandenen Konflikten zu tun.
Meine Jimdo Website hat kein responsive Webdesign. Was tun?
Bei Jimdo verwendet man für seine Website ein „Template“, das die Darstellung der Website auf verschiedenen Displays bestimmt. Woher weiß man, ob das gewählte Template responsive ist? Wenn es den Namen einer Stadt trägt, dann ist es auch responsive. Hat es einfach eine Codenummer als Name, dann ist es alt und vermutlich nicht responsive.
Trotzdem gibt es für die alten Templates bei Jimdo auch eine mobile Version. Diese ist allerdings nicht wirklich responsive, sondern separat und für Smartphones gemacht. Im so einem Fall lohnt sich also der Wechsel auf ein neueres Template, das responsive Webdesign unterstützt.
Meine Wix Website hat kein responsive Webdesign. Was tun?
Wix-Websites sind vom Grundkonzept her mit responsive Webdesign ausgestattet. Es liegt jedoch an der Seitenstruktur, die der Website-Betreiber selbst zusammenstellt, ob die Darstellung auf verschiedenen Displays tatsächlich ideal funktioniert. Wer mit voll-breiten (full-width) Elementen arbeitet, sollte auf der sicheren Seite sein.
Generell empfiehlt sich beim Aufbau der Seite, auf voll-breite Elemente, eine übersichtliche Blockstruktur und Boxen für einzelne Elemente zu setzen, um Darstellungsfehler zu vermeiden und eine insgesamt ansprechende Darstellung zu erreichen.
Bei allen gratis-Webspace-Angeboten sollte man sich überdies immer bewusst sein, dass die Nutzung eines solchen nicht unproblematisch ist. Über die Gründe habe ich einen anderen Artikel zum Thema 23 ernste Risiken einer gratis-Website geschrieben.
Meine Website wurde mit dem Baukastensystem meines Hosting-Providers erstellt und hat kein responsive Webdesign. Was tun?
Hier muss man gezielt nach dem Thema „responsive“ in der Dokumentation des jeweiligen Baukastensystems nachsehen. Responsive Webdesign sollte in jedem modernen Baukastensystem bereits Standard sein. Jedoch liegt es auch an der Struktur der Seite, ob die Darstellung auf verschiedenen Displays gut funktioniert.
Probleme behebt man am besten anhand der Hinweise, wie sie oben für Wix-Websites beschrieben sind.
Meine Website hat vor Jahren eine Webagentur erstellt, sie hat aber kein responsive Webdesign. Was tun?
Das kommt darauf an, womit die Webagentur gearbeitet hat. Möglichkeiten sind ein Agentur-eigenes CMS, Bestimmte Software für Design und Erzeugung von HTML- und CSS-Dateien, sowie reines HTML und CSS. Kontakt mit der Agentur sollte hier auf jeden Fall Klarheit schaffen und Möglichkeiten aufzeigen.
Eventuell gibt es z.B. inzwischen ein Update des Agentur-eigenen CMS, das responsive ist. Alternativ kann man natürlich auch jemand anderen beauftragen, die Website in WordPress nachzubauen. Das gilt auch für andere Fälle alter Websites und ist von der Unabhängigkeit, Flexibilität und den Erweiterungsmöglichkeiten her eigentlich kaum zu übertreffen.
Im Zweifels- oder Notfall bietet sich hier der Link auf meine Ressourcen-Seite zum Thema Webdesign an.
Meine normale HTML Website hat kein responsive Webdesign. Was tun?
Wer eine Website nur als HTML-Dateien vorliegen hat, hat zwei Möglichkeiten: Entweder man wechselt mit der Website auf ein CMS (empfohlen). Oder man muss die zugehörigen CSS Dateien so ausbauen, dass sie mit verschiedenen Geräten und Displays gut zurecht kommen.
Die zweite Variante würde ich mir persönlich nicht mehr antun. Ich bin der Meinung, dass über lange Jahre von einer Community von Developern entwickelte Lösungen wie WordPress im Normalfall nicht zu schlagen sind. Ich sehe aber ein, dass es Fälle gibt, in denen man die ultimative Kontrolle über alle eingesetzten Dateien der Website braucht. In so einem Fall ist die Anpassung der CSS-Dateien der einzige Weg, um responsive Webdesign zu erreichen.
Für alle, die sich fürs Website-Erstellen interessieren, hier noch ein Link zu meinem Artikel 5 kritische erste Schritte beim Website-Erstellen.
