Responsive Design

Beim Responsive Webdesign handelt es sich um ein gestalterisches und technisches Paradigma in der Webseitengestaltung. Es stellt die entsprechende Webseite optimiert für das jeweilige Endgerät dar. Dies kann ein Desktop Computer, ein Tablet oder ein Smartphone sein. In der Umsetzung einer Webseite oder eines eShops stellen wir sicher, dass das User Interface auf die jeweiligen Endgeräte reagiert und sich responsive verhält.

Was ist Responsive Design?

Unter Responsive Design wird oftmals die Gestaltung mobiler Webseiten verstanden. Responsive Webdesign ist aber vielmehr eine Herangehensweise. Die Gestaltung einer Webseite erfolgt hier theoretisch völlig unabhängig von konkreten Ausgabegeräten.

„Responsive“ bedeutet in etwa „reaktionsfähig bleiben“ oder „auf etwas bestimmtes eingehen“. Ein Responsive Webdesign reagiert auf das Endgerät, mit dem wir auf eine Webseite zugreifen. Die Darstellung im Browser erfolgt also optimal auf das jeweilige Gerät abgestimmt, ganz unabhängig davon, welche Auflösung es verwendet und welches Ausgabegerät genutzt wird. Dabei passt sich Responsive Design flüssig verschiedenen Browsern, Auflösungen und Endgeräten an.

Navigationselemente, Seitenspalten, Texte, Bilder, Tabellen, Teaser und alle weiteren darstellenden Elemente reagieren flexibel auf die jeweilige Bildschirmgröße. Neben der Anordnung und Darstellung von einzelnen Objekten betrifft dies auch die unterschiedlichen Eingabemethoden. Während am Desktop-PC die Maus und eine Tastatur zur Eingabe zur Verfügung stehen, erfolgt die Bedienung am Smartphone via Touch- und Swipe-Verhalten. Technische Basis für diese individuelle Aussteuerung des Webdesigns sind die neusten Webstandards.

Wie funktioniert Responsive Design?

Um ein Layout optimal auf große Bildschirme und verschiedene mobile Endgeräte anzupassen, muss das komplette Web Design flexibel angelegt sein. Es bestehen also keine festen Layout-Grids und keine festen Schrift- oder Bildgrößen. Statt fester Pixelwerte werden prozentuale Werte verwendet. Umgesetzt wird ein Responsive Webdesign mithilfe von Media Queries. Diese Media Queries definieren, an welchen Stellen die Inhalte bei kleineren Screengrößen umbrechen sollen.

Mobile First

Wird eine Webseite in Desktop-Ansicht gestaltet und dann technisch responsive umgesetzt, entstehen auf dem Smartphone durch das Umbrechen der Elemente sehr lange Seiten. Durch diese muss der User unkomfortabel lange scrollen. Natürlich können für eine mobile Ansicht die Texte der Desktop-Version gekürzt oder einzelne Elemente ausgeblendet werden. Darunter leidet aber schnell die Usability, insbesondere wenn der Nutzer beide Seitenvarianten kennt - die mobile und die Desktop-Ansicht. Aus dieser Problemstellung heraus entstand das Prinzip Mobile First. Hierbei orientiert sich das Webdesign an der Darstellung auf mobilen Endgeräten, vor allen Dingen an der Darstellung auf Smartphones. Das Design ist also initial für kleine Bildschirme optimiert. Der zentrale Aspekt einer Seite wird stärker betont. Nur unbedingt nötige Elemente werden im Responsive Webdesign berücksichtigt. Die Konzeption beschränkt sich also ausschließlich auf das Wesentliche. Um eine maximale Funktionalität auf allen Endgeräten zu erzielen, wird nur das nötigste programmiert. Insbesondere, wenn ein digitales Angebot komplett neu entsteht, empfehlen wir ein Responsive Webdesign nach der Mobile First Methode.

Warum ist Responsive Webdesign wichtig?

In erster Linie dient das Responsive Design einer raschen Erfassung und einer guten Usability der Webseite auf verschiedenen Endgeräten in unterschiedlichen Browsern. Darüber hinaus bringt das Responsive Design aber noch viele weitere Vorteile mit sich. So ist Responsive Design für die Suchmaschinenoptimierung (SEO) essenziell, da die Suchmaschinen responsive Webseiten bei der Indizierung mit einem höheren Ranking belohnen. Auch verfügen Seiten mit responsivem Layout und Verhalten aufgrund ihrer Benutzerfreundlichkeit nachweislich über geringere Absprungraten.

Während es früher üblich war für verschiedene Screen-Größen unterschiedliche Inhalte zu erstellen, ist dies im responsiven Webdesign nicht mehr erforderlich. Alle Inhalte werden nur einmal erstellt und gepflegt. Dies ermöglicht deutliche Einsparungen in der laufenden Pflege einer Website.
Um heute im Online Marketing wettbewerbsfähig zu sein, kommt man im mobilen Internet nur in den seltensten Fällen um ein Responsive Design herum. Wird auf eine responsive Darstellung verzichtet, wirkt das Angebot veraltet und nicht zeitgemäß. Dies ist selbst dann der Fall, wenn ein Großteil der Nutzer via Desktop-PC zugreift. Künftig werden neben Tablet, Smartphone, Smart-TV und Smartwatch viele weitere Screen-Größen und Ausgabegeräte hinzukommen. Gerne beraten wir Sie umfassend zum Thema.