Was ist Responsive Webdesign?

Die Menschen verbringen im Durchschnitt 3,7 Stunden pro Tag mit digitalen Medien auf ihren Smartphones. Aufgrund dieses veränderten Nutzerverhaltens reicht es nicht mehr aus, eine Website im Internet zu haben, die nur vom heimischen Desktop Computer aus funktioniert.

Responsive Webdesign bedeutet, dass sich deine Website an die Bildschirmgröße anpasst. Damit bietet sie dem Nutzer das beste Erlebnis, egal ob er auf seinem Desktop, Laptop, Tablet oder Smartphone surft. Damit das möglich ist, benötigt deine Website Responsive Webdesign.

Responsive Webdesign passt sich automatisch an unterschiedliche Bildschirmgrößen und Viewports an. Mit einer responsiven Website kann jemand deine Website von jedem Gerät aus aufrufen und sie sieht immer noch perfekt aus und funktioniert.

Wie funktioniert responsives Webdesign?

Responsive Webdesign funktioniert über Cascading Style Sheets (CSS). Die verschiedene Einstellungen verwenden, um je nach Bildschirmgröße, Ausrichtung, Auflösung, Farbfähigkeit und anderen Merkmalen des Geräts des Nutzers unterschiedliche Stileigenschaften zu verwenden. Einige Beispiele für CSS-Eigenschaften im Zusammenhang mit responsivem Webdesign sind der Viewport und Media Queries.

Eine typische Website besteht aus einer Reihe von Dateien (jede Webseite – Startseite, Info-Seite usw. – ist eine einzelne Datei). Jede Datei enthält HTML-Code und Inhalte (Text und Bilder). Die Webseiten werden mit Dateien namens Cascading Style Sheets (CSS) gestylt. Die CSS-Dateien bestimmen also das Aussehen und Gestaltung deiner Website und die HTML Dateien den Inhalt.

Der Einfachheit halber nehmen wir an, dass eine standardmäßige (nicht responsive) Website aus einer Reihe von Dateien und ein paar CSS-Dateien besteht, die das Aussehen der Website bestimmen. Eine responsive Website wendet andere Regel aus der CSS-Datei an, je nachdem, mit welchem Gerät auf die Website zugegriffen wird. Die Website sieht je nach Gerät anders aus und „reagiert“ anders.

Wenn du die Website zum Beispiel von einem Desktop Computer aus aufrufst, siehst du ein horizontal ausgerichtetes Navigationsmenü, während du von einem mobilen Gerät aus ein vertikal ausgerichtetes (sogenanntes Burger Menü) mit größerem Text siehst. Auf dem kleineren Bildschirm der Smartphones und Tablets ist dies leichter zu lesen.

CSS bietet dem Webentwickler verschiedene Möglichkeiten, die Bildschirmgröße, Größe des Browserfensters und Auflösung von den Endgeräten der Websitebesucher abzufragen und spezielle Layout-Regeln zur Darstellung für die jeweiligen Auflösungen und Bildschirmgrößen festzulegen. Mit CSS3 Media Queries wurde die Skript-Sprache auch fit für Responsive Webdesign gemacht.

Ist meine Website responsive?

Du kannst in deinem Webbrowser schnell feststellen, ob eine Website responsive ist oder nicht.

• Öffne Google Chrome
• Gehe zu deiner Website
• Drücke Strg + Umschalt + I, um Chrome DevTools zu öffnen
• Drücke Strg + Umschalt + M, um die Gerätesymbolleiste einzuschalten
• Betrachte deine Seite aus der Mobil-, Tablet- oder Desktop-Perspektive

Du kannst auch ein kostenloses Tool wie den Mobile-Friendly Test von Google verwenden, um zu sehen, ob die Seiten deiner Website mobile-friendly sind. Obwohl du die Mobilfreundlichkeit auch mit anderen Designansätzen, wie dem adaptiven Webdesign, erreichen kannst, ist das Responsive Webdesign aufgrund seiner Vorteile die erste Wahl.

Warum responsives Webdesign für Webdesigner und Unternehmen wichtig ist

Es gab eine Zeit, in der die Internetnutzer nur von einem Desktop Computer aus auf Webseiten zugriffen. Fast alle hatte einen gleich großen Monitor. Websites wurden für den durchschnittlichen Besucher entworfen.

Heute greifen die Menschen von verschiedenen Geräten mit Bildschirmen von wenigen Zentimetern bis zu 27″ oder mehr auf Webseiten zu. Die Erwartungen haben sich geändert. Die Nutzer erwarten, dass die Website, die sie besuchen, weiß, dass sie ein Tablet und nicht einen PC benutzen. Sie erwarten, dass sich die Website an sie anpasst – und nicht umgekehrt.

Responsive Webdesign entlastet Webdesigner, Interfacedesigner und Webentwickler davon, verschiedene Websites für jedes einzelne Gerät zu erstellen. Zudem macht es auch das Leben von Unternehmern, Marketern und Werbetreibenden einfacher. Hier sind ein paar Vorteile:

• Eine Website für jedes Gerät: Egal, ob du die Website auf einem 27-Zoll-iMac oder auf dem Bildschirm deines Android-Handys ansiehst, die Website wird so dargestellt, dass der Nutzer sie optimal betrachten kann.
• Optimiertes Webdesign für das jeweilige Gerät: Beim responsiven Webdesign werden alle Bilder, Schriftarten und anderen HTML-Elemente entsprechend skaliert, sodass sie die Bildschirmgröße des Nutzers optimal ausnutzen.
• Keine Weiterleitungen: Webdesigns für mehrere Geräte erfordern Weiterleitungen, um die Nutzer auf die richtige Version einer Webseite zu schicken. Ohne diese Weiterleitungen kann der Nutzer noch schneller auf Inhalte zugreifen.
• Responsive Webdesign ist günstiger: Deine Website ist für dich einfacher zu verwalten, weil es sich um eine einzige Website handelt und nicht um zwei, drei oder zwölf. Du musst Änderungen nicht mehrmals vornehmen. Stattdessen kannst du von einer einzigen Website aus arbeiten und diese aktualisieren.
• Rankingfaktor: Mittlerweile werden Webseiten, die nicht responsive sind, von Google abgestraft. Gerade für die Suchmaschinenoptimierung ist Responsive Webdesign äußerst wichtig. Sollte deine Website nicht für mobile Endgeräte optimiert sein, wird es schwer auf die ersten Plätze bei Google zu kommen. Beachte hier für auch meine wichtigsten SEO Tipps.

Responsive Webdesign – Nur eine Frage der Gestaltung?

Wenn man von Responsive Webdesign  spricht, spricht man meistens von Gestaltung und Design. Aber Responsive Design sollte auch dazu verwendet werden, den Nutzer auf den jeweiligen Endgeräten verschiedene Informationen zu bieten. Wie ist das gemeint?

Je nachdem von welchem Gerät ich auf eine Internetseite zugreifen, suche ich vielleicht andere Inhalte. Wenn ich von unterwegs mein Smartphone nutze, um eine Restaurant-Website zu besuchen, bin ich eher an Öffnungszeiten und Adresse interessiert. Falls ich meinen Desktop Computer nutze, um auf die Webseite des Restaurants zuzugreifen, dann suche ich eher die Speisekarte oder möchte mich über den Inhaber informieren.

Je nachdem von welchem Endgerät der Nutzer zugreift, benötigt er andere Information. So kann Responsive Design auch dazu verwendet werden, Informationen auf bestimmten Endgeräten zu priorisieren.

Wenn ich unterwegs bin, sind mir eben andere Themen wichtiger als zu Hause am heimischen Computer.

Aber Achtung: Als Webdesigner weiß ich natürlich, dass CSS nur für die Gestaltung der Website gedacht ist. Das inflationäre Ein- und Ausblenden von Inhalten kann der Suchmaschinenoptimierung schaden. Deshalb muss der Webdesigner schon in der Konzeption der Website daran denken, das Layout so anzulegen, dass bestimmte Inhaltsblöcke verschoben werden können. Damit muss man keine Inhalte ausblenden, sondern durch CSS nur auf der Website „verschieben“.

Unterschiedliche Geräte bringen auch unterschiedliche Erwartungen an die Benutzerfreundlichkeit mit sich. Das Apple iPhone zum Beispiel hat den Menschen beigebracht, dass sie nach links/rechts/oben/unten wischen müssen. Wer eine Website von einem Smartphone aus besucht, erwartet, dass er auf eine Telefonnummer klicken kann und sein Telefon ihm die Möglichkeit bietet, diese Nummer automatisch zu wählen. Genauso erwarten sie, dass eine Adresse eine „Zeige Route“-Option hat, die das GPS ihres Telefons nutzt.

Beispiele für Responsive Webdesign

Viele tolle Responsive Webdesign Beispiele gibt es auf mediaqueri.es. Hier findest du eine Online-Galerie mit extrem vielen responsiven Webdesign-Beispielen.

Aber natürlich möchte auch ich dir an dieser Stelle ein paar tolle Beispiele für Responsive Design zeigen. Generell gilt jedoch, dass mittlerweile fast jede Website responsive ist. Deshalb kannst du dich auch selbst auf Erkundungstour durchs Internet begeben – dabei wirst du viele tolle Beispiele für Responsive  Webdesign finden. Schau dir doch am besten einmal die Webseiten der großen an.

