Was ist Responsive Webdesign?

Responsive Webdesign erleichtert die Navigation und verbessert die Benutzerfreundlichkeit beim Betrachten der Website auf einem mobilen Gerät. Dabei wird Responsive Webdesign oft mit dem weiter gefassten Konzept des Adaptive Design verwechselt. Sowohl Responsive Webdesign als auch Adaptive Design zielen darauf ab, die mobile Ergonomie der Website zu verbessern. Dies ist eine große Herausforderung für Unternehmen sowohl im Hinblick auf die Indexierung in den Suchmaschinen als auch auf die Anpassung an neue Verwendungszwecke.

Responsive Webdesign ermöglicht es, das Layout einer Website so zu verändern, dass sich der Inhalt unabhängig der verwendeten Endgeräte (Smartphone, Tablet, Desktop, TV…) an den Bildschirm anpasst. Ziel beim Responsive Webdesign ist es, die Website an alle Bildschirmauflösungen und -formate anzupassen. Mit anderen Worten, die Inhaltsblöcke (Text und Bilder) werden durch Responsive Webdesign entsprechend dem verfügbaren Platz auf dem Bildschirm in der Größe verändert und neu organisiert.

Das Responsive Webdesign hat von der Einführung von CSS3 Media Queries (dynamische Verwaltung von Style Sheets) profitiert. Eine im Responsive Webdesign gestaltete Website wird wie folgt konzipiert:

• Eine einzige HTML-Code-Basis, die für alle Endgeräte identisch ist.
• Ein System von Rastern, in denen der Inhalt der Seite platziert wird.
• Die Verwendung von CSS3-Medienabfragen zur Anwendung des entsprechenden Stylesheets.
• Flexible/adaptive Bilder, deren Größe/Auflösung sich automatisch anpasst.

Wenn das Ziel im Responsive Webdesign erreicht ist, ist die Website auf allen Geräten lesbar und nutzbar. Inhalte schrumpfen und erweitern sich im Responsive Webdesign nach Belieben, ohne sich inhaltlich zu verändern. Dennoch ist es im Responsive Webdesign möglich, bestimmte Inhalte auszublenden. Beispielsweise kann ein Bild oder ein Text nur auf der Website im Desktop- und Tablet-Modus sichtbar sein und bei der Darstellung auf einem Smartphone fehlen.

Responsive Webdesign basiert auf Regeln, die die visuelle Darstellung diktieren. Haltepunkte sind die Werte, die zur Definition von Intervallen gemäß Seitenvorlagen verwendet werden, Intervalle, die mit Terminalkategorien verbunden sind.

Aber es gibt auch einige Nachteile beim Responsive Webdesign:

Responsive Webdesign lädt die gesamte CSS-Datei, einschließlich der Informationen, die für die Anzeige auf einem Computer bestimmt sind. Daher kann Responsive Webdesign die Anzeige auf mobilen Geräten verzögern.

Lasst uns zum Anfang zurückkehren. Eine mobilfreundliche Website ist eine Website, die für eine optimale Navigation und Anzeige auf einem mobilen Gerät konzipiert ist. Der Benutzer muss bei Responsive Webdesign nicht zoomen oder durch die Seite scrollen, um zu verstehen, wo sich das Menü befindet, das Bild richtig zu sehen, den Text zu lesen usw. Der Benutzer muss dank Responsive Webdesign nicht mit zwei Fingern agieren, um die Informationen auf der Website dargestellt zu bekommen und darauf zu navigieren. Kurz gesagt: Eine mobilfreundliche Website bringt visuellen Komfort auf mobile Endgeräte. Hier sind einige Beispiele für wichtige Elemente für eine mobilfreundliche Website:

• Die Texte sind in einer Schriftart, die groß genug ist, um lesbar zu sein.
• Der Raum zwischen den Schaltflächen und Links ermöglicht einen einfachen taktilen Zugang.
• Bilder und Medien werden übertragen und an das Format angepasst.
• Der mobile Benutzer wird in der Lage sein, Formulare einfach auszufüllen.

Zu Beginn des Jahres 2015 überstieg die Zahl der mobilen Nutzer zum ersten Mal weltweit die Zahl der Desktopnutzer. Responsive Webdesign für mobile Endgeräte ist daher unverzichtbar geworden.

Im Mai 2010 veröffentlichte Ethan Marcotte, Designer, einen Artikel im Webzine “A List Apart”. Er diskutierte darin zum ersten Mal das Konzept des Responsive Webdesign, das er ein Jahr später in einem Buch (“Responsive Webdesign”) weiter ausführt. Im Vergleich zu einem statischen Design hat ein Responsive Webdesign mehrere Vorteile, darunter:

• Zentralisierung von Inhalten durch Verwaltung von CSS je nach Endgerät
• Schnellere und einfachere Erstellung und Pflege von Websites
• Identisches Design und identischer Inhalt, daher dem Benutzer vertraut
• Reaktionsfähige Webdesign-Vorlagen

Responsive Webdesign wird als Inhalt definiert, der sich an den Bildschirm “anpasst”, daher die häufige Verwechslung mit Adaptive Design. Stattdessen sollte das Responsive Webdesign als eine Untergruppe des adaptiven Designs betrachtet werden.

Responsive Webdesign bietet eine nahtlose Benutzererfahrung. Bei einem Fluid Design (oder Liquid Design) besteht das Ziel darin, die Website in den ihr zugewiesenen Raum “fließen” zu lassen, wie eine Flüssigkeit in einem Behälter.

