17. Juni 2019 | Friedrich Siever

Was ist Responsive Webdesign?

Was ist responsives Webdesign?

Haben Sie sich je die Frage gestellt „Was ist Responsive Webdesign?“ oder wofür Sie das auf Ihrer Website eigentlich brauchen? Wir erklären es Ihnen. Und das auf verständliche und einfache Weise.

Responsive Webdesign kennzeichnet ein Vorgehen im Webdesign. Ein Webdesigner erstellt hierbei eine Webseite, die ihre Größe entsprechend dem Gerät ändert, mit sie betrachtet wird. Websites werden mit völlig unterschiedlichen Geräten aufgerufen. Ob nun riesiger Desktop Monitor, Tablet oder kleiner Bildschirm vom Smartphone, die Website muss immer einen guten Eindruck machen. Auch in 2019 wird der Trend hin zum mobilen Web und und zu Smartphones weiter anhalten. Deshalb ist Responsive Webdesign auf modernen Webseiten nicht mehr wegzudenken.

Technologisch gesehen ist die Idee von einem flexiblen, sich anpassenden Webdesign gar nicht so jung und wurde bereits im Jahr 2010 von Ethan Marcotte in seinem Beitrag Responsive Webdesign  in A List Apart beschrieben. Dieser forderte die gedanklichen „Fesseln“ der aus dem Print stammenden fixen Layouts aufzulösen.

Und diesem Trend folgen schon seit langem nicht mehr nur die großen Player. Längst müssen auch kleine und mittelständische Unternehmen im Web um die Aufmerksamkeit ihrer Kunden kämpfen. Also setzen Sie heute häufig auf Responsive Webdesign.

Responsive Webdesign und SEO Ranking

Wer in den Rankings von Google & Co auf den vorderen Plätzen auftauchen möchte, muss seit Mitte 2018 das sogenannte „Mobile First Indexing“ beachten. Mobile-First-Indizierung bedeutet genau das, wonach es klingt. Es beschreibt, dass die mobile Version Ihrer Website den Ausgangspunkt darstellt. Und zwar für das ist, was Google in den Index aufnimmt. Die mobile Darstellung ist die Grundlage für die Ermittlung der Platzierungen. Das sind gute Neuigkeiten. Zumindest für alle, die bereits auf Responsive Webdesign gesetzt haben. Denn bei responsivem Webdesign handelt es sich bei der mobilen und der Desktop Version um die gleiche Website. Aber eins nach dem anderen.

Was bedeutet Responsive Webdesign?

Am deutlichsten wird der Unterschied zu einer herkömmlichen Website. Websites, wurden lange Zeit mit festen Pixelbreiten erstellt. Als Vorlage galten hierbei häufig die Spaltenlayouts aus Printmedien. Rufen Sie eine fixe Website mit Ihrem Handy auf. Sie werden wahrscheinlich folgendes festellen. Sie sind gezwungen, horizontal (nach rechts) zu scrollen, um die Inhalte vollständig zu erfassen. Oder Sie werden gezwungen sein zu zoomen. Häufig so weit, dass man die Buchstaben nicht mehr erkennen kann. Die negativen Auswirkungen werden dadurch erschwert, dass die Nutzer von mobilen Geräten durch das Drehen Ihres Tablets oder Smartphones zwischen Hochformat und Querformatansicht wählen können. Wenn Ihre Website das nicht mitmacht gibt Sie gleich doppelt ein schlechtes Bild. Genau hier setzt Responsive Webdesign an.

Berücksichtigt werden müssen auch langsamere Verbidungen im mobilen Bereich. Riesige Bildermengen und Grafiken, die mit herkömmlichen Methoden einfach in die Website eingebunden werden, erzeugen zum Teil sehr lange Ladezeiten. Ein weiteres Messkriterium von Google für die Platzierung Ihrer Website.

Besucher die eine solche Website mit einem kleinen Tablet oder Smartphone besuchen, werden die Seite schnell frustriert verlassen und nach Möglichkeit nicht mehr zurückkehren. Noch wahrscheinlicher ist heutzutage aber, dass die Besucher diese Website als Auswirkung der Mobile-First-Indexierung gar nicht erst zu Gesicht bekommen.

Responsive Design gegen mobilen Frust

