Responsive Webdesign: Darauf kommt es an

5/5 - (7 votes)

Das Nutzerverhalten der Internet-User hat sich in den vergangenen Jahren massiv verändert. War es vor einigen Jahren noch der „Personal Computer“, der die Massen reihenweise ins World Wide Web zog, greifen heutzutage immer mehr Nutzer auf ihr Smartphone oder Tablet zurück. Damit sind auch ganz neue Anforderungen auf die Webseitenbetreiber zugekommen. Wer heutzutage mit seiner Homepage ansprechend auftreten und gute Rankings erzielen möchte, sollte sich mit dem Responsive Webdesign beschäftigen. Hierbei handelt es sich um ein wichtiges Element der Webseiten-Erstellung, mit dem Sie Ihre Homepage fit für alle Endgeräte der Besucher machen. Wie genau das Responsive Webdesign funktioniert und worauf es dabei ankommt, zeigen wir Ihnen im Folgenden.

Responsive Webdesign: Definition

Als Responsive Webdesign wird eine Vorgehensweise bei der Gestaltung von Webseiten bezeichnet. Konkret geht es darum, die Darstellung der Webseite und ihrer Inhalte für alle Ausgabegeräte gleichermaßen zu optimieren. Es soll für den Besucher einer Webseite also keinen spürbaren Unterschied machen, ob dieser mit einem Desktop-PC, einem Smartphone oder einem Tablet auf die Webseite zugreift. Aber wie funktioniert das? Umgesetzt wird das Responsive Webdesign mit Hilfe von HTML5 und den CSS3 Media-Queries. Mit diesen können Sie das Layout Ihrer Webseite so flexibel gestalten, dass eine ansprechende und benutzerfreundliche Darstellung auf allen Endgeräten geboten wird.

Als einer der Grundsätze beim Responsive Webdesign gilt dabei der Satz „Form follows Function“. Das Design, die Inhalte und die Funktionen folgen also der jeweiligen Bildschirmauflösung des Endgerätes und „richten“ sich nach dieser. In gewisser Weise kommuniziert Ihre Webseite also mit dem Endgerät, welches so die korrekte Darstellung übermittelt. Anders gesagt: Beim Responsive Webdesign richtet sich die Darstellung Ihrer Webseite nach dem Besucher. Und nicht andersherum.

Responsive Webdesign

Darum ist das Responsive Webdesign wichtig

Gerade in der heutigen Zeit ist das Responsive Webdesign für Webmaster von großer Bedeutung. In den vergangenen Jahren hat die Zahl der mobilen Nutzer deutlich zugenommen, und die Tendenz ist weiter steigend. Wer als Webmaster zeitgemäß auftreten möchte, muss sich diesen Umständen anpassen, um eine gute User Experience bieten zu können. Schon seit 2015 hat Google zudem den Leitspruch „Mobile First“ ausgerufen. Seit jenem Jahr ist die mobile Darstellung ein wichtiger Ranking-Faktor. Google selbst hat darüber hinaus die responsive Darstellung der eigenen Webseite empfohlen - auch das zeigt die Bedeutung für das Ranking in der Suchmaschine.

Ein gutes responsives Webdesign wirkt sich heutzutage unweigerlich auf die Verweildauer der Besucher aus. Fühlen sich diese wohl, bleiben sie natürlich gerne etwas länger auf der Seite und studieren möglicherweise zahlreiche Beiträge oder Artikel. Die Time-on-Page wird also verlängert. Darüber hinaus kann das Responsive Webdesign die Bounce-Rate Ihrer Webseite deutlich verringern. Mit einer geringeren Absprungrate hinterlassen Sie bei der Suchmaschine ebenfalls ein positives Signal, was wieder zu einem positiven Ranking führen wird. Und es spricht noch ein weiteres Argument für das Responsive Webdesign. Zwar ist die Einrichtung erstmalig umfangreich, anschließend hält sich die Pflege jedoch spürbar in Grenzen.

Seminar Online Marketing

Erfahren Sie im Online Marketing Seminar, wie Sie Ihre digitalen Kommunikationswege optimal auf Ihre Kunden ausrichten. Lernen Sie nützliche Tools kennen und nutzen Sie Best-Practice-Beispiele für Ihre eigene Umsetzung. Mehr zu den Inhalten und Terminen:

Alternative zum Responsive Webdesign? Darum lohnt sich keine reine Mobilseite

