Responsives Webdesign – was ist das eigentlich?

Woran erkennt man responsives Webdesign?
Unsere Website ist responsiv. In der Abbildung oben sehen Sie, wie die Seiten auf einige der gängigsten Bildschirmauflösungen reagiert. Die Elemente der Seite reagieren flexibel, werden kleiner, verändern ihre Abmessungen oder rutschen an andere Positionen.
Testen Sie selbst:
Schieben Sie das Browserfenster einmal extrem klein zusammen, wenn Sie unsere Website am PC anschauen (funktioniert ab IE 9!).

Technischer Hintergrund
Bis vor einigen Jahren wurden Websites an bestimmte Monitorauflösungen angepasst. Dabei gingen Webdesigner vom kleinsten gemeinsamen Nenner (z.B. 1.024 x 768 px) als Grundlage aus. Die Benutzer größerer Bildschirme sahen in ihren Browserfenstern meistens sehr viel Leerraum (der mit Farben oder Hintergrundbildern aufgefüllt wurde)  rund um die eigentliche Website, die häufig links oben in der Ecke klebte. Das Design blieb starr und unbeweglich.
Solche Internetseiten können von mobilen Endgeräten nur in einer starken Verkleinerung angezeigt werden. Navigationselemente und Text sind nicht gut lesbar, so dass der User auf solchen Websites permanent mit den Fingern skalieren muss.
Bei den ersten »mobilen Websites« handelte es sich meist um eine abgespeckte einspaltige Schmalspur-Version des Internetauftritts, funktional wie inhaltlich auf das Nötigste heruntergebrochen. Häufig liefen diese Websites unter Subdomains (m.).

Inzwischen gibt es aber auch bei iPhones, Android-Geräten und Tablet-PC verschiedene Bildschirmauflösungen. Responsives Webdesign löst dieses Problem und geht über das mobile Webdesign der ersten Generation hinaus: Wie der Name schon sagt, »antwortet« das Webdesign auf die Anforderungen des jeweiligen Endgeräts.
Entsprechend optimierte Internetseiten passen sich automatisch an jedes Endgerät und die Auflösung seines Displays an.
Je nach Breite des Screens »fließen« die Inhalte an andere Stellen und werden untereinander oder nebeneinander angeordnet.
Navigation und Text werden immer angepasst in lesefreundlicher Größe angezeigt, was für den User wesentlich komfortabler ist.

Auch für die immer größeren Bildschirme der stationären PC bietet responsives Webdesign Vorteile. Während bei herkömmlich programmierten Seiten der Inhalt entweder als Streifen in der Mitte steht oder am linken Rand des Browserfensters klebt, nutzen optimierte Seiten den Raum besser.


Warum ist das wichtig?

Die mobile Internet-Nutzung in Deutschland hat sich in den letzten drei Jahren mehr als verdoppelt. Waren es 2008 nur 13 %, gingen 2012 schon 58 % der Internetnutzer mit mobilen Endgeräten wie Smartphone und Tablet-PC ins Web. Experten schätzen, dass im privaten Bereich Smartphone und Tablet-PC langfristig den heimischen PC und das Notebook als bevorzugte Tools verdrängen werden.
Eine Cisco-Prognose zum monatlichen mobilen Datenverkehr weltweit geht bis 2016 von einer Vervielfachung des Traffics aus. Laut einer Umfrage sind die von den Deutschen am häufigsten im mobilen Internet genutzten Inhalte E-Mails, Produktinformationen und Nachrichten. Die Umsätze mit dem mobilen Internet in Deutschland werden bis 2015 auf 4,6 Milliarden Euro steigen. (Quelle: de.statista.com)

Die Optimierung von Websites für mobile Endgeräte wird also mittel- bis langfristig für Seitenbetreiber zwingend erforderlich. Der Trend zur mobilen Netznutzung (in der Bahn, auf Messen…) ist unumkehrbar, und sollte auch von Mittelstand und Industrie beachtet werden. Für Branchen wie Gastronomie oder Hotellerie ist eine mobile Website heute schon ein starker Wettbewerbsvorteil. Auch die Internetauftritte touristischer Ziele wie z.B. Museen oder Kommunen werden gern von unterwegs mit dem Smartphone betrachtet.

Beispiele responsiver Websites von uns:
Restaurant Falco in Leipzig
Stadtwerke Fröndenberg
Privathotel-Bremer
Westpreußisches Landesmuseum
Fotoakademie Ralf Müller
bild-werk expo & event
switch! GmbH

Vielleicht interessiert Sie auch: Goodbye Arial! Besser aussehen im Internet mit individuellen Schriften

Foto: © Maksim Kostenko – Fotolia.com

 

 

Gepostet von am

Gepostet unter Web + Social Media
Verschlagwortet mit ,

kommentieren




Bitte ein Update!

Kennen Sie unseren Newsletter »Update PW«?
Drei- bis viermal im Jahr informieren wir Sie damit zu Themen aus Design, Internet und/oder Marketing, Social Media, Work-Life, empfehlen Bücher oder nützliche Tools. Die bisherigen Inhalte können Sie hier anschauen.
Selbstverständlich benutzen wir Ihre E-Mail-Adresse ausschließlich für den Versand unseres Newsletters und geben sie nicht an Dritte weiter. Bestellen Sie den Newsletter bitte hier:

* erforderlich

Bevorzugtes E-Mail-Format: