Responsives und anpassungsfähiges Webdesign sind beide Methoden zum Erstellen von mit mehreren Geräten kompatiblen Websites, die auf verschiedenen Bildschirmgrößen gut funktionieren. Obwohl responsives Webdesign von Google empfohlen wird und das populärere der beiden Ansätze ist, weisen beide Methoden für das Webdesign mit mehreren Geräten ihre Stärken und Schwächen auf.
Schauen wir uns die Unterschiede zwischen responsivem und adaptivem Webdesign an und konzentrieren uns dabei auf folgende Kernbereiche:
- Leichtigkeit der Entwicklung
- Die Kontrolle über das Design
- Breite der Geräte- / Bildschirmunterstützung
- Wie zukunftsfreundlich ist die Lösung
- Allgemeine Download-Geschwindigkeit und Website-Leistung
Einige Definitionen
Bevor wir in einen direkten Vergleich von responsivem und adaptivem Webdesign kommen, nehmen wir uns einen Moment Zeit, um eine Definition dieser beiden Ansätze auf hoher Ebene zu suchen.
Responsive Websites haben ein fließendes Layout, das sich unabhängig von der verwendeten Bildschirmgröße ändert und anpasst. Medienabfragen ermöglichen es reaktionsfähigen Websites sogar, "on the fly" zu wechseln, wenn die Größe des Browsers geändert wird.
Das adaptive Design verwendet feste Größen basierend auf vordefinierten Haltepunkten, um die am besten geeignete Layoutversion für die Bildschirmgröße bereitzustellen, die beim ersten Laden der Seite erkannt wird.
Wenden wir uns mit diesen umfassenden Definitionen unseren wichtigsten Schwerpunktbereichen zu.
Einfache Entwicklung
Der wichtigste Unterschied zwischen responsivem und adaptivem Webdesign liegt in der Art und Weise, wie diese Lösungen auf eine Website angewendet werden. Da das responsive Design ein völlig fließendes Layout erzeugt, eignet es sich am besten für Projekte, bei denen Sie die Site von Grund auf neu gestalten. Der Versuch, den Code einer vorhandenen Website nachzurüsten, um reaktionsschnell zu werden, ist oft eine zermürbende Angelegenheit, da Sie einfach nicht die Kontrolle haben, die Sie haben würden, wenn Sie diesen Code von Grund auf neu entwickeln und das responsive Design für die ersten Schritte von berücksichtigen dieser Prozess Dies bedeutet, dass Sie beim Nachrüsten einer Site darauf reagieren müssen, Kompromisse einzugehen, um innerhalb der vorhandenen Codebase zu bleiben.
Wenn Sie mit einer vorhandenen Website mit fester Breite arbeiten, bedeutet ein adaptiver Ansatz, dass Sie die Größe beibehalten können, für die die Site konzipiert wurde, und bei Bedarf zusätzliche adaptive Haltepunkte hinzufügen kann. In einigen Fällen, wenn das Budget eines Projekts gering ist und nur wenig Entwicklungsarbeit möglich ist, können Sie nur neue adaptive Haltepunkte für kleinere Bildschirm- / Mobile-Center-Größen hinzufügen. Dies bedeutet, dass größere Bildschirme dasselbe Layout verwenden können - vielleicht eine 960-Haltepunktversion, für die diese Website ursprünglich konzipiert wurde.
Der Vorteil eines adaptiven Ansatzes ist, dass Sie den Code einer vorhandenen Site besser nutzen können. Ein Nachteil ist jedoch, dass Sie für jeden Haltepunkt, den Sie unterstützen möchten, unterschiedliche Layoutvorlagen erstellen. Dies wirkt sich auf die Arbeitslast aus, die erforderlich ist, um diese Lösung langfristig zu entwickeln und zu warten.
Designsteuerung
Eine der Stärken von responsiven Websites besteht darin, dass sie aufgrund ihrer Fließfähigkeit alle Bildschirmgrößen anpassen und unterstützen können, im Gegensatz zu nur den voreingestellten Haltepunkten, die in einem adaptiven Ansatz festgelegt wurden. Die Realität ist jedoch, dass responsive Sites bei bestimmten Bildschirmgrößen (die normalerweise den auf dem Markt verfügbaren Geräten entsprechen) großartig aussehen können, das visuelle Design jedoch häufig zwischen diesen gängigen Auflösungen zerbricht.
Zum Beispiel kann eine Website großartig aussehen für das Breitbild-Layout von 1400 Pixeln, die mittlere Bildschirmgröße von 960 Pixeln und den kleinen Bildschirm mit 480 Pixeln, aber wie sieht es mit den Zwischenzuständen dieser Größen aus? Als Designer haben Sie wenig oder keine Kontrolle über diese Zwischengrößen, und das visuelle Erscheinungsbild der Seite bei diesen Größen ist oft nicht ideal.
Mit einer anpassungsfähigen Website haben Sie viel mehr Gestaltungskontrolle über die verschiedenen verwendeten Layouts, da sie festgelegte Größen haben, die auf Ihren festgelegten Haltepunkten basieren. Diese unbeholfenen Zwischenzustände sind kein Problem mehr, da Sie jeden Look (dh das Display jedes Haltepunkts), der den Besuchern zugestellt wird, sorgfältig entworfen haben.
So attraktiv dieses Level an Designkontrolle klingt, Sie müssen sich dessen bewusst sein, dass es einen Preis hat. Ja, Sie haben die vollständige Kontrolle über das Aussehen jedes Haltepunkts. Dies bedeutet jedoch, dass Sie die für das Design jedes dieser einzigartigen Layouts erforderliche Entwurfszeit aufwenden müssen. Je mehr Haltepunkte Sie für das Design auswählen, desto mehr Zeit benötigen Sie für diesen Prozess.
Breite Unterstützung
Sowohl das responsive als auch das anpassungsfähige Webdesign wird vor allem in modernen Browsern recht robust unterstützt.
Adaptive Websites erfordern entweder serverseitige Komponenten oder Javascript zur Erkennung der Bildschirmgröße. Wenn eine adaptive Site Javascript erfordert, bedeutet dies natürlich, dass ein Browser dies aktivieren muss, damit diese Site korrekt funktioniert. Dies ist möglicherweise kein großes Problem für Sie, da die meisten Benutzer Javascript in ihren Browsern haben, aber wenn eine Website von irgendetwas abhängig ist, sollte dies beachtet werden.
Responsive Websites und die dazugehörigen Medienanfragen funktionieren in allen modernen Browsern gut. Die einzigen Probleme, die Sie haben, betreffen die ältesten Versionen von Internet Explorer, da die Versionen 8 und darunter keine Medienabfragen unterstützen. Um dies zu umgehen, wird häufig ein Javascript-Polyfill verwendet, was bedeutet, dass auch hier eine Abhängigkeit von Javascript besteht, zumindest für diese veralteten Versionen von IE.Auch dies ist möglicherweise kein Problem für Sie, insbesondere wenn Ihre Site-Analyse zeigt, dass Sie nicht viele Besucher mit älteren Browserversionen erhalten.
Zukünftige Freundlichkeit
Die fließende Natur von responsiven Websites verschafft ihnen einen Vorteil gegenüber adaptiven Websites, wenn es um die Zukunftsfreundlichkeit geht. Dies ist darauf zurückzuführen, dass diese reagierenden Sites nicht nur für einen zuvor festgelegten Satz von Haltepunkten geeignet sind. Sie passen sich an alle Bildschirme , einschließlich derer, die heute nicht wirklich auf dem Markt sind. Dies bedeutet, dass responsive Sites nicht "fixiert" werden müssen, wenn eine neue Bildschirmauflösung plötzlich populär wird.
Wenn man sich die unglaubliche Vielfalt der Gerätelandschaft ansieht (Stand August 2015 gab es über 24.000 verschiedene Android-Geräte auf dem Markt), ist es für die Zukunftsfreundlichkeit von entscheidender Bedeutung, eine Website zu haben, die diese breite Palette von Bildschirmen optimal unterstützt. Dies ist darauf zurückzuführen, dass die Landschaft in der Zukunft wahrscheinlich nicht weniger vielfältig wird, was bedeutet, dass das Entwerfen für bestimmte Bildschirme oder Größen unmöglich wird, wenn wir diese Realität nicht bereits erreicht haben.
Wenn auf der anderen Seite dieses Vergleichsszenarios eine Website adaptiv ist und keine neuen Auflösungen berücksichtigt werden, die auf dem Markt wichtig werden könnten, müssen Sie diesen Haltepunkt möglicherweise zu den von Ihnen erstellten Sites hinzufügen. Dies erhöht die Entwurfs- und Entwicklungszeit für Projekte und bedeutet, dass diese anpassungsfähigen Standorte ständig überwacht werden müssen, um sicherzustellen, dass keine neuen Haltepunkte auf dem Markt eingeführt wurden, die dem Standort hinzugefügt werden müssen. Angesichts der Gerätevielfalt ist es eine ständige Herausforderung, ständig nach neuen Größen zu suchen und sie mit neuen Haltepunkten unterzubringen. Dies wirkt sich auf die Arbeit aus, die zur Unterstützung eines Standorts erforderlich ist, und auf die Kosten dieser Wartung das Unternehmen oder die Organisation, für die der Standort bestimmt ist.
Performance
Responsive Webdesign wurde lange Zeit (in unfairer Weise in vielen Fällen) vorgeworfen, aus Sicht der Downloadgeschwindigkeit / Leistung eine schlechte Lösung zu sein. Dies ist zum großen Teil darauf zurückzuführen, dass viele Webdesigner in der Anfangszeit dieses Ansatzes einfach nur kleine Bildschirm-Medienanfragen in das vorhandene CSS einer Site aufgenommen haben. Dies zwang die Bilder und Ressourcen, die für größere Bildschirme vorgesehen waren, an alle Geräte zu liefern, selbst wenn diese kleineren Bildschirme sie in ihren endgültigen Layouts nicht verwendeten. Responsive Design ist seitdem weit fortgeschritten und die Realität ist, dass Websites mit Qualitätsansprüchen heutzutage nicht unter Leistungsproblemen leiden.
Langsame Download-Geschwindigkeiten und aufgeblähte Websites stellen kein responsives Website-Problem dar. Es ist ein Problem, das auf allen Websites zu finden ist. Zu schwere Bilder, Feeds aus sozialen Medien, übermäßige Skripte und vieles mehr und belasten eine Website, aber sowohl responsive als auch anpassungsfähige Websites können so aufgebaut sein, dass sie schnell geladen werden. Na sicher , Sie können auch so erstellt werden, dass Leistung nicht Priorität hat. Dies ist jedoch kein Merkmal der Lösung selbst, sondern ein Spiegelbild des Teams, das an der Entwicklung des Standorts selbst beteiligt war.
Jenseits des Layouts
Einer der überzeugendsten Aspekte des adaptiven Webdesigns ist, dass Sie nicht nur das Design der Site für gesetzte Haltepunkte steuern können, sondern auch die Ressourcen, die für diese Site-Versionen bereitgestellt werden. Dies bedeutet beispielsweise, dass Retina-Bilder nur an Retina-Geräte gesendet werden können, während Bildschirme ohne Retina geeignetere Bilder mit geringerer Dateigröße erhalten. Andere Website-Ressourcen (Javascript-Dateien, CSS-Stile usw.) können nur dann intelligent bereitgestellt werden, wenn sie benötigt werden und verwendet werden.
Diese Verwendung von adaptivem Webdesign geht weit über die einfache Gleichung von „Wenn Sie eine Website nachrüsten, kann adaptiv eine einfachere Methode sein.“ Alle Websites, einschließlich vollständiger Neugestaltungen, können von einer intelligenteren Herangehensweise an ein maßgeschneidertes Erlebnis profitieren.
Dieses Szenario zeigt den differenzierten Charakter dieser Debatte "responsive vs. adaptive". Es ist zwar richtig, dass ein adaptiver Ansatz möglicherweise besser geeignet ist als eine reaktive Umrüstung von Standorten, er kann jedoch auch eine gute Lösung für vollständige Neugestaltungen sein. Ebenso kann in einigen Fällen ein responsiver Ansatz zur Code-Basis einer vorhandenen Site hinzugefügt werden, wodurch dieser Site alle Vorteile eines vollständig responsiven Ansatzes zur Verfügung stehen.
Welcher Ansatz ist besser?
Wenn es um responsives oder adaptives Webdesign geht, gibt es keinen eindeutigen "Gewinner", obwohl responsive sicherlich der populärere Ansatz ist. In Wahrheit hängt der "bessere" Ansatz von den Bedürfnissen eines bestimmten Projekts ab. Darüber hinaus muss dies keine "entweder / oder" Situation sein. Es gibt viele Web-Profis, die Websites erstellen, die das Beste an reaktionsfähigem Webdesign (Fluidbreiten, zukünftige Unterstützung) mit den Stärken des adaptiven Designs kombinieren (bessere Entwurfskontrolle, intelligentes Laden von Website-Ressourcen).
Diese Methode, die allgemein als RESS (Responsive Webdesign mit serverseitigen Komponenten) bezeichnet wird, zeigt, dass es wirklich keine einheitliche Lösung gibt. Sowohl das responsive Webdesign als auch das adaptive Webdesign haben ihre Stärken und ihre Herausforderungen funktioniert am besten für Ihr spezifisches Projekt oder ob eine Hybridlösung tatsächlich am besten zu Ihnen passt.
