Wie funktioniert Responsive Design?

Responsive Design ist aus dem heutigen Online Marketing kaum wegzudenken. Zu wichtig ist die Anpassung des Designs von Webauftritten an mobile Endgeräte. Wie Responsive Design funktioniert und worauf Sie dabei achten sollten, klären wir hier.

Responsive Design: Heute eine Grundvoraussetzung

Studien zufolge hat die mobile die stationäre Internetnutzung längst überholt. Weltweit wurden mobile Endgeräte (Smartphones und Tablets) 2020 für mehr als 54 Prozent, in Asien beispielsweise sogar mehr als 62 Prozent aller Seitenaufrufe genutzt.

Besonders im privaten Bereich sind Smartphones und Tablets die gängigsten Portale ins Netz geworden. Damit Inhalte auch auf mobilen Geräten mit Touchscreens tadellos angezeigt werden können und das bestmögliche Nutzererlebnis bieten, wurde das sogenannte Responsive Web Design (RWD) entwickelt. Damit kann die Anzeige von Webinhalten an den Kontext des Gerätes, mit dem sie aufgerufen werden, angepasst werden.

Responsive Design: Definition und Ursprung

Der Begriff Responsive Design bedeutet übersetzt so viel wie „reagierende Gestaltung“. Der Webdesigner Ethan Marcotte aus Boston, USA hat diesen Begriff 2010 in einer seiner Publikationen erstmalig verwendet.

Beim Responsive Webdesign wird – vereinfacht gesagt – eine Webseite so dargestellt, dass sie auf dem vom Nutzer oder der Nutzerin verwendeten Gerät (Smartphone, PC oder Tablet) bestmöglich dargestellt wird. Es spielt keine Rolle, ob Hochformat oder Querformat, iPad oder iPhones: Die Webseite passt sich, egal welche mobilen Geräte verwendet werden, an die Bildschirmauflösung an.

Eine responsive Webseite gehört heute zum Standard. Das Gegenteil, starres Webdesign, findet sich aufgrund der Nutzerunfreundlichkeit und schlechten Usability nur noch selten. Erinnern Sie sich an Ihren letzten Besuch einer Webseite, die sich nicht Ihrem verwendeten Endgerät angepasst hat? Wir sind uns sicher: Es war keine positive User Experience.

Umso wichtiger ist es für Firmen, sich bei der Gestaltung ihres Internetauftritts an die Grundsätze responsiven Webdesigns zu halten.

Webseiten geben Unternehmen ein digitales Zuhause. Um zu verstehen, wie Sie dieses Zuhause für ihr Zielpublikum möglichst bequem einrichten, sollten wir uns zunächst mit den Grundregeln der Architektur befassen.

Crashkurs: Wie funktioniert eine Webseite?

Am Anfang war das Layout. Bevor eine Webseite den Betrieb aufnimmt oder überhaupt entwickelt wird, treffen sich Layout-Designer und -Designerinnen. Sie sind sozusagen die Innenarchitekten und Innenarchitektinnen der Seite. Sie bestimmen, was wo und wie auf der Seite Platz finden soll.

Dabei wird ein sogenanntes Grid (auf Deutsch: Raster) verwendet, das den zweidimensionalen Raum abbildet, in dem die Elemente platziert werden. Dieses Grid ist eine Anordnung von vertikalen und horizontalen Linien. Es bildet Spalten und Reihen.

Auf welchen technologischen Grundlagen beruht Responsive Design?

Bevor wir tiefer in die Materie eintauchen und uns im Detail den wichtigsten Aspekten responsiven Designs widmen, bringen wir Licht in den dunklen Technologie-Tunnel beim Responsive Design. Wie ist es technisch möglich, alle Elemente einer Webseite responsiv darzustellen und damit die Benutzerfreundlichkeit zu steigern?

Responsive Design: CSS, HTML, Media Queries und Breakpoints