Im Responsive Design, wird die Version einer dreispaltigen Website zum Beispiel so angepasst, dass die gleichen Inhalte in zwei Spalten und auf dem Handy in einer Spalte dargestellt werden. Alles, ohne dass die Schriftgrößen unleserlich werden oder die Navigation erschwert wird. Die Besucher scrollen und navigieren stets über übersichtliche aber unterschiedliche Darstellungsversionen der gleichen Inhalte. Die Größe der Bilder wird automatisch angepasst. Die Bilder werden nicht verzerrt oder gestaucht. Intelligente Methoden sorgen dafür, dass für kleinere Geräte auch kleinere Bilder ausgespielt werden, was die Ladezeiten dramatisch reduziert. Auch und gerade wenn der Besucher der Website gerade schlechtes Netz hat, weil er im Auto in Deutschland unterwegs ist. Weil die Themen rund um responsive Bilder und Srcset so wichtig und spannend sind, gehen wir in einem gesonderten Artikel  genauer darauf ein.

Worum es letztlich beim responsiven Webdesign geht ist, dass sich die Website automatisch an das Gerät anpasst, was gerade von Ihrem Webseitenbesucher verwendet wird.

Responsives Webdesign – Wie funktioniert das?

Responsive Websites verwenden flüssige Gitter. Alle Seitenelemente haben eine proportionale Größe und keine Pixel. Wenn Sie also drei Spalten haben, würden Sie nicht genau angeben, wie breit die einzelnen Spalten sein sollen, sondern wie breit sie im Verhältnis zu den anderen Spalten sein sollen. Spalte 1 sollte die Hälfte der Seite einnehmen, Spalte 2 30% und Spalte 3 beispielsweise 20%. Medien wie Bilder werden ebenfalls relativ in der Größe angepasst und verhalten sich regelmäßig in Proportion zu Ihrem Elternelement (Spalte).

Maus oder Touch

Im responsiven Design muss auch der Tatsache Rechnung getragen werden, dass auf mobilen Geräten in der Regel keine Maus zur Verfügung steht, sondern zur Navigation und zur Auswahl von Elementen die Finger verwendet werden. Gelingt das Ansteuern kleiner dicht beieinander liegender Elemente mit der Maus spielerisch, kann es zu erheblichen Schwierigkeiten kommen, wenn mit dem Finger gleichzeitig 3 oder 4 Elemente berührt werden. Im responsiven Webdesign muss der Webdesigner die sogenannten Touch-Events berücksichtigen. Google mahnt zu dicht beieinander liegende oder zu kleine Elemente als Fehler an und attestiert dann recht schnell „diese Website ist nicht für mobile Geräte nicht optimiert“. Die Auswirkungen einer solchen Einschätzung kann man sich bei Mobile-First-Indexing sehr gut vorstellen. Wenn man auf den Traffic seiner Website angewiesen ist, möchte man darauf sicher gern verzichten.

Ladezeiten

Auf Mobilgeräten kommt es bei großen Datenmengen zum Beispiel durch riesige Bilder oder Videos häufiger zu Problemen. Insbesondere, wenn der Besucher nicht mit W-LAN sonder über das mobile Netz verbunden ist. Hierauf kann und sollte durch das geräteabhängige Austauschen der großen durch kleine Bilder reagiert werden.

Warum auch KMUs responsives Web Design benötigen

Die Zahl der Menschen, die mobile Geräte nutzen um im Internet zu surfen nimmt stetig zu. Im Jahr 2018 nutzten gemäß Statista.com  ca. 57 Mio Deutsche ein Smartphone. Im Vergleich dazu waren es 2010 gerade einmal knapp 8.5 Mio Menschen. Viele unserer Kunden sind nach einer Überprüfung Ihres Traffics mehr als überrascht, wie hoch der Anteil der Mobilgeräte ist. Derartige Zahlen für eine Website zu ermitteln ist im übrigen kein Hexenwerk, sondern gelingt sehr einfach mit einer (unbedingt rechtskonform gestalteten) Einbindung von Google Analytics. Werte von über 40% von Smartphone und Tablet sind keine Seltenheit. Und wie gesagt. Die Tendenz ist steigend.

Responsives Design Fallstricke und mögliche Probleme

