Desktop-Bildschirm, Tablet und Handy zeigen die gleiche Webseite zu einer Restaurant-Bewertung in unterschiedlicher Größe
Unified Communication

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.

Inhaltsverzeichnis

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.
Empfohlener externer Inhalt
Hier ist ein Video-Inhalt von YouTube. Er ergänzt die Informationen auf dieser Seite.
Sie können ihn mit einem Klick anzeigen und wieder ausblenden.
Ich bin einverstanden, dass externe Inhalte angezeigt werden. So können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr in unserer  Datenschutzerklärung.
Datenschutzerklärung

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.
Das Bild zeigt eine Hand unter einer symbolischen Wolke

Flexibel, skalierbar und sicher: Vodafone Cloud- und Hosting-Services

Sie suchen Cloud-Lösungen, die sich individuell und flexibel entsprechend Ihrer Business-Anforderungen anpassen lassen?

Bei der Sie bei Bedarf alle Services aus einer Hand erhalten und sich über Performance und Datensicherheit keine Gedanken machen müssen?

Gerne helfen wir Ihnen bei der Auswahl der passenden Cloud & Hosting Services für Ihr Unternehmen und unterstützen Sie mit Informationen, worauf es anderen Unternehmen bei der Auswahl eines passendens Cloud-Anbieters ankommt. 

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.

Das Wichtigste zu Responsive Webdesign in Kürze

  • 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.
Das könnte Sie auch interessieren:
Unified Communication
Frau mit Kaffeebecher in der rechten Hand schaut lächelnd auf ihr Smartphone in der linken Hand, vor einem Schaufenster stehend

WhatsApp Business: So verbinden Sie sich optimal mit Ihren Kunden

WhatsApp Business ist die geschäftliche Variante des beliebten Messenger-Dienstes aus dem Meta-Konzern. Sie dient dazu, schnell und unkompliziert mit der modernen, smartphone-affinen Kundschaft auf für sie gewohntem Wege zu kommunizieren. Aber hält die Geschäftsversion des beliebten Messengers speziell für kleine und mittlere Unternehmen das, was sie verspricht? Lesen Sie hier, welche Vorteile WhatsApp Business bietet und wie Sie die App am besten für Ihre Firma nutzen. Wie viele Exemplare einer bestimmten Ware sind in einer Ihrer Filialen noch verfügbar? Bieten Sie in Ihrem Restaurant auch vegane Speisen an? Kann Ihre Werkstatt das Kundenfahrzeug rechtzeitig zum Wunschtermin reparieren? In Ihrem Unternehmen gehen täglich zahlreiche Anfragen Ihrer Kund:innen ein. Diese Fragen möchten Sie natürlich möglichst schnell beantworten. Die Bearbeitung von Anfragen soll auch noch möglichst effizient funktionieren, denn schließlich darf Ihr Tagesgeschäft darunter nicht leiden. Gleichzeitig möchten Sie mit Ihren Kund:innen immer auch im Austausch bleiben, um beispielsweise langjährigen Stammkund:innen neue Produkte oder Dienstleistungen direkt und ohne große Streuverluste zu präsentieren. Wie kann Ihnen WhatsApp Business helfen, die Kommunikation mit Ihren Kund:innen zu vereinfachen und wie stellen Sie dabei den Datenschutz sicher? Schließlich speichert WhatsApp standardmäßig die Kontaktdaten und vieles mehr auf Servern in den USA, womit Sie als Unternehmen gegen die Datenschutzgrundverordnung (DSGVO) verstoßen würden. Doch es gibt Wege, dieses Problem zu lösen.

Telefon

Digitalisierungs-Beratung

Sie haben Fragen zur Digitalisierung? Jetzt kostenlos beraten lassen. Montag-Freitag von 8-20 Uhr, außer an Feiertagen.

0800 505 4539

Hilfe und Service

Montag bis Freitag von 8 bis 20 Uhr, außer an Feiertagen.

0800 172 1234
Online