Wie erreiche ich responsive Webdesign?

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 aufrufen, z.B. Smartphone, Tablet, Laptop 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.

Schneller geht der erste Test am Computer: Ziehen Sie das Browserfenster langsam schmaler. Bei responsive Webdesign ordnet sich die Seite dabei um, statt einfach abgeschnitten zu werden oder einen horizontalen Scrollbalken zu bekommen. Noch genauer zeigen es die Entwicklerwerkzeuge des Browsers: In Chrome öffnen Sie sie mit der Taste F12 und schalten dann über das Smartphone-Symbol die Geräteansicht ein, in der Sie Bildschirmbreiten verschiedener Smartphones und Tablets auswählen können.

Einen Test gibt es dagegen nicht mehr: Den Bericht zur Nutzerfreundlichkeit auf Mobilgeräten in der Google Search Console und Googles separaten Test auf Optimierung für Mobilgeräte hat Google am 1. Dezember 2023 eingestellt. Anleitungen, die darauf verweisen, sind veraltet.

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.

Worauf muss ich beim responsive Webdesign achten?

Ein Theme, das sich „responsive“ nennt, ist ein guter Anfang. Ob Ihre Website auf dem Smartphone wirklich gut funktioniert, hängt aber auch von Ihren Inhalten ab. Die wichtigsten Punkte:

• Der Viewport-Tag: Im Kopf jeder Seite muss <meta name="viewport" content="width=device-width"> stehen, sonst stellt der Smartphone-Browser die Seite wie auf einem breiten Bildschirm dar und verkleinert sie (MDN). Jedes aktuelle WordPress-Theme setzt ihn; bei selbst gebauten oder sehr alten Websites lohnt ein Blick in den Quelltext.
• Kein seitliches Scrollen: Die Richtlinien für barrierefreie Webinhalte (WCAG 2.2) verlangen, dass Inhalte bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen lesbar sind (Kriterium 1.4.10, „Reflow“). Typische Störenfriede sind breite Tabellen, eingebettete Inhalte mit fester Breite und Bilder, die in Pixeln statt in Prozent eingebunden sind. Eine breite Tabelle darf innerhalb ihres Kastens seitlich scrollen – die ganze Seite nicht.
• Genug Platz für den Finger: Links und Schaltflächen sollten mindestens 24 × 24 CSS-Pixel groß sein oder genug Abstand zueinander haben (WCAG 2.2, Kriterium 2.5.8). Eng gesetzte Links in der Fußzeile oder im Menü sind auf dem Smartphone die häufigste Fehlerquelle.
• Lesbare Schrift ohne Zoomen und Zeilen, die nicht über den Bildschirmrand hinauslaufen.
• Bilder in passender Größe: Ein Smartphone muss kein Bild in Desktop-Breite laden. WordPress liefert hochgeladene Bilder in mehreren Größen aus, wenn Sie sie über die Mediathek einbinden – mehr in Bilder in WordPress optimieren.
• Auf einem echten Smartphone testen: Die Geräteansicht im Browser ist ein guter Anfang, aber erst auf dem Telefon merken Sie, ob sich ein Menü bequem mit dem Daumen öffnen lässt.

Responsive Webdesign ist auch für Google wichtig: Google indexiert und bewertet Websites anhand ihrer mobilen Version (Google Search Central). Und inzwischen kommt weltweit rund die Hälfte aller Seitenaufrufe von Mobilgeräten, in Deutschland und Österreich knapp die Hälfte (StatCounter, Durchschnitt Oktober 2025 bis September 2026).

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, etwa einem Plugin, das eine eigene „mobile Ansicht“ mitbringt. Da die Darstellung einer Website im Browser durch Stylesheets (CSS) bestimmt wird und jedes Theme bzw. Plugin eigene Stylesheets 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 bestimmt die gewählte Vorlage, wie die Website auf verschiedenen Displays aussieht. Jimdo nennt „Optimiert für Mobilgeräte“ als Merkmal aller Tarife, auch des kostenlosen (Jimdo-Preisseite, Oktober 2026).

Ist Ihre Jimdo-Website schon viele Jahre alt und sieht auf dem Smartphone trotzdem nicht gut aus, läuft sie vermutlich noch mit einer älteren Vorlage. In so einem Fall lohnt sich der Wechsel auf eine aktuelle Vorlage; fragen Sie im Zweifel den Jimdo-Support, welche Möglichkeiten Ihr Tarif bietet.

Meine Wix Website hat kein responsive Webdesign. Was tun?

Bei Wix kommt es darauf an, mit welchem Editor die Website gebaut wurde. Im klassischen Wix Editor erzeugt Wix aus Ihrer Desktop-Version automatisch eine mobile Version; Desktop und Mobil sind dabei zwei Ansichten derselben Website, und die mobile Ansicht können Sie im Editor über das Mobil-Symbol nachbearbeiten. Mit dem Studio Editor gebaute Websites sind dagegen responsive und arbeiten mit Breakpoints, also Gestaltungsstufen für verschiedene Bildschirmbreiten (Wix-Hilfe). In beiden Fällen liegt es an der Seitenstruktur, die Sie selbst zusammenstellen, ob die Darstellung auf verschiedenen Displays tatsächlich gut funktioniert.

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 Gratis-Website: 10 ernste Risiken, die Sie vorher kennen sollten 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 – worauf Sie dabei achten sollten, steht in Wer kann mir eine Homepage erstellen?. 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.

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.