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
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![easy-social-share buttons="facebook,twitter,linkedin,xing" sharebtn_style="button" sharebtn_counter="insidename" counters=0 counter_pos="rightm" total_counter_pos="hidden" style="button" template="6" fullwidth="yes" fixedwidth_align="left" point_type="simple"]
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
Diese 6 Dinge erwarten Besucher von deiner Unternehmensseite
Dass du als Unternehmer nicht auf eine Website verzichten kannst, sollte im Jahr 2019 eigentlich jedem klar sein. Doch den allermeisten Unternehmen ist nicht klar, auf was es bei einer Website eigentlich ankommt! Das Thema Website ist komplex und für Laien eigentlich...
DSGVO – Die neue EU-Datenschutz-Grundverordnung kurz erklärt
5 Buchstaben die es in sich haben! Seit einigen Wochen hört und liest man fast nichts anderes mehr in der Online Businesswelt. Betroffen ist nahezu jeder Website Inhaber, Shop Betreiber und Blogger.
Am 25.05.2018 ist es soweit und die EU-Datenschutz-Grundverordnung, auch DSGVO genannt, wird aktiv.
Was das bedeutet und in wie weit auch du davon betroffen bist, erfährst du in diesem Artikel.
Deshalb sollte deine WordPress Website immer auf dem neusten Stand sein
Fast jede Software bekommt immer mal wieder ein Update spendiert. Sei es das Betriebssystem deines Smartphones oder ein Update für das Tabellenkalkulationsprogramm auf deinem Computer. So auch Wordpress. Regelmäßige Updates sorgen dafür, dass alles rund läuft. Es gibt...
Hinterlasse ein Kommentar