Responsive Webdesign – die neue Generation von flexiblen Websites

17. April 2013Nella Klopotek von Glowczewski und Patrick Dahms

Mit der Zunahme von verschiedenen internetfähigen Endgeräten sieht sich Webdesign und Web Development immer stärker neuen Anforderungen ausgesetzt. Inhalte einer Website müssen heute optimiert auf die Bedürfnisse des Nutzers, ausgehend von den unterschiedlichen Displaygrößen, Auflösungen, Displayausrichtungen und Bandbreite der jeweiligen Geräte, angepasst und wiedergegeben werden. Neben den Änderungen in der Darstellungsform muss zudem auf ein neues Nutzungsverhalten reagiert werden.

Spricht man über die Verbraucher und deren Endgeräte so prognostiziert Gartner, dass 2013 das Mobiltelefon den PC als Mittel zum Internetzugriff überholen wird. Bereits 2015 werden über 80% aller verkauften Mobiltelefone Smartphones sein und Tablets 50% der gehandelten Laptops ausmachen.

Um auf diese Änderungen im Nutzungsverhalten des Konsumenten zu reagieren, wird im Webdesign immer stärker auf Responsive Webdesign gesetzt. Responsive Webdesign ist die technische Umsetzung eines anpassungsfähigen Layouts. Hier verfügt die Struktur der Website und damit die Inhalte über die Fähigkeit, sich an Displaygröße, Plattform und Ausrichtung anzupassen. Somit sind die wesentlichen Bestandteile eines Responsive Webdesigns flexible Layout-Raster, anpassungsfähige Grafiken und eine dynamische Skalierung der Inhalte. In mobilen Ansichten werden Navigationen einfacher, das Layout-Design ist auf die jeweilige Anforderung besser angepasst und die Inhalte stärker fokussiert. Zum Beispiel werden Navigationselemente im mobilen Bereich für die Bedienung durch Finger im Verhältnis größer dargestellt und Verlinkungen oft durch eine Button-Darstellung ersetzt. So kann der Nutzer global, von überall, zu jeder Zeit gezielt und benutzerfreundlich die geforderten Inhalte abrufen.

Die technische Grundlage bilden hier die aktuellsten Webstandards HTML5, CSS3 und JavaScript. Neben diesen Webstandards haben sich in der Praxis zusätzlich eine Reihe von technischen Frameworks durchgesetzt, die verschiedene Werkzeuge und Lösungen bereitstellen, um so den Umgang mit Responsive Design zu erleichtern. Über sogenannte Breakpoints werden mit Hilfe von Media Queries im CSS die Punkte definiert, an denen das Design den Aufbau der Seite auf das nächstliegende Design umbricht. Als Vorgehensweisen haben sich die Entwurfsmuster Mostly Fluid, Column Drop, Layout Shift und Off Canvas etabliert. Hier wird grundlegend bei kleiner werdenden Geräten der Inhalt gestaucht, spaltenweise umgebrochen oder reduziert.

Welche Konsequenzen und Möglichkeiten ergeben sich so aus Responsive Webdesign für Unternehmen? Eine Website deckt mit verschiedenen Layouts alle Endgeräte ab, z.B. eine mobile Ansicht. Mit Hilfe eines gut eingesetzten Responsive Webdesigns können Inhalte redaktionell erstellt oder verändert werden und passen sich automatisch ohne zusätzlichen Aufwand an die jeweilige Plattform an. Die dynamische Anpassung der Medien ermöglicht zusätzlich eine optimierte Zugriffszeit. Mit der semantischen Strukturierung der Inhalte, die bei Responsive Webdesign erfolgt, wird die Grundlage für eine barrierefreie Website geschaffen. Darüber hinaus kann ein einheitliches Corporate Design auf allen Endgeräten erzeugt werden.

adesso hat bereits im Rahmen vieler Projekte Erfahrung und Kompetenz im Bereich Responsive Webdesign gesammelt und erfolgreich integriert. Planen Sie Ihren nächsten Relaunch für den Umstieg auf die neue Generation von flexiblen Websites mit Responsive Webdesign? Haben Sie Fragen dazu? Sprechen Sie uns gerne an.

Nella Klopotek von Glowczewski und Patrick Dahms Nella Klopotek von Glowczewski und Patrick Dahms sind bei der adesso AG am Standort Berlin beschäftigt. Nella Klopotek von Glowczewski ist im Bereich Webdesign und Front End Engineering mit Schwerpunkt auf HTML, CSS und JavaScript tätig.Patrick Dahms ist Softwareentwickler mit Fokus auf Java, HTML5 und JavaScript.
Artikel bewerten:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

Kommentare

Marie 22. April 2013 Website des Autors

Ich denke, dass responsive design durch Techniken wie HTML5 und CSS3 extrem vereinfacht worden ist.

Kommentar hinzufügen:

Ihr Kommentar: