Was ist Responsives Design und wie wird es umgesetzt?

Was ist Responsives Design, warum ist es wichtig und wie wird es Schritt für Schritt umgesetzt? Der praktische Leitfaden für mobilfreundliche, schnelle und SEO-starke Websites.

Die große Mehrheit der Internetnutzer greift heute nicht mehr über den Desktop-Computer, sondern über Smartphones, Tablets und Geräte mit den unterschiedlichsten Bildschirmgrößen auf Websites zu. Diese Realität macht es zwingend erforderlich, dass Ihre Website nicht nur auf einem großen Monitor, sondern auch auf einem winzigen Bildschirm, der in die Handfläche passt, einwandfrei aussieht. Genau an dieser Stelle kommt das Responsive Design ins Spiel. Responsives Design ist ein gestalterischer Ansatz, bei dem sich eine Website automatisch an das Gerät, die Bildschirmgröße und die Ausrichtung des Nutzers anpasst und so unter allen Bedingungen ein lesbares und nutzbares Erlebnis bietet.

Vor fünfzehn Jahren erstellten die meisten Unternehmen noch eine für den Desktop gestaltete Website und parallel dazu eine separate Seite für mobile Nutzer. Dieser Ansatz war sowohl kostspielig als auch schwer zu verwalten. Heute hingegen ist responsives Design, das mit einer einzigen Codebasis sämtliche Geräte bedient, zur Standardmethode der modernen Webentwicklung geworden. Wenn ein Nutzer Ihre Website über das Smartphone öffnet, sollten sich die Menüs bequem mit dem Finger antippen lassen, Bilder nicht über den Bildschirm hinausragen und Texte ohne Heranzoomen lesbar sein.

In diesem Leitfaden behandeln wir Schritt für Schritt, was responsives Design ist, warum es so entscheidend ist und wie man es von Grund auf umsetzt. Wir erklären die technischen Konzepte ohne unnötige Verkomplizierung, sodass sowohl Einsteiger als auch erfahrene Entwickler davon profitieren können. Am Ende des Beitrags verfügen Sie über das grundlegende Wissen und die praktischen Tipps, die Sie benötigen, um in Ihrem eigenen Projekt eine responsive Struktur aufzubauen.

Was ist Responsives Design?

Responsives Design bedeutet, in der einfachsten Definition, dass sich eine Webseite flexibel an den jeweils verwendeten Bildschirm anpasst. Dieses Konzept, das im Deutschen auch als „responsives Webdesign" bezeichnet wird, wurde erstmals im Jahr 2010 von dem Webdesigner Ethan Marcotte populär gemacht. Die Grundidee lautet: Mit einem einzigen HTML-Dokument und einer flexiblen CSS-Struktur dafür zu sorgen, dass die Seite sowohl auf einem 320 Pixel breiten Smartphone als auch auf einem 2560 Pixel breiten Monitor korrekt dargestellt wird.

Bei diesem Ansatz werden die Seitenelemente nicht mit festen Pixelwerten, sondern mit relativen Einheiten definiert. Eine Spalte ist also nicht „600 Pixel breit", sondern wird so eingestellt, dass sie „fünfzig Prozent der Bildschirmbreite" einnimmt. Wird der Bildschirm kleiner, schrumpft der Inhalt proportional mit; wird er größer, dehnt er sich aus. An bestimmten Haltepunkten wird das Layout dann vollständig neu organisiert; drei Spalten, die auf dem Desktop nebeneinander stehen, können auf dem Smartphone beispielsweise untereinander angeordnet werden.

Sie können sich responsives Design wie Wasser vorstellen. Egal in welches Gefäß Sie Wasser gießen, es nimmt die Form dieses Gefäßes an. Genauso fließt und ordnet sich responsives Design beim Inhalt an, egal auf welchen Bildschirm Sie ihn setzen – es passt sich der Form dieses Bildschirms an. Dank dieser Flexibilität kann eine einzige Website auf nahezu unbegrenzt vielen Geräten und Auflösungen ein einheitliches Erlebnis bieten.

Der Unterschied zum Adaptiven Design

Responsives Design wird häufig mit dem „adaptiven" (anpassbaren) Design verwechselt, doch handelt es sich um zwei unterschiedliche Ansätze. Beim adaptiven Design erstellt der Entwickler einige im Voraus vorbereitete, feste Layouts für bestimmte Bildschirmgrößen. Die Website erkennt das Gerät des Nutzers und zeigt das für dieses Gerät am besten geeignete feste Layout an. Beim responsiven Design hingegen gibt es ein einziges fließendes Layout, das sich bei jeder Bildschirmbreite kontinuierlich und nahtlos verändert.

