Responsives Website-Design: Die beste Lösung für alle Geräte?

Digitales Business

Digitales Business

Datum 07.02.2019
Lesezeit 7 Min.

Responsives Website-Design: Die beste Lösung für alle Geräte?

Websites, die als responsiv gelten, funktionieren geräteübergreifend: Egal, ob der Nutzer mit einem Smartphone, Tablet oder einem Desktop-Rechner auf Ihre Seite surft. Je nach Geräteart gibt es unterschiedliche Anforderungen an Websites, was die optische Gestaltung sowie die Eingabe angeht. Ist responsives Webdesign die Lösung schlechthin für eine optimale Darstellung?

Während klassische Websites bislang häufig in verschiedenen Versionen für Desktop, Smartphone oder Tablet entwickelt wurden, passen sich Websites, die responsiv entwickelt wurden, der jeweils zugreifenden Geräteklasse und -größe mehr oder weniger automatisch an. Allerdings ist hierfür ein moderner Webstandard wie HTML5 oder CSS3 erforderlich. Auch JavaScript ist ein wichtiges Thema. Wir zeigen, wann sich der Aufwand lohnt – und wo die Grenzen liegen.

 

Responsives Webdesign: Für optimale Darstellung auf allen Geräten

Ein Großteil des heutigen Internet-Datenverkehrs wird über mobile Geräte abgewickelt. Damit sind beispielsweise Smartphones oder Tablets gemeint, auf denen unterwegs über die mobile Datenverbindung Websites abgerufen und dargestellt werden. Die Eingabe auf diesen Geräten erfolgt über Wisch- und Tippgesten – im Unterschied zum klassischen Surfen mit Desktop-PC oder am Laptop, wo die Eingaben mit Hilfe von Touchpad, Maus und Tastatur geschehen. Doch damit nicht genug: Mobile Geräte haben kleinere Displays, weswegen eine andere Darstellung und Navigation erforderlich ist.

Bei einem starren („fixed”) Layout einer Website erfolgt keine dynamische Anpassung der Website-Optik, wenn das Browserfenster verkleinert oder vergrößert wird. Greift also jemand auf eine Seite, die für Desktop-Geräte optimiert wurde, mit einem Smartphone zu, kann diese unbenutzbar werden: Auf dem kleinen Smartphone-Display ist wenig Platz für die sinnvolle Darstellung von Navigation und Inhalten einer Desktop-Website-Version.

Bevor Sie nun für jede denkbare Geräteklasse eine eigene Version Ihrer Website oder zusätzlich zu Ihrer klassischen Website eine mobile Darstellung entwickeln, können Sie alternativ auf responsives Webdesign zurückgreifen. Ein Tablet befindet sich mit seiner Bildschirmgröße beispielsweise irgendwo zwischen Laptop und Smartphone – hier wären drei Versionen einer Website erforderlich, wenn Sie kein responsives Design nutzen. Und auch verschiedene Smartphones weisen ganz unterschiedliche Display-Größen und -Auflösungen auf.

Doch was bedeutet eigentlich Responsive Webdesign? Wesentlicher Hintergrund dieses Ansatzes ist die Aufteilung einer Website in ein flexibles Gestaltungsraster. Dieses beinhaltet einzelne Blöcke, die je nach Bildschirmbreite auch untereinander stehen können. Die jeweils zur Verfügung stehende, sichtbare Bildschirmgröße wird hierbei als Viewport bezeichnet, in den die Blöcke dann eingepasst werden. Im Endergebnis können Sie eine responsive Website quasi beliebig in der Breite skalieren, ohne dass die Usability (Bedienbarkeit) leidet. Man spricht auch von einem „fluiden” Designansatz, der zusätzlich zu der variablen Anordnung eine stufenlose Skalierbarkeit der Elemente vorsieht.

