Was ist Responsive Design?

Wir decken und klären auf!

Individuelles Responsive Webdesign ist ein muss! Der Beweis:

Weltweit nutzen 58,99 % der Weltbevölkerung ein Smartphone, das sagt eine Studie von Statista aus diesem Jahr, die Nutzung war nie höher und steigt. Diese Statistik sagt aber nur, dass so viele Menschen ihr Smartphone oder ein Smartphone benutzen und nicht, dass sie damit im Internet sind. Von diesen knapp 60 % der Weltbevölkerung nutzen fast alle ihr Smartphone auch, um ins Internet zu gelangen: 92,6 % aller Internetnutzer nutzen ihr Smartphone, um zu online zu sein. Alleine in Deutschland, beträgt der Prozentsatz der Internetnutzer:innen durch das Smartphone ganze 82 % (Ich denke, wir können davon ausgehen, dass die restlichen 18 % kein Datenvolumen haben oder durch ihr zu hohes oder niedriges Alter nicht ins Internet kommen können oder dürfen)! Diese Nutzer:innen, somit auch ihr, benutzen ihr Smartphone zum Googlen und sicher auch, um die neusten Aktivitäten im Social-Media-Bereich zu stalken.

Dadurch ist zu erkennen, dass Applikationen und Websites – gerade diese – auf dem Smartphone nicht nur funktionieren müssen, sondern die Nutzer:innen auch abholen sollten! Was bringt einem eine Website, die durch schlechte Funktion oder Nutzbarkeit negative Erfahrungen des Nutzverhaltens aufweist?

Daher gibt es eine Umfrage von GoodFirms, die Webdesigner:­innen fragten, was diese glauben, wieso Nutzer:­innen Websites frühzeitig verlassen. Die Antworten sind recht interessant:

• 73,1 % sind der Meinung, dass kein Responsive Design auf diesen Websites existiere und die Nutzer:innen aufgrund der dadurch resultierenden schlechten Nutzbarkeit die Website voreilig verlassen.
• 61,5 % meinen, dass es aufgrund der schlecht gestalteten Navigation sei.
• 38,5 % sind der Meinung, dass es an veralteter Gestaltung der Websites läge.
• 34,6 % gehen auf den Inhalt ein und erklären, dass schlecht strukturierter Inhalt der Grund für den Absprung sei.

Nehmen wir gerne die Meinung, die 73,1 % der befragen Webdesigner:­innen vertreten und halten wir uns hier ein wenig länger auf: Fehlendes Responsive Design.

That really grinds my gears

Wer kennt es nicht: Du sitzt (wie ich) abends auf der Couch oder liegst im Bett und scrollst dich ein bisschen durch das Neuland namens „Internet“. Oh! Was ist das? Ein Online-Shop, bei dem ich einen Doctor-Who-Merchandise-Schlüssel­anhänger erwerben kann, den ich richtig cool finde?! Da schau ich doch mal nach!

Und zack, da ist das Problem.

Während sich die Seite langsam aufbaut, sehe ich Grafiken und Texte, die so klein sind, sodass ich die Zoom-Funktion des Browsers auf meinem Smartphone benutzen muss. Was soll das? Oh, sieh an! Eins der schönen Bilder ist außerdem komplett verzerrt! Kann man nicht einfach Internetseiten erstellen, die für Smartphones konzipiert werden? Es hängen doch immer mehr Leute an den kleinen Suchtmachern. Ist es nicht so, dass wir alle mehr Zeit online am Smartphone (meinetwegen auch am Tablett) verbringen als am Rechner oder Laptop? Wieso ist es im Jahr 2022 noch immer ein solch großes Problem, Websites ordentlich an das jeweilige Gerät anzupassen, die Schriften lesbar zu machen und Bilder ordentlich zu skalieren? Und wieso, um Himmels Willen, scrollt die Website manchmal horizontal – ihr kennt es, wenn sich die Seite nach rechts und links verschieben lässt!? Also klar, der ergonomische Move unseres Daumens ist eine Viertelkreisbewegung, aber soll das so sein? I doubt it! Da ist doch kein Inhalt außer einer kleinen Weißfläche. Kann so ein horizontaler Scroll nicht auch ausgestellt werden? Es handelt sich doch auch gerade mal um ca. 20 px, die zur rechten Seite gescrollt werden, die nicht mal Sinn ergeben!

