Lesedauer: ca. 3min
“Das muss ich schnell googeln” – diesem Satz begegnen wir überall, egal ob zuhause oder unterwegs. Seit den Anfängen des Internets hat sich die Gestaltung einer Website an dem Design auf einem Computerbildschirm orientiert. Doch seit der Einführung mobiler Geräte, wie Smartphones oder Tablets, wurde die Internetnutzung zunehmend mobiler. Seitdem hat sich auch Webdesign weiterentwickelt und die Wünsche und Anforderungen mobiler Internetnutzer stehen im Vordergrund. Denn Websites wirken auf kleinen Displays anders, als auf großen Bildschirmen. Auch mangelnde User Experience, wie überfüllte Seiten und ständiges Zoomen, ist sehr abschreckend für mobile Website-Besucher und reduziert die Conversion Rate. Doch was bedeutet Responsive Webdesign?
Der Begriff Responsive Webdesign bedeutet übersetzt “reagierendes Webdesign”. Dabei passen sich Inhalts- und Navigationselemente, sowie auch der strukturelle Aufbau einer Website flexibel an die Bildschirmauflösung des mobilen Endnutzers an. Somit reagiert und korrespondiert die responsive Website mit der Auflösung des mobilen Endgeräts. Durch das extra Design für mobile Geräte kann die User Experience auch auf diesen Endgeräten gewährleistet werden. Dies wird auch mobile User Experience genannt.
Doch was bedeutet Responsive Webdesign? Bei Responsive Webdesign gilt der Leitsatz “form follows function”. Das bedeutet, das Design und der Inhalt der jeweiligen Bildschirmauflösung folgt der Verwendung der Geräte. Klassisches Beispiel: Hochformat vs. Querformat am Tablet – Die Website wird jeweils unterschiedlich angezeigt. Das erhöht die Benutzerfreundlichkeit (Usability) maßgeblich.
Wenn sich sogar die Funktionalität einer Website an den technischen und grafischen Möglichkeiten des Endgeräts orientiert, spricht man auch von Progressiv Enhancement oder auch Progressive Webdesign.
Übliche Standard-Auflösungen von Smartphones und Tablets sind:
Responsive Webdesign wird mit HTML5 und CSS3 umgesetzt. Dabei müssen Inhalt und Layout einer Website strikt getrennt sein, damit Responsive Webdesign optimal funktioniert. Die Basis einer responsiven Website bildet ein flüssiges Raster. Demzufolge ist die Breite der Website durch Prozentwerte definiert. Dadurch passt sich die Seitenbreite in Relation zur Größe des Browserfensters an. Zusätzlich sind die einzelnen Elemente, wie Bilder, Videos oder Textpassagen, flexibel. Je nach zur Verfügung stehendem Platz werden diese größer oder kleiner angezeigt.
Des Weiteren werden im CSS-Code Break-Points gesetzt. Sie definieren bestimmte Auflösungen, an denen sich das Seitenlayout verändert. Beispielsweise kann eingestellt werden, dass eine Werbung, die seitlich angezeigt wird, automatisch unter das Textelement springt, sobald die Viewport Breite kleiner ist, als eine gewisse Pixelanzahl.
Um das Seitenlayout für jeden Bildschirm passend zu konfigurieren, fragen sogenannte Media-Queries den Gerätetyp, als auch die spezifischen Eigenschaften eines Gerätes, ab. Zu den Eigenschaften gehören Displaygröße, Format und Auflösung, aber auch Eingabemöglichkeiten wie zum Beispiel Tastatur und Sprache gehören dazu. Das ist sehr zeitaufwendig, der Mehraufwand beschränkt sich jedoch auf die Entwicklungs- und Einführungsphase. Responsive Webdesign ist aktuell die einzige Möglichkeit, eine Website für Desktop- oder Mobile-Endnutzer optimal nutzbar zu machen. Es ist also ein absolutes Muss bei der Erstellung oder Überarbeitung einer Website auf diese Details zu achten.
Die Größe, Komplexität und der Funktionsumfang der Website sind Indikatoren für den Entwicklungsaufwand einer responsiven Website. Bei der ersten Entwicklung wird das Design erarbeitet und so können neue Inhalte sehr einfach eingepflegt werden. Doch was bedeutet Responsive Webdesign für die Suchmaschinenoptimierung? Der Aufwand lohnt sich defintiv für das Suchmaschinenranking, denn Responsive Webdesign erhöht die User Experience der Nutzer. Vor allem greifen Nutzer immer vermehrt (inzwischen ca. 70%) über ein mobiles Endgerät auf die Website zu.
Durch die Optimierung für mobile Endgeräte steigt die Verweildauer der Nutzer, was sich wiederum positiv auf das Ranking der Website auswirkt. Im Gegensatz dazu wird die Bounce Rate (Absprungrate) gesenkt, da mobile Nutzer die Webinhalte mit allen Funktionen nutzen können. Somit können diese besser mit den Inhalten interagieren.
Google legt übrigens zunehmend mehr Wert auf die User Experience als kritischen Ranking Faktor! (Quelle)
Die Vorteile von Responsive Webdesign sind klar! Statt zwei oder mehr Versionen für die Desktop- und Mobile-Ansicht, die beide mit redaktionellem Content und Bildmaterial gepflegt werden müssen, reicht eine Seite mit der entsprechenden URL. Dies erspart viel Zeit und sorgt für Einheitlichkeit der Website. Das wiederum erhöht den Wiedererkennungswert einer Website auf jedem Gerät. Auch sind responsive Websites durch Ihre Werte deutlich interessanter für Suchmaschinen und haben so bessere Chancen auf eine Positionierung auf Googles Seite 1.
In der untenstehenden Grafik sehen Sie von links nach rechts das Layout unserer Elephant Website für Desktops, Tablets und Smartphones.
Responsive Webdesign ist Pflicht und gehört inzwischen zu jedem modernen Internetauftritt dazu. Schließlich sind ca. 70% aller User auf mobilen Endgeräten unterwegs. Das kann je nach Zielgruppe und Branche variieren.
Unser Team freut sich auf das Gespräch mit Ihnen. Nehmen Sie jetzt unverbindlich Kontakt auf.
Unser Team freut sich auf das Gespräch mit Ihnen. Nehmen Sie jetzt unverbindlich Kontakt auf.