In der Praxis erfordert der responsive Ansatz weniger Wartung und passt sich auch künftigen neuen Gerätegrößen automatisch an. Der adaptive Ansatz bietet zwar in manchen Fällen die Möglichkeit einer präziseren Optimierung für jedes einzelne Gerät, verlangt jedoch mehr Aufwand und ständige Aktualisierung.

Warum ist Responsives Design so wichtig?

Um die Bedeutung des responsiven Designs zu verstehen, genügt ein Blick auf die heutigen Internetnutzungsgewohnheiten. Weltweit kommt mehr als die Hälfte des Web-Traffics von mobilen Geräten. Wenn Ihre Website auf dem Smartphone nicht ordentlich aussieht, verlieren Sie einen erheblichen Teil Ihrer Besucher bereits in den ersten Sekunden. Im Folgenden betrachten wir Punkt für Punkt, warum responsives Design unverzichtbar ist.

Nutzererlebnis: Inhalte, die über den Bildschirm hinausragen, winzige Schriften und schwer antippbare Schaltflächen schrecken Besucher schnell ab. Eine responsive Website bietet auf jedem Gerät eine flüssige und komfortable Navigation.
Suchmaschinenoptimierung: Suchmaschinen bevorzugen mobilfreundliche Websites im Ranking. Durch den Ansatz der Mobile-First-Indexierung wird die mobile Version Ihrer Website für die Platzierung ausschlaggebend.
Eine einzige Codebasis: Mit einer einzigen Website zu arbeiten, statt eine separate mobile Seite zu verwalten, senkt sowohl die Entwicklungs- als auch die Aktualisierungskosten erheblich.
Konversionsraten: Nutzer, die auf dem Smartphone bequem einkaufen oder ein Formular ausfüllen können, kaufen mehr und registrieren sich häufiger. Ein schlechtes mobiles Erlebnis führt dagegen zu abgebrochenen Warenkörben.
Markenreputation: Eine Website, die auf jedem Gerät professionell aussieht, stärkt das Vertrauen in Ihre Marke.

Der Aufstieg des Mobile-First-Ansatzes

In der Vergangenheit gestalteten Designer zuerst die Desktop-Version und versuchten anschließend, diese auf kleine Bildschirme zu quetschen. Heute hingegen dominiert die „Mobile First"-Philosophie. Bei diesem Ansatz beginnt der Designprozess beim kleinsten Bildschirm, also beim Smartphone, und der Inhalt wird mit wachsendem Bildschirm angereichert. Mobile-First-Denken zwingt Sie dazu, sich auf die wirklich wichtigen Inhalte zu konzentrieren, denn auf einem kleinen Bildschirm ist jeder Pixel wertvoll. Diese Disziplin sorgt für schlankere, schnellere und benutzerfreundlichere Websites.

Die grundlegenden Bausteine des Responsiven Designs

Damit eine Website wirklich responsiv sein kann, kommen mehrere grundlegende Techniken zusammen. Diese Bausteine zu verstehen, ist der Schlüssel zum Verständnis der Logik des responsiven Designs.

Flexibles Rastersystem (Fluid Grid)

Im traditionellen Design bestand eine Seite aus Spalten mit festen Pixelbreiten. Beim flexiblen Rastersystem hingegen werden die Breiten mit relativen Einheiten wie Prozent definiert. So schrumpfen oder wachsen die Spalten proportional mit, wenn sich die Bildschirmgröße ändert. Die beiden im modernen CSS am häufigsten verwendeten Werkzeuge zu diesem Zweck sind Flexbox und CSS Grid. Während sich Flexbox ideal für eindimensionale Layouts (Zeile oder Spalte) eignet, ist CSS Grid wie geschaffen für zweidimensionale (sowohl Zeilen als auch Spalten umfassende) komplexe Anordnungen.

Flexible Bilder (Fluid Images)

Bilder gehören zu den Elementen, die im responsiven Design am häufigsten Probleme bereiten. Ein Bild mit fester Größe kann auf einem kleinen Bildschirm überlaufen und eine horizontale Bildlaufleiste erzeugen. Um dies zu verhindern, gibt man Bildern die Regel max-width: 100%; so wird das Bild niemals breiter als sein Container. In modernen Projekten wird zudem mithilfe von srcset und dem <picture>-Element jedem Gerät ein Bild in unterschiedlicher Auflösung bereitgestellt, was sowohl die Bildqualität als auch die Ladegeschwindigkeit optimiert.