An dieser Stelle danke ich euch fürs Lesen und entschuldige mich für den kleinen Wutanfall. Aber seid mal ehrlich! Sowas nervt doch unglaublich, oder?

Was bedeutet „Responsive“ und was ist „Responsive Design“ überhaupt?

Ja, Anglizismen nerven! Und wir wollen alle nicht mehr als zwei Sätze mit Lisa, 19 Jahre alt, die gerade ein halbes Jahr in Australien war, schnacken. Hier geht es jedoch um international ausgelegte Fachbereiche: User Experience Design in Kombination mit dem User Interface Design – abgesehen davon reden wir hier von Websites, deren Sprachen HTML, CSS, JavaScript, etc. sind und diese interagieren mit uns in kryptischem Englisch.

„Responsive“ bedeutet wörtlich übersetzt „ansprechbar“. Wir können eine „Responsive“ Website also auch „ansprechende Website“ nennen. Beim Responsive Design sprechen wir nicht vom Ansprechen, sondern von „sich anpassendem Design“, womit nicht nur die Anpassung an die mobilen Endgeräte gemeint sein soll. Responsive Design soll sich jedem Display anpassen, also auch Bildschirmen in einer höheren Auflösung als Full-HD (1920 x 1080 px). Das vergessen leider zu viele.

Wir wissen nun, dass sich Responsive Design an den Bildschirm / das Display des jeweiligen Endgeräts anpassen soll, doch wieso?

Warum ist „Responsive Design“ wichtig und welches Ziel wird verfolgt?

Das wichtige am Responsive Design ist der Umgang der Elemente, die auf einer Website oder in einer Applikation bestehen und diese für ein anderes Format umzuverteilen oder neu auszu­richten.

In der Desktopversion arbeiten wir an an einem Monitor, der uns im Querformat zur Verfügung steht. Logischerweise sollten die Objekte auch diesen Platz ausnutzen, damit man auf einen Blick so viele wichtige Informationen wie möglich auf einer Seite hat. Also eine horizontale Ausrichtung der Objekte. Mit dem Smartphone benutzen wir jedoch ein Gerät, das für die vertikale Ausrichtung erstellt wurde, da es so einfacher von uns in der Hand gehalten werden kann. Eine horizontale Ausrichtung der Elemente macht hier also keinen Sinn, da die Elemente sonst unlesbar werden!

Responsive Design hilft also den Nutzern Inhalte auf jedem Endgerät so zu betrachten, sodass (im besten Fall) keine Information verloren geht und die wichtigen Inhalte auf einem Blick sichtbar sind. Kurzum: Elemente, die am Desktop nebeneinander sind, sollten auf dem Smartphone untereinander stehen. Die folgende Grafik veranschaulicht es ganz gut:

Unterschiedliche Meinungen

Das Thema Responsive Design ist so umfangreich, man könnte mehr als eine Doktorarbeit darüber schreiben! Ich meine, kennt ihr das Burgermenu? Das sind die drei untereinander stehenden Striche. Diese Grafik zeigt an, dass sich darin die Navigation der Website befindet. Und ja, auch diese Form der Navigation wurde erfunden, um das Responsive Design besser darzustellen. Fun Fact: Das Burgermenu heißt wegen seines Aussehens so.

