Responsive Web Design

Was ist Responsive Web Design?

Responsive Web Design beschreibt eine Technik, bei der sich das Layout einer Website an das Gerät des Users anpasst. Smartphones (wie das iPhone oder Samsung Galaxy), Tablets (wie das iPad) und sogenannte Feature-Phones (Handys, mit denen man im Internet surfen kann) erfreuen sich immer größerer Beliebtheit und der Benutzer erwartet auch auf diesen Geräten leicht zu bedienende und optisch ansprechende Websites.

Was gilt es zu beachten?

Der offensichtlichste Unterschied zwischen den verschiedenen Geräten ist die Größe des Bildschirms. Ziel beim Erstellen einer Website muss es sein, die für den Benutzer relevanten Informationen, sowohl auf einem kleinen Display eines Smart- oder Feature-Phones, als auch auf einem großen Monitor optimal darzustellen. Dazwischen liegen dann noch Tablets, Netbooks und Laptops, die ebenfalls berücksichtigt werden wollen. Und auch nach oben hin sind keine Grenzen gesetzt: Der Anteil an internetfähigen TV-Geräten steigt und wird mit Sicherheit in Zukunft eine wichtige Rolle spielen.

Doch neben der Größe des Bildschirms spielt auch das Format eine Rolle. Smartphones und Tablets können sowohl im Hoch- als auch im Querformat gehalten werden - auch das hat natürlich Auswirkungen auf das Layout der Website. Nicht zuletzt stellt die Berücksichtigung des Eingabemediums (Maus und Tastatur vs. Touchscreen) eine zentrale Aufgabe des Responsive Web Designs dar.

"Aber die Website wird doch richtig angezeigt; der Benutzer kann einfach hineinzoomen!"

Das geht, strapaziert aber die ohnehin kurze Aufmerksamkeitsspanne des Benutzers. Zoom - Klick - Zoom - Klick... Der Benutzer erwartet sich inzwischen eine Website, die z.B. auf einem Smartphone so komfortabel wie eine App navigiert werden kann - ohne sich extra eine App dafür herunterladen zu müssen. Warum sollte das Navigieren und Finden der gewünschten Information nicht genauso optimal funktionieren, wie auf dem Desktop mit Tastatur und Maus?

Eine weitere große Rolle spielen die unterschiedlichen Verbindungen (3G, UMTS, LTE, WiFi) mit denen mobile User angebunden sein können sowie die Leistungsfähigkeit der mobilen Endgeräte, die noch nicht an die von klassischen PCs/Notebooks herankommt. Hier wird die Optimierung der Website auf Geschwindigkeit, wie sie BDF-net schon bisher auf klassischen Websites verfolgt hat, wichtiger denn je.

Warum keine eigene Seite für mobile Geräte?

Zunächst stellt sich die Frage: Was fällt überhaupt unter das Schlagwort "mobile"? In der Regel sind damit Smartphones gemeint. Doch auch hier gehen die Display-Auflösungen inzwischen sehr weit auseinander und es reicht längst nicht mehr aus, mobile Websites für das iPhone zu optimieren. Hinzu kommen folgende negative Seiteneffekte:
  • Doppelter Aufwand bei Entwicklung der Website, da zwei Systeme entwickelt werden
  • Doppelter Wartungsaufwand für unsere Kunden, da Inhalte in beiden eingepflegt und aktualisiert werden müssen.
  • "Mobile" Seiten sind oft eine abgespeckte Version der Hauptseite, wodurch dem Benutzer nicht alle Inhalte zur Verfügung stehen.
  • Die "Hauptseite" hat eine fixe Größe, die sich an durchschnittlichen Monitoren orientieren müsste. Die Hauptseite wirkt bei größeren Monitore verloren und nützt den verfügbaren Platz nicht optimal aus.

Kosten vs. Nutzen

Es liegt auf der Hand, dass die Erstellung einer Website, die sich an das Gerät des Benutzers anpasst, aufwendiger ist als die Umsetzung einer "klassischen" starren Website.
Da eine zusätzliche mobile Website aus oben genannten Gründen oft nicht sinnvoll ist und ein Verzicht auf eine responsive Website die Benachteiligung einer bereits sehr großen und exponentiell wachsenden Benutzergruppe (siehe Fakten) bedeuten würde, führt kein Weg mehr an einer anpassungsfähigen Website vorbei.

Fakten

Laut einer Forsa-Umfrage ist der Anteil der Internetnutzer, die ihr Handy für den mobilen Internetzugang benutzen von 13% im Jahr 2008 auf 58% im Jahr 2012 gestiegen.

Es wird erwartet, dass bis zum Jahre 2014 mehr Menschen mit mobilen Geräten ins Internet gehen als mit klassischen Desktop-PCs.

Standard bei BDF-net

Seit dem Jahreswechsel 2012/13 setzt BDF-net Projekte strikt mit Responsive Web Design um. BDF-net Kunden profitieren künftig von der Garantie, mit dem Onlinegang ihres neuen Projektes ihre Zielgruppen auch auf Tablets und Smartphones mit perfekt abgestimmter Webkommunikation zu begrüßen. Ohne extra Aufwände für mobile Versionen oder Apps.

Best Practice Beispiele für RWD:
Smashingmagazine (Responsive Site)
TIME (Responsive Site)
Media Queries (Weitere Beispiele)