Im Vergleich zu einer herkömmlichen fixen Website entsteht gerade bei professionellen pixelgenauen Implementationen, die einem Content-First-Ansatz folgen ein erhöhter Aufwand im Webdesign. Den will eigentlich natürlich niemand wirklich haben. Auch recht günstige zu erwerbende responsive Designvorlagen helfen nur bedingt weiter. Leider führt deren Verwendung dazu, dass die Website aussieht wie jede andere. Eigenen Charakter oder Widererkennungswert ist dann Fehlanzeige. Vielfach wird nur ein Logo getauscht und die Inhalte werden bestmöglich in die Struktur gebürstet. Mit etwas Glück passt noch jemand die Farbe an und los geht es. Neben der Uniformität kommt es bei dieser Vorgehensweise nicht selten zu folgenden Problemen und Fehlern auf responsiven Websites.

  • Aufgrund fixierter Höhen entstehen ungewollt eigenartig anmutende Lücken im Design
  • In Navigationsleisten kommt es zu Überlappungen von Menüpunkten untereinander oder mit dem LOGO
  • Inhalte werden auf Mobilgeräten einfach nicht ausgespielt oder unterdrückt
  • Die mobile Seite benötigt die gleichen Datenmengen wie die Desktop-Variante und die Ladezeit auf Mobilgeräten ist viel zu lang
  • Touch Targets, werden einfach zu dicht aneinander platziert oder sind zu klein, um Sie über die Berührung zu steuern
  • Fehlende Kontraste an entscheidenden Stellen führen zur Nutzerirritation (Das gilt nicht nur für responsive Seiten, ist aber trotzdem unschön)
  • Auf mobilen Geräten entsteht ein Scrollmarathon über riesige Weißräume

Mit anderen Worten. Responsive Webdesign führt nicht automatisch zu einer guten Website. Es ist auch kein Mittel gegen schlechtes Design. Responsives Design ist zwingend notwendig. Aber es ist eben auch komplizierter als eine einfaches Pixellayout. Deshalb ist es anfälliger für Fehler. Doch was wären die Alternativen? Eine selbständige zweite Seite für mobile Geräte. Auf einer gesonderten URL. Hm. Vergleicht man diesen Ansatz mit Responsive Webdesign, sieht die Sache schon ganz anders aus. Die Kosten von responsivem Webdesign sind deutlich geringer.  Ebenso geht  geht die Websiteentwicklung viel schneller. Womit wir eigentlich schon bei den Vorteilen angekommen sind.

Vorteile von responsivem Webdesign

Ohne Anspruch auf Vollständigkeit spricht folgendes für responsives Webdesign.

  • Bessere Plazierung in den Suchmaschinen
  • Mehr Website Besucher (Traffic)
  • Geringere Kosten gegenüber separater Mobilseite
  • Keine Abstrafungen wegen sogenanntem „duplicate Content“ durch google
  • Schnellere Entwicklungszeit gegenüber separater Mobilseite
  • Geringerer Wartungsaufwand gegenüber separater Mobilseite
  • Schnellere Ladezeiten (bei professioneller Implementation)
  • Geringere Absprungraten
  • Höhere Conversions
  • Die Analyse und das Reporting kann an einer einzigen Stelle implementiert werden.

Fazit

Auf Responsive Webdesign kann nicht verzichtet werden. Vor allem dann nicht, wenn man im Web gefunden werden möchte. Der größte Vorteil von Responsive Design liegt aber im Grundgedanken der Kundenorientierung. Responsives Webdesign stellt sicher, dass jeder Besucher das bestmögliche Nuztererlebnis erhält. Dabei ist es egal, mit welchem Gerät er die Seite besucht.

Responsive Webdesign erhöht die Sichtbarkeit in Suchmaschinen, da es (auch) für Mobilgeräte optimiert ist. Responsive Websites ranken einfach besser. Und das mit allen erfreulichen positiven Nebenwirkungen wie mehr Besucher, mehr Umsatz, mehr Reichweite usw. Wenn Sie professionelle Unterstützung einer Internetagentur in Hamburg benötigen, sprechen Sie uns gerne an.

In Kontakt

Denken Sie über ein Projekt oder eine Partnerschaft nach?
Get in Touch

Leitfaden & Inspirationen

Für Ihre neue Webseite

Was wäre, wenn Sie nicht erst Stunden damit verbringen müssten, um die Essenz richtig guter Websites zu erforschen? Wenn Sie auf direktem Weg zum Ziel kommen würden, weil Sie wüssten worauf Sie bei Ihrer neuen Website zu achten haben?

Eine schöne Vorstellung?

Dann sichern Sie sich jetzt unseren praktischen Leitfaden mit den wichtigsten Aspekten, Tipps und Tricks. Einfach und verständlich erklärt. Für Entscheidungsträger und Projektverantwortliche als leichter Einstieg in die komplexe Materie moderner Websites.

So stellen Sie sicher, dass ihr Website-Projekt ein voller Erfolg wird.

Zum Download