Konkret wird beim Responsive Webdesign der Entwurf (Breite der Spalten…) aus Variablen (z.B. Prozentzahlen) erstellt, um der Größe des Fensters zu entsprechen. Das Responsive Webdesign verbessert diesen Prozess dank CSS3. Bei der Gestaltung im Responsive Webdesign wird Folgendes berücksichtigt: die Größe in Prozent, aber auch die Proportionen, die Richtung in der das Gerät verwendet wird (Hoch- oder Querformat), die Bildschirmauflösung (in Pixel), die Farben usw. Im Responsive Webdesign werden diese Daten in vollem Umfang auf die jeweiligen Endgeräte übertragen, unabhängig vom Container, aber an dessen Abmessungen angepasst. Es ist eine Möglichkeit zur Universalisierung einer Website auf der Grundlage der Anzeige.

So können beim Adaptive Webdesign zwischen der Darstellung auf einem Computerbildschirm und der mobilen Version einige Elemente verschwunden sein. Sie werden nicht “versteckt” worden sein, wie dies beim Responsive Webdesign der Fall sein kann. Es geht also darum, mehrere Versionen ein und derselben Website zu erstellen. Jede Version entspricht einer bestimmten Bildschirmgröße.

Einige der Merkmale von Adaptive Webdesign sind:

• Bessere Leistung (schnellere Ladezeit)
• Anpassung der Inhalte an die jeweiligen Endgeräte
• Versuch, die Darstellung für Benutzer in Bezug auf das Endgerät und den Browser zu optimieren
• Aufwändiger zu implementieren und teurer als ein Reactive Webdesign
• Risiko, den Benutzer “zu verlieren”, indem es Bildmaterial anbietet, das er nicht gewohnt ist.
• Unabhängig von der gewählten Technik wird von diesen Entwürfen erwartet, dass sie zu einer optimierten Darstellung auf mobilen Endgeräten führen.

Responsive Webdesign ist eine der drei verschiedenen Lösungen zur Erstellung einer mobilen Version einer Website.

1. Website in reaktionsfähigem Design
2. Dedizierte mobile Website
3. Mobile Anwendung

Webdesigner sollten die Lösungen nicht gegeneinander ausspielen, denn sie können auch miteinander kombiniert werden und sich ergänzen!

Das Angebot maßgeschneiderter Inhalte für Mobiltelefone ist immer eine echte Herausforderung, da es viele Einschränkungen gibt:

• Die Breite des Bildschirms in physischen Pixeln.
• Die durch das Betriebssystem definierte Breite.
• Die virtuelle Oberfläche des Browser-Fensters.
• Die Auflösung und Bandbreite.

Auf einigen Geräten lassen sich interaktive und animierte Elemente nur schwer laden, so dass die Gefahr eines schlechten Benutzererlebnisses besteht. Dies wirft die Frage auf, ob es besser ist, zunächst für einen Desktop oder zunächst für ein Mobiltelefon zu entwerfen.

Unter “Mobile First” wird im Allgemeinen sowohl eine Strategie verstanden, die Investitionen in mobile Benutzer und Nutzungen in den Vordergrund stellt, als auch ein Entwicklungsansatz, der das Design über die mobile Version angeht, bevor Desktop- oder andere Versionen in Betracht gezogen werden.

In den frühen Tagen von Responsive Webdesign war es naheliegend, mit einem Design für den Desktop zu beginnen und es dann für mobile Geräte “herunterzustufen”. Responsive Degradation besteht darin, von einer für einen Desktop konzipierten Website auszugehen und diese dann für das Mobiltelefon anzupassen. Mit abnehmender Auflösung und Bildschirmgröße wird der Inhalt der Website verändert. Es ist eine logische Strategie für Responsive Webdesign.

Dennoch werden beide Versionen (Desktop und Mobile) auf das Smartphone geladen, auch wenn einige Inhalte nutzlos geworden sind. Insbesondere Bilder können schwer zu laden sein. Benutzer von Mobiltelefonen haben jedoch je nach ihrem Standort variable Geschwindigkeiten und sind ebenso anspruchsvoll (oder sogar noch anspruchsvoller) in Bezug auf die Ladezeit. Zudem hat der mobile Benutzer in öffentlichen Verkehrsmitteln nicht die gleichen Erwartungen wie der Internetnutzer, der vor seinem Desktop-Computer sitzt. Nur durch Nutzertests und User-Studien ist es möglich, die tatsächliche (oder wahrscheinliche) Nutzung zu ermitteln.

Mobiles Design zuerst

Die “Mobile First”-Philosophie wurde 2009 von Luke Wroblewski, einem Experten für Interfacedesign, vorgeschlagen. Mobile-First-Design war sehr schnell ein großer Erfolg, auch wenn es aufgrund der Bedeutung des mobilen Zugriffs auf Inhalte nicht immer die Lösung für alle Projekte ist. Beim Mobile-First-Ansatz geht es, wie der Name schon sagt, bei der Entwurfsmethode zunächst um die Anzeige für mobile Endgeräte und dann schrittweise um die Anordnung der Elemente für größere Bildschirme. Von dieser mobilen Version des Modells werden dann Variationen vorgenommen, um die Schnittstelle an immer höhere Auflösungen anzupassen. Die Mobile-First-Strategie konzentriert sich auf den Inhalt.