mediaclou gmbh - Agentur für Werbung und Medienintegration

mediaclou gmbh Slogan
Responsive-Webdesign mit HTML5 und CSS3

Eine Webseite mit variablen Ansichten. Hier abgebildet normal am Monitor und wie eine App auf dem Smartphone oder Tablet.

Heute ein Muss: Responsive Webdesign mit HTML5 und CSS3

Webseiten, die im Sinne von Responsive Webdesign (RW) programmiert sind, passen sich automatisch dem Bildschirm (Viewport) an, auf dem sie angesehen werden (Smart- oder iPhone, Tablet PC, Laptop, Desktop etc. ). Videos, Bilder und Texte werden entsprechend des anzeigenden Bildschirms skaliert. 

Häufig werden hierbei drei bis vier Größenschritte vorgegeben, in denen sich das Design verändert (z.B. werden bei einem breiten Bildschirm drei Spalten, auf einem weniger groĂźen zwei und auf einem Smartphone nur eine Spalte angezeigt). Zwischen diesen Schritten zoomt das Design   mit der Größe des Bildschirms mit. 

Die Idee:
Endgeräte werden immer breiter (groĂźe Monitore in den BĂĽros), auf der anderen Seite immer kleiner (Smartphones). Gleichzeitig in einer immer größeren Vielfalt an Darstellungsgrößen (z.B. neues Samsung Galaxy als „Mittelding“ zwischen Smartphone und Tablet). Daher muss sich das Design an die unterschiedlichen Darstellungen anpassen, natĂĽrlich sieht eine Seite auf einem 26 Zoll Monitor anders aus als auf einem 400px Smartphone. 

Das Grunddesign aller Seiten bleibt gleich – je nach Darstellungsmöglichkeiten werden die Inhalte aber an mehr oder weniger Platz angepasst. So kann man z.B. auf einem großen Bildschirm einen vierspaltigen Text sehen, auf dem kleinen ist er ein– oder zweispaltig, und die Navigation ist gut zu erreichen (und auch mit dem Finger zu bedienen).

Auf portablen Geräten gibt es keinen Maus-Cursor und auch keinen hover-Status sowie kein Flash und keine Dropdown-MenĂĽs. Das muss beim Design und der MenĂĽstruktur, sowie auch bei den Navigationselementen unbedingt fĂĽr diese Geräte beachtet werden. 

Seiteninhalte und Schriftgrößen werden nicht (mehr) absolut in Pixeln dargestellt, sondern "fluid", also relativ zur Bildschirmgröße. So können sie sich der Größe der Seite anpassen. Auch Bilder „wachsen“ oder „schrumpfen“ mit der Größe des Bildschirms, sofern diese zumindest als JPGs eingebunden sind. 

Mehraufwand beim Programmieren
Responsive Webdesign stellt – zunächst – einen Mehraufwand dar. Darstellungen mĂĽssen in verschiedenen Schritten geändert und der Bildschirmgröße und dem Nutzerverhalten angepasst werden. DarĂĽber hinaus muss das Gesamtkonzept der Website den Blick auf die verschiedenen Darstellungen mit enthalten. 

Ein wichtiger Punkt in diesem Zusammenhang ist die Navigation der Website. Daher ist die Konzeptionsphase einer Website mit RW länger. DafĂĽr erhält man eine konsistente Website „aus einem Guss“, die sowohl lokal als auch mobil ähnlich zu bedienen ist. Der höhere Aufwand relativiert sich auĂźerdem wenn man bedenkt, dass man ohne RW sonst vielleicht eine eigene mobile Version (mobi.xxx.de) oder sogar Apps fĂĽr die verschiedenen portablen Betriebssysteme, z.B. iOs (Apple) und Android (Google) anbieten wĂĽrde, und diese komplett neu entwickeln mĂĽsste. 
 
FĂĽr RW ist es nötig, HTML5 und CSS3 zu verwenden, denn ĂĽber die Media Queries, die in CSS3 enthalten sind, kann man die Darstellung des jeweiligen Geräts abfragen, auf dem die eigene Webseite gerade angezeigt wird. 

Bilder sagen mehr als 1000 Worte: Ansprechende Beispiele finden Sie auf mediaqueri.es

Unsere Webseite mit verschiedenen Geräte-Ansichten können Sie auf der dieser Webseite testen und anschauen. Geben Sie dort einfach www.mediaclou.de ein.
Wir haben allerdings auch noch eine zusätzliche Breite über den dort dargestellten 1.024 Pixel programmiert. Diese maximale Breite ist für breitere Monitore über 1.200 Pixel optimiert.