Responsive versus adaptives Design: Wie wählt man zwischen den beiden?
Responsive Design wird zunehmend als goldener Standard für die Erstellung der neuen Palette von Webanwendungen propagiert. Aufgrund von Komplikationen, die sich aus der Verwendung desselben Codes in jeder Version der Website ergeben, wenden sich Marken heutzutage jedoch einer Alternative zur RWD-Technologie zu, die als adaptive Bereitstellung oder Design bekannt ist. Wie würden Sie zwischen den beiden wählen? In diesem Artikel geht es um dasselbe.
Responsive Webdesign ist keine Neuigkeit mehr. Die Webdesigner-Gemeinde, die Tech-Community und sogar der durchschnittliche bekennende Webfreak wissen jetzt, dass responsives Design der Weg in die Zukunft ist. Das Smartphone, das bahnbrechende Gerät, zwang Webdesigner wirklich dazu, Websites zu entwickeln, die automatisch reagieren und sich an jedes Gerät mit jeder Bildschirmgröße anpassen konnten, und so war responsives Webdesign geboren. Mit den Techniken von RWD kann das Layout der Website an die Bildschirmgröße des Geräts angepasst werden, auf dem sie angezeigt wird. Woher kommt dann die Rede von adaptivem Design?
Für den Uneingeweihten mögen beide Schlagworte wie austauschbare Begriffe für dieselbe Technik erscheinen. Da jedoch immer mehr Traffic von Mobilgeräten kommt, wird es für Publisher immer wichtiger, die Unterschiede zwischen den beiden zu kennen und das Beste für ihre Website auszuwählen. Außerdem zeigt eine in den USA durchgeführte Umfrage von Millenial Media und comScore, dass 56 % der Online-Inhalte jetzt über Smartphones und Tablets konsumiert werden, während die restlichen 44 % über Desktop-Computer konsumiert werden. Und der Wandel beschleunigt sich weiter. Damit ist ein für alle Mal klar, wie wichtig es ist, eine Website zu haben, die für mobile Zielgruppen gut geeignet ist. Kommen wir nun zurück zu der Frage: Wie kann man zwischen den beiden wählen?
Was ist der Unterschied?
Der einfachste Weg, eine Option aus den beiden auszuwählen, besteht darin, die Unterschiede und Vorteile zu verstehen, die die eine gegenüber der anderen bietet.
Während das responsive Design ein clientseitiger Ansatz ist, bei dem die gesamte Seite an den Client (Gerätebrowser) geliefert wird, ist adaptives Design im Allgemeinen serverseitig, wobei der Server zuerst die Attribute des Geräts erkennt, typischerweise durch serverseitige Plugins oder benutzerdefinierte Benutzer Agentenerkennung und lädt dann eine Version der Website, die für ihre Abmessungen und nativen Funktionen optimiert ist. Daher verwendet die adaptive Bereitstellung vordefinierte Layouts, die für eine Vielzahl von Bildschirmgrößen erstellt wurden. Wenn eine bestimmte Bildschirmgröße erkannt wird, wird das entsprechende Layout aktiviert und mit dem Stylesheet abgeglichen. Beim adaptiven Design ändern sich die Layouts auf Basis von Breakpoints.
Es gibt auch eine andere Alternative, einen clientseitigen adaptiven Ansatz, bei dem umfangreiches JavaScript verwendet wird, um die Websites mit erweiterten Funktionalitäten und Anpassungen auszustatten. Ein wenig ähnlich dem responsiven Webdesign funktioniert diese Art der Auslieferung auf der Client-Seite oder im Browser des Benutzers, der verschiedene Geräte erkennt und entsprechende Vorlagen für den Benutzer lädt. Der Vorteil dabei ist, dass nur ein Satz HTML und JavaScript auf allen Geräten verwendet werden muss, sodass Änderungen viel einfacher umgesetzt werden können.
Responsive versus Adaptive: Welches ist das Richtige?
Einer der großen Vorteile von Responsive Design, der es zu sofortigem Ruhm verholfen hat, war, dass eine einzige Codebasis sowohl für den Desktop- als auch für den Mobilbenutzer gute Dienste leistete. Dies machte das Leben eines Entwicklers einfacher, da es die alptraumhafte Erfahrung, sich um mehrere Codeversionen für verschiedene Gerätetypen kümmern zu müssen, fast beseitigte. Der gleiche Code für beide Geräte bedeutet jedoch, dass die auf dem Smartphone gestartete Website die gleiche Größe und Komplexität wie die Desktop-Version hat, was der Hauptgrund dafür ist, dass sich responsive Websites auf mobilen Geräten seltsam und aufgebläht verhalten.
Andererseits hat ein Server bei Verwendung eines adaptiven Ansatzes die Freiheit zu wählen, wie Seiten optimal gerendert werden, indem Funktionen auf der Grundlage des erkannten Geräts und der Benutzerinformationen im laufenden Betrieb entfernt oder hinzugefügt werden.
Die Vorteile lassen sich wie folgt zusammenfassen:
- Entwickler müssten die Website nicht von Grund auf neu erstellen, wie dies bei einer responsiven Website der Fall wäre. Die meisten Websites werden im Laufe der Zeit zu komplex, da eine Funktionalität über der anderen hinzugefügt wird und der ganze Aufwand nicht mehr funktioniert. Die Design- und Testphase ist besonders pingelig, da es schwierig ist, die Benutzererfahrung für jedes Gerät oder jeden Kontext anzupassen.
- Adaptive Websites sind schneller und manchmal benutzerfreundlicher. Der Grund ist einfach genug. Da die adaptive Bereitstellung funktioniert, indem nur die gerätespezifischen Assets übertragen werden, können Bilder und Multimedia-Inhalte im Handumdrehen für die Anzeigeauflösung und -größe optimiert werden.
Die serverseitige Anpassung bietet unterschiedliche Vorlagen für jedes Gerät und ermöglicht ein höheres Maß an Anpassung sowie ein schnelleres Laden von Webseiten. Darüber hinaus ist es mit verschiedenen serverseitigen Plugins kompatibel, die für gängige Content-Management-Systeme und E-Commerce-Systeme wie Magento verfügbar sind. Dieser Ansatz erfordert jedoch erhebliche Änderungen an den Back-End-Systemen, und wenn Sie ein begrenztes Budget haben, kann dies ein wenig schmerzhaft sein. Sie müssen mehrere Vorlagen verwalten, was sich in den Wartungskosten bemerkbar macht. Leistungsprobleme können auch auftreten, wenn Server stark ausgelastet sind.
Endeffekt
Inhaltsintensive Websites, bei denen es keinen großen Unterschied in der Benutzerabsicht zwischen Desktop- und mobilen Benutzern gibt, entscheiden sich im Allgemeinen für responsives Design. Wenn Sie jedoch eine Website entwerfen, bei der sich die Absicht des mobilen Benutzers erheblich von der Ihrer Desktop-Zielgruppe unterscheidet, ist adaptives Design die bessere Wahl. Das Beispiel sind E-Commerce-Websites.
Außerdem kann ein Webmaster, wenn er sich für ein adaptives Design entscheidet, das Benutzererlebnis weiter optimieren, indem er die zusätzlichen Funktionen nutzt, die diese Geräte bieten, z. B. den Standort. Genau aus diesem Grund verwenden 82 Prozent der Alexa-Top-100-Websites weltweit eine Art serverseitige Erkennung, um Inhalte bereitzustellen.
Für die meisten Organisationen funktioniert die Verwendung von responsivem Design in Verbindung mit adaptiver Bereitstellung gut. Der inhaltsreiche Teil der Website verwendet einen reaktionsschnellen Ansatz, der es den Lesern ermöglicht, den Inhalt auf zufriedenstellende Weise zu konsumieren, egal auf welchem Gerät sie sich befinden. Andererseits funktionieren Teile der Website mit hoher Absicht durch adaptive Bereitstellung gut. Der Schlüssel liegt darin, ein Gleichgewicht zwischen der Bedienung Ihrer Benutzer und dem Erreichen des Geschäftsziels zu finden.
Webdesign ist derzeit eine der heißesten Fähigkeiten auf dem Markt. Laut den Beschäftigungsdaten des Bureau of Labor Statistics liegen die Jobaussichten für Webentwickler bei 20 %, was überdurchschnittlich schnell ist. Der „Best Jobs 2014″-Bericht von USNews zählt Webdesign-Jobs zu den Top-3-Technologiekarrieren. Daher kann es für einen aufstrebenden Webdesigner sehr fruchtbar sein, die Nuancen des Designs wie die oben erläuterte zu kennen.