Die Kombination von HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) bildet die Grundlage für Responsive Webdesign. Mit diesen beiden Sprachen lassen sich Webseiten bauen. Dabei ist ein HTML-Code dafür zuständig, der Homepage eine Struktur zu geben. Damit etablieren Sie Absätze, Textbausteine und Grafiken.

Mit CSS können Sie, vereinfacht gesagt, das Design und Layout der eingesetzten Elemente bearbeiten.

Damit Ihre Webseite weiß, mit welchem Endgerät sie aufgerufen wird und wie die relativen Größenangaben der integrierten Elemente sich verändern müssen, nutzt sie Media Queries. Diese werden in den Website-Code integriert, ermitteln Fakten wie die Bildschirmgröße und Auflösung des Endgeräts und steuern so mit, wie die Homepage beim Besuchenden ausgegeben wird.

Dabei gibt es verschiedene, definierte Grenzen, auch Breakpoints genannt. Diese Pixelwerte geben an, ab welcher Grenze eine neue Layoutansicht gilt. Die meisten in einer Media Query definierten Breakpoints liegen bei den gängigen Größen von Endgeräten, das sind 480, 800, 1024 und 1280 Pixel.

Statische Grids: Fossilien der Webkultur

Mit der technologischen Grundlage im Hinterkopf blicken wir zurück auf die Zeit vor responsivem Webdesign.

Früher wurden ausschließlich statische Grids mit festgelegten Werten verwendet. Die engen Regeln statischer Grids sahen dabei eine Größenfestlegung von Elementen vor. Eine Grafik hatte beispielsweise eine festgelegte Breite von 1024 Pixeln – ganz gleich, ob sie über einen großen PC-Monitor oder kleine Tablet-Bildschirme mit niedrigen Auflösungen dargestellt wurde.

Dass dies spätestens seit dem Aufkommen von Smartphones mit stark verkleinerten Bildschirmen nicht mehr zeitgemäß ist, ist klar. Denn wer hat beim Surfen mit Mobilgeräten schon die Geduld und das Datenvolumen, endlos auf das vollständige Laden einer riesigen Bilddatei zu warten? Vor allem unterwegs, wo der Empfang stark variiert, sind solche Verzögerungen nervige Stolpersteine.

Doch selbst in der Desktop-Version einer Webseite sind statische Grids tückisch. Denn wer auf einer Webseite mit statischem Grid surft und sein Fenster verkleinert, muss damit rechnen, dass die Seite daraufhin nicht mehr richtig angezeigt werden kann. Abgeschnittene Bilddateien sind hier an der Tagesordnung.

Flexible Grids sind der Schlüssel für Responsive Design

Mit dem Fortschritt der Technik haben Innovationen wie Smartphones und Tablets das Licht der Welt erblickt. Durch diese kleinen Pforten ins Netz haben sich die Ansprüche an Webseiten entscheidend verändert.

Designs mit statischen Grids sind nicht länger kompatibel mit den rasanten Veränderungen in der Welt der mobilen Geräte. Es musste ein Ansatz gefunden werden, der den Ansprüchen der neuen Gadgets genügen konnte: Das Responsive Design mit flexiblen Grids war geboren.

Doch nicht nur die bloße Existenz von Smartphones, ausgelöst durch das erste iPhone von Apple im Jahr 2007, war ein Grund für die Entstehung responsiven Designs. Die Ankündigung von Google im Jahr 2015, künftig „mobile friendliness“ als Bewertungsfaktor für das Suchmaschinenranking einer Webseite heranzuziehen, gab der Thematik im Hinblick auf SEO nochmals einen enormen Schub.

Flexible Grids arbeiten im Gegensatz zu ihren statischen Verwandten mit relativen Werten. Sie sind das Fundament des Responsive Design, da sie es ermöglichen, Inhalte bei veränderter Anzeigefläche automatisch prozentual anzugleichen.

Das hat zur Folge, dass der Inhalt einer Webseite mit flexiblem Grid innerhalb des Anzeigefensters mit dem Fenster wachsen und schrumpfen kann. Das flexible Grid rechnet nämlich die Größe der Inhalte auf die Anzeigefläche herunter. Der Code wird dazu in Relation gesetzt und der Browser visualisiert dies.

