Responsives Webdesign beschreibt eine grundsätzliche Denkweise, die sich auf die Gestaltung und Technik von Websites bezieht. Dabei stehen im Fokus die Eigenschaften der Website, die auf die verschiedenen Endgeräte reagieren müssen. Webdesigner nutzen für die Erstellung einer responsiven Website die aktuellen Webstandards JavaScript, CSS und HTML jeweils in der neuesten Fassung. Der Begriff „Responsives Design“ verwendete Ethan Marcotte im Jahr 2010, allerdings in Bezug auf die Architektur. Ein Jahr später wiederholte er in seinem Buch „Responsive Webdesign“ den Begriff.
Die Gestaltung einer Website
Der Zugriff auf das Internet erfolgt über verschiedene Endgeräte wie Desktop-PC, Smartphone, Tablets, Fernsehgeräten, Laptops und E-Book-Readern. Jedes dieser Geräte verfügt über eine andere Größe und Auflösung des Bildschirms oder Displays. Ebenfalls variiert bei Endgeräte die Bedienung, die entweder über die Maus oder per Touchscreen erfolgt. Auch differiert die Bandbreite der Internetverbindung bei den einzelnen Endgeräten. Websites, welche Webdesigner starr gestalten, sind nicht auf alle Geräte übertragbar. Fachleute wählen für die Website ein Design, das reaktionsfähig ist und die verschiedenen Anforderungen der diversen Endgeräte erfüllt. Wichtig dabei die Benutzerfreundlichkeit des Internetauftritts.
Die unterschiedliche Gestaltung bezieht sich hauptsächlich auf Blockelemente. Hier passen Webdesigner das Viewport an, damit sich die Darstellung der Seite alternativ positioniert; je nach Größe und Auflösung des Displays. Diese Anpassung ist hauptsächlich bei Logos und Bilder notwendig. Textpassagen haben einen automatischen Umbruch. Dieser fordert lediglich eine kleine Skalierung des Inlineelements Text, damit die Lesbarkeit erhalten bleibt.
Abgrenzung zu anderen Gestaltungen – die mobile Webseite
Das responsive Webdesign unterscheidet sich von der mobilen Website. Der Unterschied besteht im Wesentlichen aus der Anzahl der Templates. Während beim mobilen Webdesign zur Desktop-Version für mobile Endgeräte ein zusätzliches Template zum Einsatz kommt, ist dies beim responsiven Design nicht der Fall. Hier erstellt der Webdesigner eine Version der Website, die sich den Gegebenheiten selbstständig anpasst.
Im Gegensatz zum responsiven Webdesign passt sich die adaptive Website nicht den verschiedenen Displays an. Sie beschränkt sich auf eine festgeschriebene Menge von Breakpoints. Zwischen diesen bleibt das Layout statisch; eine Anpassung an die Displays findet nicht statt. Bei der Gestaltung einer liquiden Website bleibt der verfügbare Platz für das liquide Layout stets im selben Verhältnis erhalten. Beim Verschieben werden die Inhalte der Website schmaler, die Elemente verändern sich jedoch nicht.
Die Technik beim responsivem Design
Eine wesentliche Voraussetzung für das responsive Design bilden die die Media Queries. Diese sind ein Konzept von CSS3. Dieses Konzept macht es möglich, verschiedene Designs abhängig von gewissen Eigenschaften des Ausgabegerätes zu kreieren. Folgende Kriterien kommen dafür in Betracht:
• Bildschirmauflösung,
• Größe des Geräts,
• Eingabemöglichkeiten
• Orientierung des Formats.
Experten betten Media Queries ins Stylesheet ein. Bestimmte Regeln der Browser kommen nur dann in Betracht, wenn sie definierten Anforderungen erfüllen. Damit auch ältere Browser die Website problemlos öffnen, rüsten Webdesigner ihre Seite mit Polyfills aus, welche der nicht vorhandenen Funktionalität der Browser durch JavaScript abhilft. Neben CSS3 gehören HTML ab Version 5 sowie JavaScript zu den Werkzeugen, mit denen Webdesigner beim responsiven Design arbeiten. In der Regel erfolgt die Umsetzung einer responsiven Website mit CSS Frameworks. Diese bringen eine große Anzahl Funktionen für die unterschiedlichen Größen und Auflösungen von mobilen Endgeräten.