Brauchen Sie eine mobile Webseite? Fragen Sie bei uns an. Ein responsive Design bringt viele Vorteile.

1. Responsive Webdesign
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

2. 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.