Die Dinge waren viel einfacher, bevor wir auf unseren Telefonen und Tablets Zugang zum Internet hatten. Um eine Online-Präsenz zu haben, musste eine Website erstellt werden, die nur auf einem Desktop- oder Laptop-Computerbildschirm angezeigt werden konnte. Allerdings müssen nun unterschiedliche Bildschirmgrößen geprüft und berücksichtigt werden, von größeren Desktop- und Laptop-Displays bis hin zu winzigen Handy- und Tablet-Bildschirmen – zumal ein Nutzer, wenn eine Website auf einem bestimmten Gerät nicht richtig dargestellt wird, sofort wieder abbricht.Responsive Website-Design und anpassbares Design sind zwei Techniken, um sicherzustellen, dass eine Website für mobile, Tablet-, Laptop- und PC-Displays geeignet ist. Beide zielen darauf ab, das gleiche Problem anzugehen, verwenden jedoch unterschiedliche Ansätze.
Die Kenntnis der Unterschiede zwischen diesen beiden Techniken kann Ihnen dabei helfen, zu bestimmen, welche Strategie für Ihr nächstes UX-Projekt am besten geeignet ist.
Wir werden in diesem Beitrag responsives und anpassungsfähiges Design definieren und dann die Vor- und Nachteile jedes einzelnen durchgehen.
1. Was ist Responsive Design und wie funktioniert es?
Eine mit Responsive Design erstellte Website bietet auf allen Geräten dieselben Inhalte, ist jedoch flüssig und ändert ihr Layout und Aussehen je nach Größe und Ausrichtung des Geräts.
Entwickler verwenden CSS, um sicherzustellen, dass jede Seite der Website entsprechend der Größe des Ansichtsbereichs des Benutzers neu formatiert werden kann und dass die Website nur eine Codebasis hat. Haltepunkte werden verwendet, um die Website darüber zu informieren, wann sie sich ändern sollte, um verschiedenen Bildschirmgrößen gerecht zu werden.
Was ist das Endergebnis? Auf einem großen Desktop-Computerbildschirm kann die Website ein vierspaltiges Layout haben, ein dreispaltiges Layout auf einem kleineren Laptop-Bildschirm, ein zweispaltiges Layout auf einem Tablet-Bildschirm und ein einspaltiges Layout auf einem Mobiltelefon. Sie werden die gleichen Kerninformationen und das gleiche Design auf einer responsiven Website entdecken, egal welches Gerät Sie verwenden.
Laut Amy Schade von der Nielsen Norman Group müssen UX-Designer, die an einem responsiven Design arbeiten, eng mit Entwicklern zusammenarbeiten, um sicherzustellen, dass das Layout an unterschiedliche Bildschirmgrößen anpassbar ist. Die Benutzererfahrung ändert sich, wenn sich die Seitenkomponenten ändern, daher liegt es am UX-Designer, sicherzustellen, dass die Website auch bei Änderungen nutzbar bleibt. Ein Ansatz dafür besteht darin, sicherzustellen, dass die wichtigsten Informationen geräteübergreifend priorisiert werden, insbesondere auf kleineren Bildschirmen.
2. Was ist adaptives Design und wie funktioniert es?
Adaptives Design erstellt ein einzigartiges Website-Layout für den Bildschirm jedes Geräts. Die Website erkennt die Größe des Bildschirms beim Laden und bietet das Layout an, das für diesen Darstellungsbereich entworfen wurde. Tatsächlich können Sie für jede der sechs häufigsten Bildschirmgrößen ein einzigartiges Benutzererlebnis entwerfen: 320 px, 480 px, 760 px, 960 px, 1200 px und 1600 px.
Da das Entwerfen einer Website für sechs verschiedene Bildschirmgrößen jedoch sehr zeitintensiv wäre, kann der Aufwand eingeschränkt werden, indem auf Benutzerstatistiken für eine vorhandene Version der Website zurückgegriffen wird, um festzustellen, auf welchen Bildschirmgrößen Personen sie am häufigsten besuchen. Wenn die Statistiken beispielsweise zeigen, dass die Mehrheit der Benutzer über ihr Apple iPad und Samsung Galaxy-Smartphone auf die Website zugreift, würden Sie die Benutzererfahrung ausschließlich für diese beiden Bildschirmgrößen und nicht für alle sechs erstellen.
3. Die Vor- und Nachteile von Responsive Design
Der Hauptvorteil von Responsive Design aus Sicht eines UX-Designers besteht darin, dass es wesentlich weniger Aufwand für die Erstellung und Wartung erfordert als anpassbares Design. Darüber hinaus unterstützen reaktionsschnelle Webseiten eine endlose Anzahl von Bildschirmgrößen, was angesichts der Häufigkeit, mit der neue und ungewöhnliche Bildschirmgrößen produziert werden, eine wunderbare Nachricht ist. Da responsive Websites als mobilfreundlich gelten, schneiden sie in den Suchmaschinenergebnissen besser ab.
Responsive Websites hingegen benötigen zusätzlichen Code von Entwicklern, und selbst wenn ein UX-Designer und ein Entwickler eng zusammenarbeiten, um sicherzustellen, dass das Layout auf so vielen Geräten wie möglich lesbar ist, ist es schwierig, das Layout auf jedem Gerät zu verwalten. Infolgedessen ist eine Website möglicherweise nicht so konzipiert, dass sie auf bestimmten Geräten die optimale Benutzererfahrung bietet. Da außerdem der vollständige Website-Code unabhängig vom Gerät bereitgestellt wird, das zum Anzeigen der Website verwendet wird, kann das Laden einer responsiven Website länger dauern. Die Benutzererfahrung kann dadurch beeinträchtigt werden.
Responsive Design ist aufgrund seiner Flexibilität häufig die bevorzugte Methode zur geräteübergreifenden Optimierung einer Website, insbesondere wenn die Website von Grund auf neu aufgebaut wird und eine große Anzahl von Webseiten aufweist.
4. Die Vor- und Nachteile des anpassungsfähigen Designs
Für einen UX-Designer kann es einfacher sein, mehrere Layouts zu erstellen, die für ein anpassungsfähiges Design erforderlich sind, da es lediglich darum geht, Wireframes für die festgelegte Breite jeder Bildschirmgröße zu erstellen. Der UX-Designer hat daher die vollständige Kontrolle über jedes Layout und kann garantieren, dass die Benutzererfahrung für jede Bildschirmgröße optimiert ist. Infolgedessen könnte der UX-Designer unterschiedliche Informationen für verschiedene Bildschirmgrößen integrieren, wenn er dies für sinnvoll hält.
Eine angepasste Website für ein Essenslieferungsgeschäft hätte beispielsweise einen Desktop-Computer-Startbildschirm mit Restaurantauswahl und Lebensmittelkategorien sowie eine Suchfunktion für den Standort des Restaurants. Andererseits könnte auf einem Mobiltelefon die Homepage derselben Website einfach die Suchoption für den Restaurantstandort enthalten.
Adaptive Websites sind für Entwickler einfacher zu erstellen und werden wesentlich schneller geladen als responsive Websites, da sie nur den für die jeweilige Bildschirmgröße erforderlichen Code bereitstellen.
Adaptives Design hingegen kann für einen UX-Designer eine Menge zu bewältigen sein. Es ist zwar möglich, den Aufwand einzuschränken, indem man für nur zwei oder drei der sechs typischen Bildschirmgrößen entwirft, aber dies führt dazu, dass die Website nicht richtig formatiert wird, wenn Benutzer sie auf einem Gerät anzeigen, für das sie nicht vorbereitet wurde. Selbst wenn alle sechs Bildschirmgrößen unterstützt werden, werden seltene Bildschirmgrößen nicht unterstützt.
Der optimale Zeitpunkt für die Anwendung von adaptivem Design ist, wenn Sie Ihre Website neu gestalten oder verbessern. Adaptives Design kann beispielsweise die ideale Lösung sein, wenn ein Kunde ein mobiles Layout für eine bestehende Website benötigt, die er nicht ändern möchte.
5. Die wichtigsten Imbissbuden
Sie sollten jetzt ein grundlegendes Verständnis für reaktionsfähiges und anpassbares Design sowie für die Vor- und Nachteile der einzelnen Elemente haben. Behalten Sie diese Dinge im Hinterkopf, wenn Sie auswählen, welche Technik für Ihr nächstes UX-Projekt am besten geeignet ist:
Von einem riesigen Desktop-Computer bis hin zu einem winzigen Mobiltelefon kann ein reaktionsfähiges Design sein Layout und Aussehen entsprechend der Bildschirmgröße des Geräts ändern, auf dem es angezeigt wird.
Ein anpassbares Design erfordert die Erstellung eines einzigartigen Layouts für jedes Gerät, das die Website besucht.
Responsive Design erfordert weniger Aufwand von einem UX-Designer, aber er muss mit dem Entwickler zusammenarbeiten, um sicherzustellen, dass das Layout der Website auf allen Bildschirmgrößen verwendbar ist.
Adaptives Design erfordert die Erstellung von bis zu sechs separaten Versionen einer einzigen Website für verschiedene Bildschirmgrößen. Dies ist zwar ein großer Aufwand, ermöglicht es dem UX-Designer jedoch, die Benutzererfahrung für jedes der von diesen Layouts abgedeckten Geräte zu verbessern.
Größere Websites, die von Grund auf neu erstellt werden, profitieren in der Regel von Responsive Design.
Kleinere Standorte, die renoviert werden, können vom adaptiven Design profitieren.