Media Queries (Medienabfragen)

Media Queries sind das Herzstück des responsiven Designs. Sie ermöglichen es, innerhalb von CSS unterschiedliche Stile für bestimmte Bildschirmbedingungen zu definieren. Sie können beispielsweise Regeln wie „wenn die Bildschirmbreite kleiner als 768 Pixel ist, zeige das Menü vertikal an" schreiben. Die Bildschirmbreiten, bei denen diese Regeln greifen, werden als „Haltepunkte" (Breakpoints) bezeichnet. Gut gewählte Haltepunkte ermöglichen es, dass sich Ihre Website auf jedem Gerät elegant anpasst.

Das Viewport-Meta-Tag

Mobile Browser rendern eine Seite standardmäßig in Desktop-Breite und verkleinern sie anschließend; dies führt dazu, dass Texte zu klein zum Lesen erscheinen. Um dies zu verhindern, sollte sich im <head>-Bereich jeder responsiven Website folgende Zeile befinden:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ohne dieses Tag funktionieren Ihre Media Queries nicht wie erwartet. Die Hauptursache der meisten Probleme mit der mobilen Anpassung ist diese eine vergessene oder falsch geschriebene Zeile.

Wie wird Responsives Design umgesetzt? Schritt-für-Schritt-Anleitung

Gehen wir nun von der Theorie zur Praxis über. Indem Sie die folgenden Schritte befolgen, können Sie von Grund auf das Gerüst einer responsiven Website erstellen.

Fügen Sie das Viewport-Meta-Tag hinzu. Platzieren Sie zuallererst das Viewport-Tag im Kopfbereich Ihres HTML-Dokuments. Dies ist der erste und grundlegendste Schritt, der dafür sorgt, dass mobile Browser die Seite im richtigen Maßstab anzeigen.
Gestalten Sie nach dem Mobile-First-Prinzip. Schreiben Sie Ihre Stile zuerst für den kleinsten Bildschirm. Die grundlegenden Stile sollen ohne jede Media Query auf allen Geräten gelten; fügen Sie anschließend mit min-width-basierten Media Queries Verbesserungen hinzu, während der Bildschirm größer wird.
Verwenden Sie relative Einheiten. Bevorzugen Sie bei Breite, Innenabstand (Padding) und Rändern statt Pixeln flexible Einheiten wie Prozent, em, rem, vw und vh. Die Verwendung von rem bei Schriftarten ist insbesondere im Hinblick auf die Barrierefreiheit wichtig.
Setzen Sie auf flexible Layout-Werkzeuge. Verwenden Sie für die Seitenanordnung Flexbox und CSS Grid. Diese Werkzeuge erleichtern es erheblich, dass sich Inhalte automatisch an den verfügbaren Raum anpassen und neu anordnen.
Legen Sie Haltepunkte am Inhalt aus fest. Statt bestimmte Gerätemodelle anzuvisieren, fügen Sie einen Haltepunkt genau dort ein, wo Ihr Design auseinanderbricht. Ändern Sie das Layout, sobald der Inhalt schlecht auszusehen beginnt; dieser Ansatz passt sich auch künftigen Geräten an.
Machen Sie Bilder und Medien flexibel. Wenden Sie auf alle Bilder die Regeln max-width: 100% und height: auto an. Verwenden Sie auch für Videos und eingebettete Inhalte proportionale Container.
Optimieren Sie die Touch-Interaktion. Schaltflächen und Links sollten groß genug sein, um bequem mit dem Finger antippbar zu sein. Die allgemein anerkannte Regel besagt, dass Touch-Ziele mindestens 44 Pixel groß sein sollten.
Testen Sie auf echten Geräten. Der Geräte-Simulator in den Entwicklertools des Browsers ist ein guter Anfang, doch testen Sie nach Möglichkeit auch auf echten Smartphones und Tablets. Emulatoren spiegeln das tatsächliche Erlebnis nicht immer vollständig wider.

Ein einfaches Media-Query-Beispiel

Das folgende Beispiel zeigt, wie eine Mobile-First-Struktur aufgebaut wird. Zuerst wird der grundlegende mobile Stil definiert, anschließend die Anpassung für große Bildschirme:

/* Grundstil für Mobilgeräte */
.kapsayici {
  display: flex;
  flex-direction: column;
}