Folgende Geräteparameter werden üblicherweise im responsive Design berücksichtigt:

  • Auflösung: Je nach Bildschirmauflösung müssen Bilder so skaliert werden, dass sie zum Gerät passen und optisch einwandfrei aussehen.
  • Größe des Geräts: Viele moderne Smartphones verfügen über hohe Auflösungen, jedoch verhältnismäßig kleine Displays. Auch dieser Faktor muss berücksichtigt werden, damit die Darstellung nicht zum Augentest wird.
  • Orientierung des Geräts: Während Smartphones häufig im Hochformat in der Hand gehalten werden, werden Tablets häufig quer gehalten. Die Darstellung auf Desktop-PCs und Laptops ist ebenfalls im Querformat.
  • Breite und Höhe des Browserfensters: Im sichtbaren Bereich sollte alles Wesentliche, ohne zu scrollen, erfasst werden können und optisch einwandfrei dargestellt sein.
  • Eingabemöglichkeiten: Während einige Geräte mit Hilfe von Tastatur und Maus bedient werden, gibt es bei anderen sowohl die Möglichkeit des Tippens und Wischens als auch eine einblendbare Tastatur. Sämtliche denkbaren Eingabeformen müssen einwandfrei funktionieren.

 

Video: YouTube / SIFA Digital

 

Responsiv oder adaptiv? Festes oder fluides Layout? Die Unterschiede

Eine adaptive Website nutzt genau wie eine responsive Seite sogenannte „Breakpoints” (beispielsweise je nach Breite des verwendeten Bildschirms), ab denen eine andere Darstellung erfolgt. Bei adaptiven Websites bleibt das Layout ansonsten aber statisch. Das kann zu unschönen, leeren Bereichen auf der Website oder dicht gedrängten Elementen an den Grenzen vor und nach einem dieser „Breakpoints” führen. Bei solchen Websites wird also je nach zugreifendem Gerät eine bestimmte, eigenständige Version der Seite aufgerufen (meist gibt es eine Version für den Desktop und eine für Smartphones). Der Pflegeaufwand im laufenden Betrieb ist bei dieser Lösung sehr hoch, da bei Änderungen immer sämtliche Website-Versionen angepasst werden müssen.

Beim fluiden Ansatz hingegen, wie er bei responsiven Websites meist zum Einsatz kommt, werden die Inhalte bei einem kleineren Browserfenster zunächst prozentual kleiner dargestellt und bei Erreichen einer Größen-Untergrenze umsortiert. Gelegentlich kommen auch sogenannte elastische Layouts zum Einsatz. Diese sorgen dafür, dass das Browserfenster immer vollständig gefüllt bleibt. Voraussetzung hierfür ist allerdings, dass alle Inhalte problemlos skalierbar sind – was bei Bildern und insbesondere bei Infografiken nicht immer der Fall ist.

Eine wirklich responsive Website passt sich in der Darstellung also dem jeweils zugreifenden Gerät möglichst gut an. Die technische Grundlage hierfür bilden sogenannte Media Queries, die innerhalb der Cascading Style Sheets (CSS) in der Version 3 eingeführt wurden. Dementsprechend folgt das responsive Design im wesentlichen drei Grundprinzipien:

  • Es gibt keine festen Schriftgrößen mehr: Diese werden je nach zugreifendem Gerät dynamisch angepasst.
  • Gleiches gilt für Bilder: Allerdings werden hier meist verschiedene Bildgrößen vorab gespeichert und je nach Gerät abgerufen.
  • Es gibt keine festen Layout-Gitter: Hier heißt das Zauberwort prozentuale Angaben. Die Gitter sind nicht in festen Pixelbreiten festgelegt, sondern werden je nach Gerät um einen gewissen Prozentsatz in der Breite (und somit auch der Höhe) skaliert.

