Responsive Design: Best Practices und Überlegungen

Responsive Websites sind Websites, die sich an alle Bildschirmgrößen und Auflösungen anpassen, nicht nur auf dem Desktop, sondern auch auf Mobilgeräten, Tablets und manchmal sogar auf dem Fernseher.

Laut Statista war der mobile Traffic im Jahr 2017 für 52,64 % des gesamten weltweiten Traffics verantwortlich, was bedeutet, dass eine Website, die nicht gut für mobile Geräte optimiert ist , etwa die Hälfte ihres Traffics verliert . Bis Ende 2018 wird erwartet, dass der globale Traffic-Anteil für mobile Geräte auf 79 % ansteigen wird, was eine außergewöhnliche Steigerung darstellt.

Unternehmen ohne mobile Website geraten mit alarmierender Geschwindigkeit ins Hintertreffen, da 8 von 10 Besuchern aufhören, sich mit einer Website zu beschäftigen, die auf ihrem Gerät nicht gut angezeigt wird. Es ist viel zu einfach für Benutzer, auf die Schaltfläche „Zurück“ zu klicken und stattdessen ein konkurrierendes Unternehmen auszuprobieren, und Google stuft Websites, die nicht responsive sind, in ihrer Suche sogar niedriger ein .

Hier können Sie den Handy-freundlichen Test von Google machen.

Bedeutet dies, dass Mobile wichtiger ist als Desktop? Nein. 83 % der mobilen Benutzer sagen, dass sie in der Lage sein sollten, die Erfahrung auf dem Desktop fortzusetzen, wenn sie dies wünschen.

Sehen Sie sich diese für Mobilgeräte optimierte Version von eBay im Vergleich dazu an, wie sie aussehen würde, wenn sie nicht für Mobilgeräte optimiert wäre. Würden Sie die nicht optimierte Version überhaupt in Betracht ziehen?

Um Websites zu entwerfen, die im heutigen Internet konkurrenzfähig sind, müssen Webdesigner Experten für responsives Webdesign (RWD) sein. Wo sollen sie anfangen?

Ein Mobile-First-Ansatz für responsives Webdesign

Mobile-First-Webdesign bedeutet, zuerst die mobile Website zu gestalten und sich dann bis zur Desktop-Version hochzuarbeiten. Es gibt eine Reihe von Gründen, warum dieser Ansatz gut funktioniert.

1. Mobile Websites haben mehr Bedenken hinsichtlich der Benutzerfreundlichkeit (dies liegt hauptsächlich an dem Mangel an Platz auf dem Bildschirm), daher ist es praktischer und effizienter, wenn der primäre Fokus auf dem mobilen Design liegt.
2. Es ist einfacher, die mobile Version zu vergrößern als die Desktop-Version (wieder wegen des Platzmangels auf mobilen Websites).
3. Mobile-First-Webdesign hilft, neu zu bewerten, was visuell und funktional notwendig ist.

Das Entwerfen einer Website als Mobile-First-Responsive-Site zwingt Designer dazu, eine Reihe wichtiger Fragen zu stellen, da weniger Bildschirmfläche zum Arbeiten zur Verfügung steht. Hier sind die Fragen, die gestellt werden müssen:

• Ist diese Funktion/Funktion wirklich notwendig?
• Wie können wir zuerst etwas Minimalistisches für Mobilgeräte entwerfen, das sich später gut für Desktops skalieren lässt?
• Ist dieser visuelle Effekt die Zeit wert, die zum Laden auf Mobilgeräten benötigt wird?
• Was ist das Hauptziel und welche visuellen Elemente helfen den Benutzern, es zu erreichen?

Wir werden uns gleich einige Beispiele für responsives Webdesign ansehen. Lassen Sie uns zunächst darüber sprechen, welche Geräte, Bildschirmgrößen und Webbrowser heute relevant sind.

Welche Bildschirmauflösungen sind für Responsive Webdesign relevant?

Hier sind die gängigsten Bildschirmauflösungen für Benutzer von Mobilgeräten, Tablets und Desktops weltweit. Wie Sie sehen können, gibt es eine große Auswahl an Auflösungen, sodass derzeit weder Mobilgeräte noch Tablets oder Desktops den Marktanteil dominieren. Dies sagt uns, dass Designer sie alle berücksichtigen sollten, wenn sie über responsives Webdesign nachdenken.

• 360 x 640 (kleines Handy): 22,64 %
• 1366 x 768 (durchschnittlicher Laptop): 11,98 %
• 1920 x 1080 (großer Desktop): 7,35 %
• 375 x 667 (durchschnittliches Handy): 5 %
• 1440 x 900 (durchschnittlicher Desktop): 3,17 %
• 720 x 1280 (großes Handy): 2,74 %

Genau wie beim Geräteausfall sollten wir die Daten nach Standort segmentieren, um sie an die demografischen Daten der Benutzer (oder die erwarteten demografischen Daten der Benutzer) unserer Zielgruppe anzupassen. Es lohnt sich auch, auf Auflösungen zu achten, die immer beliebter werden, denn obwohl einige Bildschirmgrößen derzeit nicht so verbreitet sind, könnten sie es in Zukunft sein. Dies wird reaktionsschnellen Designern helfen, zukunftssichere UX zu entwickeln, die auch dann funktionieren, wenn sich der Marktanteil ändert.

Beispielsweise sind 360x640-Auflösungen (die hauptsächlich Samsung-Geräten mit Android entsprechen) im letzten Jahr um 5,43 % gestiegen. Designer können wertvolle Erkenntnisse wie diese nutzen, um wichtige reaktionsschnelle Haltepunkte festzulegen, bevor sie mit dem Design einer Website beginnen.

Welche Webbrowser sind heute beliebt?

Beim responsiven Webdesign geht es darum, ein nahtloses Erlebnis auf jedem Gerät zu bieten, und da verschiedene Webbrowser Webseiten auf unterschiedliche Weise darstellen, müssen Websites getestet werden, um sicherzustellen, dass sie mit einer Vielzahl von mobilen und Desktop-Webbrowsern kompatibel sind.

Auch wenn die Skalierung einer Website auf die richtigen responsiven Breakpoints in erster Linie in der Verantwortung eines Webentwicklers liegt, entscheidet der Webdesigner genau, wie sich eine responsive Website an verschiedene Bildschirmgrößen anpasst, um ein optimales Benutzererlebnis zu schaffen.

Hier ist eine weltweite Aufschlüsselung des Marktanteils von Webbrowsern für Mobilgeräte und Desktops.

• Chrom: 55,04 %
• Safari: 14,86 %
• UC-Browser: 8,69 %
• Firefox: 5,72 %
• Oper: 4,03 %
• Internet Explorer: 3,35 %

Beim Responsive Design geht es nicht nur darum, „alles passend zu machen“, sondern auch darum, sich an die Möglichkeiten der Gerätehardware und des Webbrowsers sowie an die Geräteauflösung anzupassen. Ein Beispiel hierfür könnte sein, dass Google Chrome zwar die CSS-Eigenschaft overscroll-behavior: (die definiert, was passiert, wenn der Benutzer zu stark zum Rand des Darstellungsbereichs scrollt), dies jedoch in keinem anderen Webbrowser unterstützt wird.

Best Practices für responsives Design

Beseitigen Sie Reibung

Wie bereits erwähnt, hilft ein Mobile-First-Ansatz für responsives Webdesign Designern dabei, zu beurteilen, was wirklich notwendig ist, damit der Benutzer sein Hauptziel erreichen kann.

Während wir uns zur Tablet-Version (und später zur Desktop-Version) entwickeln, können wir dann beginnen, über sekundäre Ziele und die Mikrointeraktionen, Benutzerströme und CTAs (Calls to Action) nachzudenken, die diese Benutzerziele erreichbar machen. Wichtiger ist, dass wir uns zuerst auf die primären Ziele des Benutzers konzentrieren und unnötige Reibungen beseitigen , die weder den primären noch den sekundären Zielen zugute kommen.

Ein primäres Ziel könnte der Kauf eines Produkts sein, während das sekundäre Ziel die Anmeldung für einen Newsletter sein könnte (was später zu einem Kauf führen könnte).

Hier ist ein großartiges Beispiel für die Beseitigung von Reibungsverlusten: Da mobile Benutzeroberflächen in der Regel schwieriger zu navigieren sind, wäre es am besten, für mobile E-Commerce-Shops auf einen One-Page-Checkout umzusteigen und nur für Desktop-E-Commerce-Shops einen mehrstufigen Checkout zu aktivieren.

Design für Daumen

Responsive Webdesign ist insofern schwierig, als Benutzer mit der Desktop-Website über Klicks interagieren, mit der mobilen Version jedoch über Tippen und Wischen. Es gibt auch körperliche Unterschiede. Desktop-Benutzer haben ihre Computer normalerweise auf einer Oberfläche, während mobile Benutzer ihre Geräte in ihren Händen halten. Diese Unterschiede verändern die Art und Weise, wie Designer mobiler UIs Tippziele und andere wichtige UI-Elemente entwerfen, mit denen Benutzer interagieren, erheblich.

Schauen wir uns einige Beispiele an:

