Die Definition von Responsivem Webdesign und die Notwendigkeit in Zeiten von PC, Tablet und Smartphone
Was ist Responsive Webdesign?
Responsive Design ist im Kern ein Gestaltungsansatz für grafische Benutzeroberflächen (GUI), der genutzt wird, um Inhalte zu entwickeln, die sich flexibel an unterschiedliche Bildschirmgrößen anpassen. Designer, die sich auf die Erstellung von Webseiten und online WebShops spezialisiert haben, messen die Größe von Elementen in relativen Einheiten wie Prozent und setzen Medien-Abfragen ein. So passen sich ihre Layouts automatisch an den jeweiligen Browserbereich an und sorgen für ein einheitliches Erscheinungsbild der Inhalte auf verschiedenen Endgeräten.
Verstehe Responsive Design noch besser
Warum Responsive Design so beliebt ist
In den frühen 2010er Jahren standen Designer vor einem historischen Wandel. Immer mehr Nutzer griffen über mobile Geräte auf Webinhalte zu, statt über klassische Desktop-Rechner. Es gab zwei wesentliche Lösungswege. Designer konnten mehrere Varianten eines Layouts mit festen Abmessungen entwickeln (dieser Ansatz wird adaptives Design genannt). Oder sie entschieden sich für ein einziges, flexibles Layout, das sich an die jeweilige Bildschirmgröße anpasst (Responsive Design).
Unternehmen und Designer konnten die Vorteile des responsiven Ansatzes kaum übersehen. Statt mit absoluten Einheiten (zum Beispiel Pixeln) an getrennten Versionen zu arbeiten, konnten sie ein einziges Layout entwerfen und es wie eine Flüssigkeit alle passenden „Behälter“ ausfüllen lassen. Responsive Design ist nicht vollkommen fehlerfrei, bietet aber deutliche Pluspunkte und seine Beliebtheit hat stetig zugenommen. Parallel dazu ist auch die Zahl der kostenlosen Frameworks gewachsen, die genau darauf ausgerichtet sind. Responsive Design ist bei einigen Unternehmen (zum Beispiel Google) inzwischen ein unverzichtbares Merkmal.
Webdesign ist responsives Design. Responsive Reagierendes Webdesign ist Webdesign, richtig gemacht.
– Andy Clarke, Kreativdirektor, Produkt- & Website-Designer
Responsive Design – Die technischen Details
Responsive Design beruht auf drei Kernprinzipien:
Fließendes Rastersystem – Elemente nehmen immer denselben prozentualen Anteil des verfügbaren Platzes ein, unabhängig davon, wie groß oder klein der Bildschirm ist (das heißt, Nutzer betrachten das Layout auf unterschiedlichen Geräten). Du legst fest, wo die Elemente erscheinen sollen, und definierst eine Layoutgröße, damit die Elemente in einem festen Verhältnis nach oben oder unten skaliert werden. Am einfachsten ist es, wenn du ein CSS (Cascading Style Sheets) Rastersystem und einen Generator als Grundlage für dein Layout verwendest (einige davon sind kostenlos verfügbar).
Du musst die Zielgröße geteilt durch den Kontext in Prozent berechnen. Das ist die maximale Breite deines Design-Merkmals geteilt durch die maximale Breite des Browserfensters der Nutzer. Wenn du diese Prozentwerte der Merkmale auf die entsprechenden Eigenschaften im CSS-Skript anwendest, erhältst du ein Layout, das sich passend zur Bildschirmgröße der Nutzer vergrößert oder verkleinert.
Fließende Verwendung von Bildern – Im Gegensatz zu Text sind Bilder nicht von Natur aus flexibel. Das bedeutet, dass sie standardmäßig von einem Gerätebildschirm zum nächsten dieselbe Größe und Konfiguration behalten. Ein offensichtliches Risiko ist, dass dein Layout auf verschiedenen Geräten uneinheitlich wirkt, weil sich Bilder nicht automatisch anpassen und dadurch nicht im richtigen Verhältnis zu anderen Elementen erscheinen.
Deshalb musst du einen CSS-Befehl einsetzen: img {max-width: 100%;} um sicherzustellen, dass ein Bild auf kleineren Bildschirmen verkleinert wird. Wenn du viele Bilder einbindest, verwendest du einen weiteren CSS-Befehl.
Medienabfragen – Das sind Filter, mit denen du die Abmessungen des aktuell verwendeten Geräts erkennst und dein Layout entsprechend anpasst. Damit prüfst du, auf welcher Bildschirmgröße ein Nutzer dein Design betrachtet.
Diese Abfragen verändern das Seitenlayout, um bestimmte Bedingungen zu erfüllen. Du bindest sie ebenfalls über CSS ein, und die am häufigsten verwendeten sind min-width, max-width, min-height und max-height. So kannst du anhand von Breite, Höhe, Ausrichtung und weiteren Eigenschaften eines Bildschirms genau festlegen, wie dein Layout für verschiedene Nutzer dargestellt werden soll.
Du kannst aus einer Reihe von Tools wählen, wie zum Beispiel Bootstrap, H5P, Gomo und Elucidat. Du musst daher nicht zwingend über tiefgehende Programmierkenntnisse verfügen.
Bewährte Verfahren und Überlegungen für Responsive Design
Mit responsivem Design gestaltest du für Flexibilität in jedem Bereich, also bei Bildern, Text und Layouts.
VORLAGE
- Verfolge den Ansatz „mobile first“:
- Skaliere Layouts zunächst für die Größe von Smartphones und passe sie dann an größere Bildschirme an.
- Denk immer daran, dass mobile Nutzer große (>40 Punkte) Schaltflächen brauchen. Außerdem sollte dein Layout mindestens doppelt so intuitiv sein wie das Desktop-Pendant, da schlecht dimensionierte Elemente auf kleinen Bildschirmen schnell zu Frust und Verwirrung führen können.
- Erstelle fließende Raster und Bilder:
- Lege Bilder in ihrer ursprünglichen Größe an. Wenn du nicht genug Platz hast, schneide sie zu, um die Wirkung zu verstärken.
- Verwende ausschließlich Scalar Vector Graphics (SVGs). Das ist ein XML-basiertes Dateiformat für 2D-Grafiken, das Interaktivität und Animationen unterstützt.
- Plane drei oder mehr Haltepunkte ein (das heißt, gestalte für 3 oder mehr Gerätetypen).
- Priorisiere Inhalte und blende sie aus, um sie an den Kontext der Nutzer anzupassen. Überprüfe deine visuelle Hierarchie und nutze progressive Offenlegung und Navigationsschubladen, damit Nutzer zuerst die Elemente sehen, die sie wirklich brauchen.
- Strebe nach Minimalismus.
- Nutze Design Muster, um die Benutzerfreundlichkeit im jeweiligen Kontext zu maximieren und Vertrautheit zu fördern. Zum Beispiel passt das sogenannte Column Drop Muster Inhalte an viele unterschiedliche Bildschirmtypen an.
- Achte auf Barrierefreiheit bei Schriftgrößen und -stilen. Setze Kontrast und Hintergrund gezielt ein. Mach Überschriften mindestens 1,6-mal größer als den Fließtext. Sorge dafür, dass der gesamte Text responsiv ist, damit diese Proportionen erhalten bleiben. Da einige Nutzer auf Screenreader angewiesen sind, sollte dein kompletter Text „echt“ sein und nicht als Text innerhalb von Bildern erscheinen.
Insgesamt ist Responsive Design ein leistungsstarker und wirtschaftlicher Ansatz, aber seine scheinbar „einfache“ Natur kann täuschen. Du kannst trotzdem auf Herausforderungen stoßen, wenn du ihn unbedacht einsetzt.
Unsere Webseite hier passt sich auf allen Bildschirmen entsprechend an. Achte darauf, wie das Hintergrundbild für den Nahfokus zentriert wird.