Zusätzlich kann man drüber streiten, ob sich die Navigation auf mobilen Endgeräten im unteren Bereich befinden sollte. Hier streiten Designer:­innen untereinander, ohne eine richtige Lösung zu finden. Die Navigation auf mobilen Endgeräten ist ergonomisch gesehen im unteren Bereich des Smartphones am sinnvollsten, da dieser Bereich vom Daumen am einfachsten erreicht werden kann, ohne dass dieser überstreckt werden muss oder die Hand sich so sehr verrenkt, sodass der sichere Halt nicht mehr gewährleistet ist.

Im oberen Bereich ist die Navigation schwieriger – wenn nicht sogar gar nicht – mit dem Daumen zu erreichen. Um ganz sicher zu gehen, sollten wir darauf achten, dass viele Linkshänder:innen auf der Welt existieren, die ein Smartphone bedienen. Die Frage, ob die Navigation dann oben rechts oder links platziert werden soll, ist also überspitzt gleichgesetzt mit russischem Roulette.

Würde die Navigation in den unteren Bereich rutschen, so könnte jede:r diese problemlos mit dem Daumen erreichen. Das Problem bei dieser These ist die Nutzererfahrung. Wir, zumindest Benutzer in der westlichen Kultur, sind es gewohnt von oben nach unten und von links nach rechts zu lesen. Die Navigation sollte allgegenwärtig sein. Hier kommt der nächste Streitpunkt ins Spiel: Würde die Navigation nach unten verschwinden, würde sie unter dem Daumen verschwinden und die Auffälligkeit, die sie im oberen Bereich des Smartphones hätte, wäre gestorben.

Somit sehen wir, dass beide Seiten Vor- und Nachteile haben und es leider, zumindest Stand jetzt, zu keiner optimalen Lösung kommt.

Ist meine Website im Responsive Design angelegt?

Viele Webdesigner:­innen und Agenturen bieten euch zwar Webdesign und Responsive Webdesign an, doch habt ihr dann am Ende des Projekts auch wirkliche eine Website, die sich individuell an alle mobilen Endgeräte gleichermaßen gut anpasst? Deren Objekte immer passend zum Bildschirmformat neu ausgerichtet werden, die Inhalte auf der mobilen Version versteckt oder anzeigt, weil es einfach sinnvoller ist? Macht selbst den kleinen Check mit den folgenden Informationen, die ich euch hier mitteile.

Wie funktioniert Responsive Design am Desktop-Monitor?

Bei Bildschirmen im Querformat gibt es viele Formatverhältnisse und Auflösungsdarstellungen, die wir im Responsive Design für den Desktop beachten sollten. Es gibt den „Standard“-Desktop-Monitor mit 1920 x 1080 px im Seitenverhältnis 16:9, dann gibt es aber auch 4k-Auflösungen, die im Verhältnis 16:9 stehen (3840 x 2160 px). Andererseits gibt es aber auch 4k-Auflösungen, die ein Seitenverhältnis von 21:9 oder 32:9 (Wide-Screens) haben. Wir erkennen also, dass es sinnfrei ist in Pixeln zu rechnen und stattdessen Einheiten benutzen sollten, die ihre Anpassung besser darstellen und skalieren können. Im Webdesign spricht man hier beispielsweise von Einheiten wie em, rem, vh, vw, %, etc.. Wenn es euch interessiert, was diese Einheiten bedeuten, wie und vor allem wo man diese am besten einsetzen sollte, so können wir darüber in nächster Zeit einen weiteren Blogbeitrag schreiben. Ihr könnt uns auch während eines Kaffees darüber ausquetschen.

In Pixeln zu rechnen ist also sowas von 2008. Die Auflösungen werden höher, die Seitenverhältnisse breiter. Was bringt dann ein statisches Design, dass für maximal 1920 x 1080 px erstellt wurde und auf einer 4k-Auflösung eines Monitors mit den Seitenverhältnissen 21:9 dargestellt werden soll? Dieses Design wäre schlichtweg nicht lesbar und erkennbar auf dem Monitor. Responsive wäre es also, wenn der Text und Inhalt sich in Relation zum Bildschirmverhältnis vergrößert, sodass das Hauptdesign proportional erhalten bleibt.