/* Für Tablets und größer */
@media (min-width: 768px) {
  .kapsayici {
    flex-direction: row;
  }
}

Bei dieser Struktur werden die Boxen auf kleinen Bildschirmen untereinander angeordnet, während sie auf Bildschirmen ab 768 Pixeln nebeneinander erscheinen. Viele komplex aussehende responsive Layouts bestehen tatsächlich nur aus dem schichtweisen Aufeinanderlegen dieser einfachen Logik.

Häufige Haltepunkte und Gerätegrößen

Auch wenn Haltepunkte je nach Projekt und Inhalt variieren, gibt es einige Referenzbereiche, auf die in der Branche häufig zurückgegriffen wird. Die folgende Tabelle fasst die gängigsten Gerätekategorien und die ihnen entsprechenden typischen Breiten zusammen. Betrachten Sie diese Werte nicht als starre Regeln, sondern als Ausgangspunkt.

Gerätekategorie	Typischer Breitenbereich	Häufig verwendeter Haltepunkt
Kleine Smartphones	320 - 480 Pixel	480 Pixel
Große Smartphones	481 - 767 Pixel	600 Pixel
Tablets	768 - 1023 Pixel	768 Pixel
Kleine Desktops / Laptops	1024 - 1439 Pixel	1024 Pixel
Große Desktops	1440 Pixel und mehr	1440 Pixel

Behalten Sie beim Blick auf diese Tabelle Folgendes im Hinterkopf: Die Gerätevielfalt nimmt mit jedem Jahr zu, und eine starre Geräteausrichtung wird zunehmend sinnlos. Die solideste Methode besteht darin, den Haltepunkt genau dort zu setzen, wo Ihr Design auseinanderbricht. Verengen Sie das Browserfenster langsam, beobachten Sie, wo der Inhalt ins Gedränge gerät, und ändern Sie an dieser Stelle das Layout.

Häufige Fehler im Responsiven Design

Selbst erfahrene Entwickler können beim responsiven Design gelegentlich Fehler machen. Sich dieser Fehler bewusst zu sein, ist der erste Schritt, um sie zu vermeiden.

Das Viewport-Tag vergessen: Der grundlegendste, aber zugleich am häufigsten auftretende Fehler. Ohne dieses Tag bringen Ihre Media Queries auf dem Smartphone nichts.
Nur im Emulator testen: Browser-Simulatoren spiegeln das echte Touch-Erlebnis, die tatsächliche Netzwerkgeschwindigkeit oder gerätespezifisches Verhalten nicht vollständig wider.
Zu viele Haltepunkte verwenden: Dutzende von Haltepunkten erzeugen einen CSS-Wust, der unmöglich zu warten ist. Bevorzugen Sie eine geringe Anzahl inhaltsorientierter und sinnvoller Haltepunkte.
Touch-Ziele zu klein lassen: Auf dem Smartphone gibt es keine Maus. Zu eng beieinanderliegende oder zu kleine Schaltflächen führen zu Fehlberührungen und Frustration.
Die Performance ignorieren: Mobile Nutzer verbinden sich häufig über langsamere Verbindungen. Riesige Bilder und unnötige Skripte können selbst ein responsives Design unbrauchbar machen.
Feste Höhen verwenden: Elementen eine feste Höhe zu geben, führt bei unterschiedlichen Bildschirm- und Inhaltsgrößen zu Überläufen. Lassen Sie, wo immer möglich, die Höhe vom Inhalt selbst bestimmen.

Performance und Barrierefreiheit

Responsives Design für reine visuelle Anpassung zu halten, ist ein verbreiteter Irrtum. Ein wirklich responsives Design umfasst auch Performance und Barrierefreiheit. Komprimieren Sie Ihre Bilder, verwenden Sie moderne Formate und verschieben Sie Inhalte, die auf dem Bildschirm nicht sichtbar sind, mittels Lazy Loading auf später. Definieren Sie außerdem die Schriftgrößen mit rem, damit sehbeeinträchtigte Nutzer den Text über die Browsereinstellungen vergrößern können. Achten Sie auf den Farbkontrast und testen Sie die Navigation per Tastatur. Eine Website, die für alle funktioniert, ist das beste responsive Design.

Mit welchen Werkzeugen sollten Sie arbeiten?