Außerdem kommen auf mobilen Geräten häufig sogenannte Entscheidungspunkte zum Einsatz: Text, der in der mobilen Darstellung eine gewisse Höhe überschreiten würde, wird zunächst beschnitten und mit einem Hinweis versehen, der beispielsweise „Weiterlesen” lautet. So hat der Nutzer die Möglichkeit, den Inhalt der Seite mobil zunächst im Überblick zu erfassen und erst bei Bedarf durch einen längeren Text zu scrollen. Dieses Vorgehen hilft auch dabei, Ladezeiten einzusparen – insbesondere, wenn ein langer Text mit umfangreichem Bild- oder Videomaterial aufgelockert wurde.

 

Die wesentlichen Kritikpunkte an responsiver Gestaltung

Wo Licht ist, ist jedoch, wie so häufig, auch Schatten: Kritiker des responsiven Website-Designs führen an, dass eine beliebige Skalierung von Inhalten durchaus Probleme in der Bedienbarkeit verursachen kann. So sollten beispielsweise Buttons auf jedem Gerät, damit sie einwandfrei antippbar sind, wenigstens eine Fläche von einem Quadratzentimeter einnehmen. Bei freier Skalierung kann diese Größe unterschritten werden, was das Antippen erschwert oder das Risiko von Fehleingaben erhöht. Außerdem stellt sich gerade bei responsivem Design die Frage, ob es überhaupt möglich ist, den Darstellungsumfang großer Desktop-Websites auf Smartphones sinnvoll abzubilden.

Für die Anzeige auf verschiedenen Geräteklassen können außerdem inhaltliche Anpassungen der Seite sinnvoll sein, sofern Sie mobile Nutzer als Zielgruppe anders ansprechen wollen als Desktop-Anwender. In dem Fall würden Sie ohnehin mindestens zwei Versionen der Website pflegen und profitieren vom adaptiven Ansatz, ohne unnötigen Mehraufwand zu betreiben.

Bei responsiven Websites entsteht zu Beginn jedenfalls fast immer ein höherer Entwicklungsaufwand, was die Seitenstruktur angeht. Dieser Aufwand kann in der Summe fast genauso hoch ausfallen wie bei einer adaptiven Darstellung.

Responsives Design ist somit kein Allheilmittel – mit dem richtigen Hintergrundwissen ausgestattet, können Sie jedoch selbst entscheiden, ob sich der Zusatzaufwand für die Pflege mindestens zweier Versionen derselben Website für Sie lohnt oder nicht.

 

So oder so: Denken Sie „Mobile first”

Immer mehr Zugriffe erfolgen mit mobilen Geräten. Bei den meisten neu gestalteten Websites gilt daher inzwischen der Ansatz: „Mobile first”. Dabei wird im Designprozess von der mobilen (also kleinstmöglichen) Darstellung ausgegangen und für größere Ansichten wie in der Desktop-Variante werden sukzessive Elemente hinzugefügt. Dieses Gestaltungsprinzip sollten Sie bei allen Neuentwicklungen in den Vordergrund stellen, um diese immer weiter wachsende Nutzergruppe optimal zu bedienen.

 

Zusammenfassung

  • Wenn Sie Websites geräteübergreifend entwickeln wollen, kommen sowohl responsives Webdesign als auch adaptive Ansätze in Frage.
  • Während responsives Webdesign eine bestehende Seitenstruktur für Endgeräte skaliert, gibt es beim adaptiven Ansatz mehrere Versionen derselben Seite.
  • Neben der Bildschirmauflösung und der Gerätegröße müssen Faktoren wie die Bedienart und die aktuelle Orientierung des Geräts berücksichtigt werden.
  • Welcher Designansatz für Ihre Website passt, hängt vom Einzelfall und Ihren Zielgruppen ab.
  • Moderne Ansätze denken „Mobile first” und stellen Smartphone-Zugriffe an den Beginn des Website-Entwurfs.

 

Welchen Ansatz finden Sie erfolgversprechender? Adaptives oder responsives Design? Wir freuen uns über Ihren Kommentar.

 

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Facebook Twitter WhatsApp LinkedIn Xing E-Mail