• Die Leute erwarten normalerweise, dass sich die Hauptnavigation des Desktops oben befindet. Auf Mobilgeräten sollte es jedoch unten stehen. Die Daumen reichen nicht bequem nach oben.
• Auch andere interaktive Elemente sollten gut erreichbar sein. Das bedeutet, sie in der Mitte des Bildschirms zu halten, da es für Daumen schwieriger ist, die Seiten und Ecken des Gerätebildschirms zu erreichen.
• Wichtige Links und CTAs sollten eine Höhe von mindestens 44 Pixeln haben, damit sie gut angezapft werden können (kleinere Tap-Targets sind schlecht für die Usability).

Empfohlene Lektüre: The Fundamental Guide to Mobile Usability.

Profitieren Sie von der nativen Hardware mobiler Geräte

Mobile Hardware (wie die Gerätekamera oder GPS-Dienste) ist nicht speziell nativen Apps vorbehalten, und wie bereits erwähnt, geht es beim responsiven Webdesign nicht nur darum, „alles passend zu machen“. Es geht auch darum, sich an die Fähigkeiten des Geräts anzupassen. Im Fall des mobilen Webdesigns sind einige Mikrointeraktionen – wie die Dateneingabe – auf kleineren Bildschirmen tatsächlich einfacher, da mobile Geräte über einfach zu bedienende Kameras verfügen, solange Websites die Vorteile der verfügbaren nativen Hardware nutzen.

Schauen wir uns einige Beispiele an:

• Scannen von Kredit-/Aufladekarten (da Formulare auf Mobilgeräten oft schwierig sind)
• Teilen von Fotos in sozialen Medien, da sich die Medien bereits auf Ihrem Gerät befinden
• Zwei-Faktor-Authentifizierung (weil Sie sich bereits auf Ihrem Mobilgerät befinden)
• Aktien/Analysen schnell überprüfen (weil mobile Apps Informationen vereinfachen)
• Durchführen einer Websuche mit Sprache (weil Freisprechen einfacher ist als Tippen)

Machen Sie Layouts standardmäßig flüssig/adaptiv

Nicht jeder Benutzer hat seinen Desktop-Browser maximiert. Dies bedeutet, dass Designer zwar die reaktionsschnellen Haltepunkte der Geräte berücksichtigen müssen, die Benutzer heute verwenden, sie müssen aber auch berücksichtigen, was zwischen diesen Haltepunkten passiert.

Responsive Breakpoints sollten verwendet werden, um das Layout und den Inhalt auf ein neues Gerät umzufließen, aber um alle Größen dazwischen zu berücksichtigen (nur für den Fall), müssen Layouts ansonsten flüssig sein (d Browser-Größenänderung).

Beachten Sie diese Tipps beim Entwerfen von fließenden/adaptiven Layouts:

• Prozenteinheiten lassen Elemente fließend sein.
• Das Festlegen von minimalen und maximalen Breiten kann das „aber nicht kleiner/größer als dieses“-Szenario ermöglichen.
• SVG-Bildformate können ohne Qualitätsverlust hoch- und herunterskaliert werden und sind auflösungsunabhängig (im Gegensatz zu JPGs und PNGs, die dies nicht sind).

Vergessen Sie nicht die Querformatausrichtung

Wir haben bereits über bestimmte reaktionsschnelle Haltepunkte gesprochen, aber wir müssen auch berücksichtigen, dass diese mobilen Ansichtsfenster auch im Querformat angezeigt werden können. Während die Implementierung eines fließenden Layouts den Inhalt technisch anpassungsfähig macht, kann der Verlust eines großen Teils des Hochformat -Ansichtsfensters ein Hindernis für die Benutzerfreundlichkeit und Zugänglichkeit sein.

Die Navigation ist normalerweise sicher (manchmal sogar besser, da Benutzer normalerweise mit zwei Daumen im Querformat navigieren), aber das Scrollen wird erheblich schwieriger, was nicht optimal ist, da der Benutzer mehr im Querformat scrollen muss.

Designer sollten darüber nachdenken, auch Landschaftshaltepunkte zu entwerfen; Beispielsweise könnten gekachelte Elemente, die auf Mobilgeräten vertikal gestapelt sind, als Schieberegler mit linken und rechten Navigationsschaltflächen angezeigt werden, sodass der Benutzer nicht scrollen muss.

Denken Sie daran, dass Typografie auch reaktionsschnell sein kann

Auch wenn UX-Designer normalerweise Pixeleinheiten verwenden, um Websites zu entwerfen, entspricht im eigentlichen Web ein Punkt nicht mehr unbedingt einem Pixel, da verschiedene Geräte unterschiedliche Auflösungen haben. Das iPhone X zum Beispiel hat 458 PPI (Pixel pro Zoll), sodass wir bei kleiner werdenden Pixelgrößen in der Lage sind, schärfere Grafiken auf demselben physischen Raum zu erzielen (Apple nennt diese „Retina“-Technologie und Android nennt sie „HDPI“).