Hier nun meine Liste mit ein paar sehr schönsten Beispiele für Responsive Webdesign:

https://www.carmichaellynch.com/

https://stripe.com/de

https://www.curve.com/

https://monese.com/

https://mailchimp.com/

https://ptpraxisrudolf.de

https://www.zoo-leipzig.de

https://froont.com

Responsive Design vs. Mobile First

Oft gibt es Verwirrung (sogar unter den Webdesignern), was diese zwei Begriffe genau meinen. Viele Menschen denken fälschlicherweise, dass sie ein und dasselbe sind, obwohl sie völlig unterschiedlich sind.

Responsive Webdesign beginnt auf dem Desktop, d.h. bei der maximal verfügbaren Auflösung, und skaliert dann auf den kleinsten Bildschirm.

Auch wenn sich Inhalt und Layout an Smartphones anpassen, sind die Navigation, der Inhalt und die Ladegeschwindigkeit eher auf deine traditionelle Website ausgerichtet.

Mobile-first Design ist vergleichbar mit der Entwicklung einer mobilen App und der anschließenden Anpassung des Layouts, sodass sie auf Tablet- und Desktop-Geräten ohne allzu viele Änderungen gut dargestellt werden kann. Dein gesamtes Design und Layout sind darauf ausgerichtet, ein hervorragendes mobiles Nutzererlebnis zu bieten: schnelle Downloadgeschwindigkeiten, reichhaltige Medieninhalte, um das Interesse deiner Zielgruppe zu wecken, eine einfache Navigation auf dem Touchscreen und so weiter.

Zusammenfassend kann man also sagen, dass Responsive Webdesign das grösstmögliche Endgerät (den Desktop Computer) als Referenz nimmt und Mobile First Webdesign eben das kleinstmögliche Device.

Du siehst also, dass Responsive Webdesign und Mobile First nicht dasselbe sind. Zwar ist die Problematik dieselbe, der Ansatz ist aber komplett verschieden.

Wann nutze ich Responsive Webdesign?

Generell ist Responsive Webdesign eher bei B2B-Unternehmen verbreitet, bei denen der Inhalt der Website informativ und aussagekräftig sein muss. Reichhaltige HTML-Inhalte, die richtig strukturiert sind, sind auch gut für die Suchmaschinenoptimierung. Als B2B-Unternehmen richtest du dich hauptsächlich an andere Unternehmen und weißt, dass 80 % der Nutzer mit einem Laptop oder Desktop Computer arbeiten und während der Bürozeiten auf deine Website zugreifen. Daher ist ein responsives Design der beste Ansatz. Der Inhalt, die Navigation und das Layout deiner Website sind für Smartphones und Tablets geeignet und bieten auch eine hervorragende Benutzerfreundlichkeit für deine mobilen Nutzer.

Wann sollte ich Mobile First nutzen?

Responsive Design klingt gut? Warum solltest du dann den Mobile-First-Design Ansatz wählen? Ganz einfach: Die Statistiken zeigen, dass wir süchtig nach dem Surfen auf mobilen Geräten geworden sind. Derzeit werden 54,4 % des gesamten Internetverkehrs über Mobiltelefone abgewickelt. Vor diesem Hintergrund ist es wichtig zu verstehen, was Mobile-First-Design ist und welche Vorteile es hat. Im Gegensatz zum Responsive Design geht es bei Mobile-First um ein komplettes mobiles Nutzererlebnis: eine angepasste App-ähnliche Benutzeroberfläche, weniger Text, größere Schriftarten, schnelle Downloadgeschwindigkeit, Video und Audio, ein Call-to-Action pro Seite, kurze Formulare und so weiter. Außerdem werden die mobilen Browser in Kürze Zugang zu mehr Smartphone-Funktionen wie Kamera, haptisches Feedback und Spracherkennung haben, sodass ein Mobile-First Design ein einzigartiges Erlebnis bieten kann.

Responsive Design vs. Adaptive Design

Was also der Unterschied zwischen Responsive Web Design und Adaptive Web Design?

Ganz einfach: Responsive ist fließend und passt sich an die Größe des Bildschirms an, unabhängig vom Zielgerät. Responsive Design nutzt CSS Media Queries, um die Stile je nach Zielgerät zu ändern, wie z.B. Display-Typ, Breite, Höhe usw.

Adaptives Design hingegen verwendet statische Layouts, die auf „Breakpoints“ (also Pixelwerte, an denen das Layout umbricht) basieren und nach dem ersten Laden nicht mehr reagieren. Es gibt also für verschiedene Bildschirmgrößen feste, statische Layouts.