Was ist Responsive Webdesign?

Einige unserer Kunden möchten gerne eine mobile Version ihrer Internetseite. Ansich eine tolle Sache, jedoch gibt es hier einiges zu berücksichtigen weil eine mobile Version der Website ist nicht gleich einfach eine kurze abgespeckte Version der Website. Es gibt eine Vielzahl unteschiedlicher Endgeräte z. B. Apple iPhone, Android Smartphones von Herstellern wie HTC oder Samsung, BlackBerrys und Windows Phone 7 Geräte hinzukommen noch Tablet Geräte wie das Apple iPad oder Samsungs Galaxy Tab und diese riesige Zahl an Geräten ist das Problem. Für jedes Gerät müsste eine eigene Website entwickelt bzw. designt werden, aber es gibt eine einfache Lösung.

Das Problem

Websiten werden weitläufig, solang der Designer und Entwickler die Problematik verstehen, auf eine Auflösung von 1024 x 768 px konzipiert und entwickelt um eine Darstellung auf nahezu allen Computer weltweit sicherzustellen. Wer will schon störende Scrollbalken im horizontalen Bereich. Die Auflösung von 1024 x 768 px deckt auch höhere Auflösungen ab und somit gibt es keine Probleme bei der Darstelung von Websiten. Aufgrund der großen Vielfalt der mobilen Endgeräten kommt es dementsprechend zu unterschiedlichen Auflösungen.

Also was ist Responsive Webdesign?

Responsive Webdesign (Responsive = reaktionsfähig)  ist ein Ansatz das Design und die Entwicklung einer Website an die Umgebung, wie Bildschirmauflösung und die Plattform sowie an das Verhalten des Users anzupassen. Die Umsetzung behilft sich an einem Mix aus Gestaltungsraster, Layouts, Images und den inteligenten Einsatz von CSS. Technisch ist aber alles ein und dieselbe Website die aber unter der Erkennung der Auflösung und der Plattform in ein anders Gestaltungsraster/Design übergeht. Der Vorteil hier: es ist möglich eine Website zu entwickeln und keine zusätzlichen für z. B. das Apple iPhone. Selbes gilt auch für die Pflege der Inhalte alles bleibt konsistent. Die Vorteile liegen auf der Hand.

Zu berücksichtigen ist hierbei die Usability und die User Experience des Besuchers. So gibt es auf Smartphone keinen Einsatz einer Mouse sondern diese Geräte werden meist mit dem Finger bedient. So gibt es keine Mouse-Over für Links die das Erkennen eines Links vereinfacht und signalisieren. Auch ist es möglich gezielt Inhalte aus- oder einzublenden. Sie haben z. B. einen Pizzaservice auf der Website angezeigt auf einem Computer bieten Sie über die Website Ihre Produkte über großzügige Bilder an, auf einem Smartphone jedoch begrenzen Sie Ihr Produkt auf ein Bild aber stellen sofort ihre Telefonnummer und die Speisekarte zur Verfügung denn das vereinfacht es Ihren Besucher sofort bei Ihnen anzurufen und zu bestellen. Das Responsive Webdesign steckt noch in den Kinderschuhen aber weiter unten haben wir 2 Beispiele die selber ausprobieren können um zu verstehen was genau bei reaktionsfähigen Websiten passiert.

Bring mich zur Sasquatsch Website

Sasquatch Website

Die Website zum Sasquatch Festival, hier wird der Übergang von Monitor Auflösung zum Tablet Format mittel Bildgröße verändert. Das Erscheinungsbild auf Smartphone wird entsprechend reduziert dagestellt so wird nur der Trailer zum Festival dargestellt und nur die allerwichtigsten Inhalte im Menü.

Responsive Webdesign

Ribot Website

 

Ein weiteres Beispiel ist die Website des Unternehmens Ribot aus Großbritannien. Hier ist der Übergang etwas fließender so das die Website auch auf 1280 x 1024 px groß dargestellt weden kann umso mehr rutscht quasi die Website zusammen solang die Bildschirmauflösung das zulässt. Die Slideshow wird auf dem Tablet gar nicht mehr angezeit sondern lediglich das Mobiltelefon. Bei der Smartphone Variante erhält das Menü einen Zeilenumbruch. Auffallend hier ist das großzügig angelegte Menü um die Navigation per Berührung auf Smartphone und Tablets zu vereinachen.

Hier finden Sie noch weitere interessante Beispiele zu reaktionsfähigen Websiten. Noch ein Tip von mir sollten sie kein Smartphone oder Tablet besitzen so können Sie die Versionen solcher Webseiten ganz einfach selber betrachten, schalten Sie Ihren Browser in den Fesntermodus und ziehen Sie einfach das Fenster kleiner dann können Sie die anderen Versionen der Websiten betrachten

Zusammengefasst ist es ein Eintritt in ein neues Zeitalter der Webentwicklung. Setzen auch Sie auf den Einsatz einer reaktionsfähigen Website, um auch auf mobilen Endgeräten, wie Smartphones und Tablets, Ihrem Besucher dasselbe Erlebnis bieten zu können.

Sie möchten gerne mehr erfahren dann rufen Sie uns einfach an.

Viele Grüße

Ihr Jan Semler

Hinterlasse einen Kommentar