Responsive Webdesign: Warum die Optik entscheidend ist

Die meisten haben sie schon, bei manchen fehlt sie noch, der ein oder andere denkt über einen Relaunch nach: die Webseite! Warum ihr auch bei kleinem Umfang auf eine ansprechende Optik achten solltet!

Fazit: Der Webseitenbesucher bleibt länger und fühlt sich sicherer

Mit einigen Vorüberlegungen und Tricks lassen sich die Optik und damit die Bedienung der mobilen Version eurer Internetseite verbessern. Ein ansprechendes, übersichtliches Erscheinungsbild sorgt dafür, dass sich euer Besucher wohler fühlt, sich schneller zurechtfindet und länger auf eurer Webseite bleibt. Dadurch entsteht eher Vertrauen in euer Unternehmen. Dies wiederum führt dazu, dass die Wahrscheinlichkeit steigt, dass den Handlungsaufforderungen auf eurer Webseite gefolgt wird; sei es die Kontaktaufnahme oder der Kauf eines Produktes.


Worauf kommt es für euch besonders an, wenn ihr eine Webseite über das Smartphone aufruft? Gibt es Dinge, die euch so richtig nerven oder etwas, das ihr auf mobilen Internetauftritten vermisst? Schreibt es uns!

Perfekt optimiert – auch, wenn der Umfang gering ist

Wie bei jeder Marketing-Maßnahme sollten – sofern noch nicht geschehen – im Vorfeld allgemeine Fragen klar beantwortet werden: Was soll der Besucher eurer Internetseite erfahren? Soll er informiert werden, zum Kauf eines Produktes animiert werden oder Kontakt zu eurem Unternehmen aufnehmen?

Danach lässt sich besser bestimmen, auf welche Elemente es ankommt.

Bilder dienen oft der Übermittlung von Emotionen. Dies ist natürlich auch auf einem kleinen Bildschirm wichtig, kollidiert hier jedoch unter Umständen mit den Wünschen nach Übersichtlichkeit und kurzen Ladezeiten. Daher sollte hinterfragt werden welche Grafiken echten Informationswert haben (z. B. Produktdarstellungen, Bilder von Räumlichkeiten, …) und welche auf der mobilen Version der Webseite entfallen können.

Bei den Schriftgrößen ist natürlich wichtig, dass diese eine gut lesbare Größe haben. Das bedeutet nicht nur, dass sie groß genug sein müssen, sondern auch, dass sie nicht zu groß werden dürfen. Wenn eine Überschrift auf dem Smartphone auf einmal den halben Bildschirm einnimmt, wird das Lesen mühsam und obendrein leidet die Optik. Der Webseitenbesucher muss unnötig scrollen und verliert eher die Übersicht. Im schlimmsten Fall sieht er sich euren Internetauftritt erst gar nicht weiter an.

Auch die beim Smartphone andere Bedienung durch Berührung des Bildschirms anstelle der Verwendung einer Maus gilt es zu beachten. So sind Hover-Effekte nicht nutzbar und klickbare Elemente müssen ausreichend groß sein sowie genügend Abstand zueinander besitzen.

Allgemein kann beim Aufbau die Ausrichtung des Endgeräts ebenfalls mitberücksichtigt werden.

Sehr praktisch ist es, wenn neben den klassischen Links und E-Mail-Adressen auch Telefonnummern verlinkt sind, sodass sie auf dem Mobilgerät via Klick bzw. Berührung direkt angerufen werden können.

Eingabefeldern kann im Code der jeweils passende Eingabetyp zugewiesen werden, wie „email“, „tel“ oder „number“. Dadurch können beim Ausfüllen auf dem Smartphone direkt die richtigen Tastaturen angezeigt werden – mit sofort sichtbarem @-Zeichen oder der reine Ziffernblock. Auf diese Weise muss weniger gesucht und geklickt werden; das Ausfüllen von Formularen wird komfortabler.

Was bedeutet responsive Webdesign?

Die Nutzererfahrung ist bei der Erstellung einer Internetseite also einer der wichtigsten Faktoren, die es zu beachten gilt. Ideal sind kurze Ladezeiten, eine klare Menüführung, „Abholung“ des Besuchers durch Handlungsaufforderungen (CTAs) und eine allgemein ansprechende Optik, die zum Unternehmen hinter der Webseite sowie zur übermittelten Nachricht passt.

War es in den ersten Zügen des mobilen Internets noch häufiger anzutreffen, dass die Seitenversionen verschiedene URLs besaßen (z. B. www.webseite.de und mobil.webseite.de), hat sich heute weitgehend das responsive Design durchgesetzt. Responsiv (≈ reagierend/antwortend) bedeutet, dass die Seite sich an die Bildschirmgröße anpasst. Dabei bleiben URL und HTML-Aufbau unverändert. Wie gut die Anpassung an die verschiedenen Bildschirmgrößen funktioniert, hängt maßgeblich von der Arbeit des Designers/Programmierers ab.

Außerdem soll sich nicht einfach die Desktop-Seite mit ALL seinen Inhalten verkleinern, sondern es sollte in Betracht gezogen werden, in der mobilen Ansicht auf bestimmte Elemente zu verzichten. Auf kleinen Bildschirmen werden idealerweise nur die wichtigsten Aspekte angezeigt, um eine optimale Übersichtlichkeit zu gewährleisten. In der Regel möchte der Besucher am besten sofort und mit möglichst wenig Scrollen / wenigen Klicks das finden, wonach er sucht.

Im Grunde sollte heute der Aufbau ohnehin anders herum erfolgen: Erst die mobile Webseite, dann die Desktop-Variante. In letzterer kann ggf. „mehr“ dargestellt werden: ergänzende Informationen, unterstützende Grafiken oder kleine Spielereien, die die Nutzererfahrung unterstützen und gleichzeitig nicht essenziell sind.

In einem Punkt sind wir uns sicher einig: Das Internet mit den unzähligen Webseiten, die sowohl Informationsquellen, Kommunikationskanal als auch Unterhaltungsfaktor sind, ist nicht mehr wegzudenken. Das gilt seit einigen Jahren auch und insbesondere für die Version für die Hosen- bzw. Handtasche. War es vor 10 Jahren noch „nett“, eine mobile Webseite anzubieten, ist dies längst zur Pflicht geworden. „Mobile First“, heißt es; spätestens seitdem Google angekündigt hatte, Internetseiten in seinen (mobilen) Suchergebnissen zu bevorzugen, wenn diese auch über eine mobile Version verfügen oder responsiv angelegt sind.

Nicht nur für eine möglichst gute Platzierung in den Suchmaschinen ist die mobile Optimierung entscheidend. Fakt ist: Viele Internetseiten werden mittlerweile häufiger mit mobilen als mit Desktop-Geräten besucht. Das bedeutet, dass die Webseitenbesucher eher die mobile Variante eures Internetauftritts zu Gesicht bekommen als die „große Schwester“.

Diese Entwicklung stellt nicht zuletzt an die Designer und Programmierer höhere Anforderungen.