Responsive Webdesign / HTML5 / CSS3 / Gridmodel

Responsive Webdesign

Responsive Design bedeutet, Content so auszuliefern, dass die Inhalte in Abhängigkeit von der Größe des Displays optimiert dargestellt werden, ohne für jede Oberfläche individuellen Code bereit zu stellen. Bootstrap, HTML5 und CSS3 sind die entsprechenden Buzzwords.


Durch die zunehmende Medienkonvergenz sind heute wesentlich mehr Geräteklassen internetfähig als früher. Dieser Fakt resultiert in einer großen Bandbreite relevanter Displaygrößen und -auflösungen, wenn es um die Darstellung von internetbasierten Inhalten geht.

Sollen Inhalte auf jedem relevanten Gerät korrekt und professionell angezeigt werden, müssen sie so strukturiert sein, dass sich die Inhalte am Gerät orientieren. Dies kann über Apps oder gerätespezifische Formatierung („User Agents“) geschehen. Der Aufwand hierfür ist groß. Neue Geräte müssen laufend klassifiziert und eingepflegt werden.

Um die Kosten für eine gerätespezifische Darstellung einzugrenzen, konzentriert man sich bei einer sog. Responsiven Konzeption auf die Faktoren Displaygröße, Kompatibilität zu HTML5 und CSS3 sowie auf die Berücksichtigung von Touchgesteuerten Displays.

Bei der Umsetzung bedient sich der Entwickler der Technologien HTML5 undCSS3. Über sog. „media queries“ wird clientseitig die Monitorgröße ermittelt und der Inhalt entsprechend angeordnet. Für bestimmte Browser kann es nötig werden, auf sog. „Browserhacks“ zurückzugreifen (IE7,8…). Hier helfen zusätzlich Tools wie Modernizr etc..


Design Grid


Anordnung eines Contents auf verschiedenen Screens - ein Grid.


 

Eine einzige Realisierung ermöglicht so die sehr gute Darstellung auf einer großen Zahl von Geräten. Raster, Schemata oder eben Grids als Framwork gibt es einige, das meistgenannte ist das Twitter Bootstrap Grid, es gibt aber durchaus auch andere.

unitb consulting empfiehlt ein iteratives Vorgehen im Projektverlauf, d.h., eine inhaltsgetriebene Konzeption sollte in mehreren Feedbackschleifen auf ihre technische Machbarkeit geprüft werden.


Responsive Workflow


Beispielhafter Workflow in einem Responsive Design Projekt.


Im Gegenzug muss das technisch Machbare immer wieder auf seine Nähe zum ursprünglichen Konzept geprüft werden. Insofern empfiehlt sich ein klassischer Entstehungsprozess nicht, die Zusammenarbeit zwischen Kunde und Agentur beginnt bei einem solchen Projekt idealerweise wesentlich früher.

In Bezug auf Navigation und inhaltliche Tiefe sollte von vornherein die responsive Konzeption berücksichtigt werden. Dies gilt sowohl für die Anordnung der Elemente in einem Grid, als auch für das eigentliche Navigationskonzept. Die Navigation nimmt bei touchbasierten Oberflächen auf kleinen Bildschirmen schnell sehr viel  Fläche ein, daher ist die Tiefe der Contentstruktur konzeptionell zu beachten.

unitb consulting würde sich freuen, eine neue Website oder auch den Relaunch eines bestehenden Portals mit einem responsiven Konzept zu begleiten oder auch für Sie umzusetzen. Sprechen Sie uns an.


Wir melden uns.

Falls Sie Fragen oder Interesse an weiteren Informationen haben, nehmen Sie Kontakt mit uns auf.

Telefon +49.30.44 31 92 00
E-Mail office@unitb-consulting.de
Adresse unitb consulting GmbH
Brunnenstraße 156
10115 Berlin