Sie können responsives Design von Grund auf mit reinem CSS schreiben, ebenso aber von verschiedenen Werkzeugen und Frameworks profitieren, die den Prozess beschleunigen. Welches Sie wählen, hängt vom Umfang Ihres Projekts und den Vorlieben Ihres Teams ab.

Reines CSS (Flexbox und Grid): Die flexibelste und leichteste Lösung. Moderne CSS-Funktionen sind leistungsfähig genug, um die meisten responsiven Anforderungen ohne externe Abhängigkeiten zu erfüllen.
CSS-Frameworks: Frameworks, die fertige Rastersysteme und Komponenten bieten, sparen beim Prototyping und in der schnellen Entwicklung Zeit. Sie können jedoch die Performance beeinträchtigen, indem sie mehr Stile laden als nötig.
Utility-First-Ansätze (auf Hilfsklassen basierend): Diese Methode, die es Ihnen ermöglicht, responsive Klassen direkt im HTML zu schreiben, erzeugt schnelle und konsistente Designs.
Browser-Entwicklertools: Der integrierte Gerätemodus der Browser ermöglicht es Ihnen, Ihr Design augenblicklich in verschiedenen Breiten zu testen; außerdem ist er für Performance- und Barrierefreiheitsprüfungen unbezahlbar.

Die goldene Regel bei der Werkzeugwahl lautet: Sorgen Sie dafür, dass das Werkzeug Ihnen dient, und nicht Sie dem Werkzeug. Für eine kleine Präsentationsseite ein schweres Framework zu laden, kann eine unnötige Performance-Last erzeugen. Wählen Sie die für Ihren Bedarf am besten geeignete, schlankste Lösung.

Testen und kontinuierliche Verbesserung

Eine Website responsiv zu machen, ist keine einmalige Aufgabe; es ist ein Prozess, der fortlaufende Überprüfung erfordert. Wenn neue Geräte auf den Markt kommen, Ihre Inhalte wachsen und sich die Nutzergewohnheiten ändern, müssen Sie Ihre Website erneut testen.

Führen Sie im Testprozess zunächst mit dem Geräte-Simulator in den Entwicklertools Ihres Browsers eine schnelle Überprüfung bei verschiedenen Breiten durch. Öffnen Sie die Website anschließend auf den echten Smartphones und Tablets, die Ihnen zur Verfügung stehen; beobachten Sie das Touch-Verhalten, den Scroll-Fluss und die Ladegeschwindigkeit der Seite. Testen Sie nach Möglichkeit sowohl im Hoch- als auch im Querformat, denn wenn Nutzer ihr Gerät drehen, kann das Layout auseinanderbrechen.

Nutzen Sie zur Messung der Seitengeschwindigkeit unabhängige Performance-Prüfwerkzeuge. Diese Werkzeuge berichten, welche Bilder zu groß sind, welche Skripte das Laden verzögern und wie Sie das mobile Erlebnis verbessern können. Diese regelmäßig durchgeführten Messungen verhindern, dass Ihre Website im Laufe der Zeit an Performance verliert, und sorgen dafür, dass Sie Ihren Nutzern stets das beste Erlebnis bieten.

Häufig gestellte Fragen

Sind responsives Design und mobilfreundliches Design dasselbe?

Auch wenn diese beiden Begriffe häufig synonym verwendet werden, gibt es einen kleinen Unterschied. Mobilfreundlichkeit bezeichnet, dass eine Website auf mobilen Geräten einwandfrei aussieht, und dies kann mit verschiedenen Methoden erreicht werden, zu denen auch responsives Design gehört. Responsives Design ist hingegen eine bestimmte Methode, um dies zu erreichen: ein einziges flexibles Layout, das sich automatisch an alle Bildschirmgrößen anpasst. Folglich ist jede responsive Website mobilfreundlich, aber nicht jede mobilfreundliche Website muss zwangsläufig mit der responsiven Methode erstellt worden sein.

Muss ich meine bestehende Website von Grund auf neu erstellen, um sie responsiv zu machen?

Nicht immer. Wenn Ihre Website relativ einfach ist, können Sie die bestehende Struktur responsiv machen, indem Sie das Viewport-Tag hinzufügen, feste Breiten durch relative Einheiten ersetzen und Media Queries definieren. Handelt es sich jedoch um eine sehr alte, mit fester Pixellogik aufgebaute Website mit tabellenbasiertem Layout, ist es in den meisten Fällen sowohl schneller als auch nachhaltiger, sie mit einer modernen flexiblen Struktur neu aufzubauen.

Wie viele Haltepunkte sollte ich verwenden?

Es gibt keine feste Zahl. Wichtig ist, die Haltepunkte nicht nach Geräten, sondern nach Ihrem Inhalt festzulegen. Verengen Sie das Browserfenster und fügen Sie an der Stelle einen Haltepunkt hinzu, an der das Design auseinanderzubrechen beginnt. Für die meisten Projekte reichen drei bis fünf Haltepunkte mehr als aus. Statt Dutzende von Haltepunkten hinzuzufügen, erhalten Sie mit wenigen und sinnvollen Punkten einen saubereren und leichter wartbaren Code.

Wie beeinflusst responsives Design die SEO?

In positiver Weise. Da Suchmaschinen eine Mobile-First-Indexierung vornehmen, spielt das mobile Erlebnis Ihrer Website eine entscheidende Rolle im Ranking. Da eine responsive Website über eine einzige Adresse und eine einzige Codebasis läuft, verteilt sich die Linkkraft nicht und das Indexieren Ihrer Inhalte wird erleichtert. Zudem trägt ein schnelles und benutzerfreundliches mobiles Erlebnis indirekt zu Ihrem Ranking bei, indem es dafür sorgt, dass Besucher länger auf der Website verweilen.

Sollte ich Flexbox oder CSS Grid verwenden?

Die beiden sind keine Konkurrenten, sondern einander ergänzende Werkzeuge. Flexbox eignet sich ideal für eindimensionale Layouts, also um Elemente entlang einer einzigen Zeile oder Spalte auszurichten; Navigationsmenüs und Schaltflächengruppen sind gute Beispiele dafür. CSS Grid hingegen ist für zweidimensionale, komplexe Anordnungen über die gesamte Seite konzipiert. In vielen modernen Projekten werden beide gemeinsam verwendet: das allgemeine Seitengerüst mit Grid, die kleinen Komponenten hingegen mit Flexbox.

Welcher Fehler wird im responsiven Design am häufigsten gemacht?

Der häufigste Fehler ist, das Hinzufügen des Viewport-Meta-Tags zu vergessen. Ohne diese eine Zeile zeigen mobile Browser die Seite in Desktop-Breite an und verkleinern sie, sodass Texte unlesbar werden – egal, wie perfekt Ihre Media Queries geschrieben sind. Der zweithäufigste Fehler ist, nur im Desktop-Browser-Simulator zu testen und nicht auf echten Geräten zu prüfen. Auf diese beiden Punkte zu achten, beugt einem Großteil der Probleme mit der mobilen Anpassung von vornherein vor.

Fazit

Responsives Design ist längst kein optionales Feature mehr, sondern eine grundlegende Anforderung des modernen Webs. Sie können nicht im Voraus wissen, von welchem Gerät Ihre Nutzer kommen werden; deshalb muss sich Ihre Website an jeden Bildschirm, jede Auflösung und jede Ausrichtung anpassen können. Eine responsive Struktur aufzubauen, erfordert anfangs zwar etwas mehr Nachdenken, zahlt sich aber langfristig sowohl in Form von leichterer Wartung als auch eines besseren Nutzererlebnisses aus.

Erinnern Sie sich an die grundlegenden Prinzipien, die wir in diesem Leitfaden behandelt haben: Vergessen Sie niemals das Viewport-Tag, denken Sie nach dem Mobile-First-Prinzip, verwenden Sie relative Einheiten und flexible Layout-Werkzeuge, legen Sie die Haltepunkte nach dem Inhalt fest und testen Sie unbedingt auf echten Geräten. Wenn Sie diese Prinzipien verinnerlicht haben, können Sie – egal welches Werkzeug oder Framework Sie verwenden – ein solides und zukunftssicheres responsives Design schaffen.

Vergessen Sie nicht, dass ein großartiges responsives Design jenes ist, das der Nutzer gar nicht bemerkt. Im Idealfall denkt Ihr Besucher überhaupt nicht darüber nach, mit welcher Mühe sich Ihre Website an jeden Bildschirm anpasst; er erlebt lediglich ein flüssiges und angenehmes Erlebnis, bei dem er das Gesuchte mühelos findet. Genau das ist das eigentliche Ziel des responsiven Designs: die Technologie unsichtbar zu machen und den Menschen in den Mittelpunkt zu stellen. Beginnen Sie noch heute damit, das Gelernte in Ihrem eigenen Projekt anzuwenden, und beobachten Sie, wie Ihre Website auf allen Geräten erstrahlt.