Die Bedeutung von Responsive Webdesign

Responsive Webdesign ist heutzutage eine wirklich wichtige Sache im UX-Design. Jeder in der Branche weiss, dass ein wirklich responsives, also reaktionsschnelles Design für Benutzerfreundlichkeit unabdingbar ist. Aber was genau bedeutet «responsive» eigentlich? Was unterscheidet eine gut gestaltete responsive Website wie die von Swiss Tomato, Ihrer Agentur für Webdesign Zürich, von den schlecht gemachten?

Was ist Responsive Webdesign?

Responsive bzw. reaktionsfähig bedeutet, dass wir einen Bildschirm an jedes Lesegerät anpassen können, das der Benutzer verwenden könnte. Früher reichte ein Desktop-Bildschirm aus, da es nur Desktop-Computer gab. Jetzt gibt es eine grosse Auswahl an Desktop- und Notebook-Bildschirmen, Tablets mit unterschiedlichen Bildschirmgrössen und auch andere Mobilgeräte wie Handys mit jeweils unterschiedlichem Browser-Erlebnis. Eine gut optimierte Website muss sich an alle Bildschirmgrössen anpassen können, um die gleiche Benutzererfahrung für alle zu gewährleisten. Dieser Prozess ist nicht einfach und die vielen Variablen können es sehr schwierig machen.

Best Practices, die beste Vorgehensweise

Optimierte Bilder

Bilder sind Schlüsselelemente auf Websites. Am besten ist es, wenn der Fokus des Bildes auf kleineren Bildschirmgrössen immer noch funktioniert, aber wenn nicht, kann Cropping, ein Zuschneiden, erforderlich sein. Natürlich wirken sich mehr Versionen desselben Bildes auf das Laden der Seite aus und beeinträchtigen die Suchmaschinenoptimierung. Daher ist es am besten, wenn möglich Vektorgrafiken zu verwenden. Swiss Tomato, Ihre Agentur für Webdesign Zürich, steht Ihnen gerne bei Ihrer Website-Optimierung zur Seite – egal, ob Sie wissen, was Vektorgrafiken sind oder nicht.

Navigation

Hamburger-Menüs mögen als primäre Navigation eine schlechte Wahl sein, sind aber eine ausgezeichnete Wahl für Bildschirme von mobilen Geräten. In Mobile-Apps ist die Tab-Bar-Lösung ebenfalls normal, aber in der Web-Entwicklung kompliziert zu verwenden. Hamburger-Menüs können ein mehrstufiges Menü haben, um die Desktop-Dropdown-Menüstruktur beizubehalten.

Slider

Slider bzw. Schieberegler funktionieren auch auf Mobilgeräten, aber die manuelle Navigation zwischen Bildern ist oft schwierig zu lösen. Wischen nach links und rechts ist auf Mobilgeräten üblich, aber die Nachahmung in einem Webcode kann schwierig sein.

Text-Grössen

Effektvolle Überschriften-Texte eignen sich hervorragend für Desktop-Bereiche, aber wenn wir auf mobilen Bildschirmen die gleiche Grösse beibehalten, kann das den gesamten Bildschirm verdecken. Mobile Textgrössen sollten definiert werden.

Vertikale Länge

Auf OnePager-Websites kann eine lange vertikale Länge Probleme in mobilen Ansichten verursachen. Die Webdesign Agentur sollte dieses Problem mit kreativen Lösungen wie Text-Dropdowns, gestapelten Abschnitten etc. lösen.

Benutzer haben heutzutage sehr hohe Standards. Eine Website muss auf allen Geräten funktionieren. Wenn wir das detaillierte Responsive-Design nicht bieten, ist die Benutzererfahrung schwächer, was die Wahrnehmung des Produkts verschlechtert.

Ein Projekt im Auge? Trinken wir einen Tomatensaft! hello@swisstomato.com