Responsive Webdesign

Responsive Webdesign (Abkürzung rwd und auf deutsch responsives Webdesign) ist durchaus wörtlich zu nehmen. Responsive bedeutet reagieren. Sprich, das Webdesign reagiert auf z.B. Bildschirmgrößen. Wird eine Website auf einem Computer mit einem großen Browserfenster angezeigt, wird meistens die Steuerung und der Inhalt anders dargestellt als auf einem kleinen Handydisplay.

Wir können beim Design entsprechend darauf reagieren. Das schöne ist, dass wir nichts am Inhalt ändern müssen, wenn dieser technisch geschickt aufgebaut ist. Der Pflegeaufwand vom Inhalt ist also nicht größer – aber die Nutzergruppe steigt, da viele Menschen ihr Handy bzw. ihr Tablett zum Surfen nutzen.

In den folgenden Kapiteln werden alle notwendigen Vorgehensweisen vorgestellt und wie gewohnt Schritt für Schritt umgesetzt.

Gestartet wird gleich mit einem Leckerbissen, der Responsive Webdesign glänzen lässt. Wir erstellen eine Steuerung für eine kleine Website, die je nach Bildschirmbreite zwischen der unterschiedlichen Darstellung der Navigation automatisch umschaltet.

• Toggle Menü ohne JavaScript für mobile Navigation
• Klassische Steuerung für den Umbau vorbereiten
• Erweitern zur Menüsteuerung (Toggle-Menü) ohne JavaScript
• Automatische Umschaltung je nach Auflösung (Responsive Webdesign)

Weitere geplante Inhalte ist ein Kapitel über Media Queries (damit wird erst Responsive Webdesign einfach möglich) und Vorgehensweise bei Bilder und anderen Mediainhalte sowohl der Vorgehensweise bei zwei- und Dreispaltigem Layout.