Responsive Webdesign – Deine Website auf dem Handy, Tablet und Desktop

Zuletzt aktualisiert: 2. November 2017

Die Zeiten, dass eine Website nur auf dem großen Desktop Bildschirm angeschaut wird, sind schon länger vorbei! Doch welche Möglichkeiten gibt es, dass auch kleinere Endgeräte wie Smartphones oder Tablets einwandfrei den Nutzeransprüchen gerecht werden? Die Antwort ist: responsive Webdesign

Was ist responsive Webdesign?

Unter responsive Webdesign versteht man die technische und gestalterische Lösung einer Website, sodass sie auf jedem beliebigen Endgerät richtig dargestellt wird. Das bedeutet, dass sich Inhalte der Bildschirmgröße entsprechend verschieben, anpassen und verändern. Das Endresultat ist eine perfekt zugeschnittene Webseite, die es dem Besucher auf dem Endgerät leicht macht, die Inhalte der Seite einzusehen und sich auf der Website zu bewegen.

Zum Vergleich habe ich hier zwei Webseiten genommen und sie auf unterschiedlichen Geräten ausgespielt.

Beispiel einer Website die nicht responsive ist:

Wie du siehst ist die Seite auf kleineren Bildschirmen nicht mehr nutzbar.

  • die Besucher sehen nicht alle Webinhalte und müssen horizontal scrollen um die Inhalte sehen zu können
  • das Menü ist nicht sichtbar
  • enorm umständliche Bedienung um an sein gewünschtes Ziel zu kommen
  • manche Funktionen der Seite sind gar nicht nutzbar

Beispiel einer Website die responsive ist:

Wie du siehst, passt sich bei meiner Webseite der Inhalt an die Bildschirmgröße an, während auf der anderen Beispielseite auf allen Geräten die selbe Version sichtbar ist.

Verschiedene Veränderungen der Webseitengestaltung machen sich auf meiner Seite bei den unterschiedlichen Endgeräten bemerkbar:

  • Schriftgrößem verändern sich: das sorgt für eine bessere Übersicht und eine bessere Lesbarkeit auf den unterschiedlichen Endgeräten. Auf dem Desktop ist die Schrift deutlich größer als auf dem Smartphone
  • Bilder passen sich der Bildschirmgröße an: durch das anpassen der Gesamtgröße der Bilder, werden diese auch komplett auf kleineren Bildschirmen angezeigt
  • Das Raster ändert sich: wo vorher noch Bilder und Texte nebeneinander platziert werden, rutschen diese bei kleineren Bildgrößen untereinander
  • Seitenelemente werden durch andere ersetzt: das animierte Headerbild wird auf dem Smartphone durch ein statisches Bild ersetzt
  • Seitenelemente werden nicht angzeigt: manchmal ist es sinnvoll auf kleinen Bildschirmgrößen „unwichtige Inhalte“ nicht darzustellen um dem Seitenbesucher ein besseres Nutzererlebnis zu ermöglichen. Nach dem Motto: weniger ist mehr

Warum deine Website responsive sein muss

Knallharte Fakten leisten doch meistens die größte Überzeugungsarbeit, oder?

Wenn über die Hälfte der Deutschen mobil surft, ist das sicher ein großes Argument, dass deine Firmenseite responsive werden soll!

© Statista 2017 Quelle: Initiative D21

Kein Unternehmen kann es sich leisten auf eine so große Nutzergruppe zu verzichten. Responsive Webdesign ist kein Feature sondern eine Voraussetzung im Jahr 2017 für jede ernstzunehmende Website!

Unabhängig der Statistik, gibt es weitere Gründe für responsive Webdesign. Die wichtigsten sind…

1. Die Nutzererfahrung

Responsive Design erhöht die Nutzererfahrung auf deiner Seite. Du machst es dem Besucher einfach sich zurecht zu finden und deine Inhalte zu konsumieren. Dadurch erhöhst du die Chance zur Neukundengewinnung und Kontaktaufnahme mit dem Besucher. Denn wer will sich schon durch eine Webseite quälen um beispielsweise die Kontaktdaten zu finden?

2. Handlungsaufforderung

Webseiten werden immer mehr zu einer „App“. Das Gefühl, eine Webseite mobil zu bedienen, ist nicht mehr so statisch wie früher. Die Webseite reagiert auf das Surfverhalten und arbeitet mit grafischen und animierten Elementen um Handlungen des Nutzers ein Feedback zu geben.

Im Gegensatz zur Desktop Variante einer Webseite ist in der mobilen Variante häufig eine einzige Handlung im Fokus. Der Nutzer soll geführt werden und das geht nur mit einem übersichtlichen Inhalt, da auf dem Smartphone Bildschirm nicht so viel Platz zur Verfügung steht.

Das Ergebnis ist eine klare Designsprache und konkrete Handlungsaufforderungen.


Beispielgestaltung einer klaren, einfachen Handungsaufforderung innerhalb einer App © Designed by Cuberto

3. Navigation und Gesten

Die Navigation innerhalb einer Seite unterscheidet sich sehr stark auf den unterschiedlichen Endgeräten.
Das fängt mit dem Eingabegerät an. Auf dem Desktop nutzt du eine Maus und hast dort auch noch verschiedene Funktionen wie z.B. den Rechtsklick. Das Smartphone hat hingegen deine Finger als Eingabemedium.

Daraus erschließen sich wiederum einige Design Regeln die es zu beachten gilt:

  • Elemente müssen genügen Abstand zueinander haben, damit man sich nicht versehentlich verklickt
  • es muss überlegt werden, wie eine Navigation angelegt wird um gut bedienbar zu sein
  • wie sollen bedienbare Elemente aussehen, damit du auch wahrnimmst, dass diese bedienbar sind

Ausserdem ist es üblich manche Dinge anders zu bedienen als es auf dem Desktop der Fall ist. So ist z.B. die Geste des Blätterns (links/rechts) sehr beliebt. Die Leute interagieren durch die Gestik mit den Inhalten deiner Webseite. Das muss in der Gestaltung und Technik berücksichtig werden!

4. Google Ranking Faktoren

Zu guter Letzt hat auch Google seine Finger im Spiel. Da du sicherlich nicht auf gute Platzierungen in der beliebtesten Suchmaschine verzichten möchtest, sollte deine Firmenseite unbedingt responsive sein.

Google bevorzugt schon mehrere Jahre Webseiten die ein responsive Design besitzen. Am 21. April 2015 ergänzte Google dann den Suchalgorithmus um das Signal „mobilfreundlich“ wodurch responsive Websites eine noch stärkere Gewichtung bei der Beurteilung der Seite erhielten.

Hat dir der Artikel gefallen? Teile ihn!

Simon Kress

Simon Kress

Ich bin Gründer und Blogger bei UNIQHO. Seit mehr als 10 Jahren berate und unterstütze ich Unternehmen und Gründer bei ihrem Erfolg im Web. Mit UNIQHO biete ich Weblösungen an, welche den Ansprüchen erfolgsfokussierter Webseiten gerecht wird.

Artikel, die dir gefallen könnten

9 Gründe WordPress als CMS zu nutzen

Die große Frage bei jeder Webseitenerstellung: Welches CMS (Content Management System) soll für die Website genutzt werden?

Für meine Kundenprojekte nutze ich ausschließlich Wordpress. Warum ich von Wordpress so überzeugt bin und weshalb deine Unternehmensseite mit Wordpress bestens versorgt ist, erfährst du in diesem Artikel.

42 Inhalts-Ideen für Firmenseiten

Deine Unternehmensseite ging gerade online - und nun? Für manche Unternehmer hört hier das Projekt „Webseite“ schon auf. Doch eigentlich fängt es jetzt erst an! Die Seite möchte regelmäßig mit neuen Inhalten bespielt werden. In diesem Artikel gebe ich Inspiration und...

Warum eine Webseite für Unternehmen unverzichtbar ist

In Zeiten, in denen nahezu alle mit dem Smartphone hantieren, ihr Mittagessen auf Instagram posten, die Wochenendplanung in WhatsApp Gruppen stattfindet und B2B Netzwerken auf Xing oder LinkedIn zum Alltag geworden ist, möchte man meinen, dass jedes Unternehmen eine...

Hinterlasse ein Kommentar