Was ist Responsive Webdesign?

Responsive Webdesign passt die Darstellung einer Webseite automatisch an die Bildschirmgröße der verwendeten Endgeräte an. Diese Webdesign-Technik oder digitale Schnittstelle entspricht einem Bedürfnis der Benutzer, die sich zunehmend über ein mobiles Gerät mit dem Web verbinden.

    Inhaltsverzeichnis:

Welchen Zweck erfüllt 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.

Warum muss eine Website mobilfreundlich sein?

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.

Die Erfindung von Responsive Webdesign

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 vs. Adaptive Webdesign – Was ist der Unterschied?

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.

Drei Möglichkeiten zur Erstellung einer mobilen Version einer Website

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!

Reaktionsfähige Website vs. dedizierte mobile Website: Was ist besser?

Vor dem Erscheinen von Smartphones und Tablets wurde das Design einer Website für einen Desktop-Computer entworfen, unabhängig von der Größe des Monitors. Es handelte sich um einen statischen Entwurf (Static Design). Mit der Erscheinung neuer Endgeräte war dieser Ansatz nicht mehr haltbar. Eine mögliche und logische Lösung bestand darin, zusätzlich zur Desktop-Website (http://www.meinewebsite.de) eine mobile Website (http://m.meinewebsite.de) zu erstellen, d.h. eine dedizierte mobile Website.

Was ist eine dedizierte mobile Website?

Eine mobile Website ist eine Website, deren Anzeige und Navigation für die mobile Darstellung konzipiert wurde. Die Größe ist an verschiedene mobile Geräte angepasst und berücksichtigt die Navigation mit dem Finger. Eine mobile Website kann also von jedem Mobiltelefon aus aufgerufen werden, unabhängig vom Betriebssystem oder den Bildschirmauflösungen, aber auch von den unterstützten Technologien (Javascript usw.). Eine dedizierte mobile Website ermöglicht es durch Responsive Webdesign, spezifische Inhalte anzubieten, die sich von denen auf einer Computer-Website unterscheiden und daher auf Wunsch einem bestimmten Publikum für einen anderen Kontext gewidmet sind.

Eine eigene mobile Website, gute Idee?

Es gab und gibt immer noch Befürworter dieses Ansatzes, aber er warf sehr schnell viele Probleme auf, abgesehen von einigen wenigen spezifischen Fällen, die von dieser Lösung profitieren. Diese Strategie hat in der Tat einige Nachteile:

  • Zwei Schnittstellen zur Konstruktion, komplizierte und teure Wartung.
  • Duplizierter Inhalt und daher eine weniger effiziente natürliche Indexierung.
  • Die Terminals haben unterschiedliche Bildschirmauflösungen.

Basierend auf dieser Logik wäre es notwendig, eine Website für die Iphone Mobile-App unter IOS zu erstellen, eine für die Windows Phone Mobile-App, eine für das Ipad, sogar für die internetfähigen Smartwatches. Die Aufgabe des Webdesigners wird immer komplizierter, auch die Kosten für die Gestaltung der Website. Hinzu kommt, dass sich viele Benutzer von dieser Art von Websites abwenden, da sie nur einen Teil des Inhalts einer Desktop-Site anbieten.

Responsive Webdesign vs. Mobile Apps: Welche Lösung ist besser?

Nicht alle Endgeräte haben die gleiche Nutzung oder Einschränkungen. Eine Präsentations-Website wird nicht die gleichen Anforderungen wie eine E-Commerce-Website haben. Einige Sites mit spezifischen Anforderungen in Bezug auf Funktionalität und Leistung werden das Potenzial von Responsive Webdesign fördern, was allein nicht ausreichen wird.

In einigen Fällen, warum nicht auf die Seite der Mobile Apps schauen, haben diese nativen Anwendungen einige Vorteile gegenüber Responsive Webdesign. Eine native Anwendung wird in der Tat speziell für das mobile Gerät entwickelt, auf dem sie ausgeführt werden soll. Sie ist daher für ein mobiles Betriebssystem (iOS oder Android) konzipiert, entwickelt und kompiliert. Dies bringt viele Vorteile mit sich:

  • Zugang zu Telefonfunktionen (GPS, Beschleunigungsmesser, GPU, …)
  • Ausnutzung der Leistungsfähigkeit des Geräts (insbesondere 3D)
  • Nutzung des Benachrichtigungssystems
  • Verbreitung der Anwendung über den Apple Store und Google Play

Einschränkungen der nativen mobilen Anwendungen

Die spezifische mobile Entwicklung bringt somit eine große Freiheit hinsichtlich der vorgeschlagenen Funktionalitäten. Auf der anderen Seite explodieren die Kosten für Erstellung und Wartung. Die Erstellung einer mobilen Anwendung ist wie die Gestaltung einer neuen Website. Schlimmer noch, sie muss auf iOS und Android portiert werden, was bedeutet, dass das Äquivalent von zwei zusätzlichen Websites entwickelt und gepflegt werden muss!

Progressive Web Apps, die ultimative Alternative?

Angesichts der Schwierigkeiten, die durch native Anwendungen entstehen, ist es nicht überraschend, das Interesse an Progressive Web Apps (PWA) zu sehen. Dies betrifft bestimmte Websites, die leistungs- oder funktionsintensiv sind (z.B. 3D, GPS, Kamera) oder die offline konsultiert werden müssen.

Viele im mobilen Ökosystem haben den Tod mobiler Anwendungen zugunsten von Progressive Web Apps prophezeit. Google an erster Stelle als großer Förderer dieser Alternative. Einige Entwicklungsumgebungen:

  • Bootstrap ist eine Sammlung von Werkzeugen, die für die Erstellung des Designs (Grafiken, Animationen und Interaktionen mit der Seite im Browser … etc. …) von Websites und Anwendungen nützlich sind.
  • Semantic UI ist ein weiteres qualitativ hochwertiges Framework, das sich durch seine Einfachheit auszeichnet.
  • Das Web Starter Kit ist ein Schnellstart-Paket, das 2014 von Google veröffentlicht wurde, um Inhalte an alle Geräte anzupassen. Es verfügt über ein CSS-Kit für eine reaktionsfähige Website.
  • Gumby bietet einen kompletten Satz von CSS-Bausteinen sowie ein auf das Rasterlayout ansprechendes Layout.
  • Clank ist ein Framework, das sich auf die Erstellung von Anwendungen für Mobiltelefone und Tablets konzentriert.
  • Foundation ist ein leistungsfähiges CSS-Framework, das ein reaktionsfähiges Grid-Layout und viele UI-Komponenten bietet.
  • Das reaktionsfähige Grid-System ist ein Schnellstart-Set, das CSS nach den individuellen Bedürfnissen gruppiert, nicht mehr und nicht weniger.
  • KickStart ist leicht, funktionell und ermöglicht, sehr schnell eine reaktionsfähige Website zu erstellen.
  • Skeleton bietet ein robustes Framework für eine reaktionsfähige Website.
  • Kube ist ein reichhaltiges und vollständiges Front-End-Framework für professionelle Entwickler und Designer.
  • KNACSS ist ein einfaches, schnelles, leistungsfähiges CSS-Framework.
  • HTML5-Boilerplate kombiniert eine Reihe von Komponenten und Verfahren, die für die Erstellung einer reaktionsfähigen Website verwendet werden, mit einem “One size fits all”-Design.
  • Pure ist ein kleines, leichtgewichtiges modulares CSS-Framework.
  • Cascade framework schlägt dem Entwickler vor, die Kaskadeneigenschaften so weit wie möglich zu verwenden, um seine Designvorlagen zu erstellen.
  • UIkit ist ein sehr modulares Framework, welches für fortgeschrittene Benutzerschnittstellen bestimmt ist.

Mobile Strategie – „Mobile First“- oder „Desktop First“-Design?

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.

Alternativen zum Mobilen Webdesign

Responsive Webdesign ist eine der Lösungen, um Informationen und Funktionalitäten auch mobil anzubieten. Vier Arten von “mobilen Versionen” können in Betracht gezogen werden:

1. Website in ansprechendem Design

Vorteile:

  • wir behalten die gleichen Inhalte, die sich an alle mobilen Geräte anpassen
  • wir haben URLs, um auf eine Seite zu verweisen (SEO).

Nachteil:

Für einige Sites, die eine bestimmte Leistung oder Funktionalität benötigen, ist das reaktionsfähige Webdesign begrenzt.

2. Dedizierte mobile Website

Vorteil:

Es handelt sich um eine dedizierte Website, also mobil-spezifische Funktionen und Inhalte mit 100% kundenspezifische Optimierung.

Nachteile:

  • die Kosten für Entwicklung und Wartung (es handelt sich um einen zweiten Standort, der gewartet werden muss!)
  • Probleme mit nicht standardisierten Geräten (z.B. Tablets).

3. Mobile Anwendung

Vorteil:

diese Lösung nutzt die Vorteile des Betriebssystems (iOS, Android), daher sehr interessant für E-Commerce-Sites in Puncto: Benachrichtigungen, Geschwindigkeit, Sichtbarkeit im App Store und Google Play.

Nachteil: 

die Kosten für Entwicklung und Wartung (1 Desktop-Website + 1 iOS-Mobile-App + 1 Android-Mobile-App).

4. Fortschrittliche Web-Anwendungen

Vorteile: 

  • Möglichkeit, die nativen Funktionen des mobilen Geräts zu nutzen (Kamera, Mikrofon, GPS, Push-Benachrichtigungen usw.).
  • Erlaubt dem Benutzer, in den Offline-Modus zu wechseln.

Nachteil:

sehr wenig, abgesehen von der Neuartigkeit dieser Lösung, die sich noch bewähren muss, aber sehr vielversprechend!

Diesen Artikel bewerten

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Noch keine Bewertungen)
Loading...

Weitere interessante Artikel

Back to top