Was ist responsives Design? Eine Website, die auf jeden Bildschirm passt, einfach erklärt

design · Oct 6, 2026 · 5 min read

Responsive Design ist die Antwort auf eine einfache Tatsache: Ihre Website wird auf Bildschirmen von einem 5-Zoll-Telefon bis zu einem 32-Zoll-Monitor gelesen, und Sie können nicht auswählen, welchen. Eine responsive Website ist eine Website, deren Layout sich an den Bildschirm anpasst, auf dem sie landet – Elemente werden neu angeordnet, in der Größe geändert und neu gestapelt –, anstatt einem Telefon eine verkleinerte Desktop-Seite bereitzustellen.

Es handelt sich nicht um eine App, die Sie herunterladen, keine separate mobile Website, keine Funktion zum Bestellen. Auf diese Weise wird seit über einem Jahrzehnt jede seriöse Website erstellt.

was technisch gesehen tatsächlich passiert

Die Seite enthält eine Stylesheet-Regel, die so alt ist wie das iPhone: das Viewport-Meta-Tag, das dem Telefon mitteilt: „Behandeln Sie sich in Originalgröße, fälschen Sie keinen Desktop“. dann führen CSS-Medienabfragen die Neuanordnung durch: Unterhalb dieser Breite stapeln Sie die beiden Spalten; die Speisekarte hinter einem Burger verstecken; Lassen Sie die Textspalte den gesamten Bildschirm nutzen. Jede Breite, an der sich das Layout ändert, wird als Haltepunkt bezeichnet, und eine gute Site hat nur wenige davon – das Layout fließt von selbst, Haltepunkte behandeln nur die tatsächlichen Unterbrechungen.

Aus diesem Grund kann eine Seite überall richtig aussehen: Es ist keine Zauberei und es gibt keine fünf Versionen. Es handelt sich um ein HTML-Dokument mit Regeln darüber, was bei jeder Größe zu tun ist.

warum Mobil nicht optional ist

Die Statistik, die alles entscheidet: Die meisten Besuche auf den meisten Websites kleiner Unternehmen erfolgen über Telefone. Für lokale Unternehmen – Restaurants, Salons, Gewerbe – ist es nicht einmal annähernd so. Der Besucher am Telefon ist auch der Besucher mit Absicht: Er hat auf der Straße gesucht, er entscheidet jetzt.

und eine Seite, die lediglich auf einem Telefon sichtbar ist, ist nicht die Messlatte. Google bewertet die mobile Version Ihrer Seite – den tatsächlichen Inhalt, die tatsächliche Geschwindigkeit – und die Seitengeschwindigkeit ist der Punkt, an dem Telefone am wenigsten verzeihen, denn ein langsames Telefon bei mobilen Daten ist der schlimmste Fall, dem Ihre Website jemals ausgesetzt sein wird. Die anzustrebenden Zahlen und warum sie wichtig sind, finden Sie in core web vitals explained.

So erkennen Sie, ob Ihre Website responsive ist

dreißig Sekunden, kein Werkzeug:

  1. Öffnen Sie die Website auf Ihrem Telefon. Können Sie den Text lesen, ohne zum Zoomen zu kneifen? Können Sie ohne Frustration auf das Menü, die Telefonnummer und die Formularfelder tippen?
  2. Ziehen Sie auf einem Computer das Browserfenster langsam schmaler. Ordnet sich das Layout neu – oder schrumpft es, bis Sie ein Mikroskop benötigen?
  3. Der Hinweis auf die nicht reagierende Website: eine horizontale Bildlaufleiste oder Inhalt, der über den Rand hinausragt.

Sollte eines davon fehlschlagen, wurde die Website zuerst für den Desktop erstellt und dann aufgegeben, sodass sie für mobile Besucher genau so gelesen wird, wie sie für Sie jetzt gelesen wird.

was es bedeutet, wenn Sie eine Website in Auftrag geben

Verantwortungsfrage, eine Zeile: Wird das Design für Telefon und Desktop geliefert und was wird getestet? Ein ernsthafter Designer zeigt zuerst das Telefonlayout – nicht als Stilvorliebe, sondern weil das Entwerfen im engsten Rahmen zunächst Entscheidungen erzwingt und es einfacher ist, in den Raum zu expandieren, als ihn zu vollstopfen. Umgekehrt – entwerfen Sie eine 27-Zoll-Desktop-Seite und „passen Sie sie an“ – entstehen beengte, kaputte mobile Websites. Die gleiche Disziplin zeigt sich in meiner Arbeitsweise, beschrieben in ux design tactics i use on my website.

Und wenn Sie einen Builder verwenden: Vorlagen reagieren standardmäßig, Ihr Risiko liegt also nicht im Framework, sondern in dem, was Sie hineingesteckt haben – riesige Bilder und ununterbrochene Absätze mit 800 Wörtern reagieren nicht auf den Inhalt, was auch immer das CSS sagt.

FAQ: die Fragen, die ich tatsächlich bekomme

Ist eine separate mobile Website (m. Version) besser?

Nein, und die Branche hat es aufgegeben: zwei URLs, zwei Inhaltssätze, doppelter Wartungsaufwand, und Google hat vor Jahren gesagt, dass es Responsive bevorzugt. Wenn eine Agentur im Jahr 2026 eine mobile Website vorschlägt, fragen Sie sie, warum sie ein Jahrzehnt hinterherhinkt.

Benötige ich stattdessen eine App?

Nein, für fast jedes kleine Unternehmen ist der Browser bereits installiert und Ihre URL befindet sich bereits in der Tasche. Bevor Sie überhaupt die App-Frage stellen, benennen Sie zuerst die Aufgabe der Website – der ehrliche Rahmen ist in how do i make a website.

Kosten Responsive Design extra?

es ist die Grundlinie. Wenn jemand „responsive“ als Add-on anpreist, bepreist er ohnehin das Jahrzehnt, das Ihnen zusteht.