Die Definition von Responsivem Webdesign und die Notwendigkeit in Zeiten von PC, Tablet und Smartphone
Was ist Responsive Webdesign?
Responsive Design ist vom Grundsatz her ein Design Gestaltungsansatz für grafische Benutzeroberflächen (GUI), der verwendet wird, um Inhalte zu erstellen, die sich reibungslos an verschiedene Bildschirmgrößen anpassen. Designer, die sich auf die Erstellung von Webseiten, online WebShops spezialisiert haben, messen die Größe von Elementen in relativen Einheiten in Prozent und wenden Medien-Abfragen an, sodass sich ihre Designs automatisch an den Browserbereich anpassen können, um die Konsistenz der Inhalte über verschiedene Geräte hinweg zu gewährleisten.
Verstehe Responsive Design besser
Warum Responsive Design so beliebt ist
In den frühen 2010er Jahren mussten sich Designer mit einem historischen Phänomen auseinandersetzen. Immer mehr Benutzer griffen auf Webmaterial über mobile Geräte zu als über Desktops. Es gab zwei Hauptlösungen. Designer konnten mehrere Versionen eines Designs entwerfen und jede mit festen Abmessungen versehen (ein Ansatz, der adaptives Design genannt wird). Alternativ konnten sie an einem einzigen, flexiblen Design arbeiten, das sich an den Bildschirm anpasst (Responsive Design).
Unternehmen und Designer konnten die Vorteile des responsiven Designs nur schwer ignorieren. Anstatt mit absoluten Einheiten (z. B. Pixel) an separaten Versionen zu arbeiten, konnten sich die Designer auf ein einziges Design konzentrieren und es wie eine Flüssigkeit fließen lassen, um alle „Behälter“ zu füllen. Responsive Design ist nicht fehlerfrei. Dennoch hat es erhebliche Vorteile und seine Attraktivität ist stetig gewachsen. Ebenso wie die Zahl der kostenlosen Frameworks, die darauf zugeschnitten sind. Responsive Design ist bei einigen Unternehmen (z. B. Google) mittlerweile ein Pflichtmerkmal.
Webdesign ist responsives Design. Responsive Reagierendes Webdesign ist Webdesign, richtig gemacht.
– Andy Clarke, Kreativdirektor, Produkt- & Website-Designer
Responsive Design – Die technischen Details
Responsive Design hat drei Kernprinzipien:
Fließendes Rastersystem – Elemente nehmen den gleichen prozentualen Anteil des Platzes ein, egal wie groß oder klein der Bildschirm ist (d. h., Benutzer betrachten Designs auf verschiedenen Geräten). Das bedeutet, dass Du festlegst, wo die Elemente erscheinen sollen, und eine Layoutgröße definieren, so dass die Elemente auf eine feste Art und Weise nach oben oder unten skaliert werden. Es ist einfacher, wenn Du ein CSS (Cascading Style Sheets) Rastersystem und einen Generator für die Basis Deines Designs verwendest (einige sind kostenlos erhältlich).
Du musst die Zielgröße, geteilt durch den Kontext, in Prozent berechnen. Dies ist die maximale Breite Deines Design-Merkmals geteilt durch die maximale Breite des Browsers der Benutzer. Wenn Du diese Prozentsätze der Merkmale auf die erforderlichen Eigenschaften im CSS-Skript anwendest, hast Du ein Design, das sich entsprechend der Bildschirmgröße der Benutzer vergrößert oder verkleinert.
Fließende Verwendung von Bildern – Anders als Text sind Bilder nicht von Natur aus fließend. Das bedeutet, dass sie standardmäßig die gleiche Größe und Konfiguration von einem Gerätebildschirm zum nächsten haben. Ein offensichtliches Risiko besteht darin, dass Dein Design auf verschiedenen Geräten inkonsistent erscheint, da sich Bilder nicht anpassen lassen und daher nicht im Verhältnis zu anderen Elementen angezeigt werden.
Daher mußt Du einen CSS-Befehl anwenden -: img {max-width: 100%;} – um sicherzustellen, dass ein Bild für kleinere Bildschirme verkleinert wird. Um viele Bilder einzubinden, verwendest Du einen weiteren CSS-Befehl.
Medienabfragen – Dies sind Filter, die Du verwendest, um die Abmessungen des „browsenden“ Geräts zu erkennen und Dein Design entsprechend zu gestalten. Mit ihnen sondierst Du, auf welcher Bildschirmgröße ein Benutzer Dein Design ansieht.
Diese ändern das Layout der Website, um bestimmte Bedingungen zu erfüllen. Du bindest diese auch über CSS ein, und die am häufigsten verwendeten sind min-width, max-width, min-height und max-height. So kannst Du auf der Grundlage der Breite, Höhe, Ausrichtung usw. eines Bildschirms genau festlegen, wie Dein Design für verschiedene Benutzer dargestellt werden soll.
Du kannst aus einer Vielzahl von Tools wählen, wie z.B. Bootstrap, H5P, Gomo und Elucidat. Daher mußt Du nicht immer über Programmierkenntnisse verfügen.
Bewährte Verfahren und Überlegungen für Responsive Design
Mit responsivem Design gestaltest Du für Flexibilität in jedem Aspekt – Bilder, Text und Layouts.
VORLAGE
- Verfolgen Sie den Ansatz „mobile first“:
- Skalieren Sie Designs in Telefongröße, um sie an größere Bildschirme anzupassen.
- Denke immer daran, dass mobile Benutzer große (>40 Punkte) Schaltflächen benötigen. Außerdem muss Dein Design doppelt so intuitiv sein wie das Desktop-Äquivalent, da der Bedarf an gut dimensionierten Elementen auf kleineren Bildschirmen zu Krämpfen und Verwirrung führen kann.
- Erstelle fließende Raster und Bilder:
- Erstelle Bilder in ihrer ursprünglichen Dimension. Wenn Du nicht genug Platz hast, schneide sie zu, um die Wirkung zu maximieren.
- Verwende ausschließlich Scalar Vector Graphics (SVGs). Dies ist ein XML-basiertes Dateiformat für 2D-Grafiken, das Interaktivität und Animationen unterstützt.
- Schließe drei oder mehr Haltepunkte ein (d. h., entwerfen Sie für 3+ Geräte).
- Priorisiere Inhalte und blenden sie aus, um sie an den Kontext der Benutzer anzupassen. Überprüfe Deine visuelle Hierarchie und verwende progressive Offenlegung und Navigationsschubladen, um Benutzern benötigte Elemente zuerst anzuzeigen.
- Strebe nach Minimalismus.
- Anwendung von Design Mustern – Um die Benutzerfreundlichkeit in ihrem Kontext zu maximieren und die Vertrautheit zu beschleunigen: z.B. passt das sogenannte Column Drop Muster den Inhalt an viele Bildschirmtypen an.
- Achte auf Barrierefreiheit bei Schriftgrößen/-stilen. Setze Kontrast und Hintergrund effektiv ein. Mach Überschriften mindestens 1,6-mal größer als Fließtext. Mach den gesamten Text responsive, damit er in diesen Proportionen erscheint. Da einige Benutzer auf Bildschirmlesegeräte angewiesen sind, mache Dein gesamten Text „echt“ und nicht als Text innerhalb von Bildern.
Insgesamt ist Responsive Design ein leistungsstarker und wirtschaftlicher Ansatz, aber seine „einfache“ Natur ist trügerisch. Du kannst immer noch auf Schwierigkeiten stoßen, wenn Du es ohne Vorsicht verwendest.
Unsere Webseite hier passt sich auf allen Bildschirmen entsprechend an. Beachten Sie, wie das Hintergrundbild für den Nahfokus zentriert wird.