Im Klartext heißt das: Der Vollbildmodus bleibt gegeben, auch wenn das Fenster sich verkleinert. Ein plakatives Beispiel veranschaulicht die Funktionsweise flexibler Grids.

Während die im Absatz der statischen Grids vorgestellte Grafik mit 1024 Pixeln Breite unabhängig von der Bildschirmgröße stets gleich bleibt, ändert sie ihre absolute Größe im responsiven Design. Sie ist technisch nicht mit dem absoluten Pixelwert von 1024 angelegt, sondern vielmehr nach folgendem, beispielhaften Schema:

• „Wenn die Breite des Endgeräts 1024 Pixel (max-width: 1024) beträgt, wird die Grafik zu 100% Breite ausgespielt.“
• „Wenn die Breite des Endgeräts 480 Pixel beträgt, wird die Grafik zu 50% Breite ausgespielt.“

Nach dieser Logik funktionieren flexible Grids. Wie genau sich die Elemente dabei verteilen können, sehen Sie unten.

Responsive Design: Beispiele

So kann Responsive Design aussehen: Bei der Ansicht auf einem Desktop-Computer, Tablet und Smartphone werden die Elemente einer identischen Webseite unterschiedlich positioniert. Das flexible Grid ermöglicht ein adaptives Design. Ergebnis ist eine unterschiedliche Version der Webseite auf jedem Gerät.

Doch woher weiß die Webseite eigentlich, auf welchem Endgerät sie angezeigt wird? Diese Information ist für das Responsive-Design-Paradigma essenziell, denn selbst innerhalb einer Produktfamilie kann es diverse Bildschirmgrößen geben – bestes Beispiel hierfür sind die ständig wechselnden Formate neuer iPhone-Generationen.

Der sogenannte Viewport liefert hier die Antwort. Viewports sind der Bereich des Browserfensters, der für die Darstellung von Inhalten zur Verfügung steht. Bei einem herkömmlichen Smartphone etwa kann die aufgerufene Webseite auf diese Art auslesen, um welche Anzeigefläche es sich handelt. Nach der Auswertung werden die Inhalte dann entsprechend angepasst.

Responsive Webseite erstellen

Der Prozess der Webentwicklung hat sich mit dem Fokus auf responsivem Webdesign verändert.

Vor Zeiten der Responsivität funktionierte dieser einfache Workflow:

1. Konzeption der Seite: Welche Inhalte soll wer wo sehen?
2. Erstellung von Scribbles: Skizzen werden angefertigt, um das Wunschdesign der Seite zu ermitteln.
3. Umsetzung des Wunschdesigns: Mithilfe von Grafikprogrammen werden alle Elemente erstellt und bereitgestellt.
4. Technische Umsetzung: Alle Elemente werden programmiert und die Webseite technisch umgesetzt.

So entstanden abertausende von nicht-responsiven Webseiten, die aus heutigem Blickwinkel nicht mehr zeitgemäß sind. Sie beschränken sich auf starre Größenangaben und sind nicht flexibel.

Überträgt man diesen Workflow auf responsives Webdesign, müsste man so viele Designs und Scribbles erstellen, wie es gängige Bildschirmgrößen gibt – das ist möglich, aber nicht effizient.

Heute gilt: Content first. Welche Inhalte sollen Besucher und Besucherinnen der Homepage sehen? Wie sollen die Seitenstrukturen aufgebaut werden? Basierend auf diesen Grundüberlegungen werden mehrere grobe Skizzen unter Berücksichtigung der Breakpoints losgelöst von einzelnen Displaygrößen gezeichnet und immer wieder rückgesprochen. So entsteht in einem agilen Prozess mit regelmäßigen Rücksprachen zwischen allen beteiligten Parteien eine responsive Webseite.

Die 3 Kernpunkte des Responsive Design für Ihre Webseite