Gerade zu Beginn der „Mobile First“-Zeit im Jahre 2015 sind viele Webseitenbetreiber dazu übergegangen, eine eigene mobile Subseite zu erstellen. Diese wurde aufgrund des angesprochenen Aufwands bei der Einrichtung anstelle des Responsive Webdesign gewählt. Allerdings ist diese Alternative mit einem deutlichen höheren Pflegeaufwand verbunden. Die einzelnen Inhalte und Darstellungen müssen auf lange Sicht immer wieder angepasst werden. So ergibt sich natürlich automatisch auch ein generell deutlich größerer Aufwand. Immerhin müssten Sie neben der mobilen Subseite auch Ihre reguläre Desktop-Seite aktuell halten. Sie müssten also zwei Seiten pflegen, während sich der Aufwand beim Responsive Webdesign auf nur eine Seite beschränkt.

Wichtigste Eigenschaften responsiver Webseiten

Beim Responsive Webdesign ist es wichtig, dass eine optimale Funktionsfähigkeit gewährleistet werden kann. Damit diese erreicht wird, wird zur Umsetzung auf HTML5 und CSS3 gesetzt. Mit den sogenannten Media-Queries können verschiedene Informationen von den Endgeräten abgerufen werden. Hierzu gehören zum Beispiel das Format und die Auflösung, aber auch die Displaygröße oder Eingabemöglichkeiten. Damit das Design reibungslos funktioniert, müssen das Layout und der Inhalt einer Seite strikt voneinander getrennt werden. Nicht selten ist ein leicht abgewandeltes mobiles Design im Vergleich zur Desktop-Version erforderlich. Möglicherweise sollten Sie sich auch Gedanken um die Reduzierung einiger Elemente zu machen, falls diese Ihre mobile Webseite ansonsten zu „überladen“ wirken lassen. Ein wichtiger Aspekt ist in diesem Zusammenhang auch der mögliche Wechsel von Darstellungsformaten. Statt des Querformats wie am Desktop kann bei einer mobilen Seite das Hochformat die bessere Lösung sein.

Am erfolgreichsten hat sich bei der Umsetzung übrigens die Herangehensweise „Mobile First“ entpuppt. Sie stellen also beim Responsive Webdesign zunächst die Version für die kleinen Bildschirme der Smartphones her. Anschließend passen Sie das kleine Design Stück für Stück für die größeren Bildschirme an. Diese Richtung ist deutlich einfacher zu realisieren als der entgegengesetzte Weg. Die wichtigsten Eigenschaften haben wir für Sie hier auch noch einmal übersichtlich aufgeführt:

  • Mobile First (von klein zu groß)
  • Etwaige Wechsel der Formate beachten (von Quer- zu Hochformat o.Ä.)
  • Umsetzung mit Hilfe von HTML5 und CSS3
  • Abfragen verschiedener Informationen (Displaygröße, Auflösung, Format etc.) durch Media Queries
  • Strikte Trennung von Layout und Inhalt einer Seite
Online Marketing Manager

Fazit: Responsive Webdesign ist das Design der Zukunft

Wo wir uns auch umschauen, sind Smartphones und Tablets allgegenwärtig. Wer heutzutage Informationen nachschauen, Produkte kaufen oder einen Serviceanbeiter finden möchte, greift meist direkt in seine Tasche und fährt nicht erst nach Hause, um dort am Computer zu googlen. Für Webseitenbetreiber ist dieses veränderte Nutzerverhalten eines der wichtigsten Argumente für das Responsive Webdesign. Darüber hinaus hat auch die Suchmaschine Google schon vor geraumer Zeit die responsive Darstellung empfohlen. Als Webseitenbetreiber sollten Sie den erhöhten Aufwand bei der Gestaltung der responsive Homepage also in Kauf nehmen. Dieser bringt für den weiteren Lauf Vorteile im Ranking bei Google, erleichtert Ihnen aber auch die Pflege Ihrer Inhalte und Webseite spürbar.

Damit der Design-Umschwung von Erfolg gekrönt ist, sollten Sie allerdings auf die wichtige Grundeigenschaften achten. Empfehlenswert ist es, mit den kleinsten Geräten zu beginnen. Die Optimierungen können Sie dann leicht für größere Displays anpassen. Zudem sollten Sie daran denken, das Layout und die Inhalte Ihrer Seite jederzeit strikt voneinander zu trennen.

Sie möchten Ihre Webseite neu gestalten?

Unsere Experten helfen Ihnen gerne! Kontaktieren Sie uns für ein persönliches Beratungsgespräch:

Katharina SilberbachKatharina Silberbach

Tel.: +49 (0)221 - 99 555 10 12
Fax: +49 (0)221 - 99 555 10 77
E-Mail senden

#ResponsiveWebdesign #MobileFirst #Webseitengestaltung #UserExperience #Webdesign

Ihre Kontaktanfrage

Wir unterstützen Unternehmen durch Seminare, Schulungen, Beratungsansätze und Coachings!
Wie können wir Sie unterstützen?


    Hier können Sie uns mitteilen, wann wir Sie zwischen 09.00 Uhr und 18.00 Uhr am besten telefonisch erreichen.