Das bedeutet, dass beispielsweise eine Schriftgröße von 16 Pixel je nach Auflösung auf einigen Geräten größer oder kleiner aussehen würde. Webentwickler verwenden normalerweise em-Einheiten, um Schriftgrößen zu definieren, bei denen es sich um eine Art responsive Einheit handelt, bei der 1em gleich 1 Punkt ist.

Design-Übergabe-Tools wie Zeplin, Sympli, Marvel und InVision können Designern helfen, mit Entwicklern in Angelegenheiten zusammenzuarbeiten, die in gemeinsamer Verantwortung liegen. Während Designer das Design und Entwickler den Code ausführen, ist der Produktdesign-Workflow insgesamt eine Teamleistung, die eine solide Kommunikation erfordert.

Responsive Design Tipps und Best Practices zur Leistungsoptimierung

Beim responsiven Webdesign geht es nicht nur darum, wie es aussieht, sondern auch darum, wie es sich verhält und anfühlt. Ebenso wichtig ist es, Websites so anzupassen, dass sie auf dem vorgesehenen Gerät schneller geladen werden.

Lazy Load nicht lebenswichtige Bilder und Videos

Bilder und Videos machen einen großen Teil der gesamten Downloadgröße einer Website aus, aber Sie müssen sie nicht alle auf einmal laden. Es gibt zwei Szenarien, in denen das Rendern von Medien verzögert werden kann: „Below the fold“-Inhalte können geladen werden, wenn der Benutzer „below the fold“ scrollt, und renderblockierende Medien sollten erst heruntergeladen werden, nachdem das Layout und der Inhalt heruntergeladen wurden. Diese Vorgehensweise wird als verzögertes Laden bezeichnet, bei dem das Laden schwerer, unwichtiger Elemente verzögert wird, um die Seitenleistung zu verbessern.

Bedingtes Laden

Einige Website-Elemente sind nicht für mobile Benutzer gedacht oder zumindest die zusätzliche kognitive Belastung nicht wert. Wir möchten, dass unsere mobilen Websites einfach sind, daher ist es sinnvoll, Elemente in bestimmten Szenarien auszublenden. Davon abgesehen müssen wir sicherstellen, dass wir keine Browser-Ressourcen und Bandbreite verschwenden, indem wir diese Elemente laden, selbst wenn sie versteckt sind; Daher empfiehlt es sich, diese Elemente nur unter bestimmten Bedingungen einzubeziehen.

Auch hier kann ein Entwickler dies mit Code erreichen; Designer können die Seitenleistung jedoch verbessern, indem sie die Bedingungen dafür mitteilen, wann und wo bestimmte Elemente vorhanden sein sollen und wo nicht.

Responsive Bilder

Wie bereits erwähnt, zeigen einige Geräte mehr Pixel pro Zoll an, was dazu führen kann, dass Bilder unscharf werden, wenn sie nicht mit der richtigen Auflösung exportiert werden. Abhängig von der Auflösung des Geräts benötigen einige Bilder in doppelter (@2x), dreifacher (@3x) und sogar vierfacher (@4x) Größe. Webbrowser unterstützen jetzt das <picture> -Element, das je nach Gerät die richtige Bildauflösung auswählt.

Designer, die responsive Websites erstellen, können Bilder an das richtige Gerät anpassen, indem sie sicherstellen, dass sie mit allen Auflösungen exportieren, die auf heutigen Geräten verwendet werden (wenn Sie sich nicht sicher sind, fragen Sie Ihren Entwickler – Kommunikation ist der Schlüssel, wenn es um responsives Webdesign geht).

Fazit

Wireframing kann helfen, die Falten früh im Designprozess auszubügeln, und dies funktioniert gut, wenn man einen Mobile-First-Ansatz für responsives Webdesign verfolgt. Vielleicht gibt es einen responsiven Haltepunkt, der etwas mehr Aufmerksamkeit erfordert, oder vielleicht gibt es ein Konzept, das in Bezug auf die mobile Reaktionsfähigkeit einfach nicht effektiv ist. Es ist besser, die Unebenheiten auf der Straße eher früher als später zu finden (dh bevor Sie visuelle Ästhetik hinzufügen).

Moderne Designtools wie Adobe XD, Marvel und InVision ermöglichen es Teams, Prototypen auf realen Geräten zu testen, Feedback im Kontext zu diskutieren und im Allgemeinen als Team zusammenzuarbeiten, bis das Layout in allen Szenarien funktioniert.

Der Einsatz eines schlanken UX-Workflows, bei dem responsives Design durch interne Tests und Feedback vorangetrieben wird, stellt sicher, dass die Benutzererfahrung über alle Plattformen und Bildschirmauflösungen hinweg reibungslos funktioniert, bevor sie einem echten Benutzer zum ersten Mal präsentiert wird.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft