Responsive Webdesign – Grundlagen
Der Erfolg der Smartphones und Tablets macht es nötig, beim Webdesign auch daran zu denken. Eine gute Hilfestellung ist das Video-Training Responsive Webdesign – Grundlagen von Michael Rüttger. Anhand von einfachen Beispielen werden Media-Queries, unterschiedliche Implementierungsvarianten anhand einfacher Skripte und eine komplette Beispiel-Website schrittweise vorgestellt.
Die Umsetzung eines dynamischen Layouts, die Abfrage unterschiedlicher Devices und die konkrete Umsetzung eines Screendesigns für das iPad sind hier große Themen. Das Video-Training ist bei video2brain erschienen und hat eine Laufzeit von 1½ Stunden.
-
Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:
http://www.colibrimedia.de/responsive_design/example.html
Comments