Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können. Der grafische Aufbau einer „responsiven“ Website erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie Navigationen, Seitenspalten und Texte, aber auch die Nutzung unterschiedliche Eingabemethoden von Maus (klicken, überfahren) oder Touchscreen (klicken, wischen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3 (hier insbesondere die Media Queries) und JavaScript. Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Website stark abhängig vom Endgerät. Websites, die mit einem reaktionsfähigen Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild sind neben der Größe des Anzeigegerätes beispielsweise verfügbare Eingabemethoden (Touchscreen, Maus) oder die Bandbreite der Internetverbindung. Vor allem Blockelemente müssen unterschiedlich behandelt werden. Nutzt das Gestaltungsraster mehrere Spalten, so können diese variable an die Breite des jeweiligen Viewports angepasst werden und bei kleinen Auflösungen, wenn eine Darstellung nebeneinander nicht mehr passt, untereinander verschoben oder alternativ positioniert werden. Bilder sollten maximal auf ihr umgebendes Element, aber grundsätzlich nicht über ihr native Größe, skaliert werden. Texturen für Hintergründe können versteckt überfließen. Hintergründe mit Motiv werden bei kleinen Darstellungen auch weggelassen. Logos können wie Bilder verkleinert oder bei großen und detailreichen Grafiken durch ein kleineres Signet ersetzt werden. Vertikale Menüleisten brauchen oft viel breite und können als Liste um positioniert werden. Und zusätzlich ein geklappt und erst auf Klick oder Scrollposition eingeblendet werden. Das Inlineelement Text darf nur wenig kleiner skaliert werden um die Lesbarkeit zu erhalten. Da er aber automatisch umbricht ist eine spezielle Anpassung nicht nötig.
zur Newsübersicht