Was sollte beim Responsive Design von Tablets beachtet werden?

Das iPad ist im Thema Responsive Design das trickreichste aller mobilen Endgeräte – abgesehen vom Surface Duo oder den neusten Flip-Smartphones. Das iPad funktioniert im Hoch- sowie im Querformat! Hierbei ist es also wichtig, dass das Responsive Design zwingend funktioniert, denn nichts wird so häufig gedreht wie ein iPad, das Mutti gerade in die Hände gedrückt wurde. 😁

Die Seitenverhältnisse anderer Tablets sind ähnlich vielfältig wie die, der Monitore. Wir haben Tablets in Seitenverhältnissen von 16:10, 16:9, 5:4, 4:3, 3:2, u. s. w..

Bei jedem Dreh muss also die Website oder die Applikation auf dem Tablet wieder neu ausgerichtet werden; vom Quer- ins Hochformat. Anders als bei Smartphones, die meistens ein Seitenverhältnis von 9:16 aufweisen, sind wir hier in eher klobigeren Sphären unterwegs, daher ist das Tablet, ganz besonders das iPad, ein Grund für eine neue Designorientierung im Responsive Design.

Websites auf dem Smartphone

Der Grund, weswegen die meisten Agenturen, Webdesigner:­innen, u. v. a. „Responsive Design“ anbieten ist der, dass die Websites und Applikationen auf dem Smartphone gut aussehen sollen. Dieser Meinung sind wir auch, jedoch ist es hierbei wichtiger denn je, auf die Schriftgröße, den Kontrast, die Zeilenabstände, u. a. zu achten, denn wir haben ein wirklich kleines Gerät von maximal ca. 7 Zoll in der Hand. Ebenfalls zu beachten ist, dass nicht alle Smartphones die gleichen Bildschirmformate besitzen. Sieht deine Website also auf deinem iPhone 14 schick aus, heißt das noch lange nicht, dass sie auch auf einem Android Phone funktioniert. Achtung: Einige Anbieter:innen passen die Websites einfach nur optimal an die Geräte der jeweiligen Kund:in an – kontraproduktiv!

Thema Schriftgröße:

Auch hier kann und sollte man die Einheiten immer neu für jeweilige Formate berechnen lassen, wenn man das denn auch kann. Ansonsten einfach darauf achten, dass die Schrift nicht zu klein und nicht zu groß wird. Wir verraten hier natürlich nicht unser gesamtes Knowhow, würde auch zu technisch werden! Aber ihr merkt, das Ganze ist für Laien kaum bis gar nicht handhabbar!

Thema Kontrast:

Kontraste sind immer wichtig – keine Frage. Wenn wir einen Text lesen wollen, sollen wir ihn aufgrund der Kontraste auch erkennen können. Wir sprechen hierbei von einer Kontrast-Skala, die von 1 bis 21 geht, wobei 1 für einen miserablen Kontrast (z. B.: Schwarz auf Schwarz) und 21 für den besten Kontrast (z. B.: Schwarz auf Weiß) steht. Die Kontrast sind gerade auf den Smartphones wichtiger, da wir sie im Alltag allgegenwertig haben und einsetzen, auch unter freiem Himmel. Strahlt die Sonne mal etwas mächtiger, wird es alleine aufgrund der Lichtreflektionen auf dem Display schwieriger die Inhalte zu erkennen. Um Farbkontraste zu testen, könnt ihr einen Farbkontrast-Rechner benutzen, von denen online eine Vielzahl existieren (Alle rechnen nach denselben Werten). Ich habe hier mal einen für euch rausgesucht. Wusstet ihr nicht? Ha, fragt euch mal warum!

So arbeiten wir:

Wir sind treu dem Motto: Mobile First! Wenn die Website auf dem Smartphone schier schlecht konzipiert wurde, ist sie auch im Gesamtbild schlecht. Viel wichtiger aber noch: Ist das Funktionalität nicht gegeben, springen die Nutzer:innen ab und zwar sehr schnell!!! Wir arbeiten von daher nicht mit vorgefertigten Templates und gestalten vorab ein Screendesign, das wir so 1 zu 1 umsetzen und programmieren. Ob von den Auftraggebenden ein CMS (Content Management System) verlangt wird oder nicht, ist für unsere Umsetzung prinzipiell egal, da wir nicht an WordPress, Typo3 o. a. gebunden sind. Wenn die Auftraggebenden kein CMS nutzen müssen, weil die Inhalte statisch sind und bleiben, so können wir diese auch frei programmieren.

Nachdem wir das Screendesign, vor allem das Konzept und die Strategie der Website, präsentiert haben, gibt es die Möglichkeit, diese Präsentation noch ein wenig auf sich wirken zu lassen und in der Präsentationsdatei der verschiedenen Programme verschiedene Sektionen, Zeilen oder Elemente zu kommentieren. Erst, wenn diese Prozesse durch sind, gehen wir in die Umsetzung. Wir erstellen dann die Codes für die Website, sodass wir das Grundgerüst haben und darüber hinaus besondere, spielerische oder gewünschte Funktionen, die z. B. die Nutzerfreundlichkeit erhöhen, einbauen können.

Nachdem wir die letzten Code-Snippets auf der Website integriert haben, sind wir aber noch immer nicht fertig mit dem Projekt! Nun kommt die Test-Phase: In der Test-Phase prüfen wir alle gesetzten Hyperlinks, Funktionen und Unterseiten auf die Nutzbarkeit. Wir testen die Website auf verschiedenen Endgeräten und Browsern, sodass wir sichergehen können, dass wir auch die Qualität abliefern, die wir gewährleisten. Wurde deine Website oder noch viel wichtiger dein Shop ausgiebig getestet, bevor er live ging?

(Zwischen all diesen Prozessen existieren noch viele weitere Prozesse, bis wir den Abschluss des Projekts gewährleisten können.)

Nach dem Test können wir die Website ordnungsgemäß übergeben und helfen gerne noch bei der Integration von verschiedenen (Analyse) Tools. Wir bieten natürlich auch SEO (Search Engine Optimization) an, sodass wir hier also in ein neues Projekt reinrutschen, denn: Wofür hat man eine Website, wenn sie keiner finden kann? Falls ihr euer SEO jedoch selbst übernehmen wollt (und technisch könnt), ist das für uns auch okay. Sagt aber Bescheid, wenn ihr Hilfe benötigt. Wir sind für euch da und beraten und schulen euch und euer Team gern!

Fazit

Die Studien zeigen, dass Responsive Webdesign nicht mehr wegzudenken ist. Jetzt ist Zeit zu handeln! Viele Nutzer:innen gehen aufgrund schlechten Designs nicht auf eure Website oder verlassen diese vorzeitig, ohne auch nur ansatzweise euer Angebot erfasst zu haben! Es ist nicht wegzureden, dass die Nutzerzahlen seit Jahren steigen und das nicht nur für die Internetnutzung selbst, sondern auch bezogen auf die Internetnutzung via Smart­phone.

Gerade für den E-Commerce ist gutes Responsive Design unerlässlich! Du solltest zwei Mal nachdenken, ob du hier an der richtigen Stelle sparst, wenn du anstatt eine:r Expert:in jemanden beauftragst, der/die dir einen 08/15 Shop baut oder dir selbst mit Wix-Vorlage (ja, das heißt wirklich so) oder durch ein weiteres Shopify-Template einen Shop erstellst!

Hast du Fragen zum Thema?
Sind deine Websites und/oder Online-Shops bereits responsive?