Studien zufolge hat die mobile die stationäre Internetnutzung längst überholt. Das zeigt u. a. eine Erhebung der Medienanstalten von 2018. Besonders im privaten Bereich sind Smartphones und Tablets die gängigsten Portale ins Netz geworden. Damit Inhalte auch auf mobilen Endgeräten 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.

Laden Sie unsere kostenlose Arbeitsmappe herunter, um ganz einfach die  Neugestaltung Ihrer Website zu planen.

Websites 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 Website?

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

resonsive-design-layout-grid

Bild: scyther5 / iStock / Getty Images Plus

Dabei wird ein sogenanntes „Grid“ (zu Dt.: 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.

Statische Grids – Fossilien der Webkultur

Früher wurden ausschließlich statische Grids mit festgelegten Werten verwendet. Die engen Regeln statischer Grids sahen dabei eine Größenfestlegung von Elementen vor.

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 (oder ggf. auch 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 Website sind statische Grids tückisch. Denn wer auf einer Website mit statischem Grid surft und sein Fenster verkleinert, muss damit rechnen, dass diese 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 Websites 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.

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 Website 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.

resonsive-design-flexible-gridsBild: Yuliia Moisieieva/ iStock / Getty Images Plus

Im Klartext heißt das: Der Vollbildmodus bleibt gegeben, auch wenn das Fenster sich verkleinert. Wie genau sich die Elemente dabei verteilen können, sehen Sie unten.

Responsive Design: Beispiele 

resonsive-design-beispiel-verschiedene-geraete

Bild: fad1986 / iStock / Getty Images Plus

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

Doch woher weiß die Website 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. Es ist der Bereich des Browserfensters, der für die Darstellung von Inhalten zur Verfügung steht. Bei einem herkömmlichen Smartphone etwa kann die aufgerufene Website auf diese Art auslesen, um welche Anzeigefläche es sich handelt. Nach der Auswertung werden die Inhalte dann entsprechend angepasst.

Die 3 Kernpunkte des Responsive Design für Ihre Website

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

Flexible Layout-Grids und Responsive Layout

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

Flexible Schriftgrößen

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

Flexible Bildgrößen

Beachten Sie auch hier die Skalierung. Da Endgeräte unterschiedliche Anforderungen haben, sollten Sie Ihren 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 Design ist die Gegenwart und Zukunft des Web-Designs. 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.

New Call-to-action

Headerbild: CarmenMurillo / iStock / Getty Images Plus

Ursprünglich veröffentlicht am 6. Mai 2019, aktualisiert am Mai 16 2019

Themen:

Webdesign