Bevor Sie sich nun selbst in die Gestaltung oder den Relaunch einer Webseite stürzen, oder damit eine Agentur beauftragen, verinnerlichen Sie die drei Kernpunkte responsiven Designs für Ihre Homepage.

Um Ihren Kundinnen und Kunden das bestmögliche Erlebnis auf Ihrer Seite zu bieten, geben die folgenden drei Faktoren den Ausschlag:

Flexible Layout-Grids und Responsive Layout

Hier gilt der Grundsatz „Nutzerinnen und Nutzer kommen zuerst: Content vor Design“. Berücksichtigen Sie mobile Userinnen und User: Mobile first. Daher gilt: die wichtigsten Elemente leicht zugänglich machen, um lange Ladezeiten wegen überflüssiger Hintergrundbilder zu vermeiden. So reduzieren Sie die Bounce Rate.

Flexible Schriftgröße

Vermeiden Sie unbedingt feste Schriftgrößen. Was auf Desktop-PCs und Laptops gut aussieht, könnte in der mobilen Ansicht schwer zu erkennen sein. Daher verlassen Sie sich bei der Schriftgröße lieber auf Angaben in prozentualen Werten.

Flexible Bildgrößen

Beachten Sie auch hier die Skalierung. Da Endgeräte unterschiedliche Anforderungen haben, sollten Sie Ihren Nutzerinnen und Nutzern das langwierige Laden großer Bilddateien ersparen. Zu diesem Zweck können Sie einen ganzen Pool von Dateien anlegen, in diesem Fall Bilder in unterschiedlicher Größe. Mit HTML5-Technologie und CSS3 Media Queries kann dann automatisch eine passende Variante für das jeweilige Endgerät ausgewählt werden.

Responsive Check: Ist Ihre Webseite zeitgemäß?

Sind Sie als Webseitenbetreiber ins Grübeln gekommen, ob Ihre bestehende Webseite bereits für mobile Geräte optimiert ist? Um verärgerten Besuchenden Ihrer Homepage vorzubeugen und die Benutzerfreundlichkeit zu steigern, gibt es Tools, die einen Responsive Check bestehender Internetseiten durchführen.

Für die einfachste Möglichkeit benötigen Sie nicht mal eines der Tools. Öffnen Sie Ihre Webseite mit verschiedenen Endgeräten (Mobilgeräte, Laptops und Desktop-PCs) und prüfen Sie, ob alle Inhalte angemessen skaliert werden und lesbar sind. Auf dem Laptop oder Desktop-PC können Sie zudem mit der Fenstergröße spielen und so unterschiedliche Bildschirmgrößen simulieren.

Wem das zu anstrengend ist oder wer nur ein Gerät zur Verfügung hat, dem seien die angesprochenen Online-Tools empfohlen. Von HubSpot's Website Grader über Screenfly bis hin zu Am I Responsive? gibt es jede Menge kleiner Helferlein, die Ihre Homepage auf Herz, Nieren und vor allem Responsive Design prüfen.

Fazit: Responsive Design ist Gegenwart und Zukunft

Responsive Design ist die Gegenwart und Zukunft des Webdesigns. In einer digitalen Welt, die sich ständig wandelt und neue Endgeräte produziert, ist Responsive Design die Antwort, und Flexibilität ist die Essenz dieses Ansatzes. Absolute Größen und Werte gehören der Vergangenheit an – an ihre Stelle ist ein cleverer Algorithmus getreten.

Der Vorteil dabei: Wenn Sie Ihre Homepage einmalig responsiv optimieren, können hunderte neuer Bildschirmgrößen auf den Markt kommen. Durch die relativen Werte und ein smartes Design sind Sie automatisch stets up-to-date. Das ist wichtig, denn nichts ist ärgerlicher, als Webseitenbesucher und -besucherinnen und damit potenzielle Kunden und Kundinnen zu verlieren, weil sie sich auf einer unübersichtlichen und nicht optimierten Seite wiederfinden.

Titelbild: PrathanChorruangsak / iStock / Getty Images Plus