TREND: Responsive Webdesign

08 Aug TREND: Responsive Webdesign

Responsive Webdesign ist definitiv ein Web-Trend, der zukunftsweisend ist. Die Webseite „reagiert“ auf die Aktionen des Nutzers und „erkennt“ das Gerät, mit dem die Seite gerade genutzt wird. Aufgrund seines flexiblen Rasters passt sich das Layout an die vorgegebene Bildschirmauflösung an. Anbei sind einige Infos, Vorteile und Anmerkungen zusammengefasst.

„Fluid Grid“ – eine flexible Struktur als Basis

[vc_separator type=’small‘ position=’left‘ color=’#444444′ thickness=’4′ up=’15‘ down=’20‘]

Marie surft auf einem Desktop-Monitor, Christoph ruft unterwegs eine Seite auf einem Handy auf und Anna eine Webseite auf dem iPad. So unterschiedlich die User-Typen so verschieden sind auch die Bildschirmauflösungen. Ein wachsendes Problem, denn es werden ständig neue mobile Endgeräte auf den Markt gebracht. Hinzu kommt auch die Möglichkeit, die Inhalte horizontal oder vertikal zu betrachten. Dies stellt den Webdesigner vor die Entscheidung, das Layout jeweils einzeln für die gängigsten Medien zu optimieren oder das Raster flexibel zu gestalten.

Bei einer „ansprechenden“ Struktur passt sich das Layout und somit Textfelder, Bilder, Grafiken, etc. dem Gerät an. Dabei wird der kleinste Raum des Handy-Bildschirms als Basis für das Design genommen („Mobile first“). So kann der Screendesigner immer noch Details zu einem reduzierten Layout hinzufügen. Insgesamt bedeutet dies zwar eine intensivere Planungs- und Entwicklungs-Phase , zieht aber auch eine geringere Pflegezeit nach sich.

Ja, aber: Vor- und Nachteile

[vc_separator type=’small‘ position=’left‘ color=’#444444′ thickness=’4′ up=’15‘ down=’20‘]

Es gibt gute Gründe sich für ein responsive Design für eine Webseite zu entscheiden: Der Pflegeaufwand betrifft nur eine Seite  und ist die Seite einmal befüllt und online, muss man sich abgesehen von obligatorischen Updates um nichts mehr kümmern. Dies ist die ideale Lösung für übersichtliche Inhalte und Layouts, die auch nicht sehr viel Ladezeit mit sich bringen. Hier zu nennen sind Blogs oder Portfolio-Seiten. Für umfangreiche Portal-Seiten oder E-Shops ist eine individuelle mobile Seite oder App-Entwicklung zu überdenken, denn die Reduzierung der Inhalte wäre zu radikal. Der Arbeitsaufwand vorab ist auch nicht unerheblich. Des Weiteren gibt es noch mit alten Browsern Probleme, die wegen längerer Ladezeiten und CSS3 Media Queries die Seite nicht richtig darstellen können.

Inspirationen & Beispiele

[vc_separator type=’small‘ position=’left‘ color=’#444444′ thickness=’4′ up=’15‘ down=’20‘]

Screenshot mediaqueri.es

Screenshot mediaqueri.es

Viele Beispiele für gelungenes responsive Webdesign gibt es auf Media Queries.

Wer mehr über responsive Design erfahren möchte, kann sich unter A list apart oder WenDesignShock einlesen.

[vc_separator type=’full_width‘ position=’center‘ color=’#c9c9c9′ thickness=“ up=’30‘ down=’20‘]

CHM nutzt Responsive Webdesign

[vc_separator type=’small‘ position=’left‘ color=’#444444′ thickness=’4′ up=’15‘ down=’20‘]

Wir als Agentur wollen auf jedem Online-Medium eine gute Figur machen. Da wir noch keine angepasste Webseite für mobile Telefone hatten, war im Hinblick auf Nutzerfreundlichkeit und Pflege das Responsive Webdesign die beste Lösung. Der Leitspruch „Form follows function“ stand bei der Neukonzeption im Fokus: Wir gehen von der kleinsten Fläche aus und reduzieren den Inhalt soweit, dass der Nutzer leicht navigieren kann. Auch wenn noch einige kleine Fehler auftauchen, funktioniert die Anpassung sehr gut. Und wer weiß, wie viele neue Bildschirmauflösungen noch hinzukommen…