Dies ist eine Frage, die häufiger auftaucht, als Sie vielleicht erwarten würden. Wir sehen sie von Zeit zu Zeit in den CSS-Tricks-Foren. Es ist auch eine häufige Frage, die mir bei der Einführung in das Webdesign gestellt wird.
Und das ist eine gute Frage!
Responsive Webdesign ist seit seiner Prägung durch Ethan Marcotte auf A List Apart im Jahr 2010 ein Begriff, der allgemein bekannt ist; so sehr, dass wir unser Verständnis davon vielleicht für selbstverständlich halten. Das Konzept einer responsiven Website ist einer der größten CSS-"Tricks" überhaupt und wichtig genug, um einen Schritt zurückzutreten, um uns sowohl daran zu erinnern, was eine "responsive" Website ausmacht, als auch, wie sie sich von einer "adaptiven" unterscheidet.
Betrachten wir also den Unterschied.
Die kurze Erklärung
Responsive und adaptive Websites sind insofern gleich, als dass beide ihr Aussehen basierend auf der Browserumgebung ändern, in der sie betrachtet werden (am häufigsten: die Breite des Browsers).
Responsive Websites reagieren auf die Größe des Browsers an jedem gegebenen Punkt. Unabhängig davon, wie breit der Browser ist, passt sich die Website ihrem Layout (und möglicherweise der Funktionalität) an eine optimierte Ansicht an. Ist der Browser 300px breit oder 30000px breit? Das spielt keine Rolle, da das Layout entsprechend reagiert. Naja, zumindest wenn es richtig gemacht ist!
Siehe den Pen Responsive Example von CSS-Tricks (@css-tricks) auf CodePen.
Adaptive Websites passen sich an die Breite des Browsers an spezifischen Punkten an. Mit anderen Worten, die Website ist nur an einer bestimmten Browserbreite interessiert, an der sie das Layout anpasst.
Siehe den Pen Adaptive Example von CSS-Tricks (@css-tricks) auf CodePen.
Man kann es auch als Unterschied zwischen fließendem und schnappendem Design betrachten. Responsives Design ist fließend, da sich das Layout unabhängig vom Anzeigegerät flüssig anpasst. Adaptives Design hingegen "schnappt" an seinen Platz, da die Seite etwas anderes liefert, basierend auf dem Browser oder Gerät, auf dem sie betrachtet wird. Diese Animation veranschaulicht den Verhaltensunterschied.
Beachten Sie, wie das responsive Beispiel mit der Umgebung fließt, während das adaptive an einer definierten Umgebung an Ort und Stelle "schnappt".
Die längere Erklärung
Der Unterschied zwischen responsiven und adaptiven Websites geht etwas tiefer als die einfachen Beispiele oben. Man könnte es sogar als einen Unterschied in der Philosophie betrachten.
Betrachten wir den Kern von Ethans ursprünglicher Definition von Responsive Web Design
Fluid grids, flexible Bilder und Media Queries sind die drei technischen Zutaten für Responsive Webdesign, aber es erfordert auch eine andere Denkweise. Anstatt unsere Inhalte in getrennte, gerätespezifische Erfahrungen zu isolieren, können wir Media Queries verwenden, um unsere Arbeit in verschiedenen Betrachtungskontexten fortschrittlich zu verbessern.
Beachten Sie die Schlüsselwörter fluid (fließend) und flexible (flexibel). Responsive Design ist ein Mittel, um geräteunabhängig zu werden, in dem Sinne, dass es versucht, eine optimierte Erfahrung für jeden Bildschirm zu schaffen. Dieses Denken fordert uns heraus, Websites zu erstellen, die ihren Kontext entsprechend der Art und Weise ändern, wie eine Website bei jeder Gelegenheit genutzt wird. Das bedeutet, unsere Container sollten fließend sein (d. h. Prozente als Maßeinheiten verwenden), die von uns gelieferten Assets sollten flexibel sein (d. h. die richtigen Assets zur richtigen Zeit an die richtigen Geräte liefern) und unsere Media Queries sollten dort definiert werden, wo der Inhalt bricht (im Gegensatz zur Breite einer bestimmten Bildschirmgröße, z. B. iPhone).
Vergleichen Sie das mit einer adaptiven Denkweise, die weder fließend noch flexibel ist, sondern nach spezifischen Punkten sucht, an denen sie sich anpassen kann. Obwohl es schwierig sein mag, eine Website für alle verschiedenen Geräte anzupassen, gibt es eine Sammlung von gerätespezifischen Media Queries, auf die Sie verweisen können.
Update: Es gab eine Menge großartiger Diskussionen in den Kommentaren über den Unterschied zwischen responsivem und adaptivem Design. Die wichtigste Erkenntnis ist, dass der Unterschied über Media Queries und Pixelmaßeinheiten hinausgeht. Das animierte GIF-Beispiel früher im Beitrag ist eine Möglichkeit, den Unterschied zu veranschaulichen, wie diese Begriffe hier verstanden werden, aber dieser Beitrag bietet auch eine schöne Reihe von Illustrationen, um den Punkt zu verdeutlichen.
Ist Responsive besser als Adaptive?
Ich werde mich darauf gar nicht erst einlassen. Ich glaube, es ist ein Unterschied in der Philosophie, genau wie Responsive Webdesign von Mobile-First Responsive Webdesign ist. Man wählt das beste Werkzeug für die jeweilige Aufgabe.
Ist man gezwungen, eines dem anderen vorzuziehen? Die Wahl mag einfacher sein, wenn man weiß, dass man spezifische Geräte hat, die die Website unterstützen muss. Man könnte entscheiden, dass nur das iPhone 6 wichtig ist und die Anpassung daran einfacher und effizienter wäre, als andere Geräte zu berücksichtigen. Auf der anderen Seite ist ein responsives Design eine gute Strategie, um eine Website für die Möglichkeit jedes (vielleicht sogar noch nicht veröffentlichten) Geräts auf dem Markt zukunftssicher zu machen.
Fazit
Sowohl responsive als auch adaptive Designs sind insofern gleich, als dass sie Methoden sind, um mit der Realität umzugehen, dass Websites oft auf verschiedenen Geräten in unterschiedlichen Kontexten betrachtet werden. Sie gehen nur auf ihre eigene Weise damit um.
Denken Sie daran: Das Web ist von Natur aus responsiv. Es muss nicht auf Geräte reagieren oder sich an sie anpassen, bis wir anfangen, es zu gestalten.
Wenn Sie sich mit responsivem Design beschäftigen möchten, ist Üben das Beste. Es gibt unzählige Ressourcen, die Ihnen den Einstieg erleichtern, also legen Sie los! Hier sind ein paar, die Ihnen den Einstieg erleichtern
- This is Responsive: Eine Sammlung von Beispielen, Mustern und Ressourcen, kuratiert von Brad Frost.
- ResponsiveDesign.is: Eine weitere Fundgrube an Ressourcen, zusätzlich zu Artikeln und einem Podcast!
- Responsive Web Design Podcast: Apropos Podcasts, hier ist einer, der gemeinsam von Ethan Marcotte und Karen McGrane moderiert wird.
- Responsive Web Design, von Ethan Marcotte: Ethan hat buchstäblich das Buch dazu geschrieben und das mit größter Klarheit.
Oh je... dieser Beitrag liegt ziemlich daneben.
Responsives Design kann fließend oder fest sein, adaptiv ebenfalls. Der Unterschied ist, dass Responsive Design sich nicht darum kümmert, welcher Browser verwendet wird, es reagiert auf die Browsergröße und ordnet das Layout entsprechend neu an.
Adaptive Design hingegen passt sich gezielt an die Browserumgebung an und berücksichtigt möglicherweise die aktuelle Größe des Browsers oder auch nicht.
Es ist im Wesentlichen der Unterschied zwischen Media Queries (responsiv) und Device Detection (adaptiv), obwohl es im rein CSS-Bereich eher so ist, dass man
@media (min-width: X)(responsiv) anstelle von@media (min-device-width: X)verwendet.https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design beschreibt es noch besser als ich.
Froh, dass ich nicht der Einzige bin, dem dieser Artikel seltsam/falsch vorkam.
Ja, Sie haben Recht.
Ja zzzzBov, Sie haben Recht, ich habe den Artikel gelesen und dachte, ich wäre verloren.
Responsiveness kann fest oder fließend sein, wie Sie richtig bemerkt haben, der Artikel ist nicht wirklich klar.
Das ist interessantes Feedback!
Obwohl ich zustimme, dass es einen Unterschied in der Art und Weise gibt, wie Sie den Unterschied zwischen beiden Methoden beschreiben, klingt es eher so, als ob das, was Sie als adaptives Design beschreiben, näher an der Definition von Responsive Server Side (RESS) liegt.
Ich widerspreche diesem Punkt und zitiere noch einmal Ethans Definition von responsivem Design
Es gibt nichts "Festes" am responsiven Design. Es sollte unter allen Bedingungen fließend sein. Ja, sowohl responsive als auch adaptive Designs können (und tun oft) Media Queries verwenden. Es ist der Mangel an relativen Maßeinheiten im adaptiven Design, der den Unterschied ausmacht und zu dem festen, "schnappenden" adaptiven Verhalten führt.
Das sind zumindest meine zwei Cents. Die Punkte hier sind berechtigt, aber ich denke, es gibt ein Missverständnis (oder vielleicht einen Unterschied im Verständnis) der Grunddefinition eines responsiven Designs.
Das war auch immer mein Verständnis zwischen den beiden. Responsiv ist apathisch gegenüber der Umgebung, während adaptiv sich aufgrund dieser ändert.
Geoff, ich glaube, Sie haben das, was zzzzBov gesagt hat, vielleicht zu wörtlich genommen.
Was ist, wenn ein Layout eine feste Breite hat, bis zu einem bestimmten Punkt, und dann fließend wird, bricht das die Regeln?
Nach dem, was ich gelesen habe, ist das Einzige, was Sie sehen, das Ihre sogenannten adaptiven und RWD trennt, das Fehlen von fließenden Grids.
Ich habe das immer wieder gesehen, offensichtlich hat Ethan den Begriff "Responsive Web Design" offiziell geprägt, Luke Wroblewski den Begriff "RESS", aber hat nicht jemand tatsächlich Adaptive Web Design geprägt und es bereits reserviert?
Ich bin verwirrt. Die Beispiele, die Sie gezeigt haben, scheinen für mich verschiedene Formen des responsiven Designs zu sein.
Warum ist die Unterscheidung wichtig? Welche Entscheidungen sollte ich aufgrund dieses Unterschieds treffen? Wann sollte ich das eine dem anderen vorziehen?
Dieser Artikel scheint lediglich einen neuen Begriff einzuführen und zu sagen: "Verwechseln Sie es nicht!", aber er erklärt nicht, warum es wichtig ist.
Hey, danke für Ihre Teilnahme!
Gute Frage. Der Unterschied besteht darin, dass eine Version (responsiv) relative Einheiten (z. B. Prozente) verwendet, um ihr Layout fließend an alle Browser-/Gerätebedingungen anzupassen. Die andere Version (adaptiv) verwendet feste Einheiten (z. B. Pixel), um sich an eine spezifische Bedingung anzupassen.
Ich bin mir nicht sicher, ob der Artikel versucht zu sagen "Verwechseln Sie es nicht!", sondern räumt ein, dass der Unterschied leicht und oft missverstanden wird und versucht (vielleicht nicht effektiv in diesem Fall), die Unterscheidung zu treffen.
So würde ich "adaptives" Design überhaupt nicht beschreiben. Ich weiß nicht, woher das kommt, aber ich dachte, adaptiv beschreibt die Anpassung an den Kontext des Geräts, auf dem die Seite gerendert wird. Also größere Buttons für Tablet-Geräte. Ein Tablet mag die gleiche Bildschirmauflösung wie ein Desktop haben, aber ein Desktop braucht keine großen, berührbaren Buttons, während das Tablet sie braucht.
Ich dachte, das bedeutet "anpassen".
Das ist definitiv Teil der Gleichung und ich glaube, wir sagen im Wesentlichen dasselbe: Adaptives Design "schnappt" sein Design an einen bestimmten Browser oder Gerätebedingungen, auf denen es bereitgestellt wird, während ein responsives Design unabhängig von den Bedingungen eine optimierte Erfahrung bietet.
Also ja, sowohl responsive als auch adaptive Designs können größere Buttons für größere Bildschirme haben. Adaptives Design bestimmt jedoch die Größe dieser Buttons gemäß einer spezifischen Browser- oder Gerätebedingung, um sich entsprechend anzupassen.
Ich dachte das Gleiche und bin auch verwirrt von diesem Beitrag.
Meiner Meinung nach
Responsiv ist dasselbe Layout auf fließende oder "schnappende" Weise, das auf die Browsergröße reagiert.
Adaptiv ist dasselbe, aber es passt sich auch an die Art und Weise an, wie der Benutzer mit der Website interagiert. Wie Sie sagen: "größere Buttons auf Touch-Geräten". Aber diese Art von adaptiv kann auch fließend oder "schnappend" sein.
Allerdings gefällt mir die Art und Weise, wie wir "adaptiv" nennen. Buttongrößen für Touch-Geräte ändern usw. ;) Welchen Namen Sie auch immer geben wollen :)
Als ich versuchte, das 2011 selbst herauszufinden, stieß ich auf eine Reihe von Artikeln, die im Wesentlichen mit den in diesem Beitrag beschriebenen Definitionen übereinstimmten.
Vergessen Sie Responsive Web Design
Responsive und Adaptive Web Design: Definiert
Responsive Design. Ich glaube nicht, dass dieses Wort das bedeutet, was Sie denken.
Responsive Web Design entmystifiziert
Und dann kam Brad Frost mit einem Artikel im Jahr 2013, der die Definitionen komplett vertauschte: "Adaptives Design" als den breiten Oberbegriff für die Erstellung von Schnittstellen, die sich an die Bedürfnisse und Fähigkeiten des Benutzers anpassen, mit "Responsive Design" als einer spezifischen Technik darunter.
Zu diesem Zeitpunkt würde ich Rob Lang zustimmen, dass es nicht mehr sehr nützlich ist, diese Unterscheidung zu debattieren.
Wenn wir die Definition von "adaptivem Design" in diesem Beitrag nehmen, dann ist adaptives Design keine praktikable Methode für modernes Webdesign mehr. Es gibt einfach zu viele Viewport-Größen, um sie auszuwählen und anzusteuern.
Wenn wir stattdessen Brad Frosts Definition oder eine der alternativen Definitionen in diesem Beitrag nehmen, wird es nur ein subtiler, endloser Kampf um Semantik.
Am Ende des Tages haben wir jedoch alle eine ziemlich gute Vorstellung davon, was responsives Design ist. Ich sage, lassen wir adaptives Design als Begriff verschwinden.
Sehr coole Gedanken und Links! Was mir an der Diskussion über Responsive Web Design insgesamt gefällt, ist, dass sie sich weiterentwickelt, besonders da sich unsere Werkzeuge verbessern und sich Geräte verändern.
https://developer.mozilla.org/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design beschreibt es als
Was meiner Vorstellung von adaptivem Design viel näher kommt.
Ich denke, der Unterschied zwischen adaptiv und responsiv wird am besten durch liquidapsive.com demonstriert ... im Wesentlichen: Responsiv = Fluid + Adaptiv (oder vielleicht Responsiv = Fluid x Adaptiv!)
Ja, ich stimme Andrew zu: http://www.liquidapsive.com/
@zzzzBov, Sie denken an RESS (Responsive Server-Side), aber ich habe den Begriff "Adaptiv" auch in diesem Zusammenhang gehört.
Meine Philosophie ist es, fließende Breakpoints bei kleineren Größen zu verwenden, die dann bei größeren Bildschirmgrößen zu adaptiven festen Größen werden. Spart eine Menge Tests und die Designs sehen viel besser aus.
Das ist eine gute Philosophie! Es stimmt, dass der Markt für größere Bildschirme ab einem bestimmten Punkt schrumpft, während die Anzahl der Geräte und Funktionen bei kleinen Bildschirmgrößen enorm ist.
Begriffe und Fachjargon in dieser Branche ändern oft ihre Bedeutung oder entwickeln sich zu etwas fast völlig anderem, z. B. die sich ständig ändernde Definition eines Frontend-Entwicklers.
Ich denke, Brad Frosts Artikel The Many Faces of Adaptive Design erklärt sowohl adaptives als auch responsives Design gut und beschreibt den Begriff "adaptive layouts" als die Methode des "Snappings" auf feste Breiten.
Wir müssen nur alle Namen und Terminologien verwerfen und ein Community-Wiki erstellen, das jeden einzelnen definiert.
Es scheint, als gäbe es hier eine Gelegenheit, diese Begriffe neu zu definieren, um sie klarer zu machen. Warum nicht Fluid oder Full Responsive und Stepped Responsive für die Beispiele in diesem Artikel.
Beide Beispiele reagieren auf Änderungen der Medienbreite und sind somit "responsiv". Eines ist eine kontinuierliche Reaktion, was es "fluid" oder "vollständig" responsiv macht, und das andere reagiert in "Schritten" oder "Tiers".
Ein grundlegendes Beispiel für den Unterschied wäre Bootstraps
.containerund.container-fluidWas adaptiv betrifft, würde ich es als eine "einmalige" Art von responsiv beschreiben. Da beim Laden einer Website sofort festgelegt wird, welches Layout verwendet werden soll, indem der Server oder die Client-Seite die anfängliche Browserbreite oder den Gerätetyp ermittelt und auswählt, welche Version der Website angezeigt werden soll.
Ich stimme den meisten Kommentatoren hier zu, die der Meinung sind, dass dieser Artikel ein wenig daneben liegt. Brad Frosts Artikel ist meiner Meinung nach viel besser.
http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/
Offensichtlich gibt es Verwirrung.
Responsiv = Websites reagieren auf Browser-Resizing, Punkt. Woher kommt der Teil "an jedem gegebenen Punkt"? Ich habe das Gefühl, dieser Teil wurde absichtlich hinzugefügt, nur um einen Punkt zu haben, um responsiv von adaptiv zu unterscheiden ("adaptiv passt sich an spezifischen Punkten an", was zum Teufel?)
Die Konzepte werden von Mozilla korrekt erklärt, wie oben verlinkt, meiner Meinung nach.
Außerdem weiß man, dass die Unterscheidung fehlerhaft ist, wenn die Objekte vertauscht werden können und es immer noch perfekt richtig klingt.
Responsive Websites passen sich an die Größe des Browsers an jedem gegebenen Punkt an.
Adaptive Websites reagieren auf die Breite des Browsers an spezifischen Punkten.
Verstehen Sie, was ich meine?
Nehmen Sie das Zitat von dem Typen, der das Buch über Adaptive Design geschrieben hat
"Zur Klarstellung, ich halte es für wichtig, zwischen "adaptivem Webdesign" und "adaptiven Layouts" zu unterscheiden, da "adaptive Layouts" nur die Verwendung von Media Queries impliziert, was möglicherweise nicht auf progressiv erweiterte Weise geschieht."
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
Ich denke, ein genauerer Titel für Ihren Blogbeitrag wäre "Der Unterschied zwischen responsiven und adaptiven Layouts".
Gibt es einen Unterschied zwischen responsivem und adaptivem Design aus der Sicht eines Endbenutzers? Die meisten Benutzer bemerken nicht, ob ein Design bei verschiedenen Browserbreiten "schnappt" oder "fließt", da die Mehrheit der Benutzer die Breite ihres Browsers nicht ändert, es sei denn, sie sind in der Webbranche tätig.
Zum Beispiel wird ein Benutzer, der eine Website auf seinem Handy sieht und dann seine Reise auf dem Desktop fortsetzt, niemals diese "Fluss"- oder "Schnapp"-Änderung sehen. Er wird eine Website sehen, die auf beiden Geräten gut funktioniert, die sich an sein anderes Gerät angepasst und reagiert hat, und dann wird er sie vergessen, wenn er zur nächsten Website geht, auf der er etwas tun muss.
Ja! Ich hatte denselben Gedanken. Ich stimme vollkommen zu.
Ich stimme vollkommen zu. Wen kümmert es, ob es "schnappt"? Wichtig ist, dass die Seiten auf jeder Bildschirmgröße und jedem Gerät gut aussehen und nutzbar sind.
Es mag möglich sein, Media Queries für perfekte Fluidität auf einer kleinen Website oder einer Website mit nur wenigen möglichen Seitenlayouts handzuzubringen. Aber für die meisten Websites ist das nicht der Fall – und eigentlich nicht zukunftssicher.
So wie wir nicht wissen, wie das nächste Gerät sein wird, wissen wir noch weniger über die Bedürfnisse von Inhalten in einem Jahr.
Ich glaube, es gibt einen Unterschied zwischen responsiven und adaptiven Designs. Dieser Unterschied sollte für den Endbenutzer offensichtlich sein. Meiner Meinung nach passt sich "responsiv" gut an (auch wenn Sie die Größe ändern/drehen), während "adaptiv" verschiedene Funktionen und Verhaltensweisen anbietet, die vom Gerät abhängen. Adaptiv ist Geräte- und Funktionserkennung. Responsiv ist Viewport-Erkennung.
*Außer mit "Erkennung" meinte ich "abhängig" :)
Nun, vielleicht denken die meisten Benutzer nicht: "Moment, das sollte responsiv und nicht adaptiv sein!", aber sie könnten sehr wohl von Inhalten betroffen sein, die den Platz, der in den (manchmal breiten) Rändern um die Container im adaptiven Webdesign verborgen ist, nicht voll ausnutzen können. Außerdem könnten sie ihre Handgeräte drehen – eine Größenänderung passiert direkt dort.
Eine unglückliche Verwendung allgemeiner Begriffe zur Definition spezifischer technischer Merkmale innerhalb einer vielfältigen und sich entwickelnden Design-Community. Jedenfalls meine Interpretation, mit einiger Hilfe von Wörterbuchdefinitionen
Fließend – "bezieht sich auf eine Substanz, die ihre Form leicht verändert; kann fließen." – d. h. Verwendung von relativen statt festen Größen. Könnte für eine Browsererfahrung mit fester Größe gelten, bei der die Erweiterung einiger Inhalte dazu führt, dass vorhandene Inhalte darum fließen.
Adaptiv – "gekennzeichnet durch oder anfällig für Anpassung: 'Mutation ist letztendlich für die adaptive Evolution in allen Populationen unerlässlich.'" – d. h. hat spezifische Änderungen, die die Form einschließen können, aber auch Inhalte für die Art des Geräts "mutiert".
Responsiv – "schnell und positiv reagieren" – d. h. "fließend" oder "adaptiv" auf Umweltveränderungen reagieren, wie z. B. eine Größenänderung des Browsers. Ich widerspreche dem Punkt, den Karl Brown gemacht hat, weil Benutzer ihre Browsergröße ändern. Benutzer kleiner Geräte ändern die Ausrichtung, und Desktop-Benutzer arbeiten manchmal nicht im Vollbildmodus (erinnern Sie mich an den Begriff dafür) und ändern die Größe von Fenstern, wenn sie ein paar Apps geöffnet haben. Persönliche Anekdote: Wenn ich einen langen Leitartikel lese, verkleinere ich oft die Browserbreite, um das Lesen zu erleichtern.
Ich glaube, der Autor liegt falsch mit den Konzepten und macht die Dinge ziemlich kompliziert.
Erstens muss responsiv nicht fließend sein. Responsiv ist die Funktion, die die Stile einer Seite ändert, indem sie sich auf die CSS-Media-Queries verlässt (manche machen das auch mit JS). Man kann seine Website fließend machen oder nicht, da alles, was nötig ist, ist, Längen als Prozente oder Pixel zu definieren.
Adaptiv ändert das eigentliche HTML (und infolgedessen auch das geladene CSS, JS und andere Assets), indem es das Gerät serverseitig erkennt. Grundsätzlich liefert man unterschiedliche optimierte Seiten basierend auf dem Gerätetyp.
Daher können responsiv, adaptiv und fluid gleichzeitig auf Ihrer Website funktionieren.
Responsiv ist beliebter, weil es einfacher ist. Die beliebten CMS wie WordPress oder Joomla machen es nicht einfach, adaptive Websites zu erstellen. Und in den meisten Fällen ist es wirklich nicht notwendig. Wenn Ihre Website oder Anwendung komplex genug ist, um adaptiv zu sein, haben Sie wahrscheinlich das Entwicklungsniveau, um es herauszufinden.
Spielt das wirklich eine Rolle?
Der Endbenutzer der Website ist wichtig, und solange das Design und die Funktionalität auf allen Geräten funktionieren und UX und Download-Geschwindigkeiten gut sind, wird der Endbenutzer weder das eine noch das andere davon interessieren, ob es responsiv oder adaptiv ist. Er hat wahrscheinlich keine Ahnung, was das überhaupt bedeuten würde.
Die meisten Websites, die ich erstellt habe, und die meisten Websites, die ich besuche, scheinen tatsächlich Elemente beider, responsiver und adaptiver, zu einer allgemeinen hybriden Form des Designs zu kombinieren.
Nachdem ich einige Kommentare hier gelesen habe, denke ich, dass in diesem Artikel/Thema viel falsch verstanden wird.
Viele Kommentatoren weisen auf adaptives Design als Möglichkeit für das Design hin, sich an seinen Kontext anzupassen. Das bedeutet, dass Buttons auf einer Desktop-Website kleiner sein könnten mit weniger Padding als die auf der mobilen Version. Der Kontext, in dem die Website betrachtet wird, muss sich an den Benutzer und die Art und Weise, wie er die Website nutzt, anpassen. Diesem Argument stimme ich auch zu.
Aber anscheinend wird in diesem Artikel der Punkt herausgegriffen, der den Unterschied zwischen adaptiv und responsiv im Kontext des physischen Aufbaus von Websites darstellt. Schnappen sie an eine bestimmte Bildschirmgröße (adaptiv) oder brechen sie zusammen, wenn das Design auseinanderfällt (responsiv).
Alles in allem denke ich, dass die Punkte des „Adaptiven“ in Bezug auf die Funktionalität der Website unabhängig davon berücksichtigt werden sollten, wie Sie Medienabfragen einführen.
Genau. Danke, dass Sie den Beitrag gelesen und den Unterschied zwischen dem, was geschrieben steht, und dem, was in den Kommentaren diskutiert wird, bemerkt haben.
Und doch, wenn man es so betrachtet, wie Aaron Gustafson (Autor von Adaptive Web Design) es tut, ist Responsive Web Design eine Untermenge von Adaptive Web Design.
AWD ist lediglich ein anderes Wort für progressive enhancement, in dem RWD normalerweise ein integraler Bestandteil ist.
So verwende ich den Begriff Adaptive Web Design am liebsten, aber die meisten Artikel zu diesem Thema diskutieren RWD vs. AWD, als ob es sich um verschiedene Dinge handeln würde. So wie dieser Artikel.
Ich kannte Adaptive Webdesign als die hier beschriebene Technik. Ich verstehe auch, dass Goldilocks dasselbe ist: http://goldilocksapproach.com/
Wie auch immer der Name ist, es kann eine gute Wahl für die Handhabung von festen Komponenten in einer Zeile sein – z.B. eine Bildergalerie, wenn Sie möchten (aus welchen Gründen auch immer), dass Ihre Bilder immer eine Breite von genau Xpx mit Ypx Abstand haben: Sobald Sie genügend Platz haben, um ein oder zwei weitere Elemente hinzuzufügen, passen Sie die Breite des Containers an, um diese Elemente in die Zeile aufzunehmen.
Es scheint wie Analog/Digital. Sich aufgrund eines Schwellenwerts ändern oder sich ständig ändern.
Das ist die Definition, die ich hier öfter als nicht für responsive und adaptive gefunden habe. Die responsive Definition ist meiner Meinung nach meist sehr klar, da es ein bestimmtes Buch von Ethan Marcotte zu diesem Thema gab. Die Verwirrung besteht immer bei der Definition des Wortes „adaptiv“. Es gibt ein paar Bedeutungen, die ich gehört habe
1- separate mobile Website mit Geräteerkennung
2-responsive Webdesign ohne das fließende Raster und flexible Bilder (also nur Medienabfragen)
3-die RESS-Definition
Wenn ich mit Leuten bei der Arbeit oder auf einem Treffen spreche und sie „adaptiv“ sagen, frage ich immer, was sie mit adaptiv meinen, weil wir alle unterschiedliche Definitionen haben. Und ich versuche, dieses Wort in meinem eigenen Wortschatz zu vermeiden. Toller Artikel, danke für die Klärung.
Beliebte Beispiele können sein – https://m.facebook.com (adaptiv) und https://facebook.com (responsiv).
Aber der Screenshot (Oben responsiv, unten adaptiv) ist etwas verwirrend. Natürlich kann man
@mediamitPXverwenden, aber%ist in RWD besser.Nach meinem Verständnis hat der Autor dieses Artikels das falsch verstanden. Der Kernunterschied zwischen responsivem Design und adaptivem Design besteht darin, dass adaptives Design nur die von einem bestimmten Gerät benötigten Elemente und Inhalte an das Gerät sendet. Beim responsiven Design wird alles (für alle Geräte) gesendet (vom Server zum Client). Es ist so, als ob beim Pizzabestellen die ganze Pizzeria vor meiner Haustür steht, anstatt dass nur meine bestellte Pizza geliefert wird. Adaptives Design überwindet diesen Geburtsfehler oder das responsive Design, das für den Code-Bloat verantwortlich ist, den wir in den letzten Jahren gesehen haben. Intelligente adaptive Designs nutzen responsive Design-Technologien für front-end verarbeitete Anpassungen, befreien aber das Gerät davon, sich durch einen riesigen Sumpf von Dingen zu wühlen, die vom anfordernden Gerät (Client) nicht benötigt werden.
@Harald Ich denke, Sie haben es falsch verstanden: Nicht, dass Sie Adaptive Design nicht definieren können, wie Sie wollen, aber anscheinend hatte der Autor eine andere Definition im Sinn – es gibt keine eindeutige Definition davon.
Aber noch wichtiger ist, dass RWD kaum für Code-Bloat verantwortlich ist: Sie werden die Größe Ihres CSS leicht erhöhen (und je nach Ihrer spezifischen Technik vielleicht ein paar weitere Klassen in Ihrem Markup verwenden), aber in den meisten Fällen wird das alles irrelevant sein. Was wirklich einen großen Unterschied machen *kann* (besonders in RWD) sind Adaptive Images – nur ein maximal 480x480 Bild auf einem 320x480 Bildschirm senden, anstatt des ursprünglichen 2MB Bildes)!
@Geoff, nur so zur Info, ich denke, Sie haben genau ins Schwarze getroffen. Es gibt viel zu viel Verwirrung um die Begriffe, besonders um „responsiv“. Es kann vieles bedeuten. Sie haben einen Artikel über eine Bedeutung gepostet und wurden dafür von Leuten angegriffen, die dieses Wort verwenden, um sich auf andere Bedeutungen zu beziehen.
Ich mag Ihren Artikel so sehr, dass ich Freunde darauf verweisen werde. Und ich würde sogar gerne Ihr animiertes GIF verwenden, das den Unterschied zeigt. Ist es in Ordnung für Sie, wenn ich es mit Quellenangabe republiziere?
Es scheint, als hätte dieser Artikel nur Verwirrung gestiftet, anstatt den Unterschied zu klären, teilweise weil die ursprünglichen Begriffe sehr schlecht gewählt sind. Dennoch bin ich größtenteils mit dem Autor einverstanden, hier ist, wie ich die Begriffe gelernt habe
Responsiv: Layout (meist Layout, aber kann auch andere Dinge wie Schriftgröße sein) reagiert auf jede Viewport-Größe. Für mich bedeutet das nicht unbedingt Medienabfragen, aber oft wird es so sein. Eine Tabelle mit einer Breite von 100% ist responsiv, bei jeder Viewport-Größe. Nach der offiziellen Definition ist sie nur fließend, nicht responsiv, aber ich stimme nicht zu, denn ein fließendes Design ohne Breakpoints reagiert auf jede Viewport-Größe. Breakpoints innerhalb dieses gesamten fließenden Ansatzes dienen dazu, das Layout und andere Dinge an bestimmten Punkten zu optimieren.
Adaptiv: Layout (und andere Dinge) reagieren (verwirrender Begriff) nur an bestimmten Breakpoints und nicht dazwischen. Das Ändern der Größe zwischen den Breakpoints kann nur zusätzlichen weißen Raum hinzufügen. Eine andere Interpretation von adaptivem Design ist, dass sich die eigentliche Funktionalität an den adaptiven Breakpoints ändert, wobei pro Breakpoint sehr unterschiedliche Designs existieren.
Das ist meine Interpretation. Und um die Verwirrung zu erhöhen: hybride Szenarien sind möglich.
Sehr gute Teilen des Themas. Sie haben durch Ihre Schrift gut zwischen beiden unterschieden. Sehr wertschätzend.
Bei der Neugestaltung von The Wall Street Journal haben wir ein Raster mit Breakpoints erstellt, das das Design schnappt. Wir haben Medienabfragen verwendet. Das Schnappen ist also eine reine Designentscheidung und wenn Sie jemals mit Redakteuren gearbeitet haben, wissen Sie, dass sie sehr wählerisch sind, wie Text fließt. Dynamischer Text kann alle Arten von Dingen tun, die übersehen werden könnten. So oder so ist dieses GIF falsch.
http://www.wsj.com/news/politics
Sehen Sie, wie die Seite schnappt, sie hat 4 Breakpoints. Alle Medienabfragen mit einer JS-Bibliothek, die Dinge im DOM bewegt.
Nur zur Information.
Die meisten Diskussionen über dieses Thema sind nutzlos.
Weil „sich anpassen“ = „reagieren auf“. Es sind zwei Wörter, um dasselbe zu sagen. Also versuchen die Leute, ihnen unterschiedliche Bedeutungen zu geben, damit sie koexistieren können.
Aber eigentlich ist responsives Design adaptiv und umgekehrt. Weil es im Wesentlichen dasselbe ist.
Diese Wörter sind neu und deshalb haben wir Schwierigkeiten, sie zu definieren. Aber zu viel Zeit damit zu verbringen, sie auf eigene Weise zu definieren, ist Zeitverschwendung.
Es ist, als ob ich in diesem Artikel Sätze wie „fließend oder flexibel“ sehe. Als ob es nicht dasselbe wäre. Wenn Sie weiterhin Ihre Zeit mit Definitionen verschwenden wollen, definieren Sie dann: flüssiges Design, relatives Design, proportionenbasiertes Design. Oder verstehen Sie einfach, dass es alles dasselbe ist.
Die ursprüngliche Philosophie ist die, die man sich merken sollte (Ethan Marcottes ursprüngliche Definition).
Der Rest ist nur „DETAILS“. Es ist, WIE Sie die Philosophie umsetzen. Verwende ich Medienabfragen? (Schnapp-Design) oder lasse ich dieses Element seinen Container ausfüllen? („elastisch“ oder wie auch immer Sie es nennen).
In realen Fällen kann man nicht einfach sagen: „Lass uns für responsiv entscheiden! Oh, nein, für adaptiv!“, denn basierend auf den in diesem Artikel gegebenen Definitionen muss man in realen Fällen meist beides zusammen verwenden.
Das Problem ist, dass die Leute vom falschen Paradigma kommen. Sie diskutieren Techniken, als wären sie Philosophien. Responsive Web Design (RWD) ist eine Philosophie, die von Ethan Marcotte geprägt wurde, aber alles andere sind Techniken zur Umsetzung dieser Philosophie. Bleiben Sie nicht an diesen wortreichen Problemen hängen.
Hinweis an Chris Coyier: Ich würde gerne die Gelegenheit haben, diesen Standpunkt in einem ausführlichen Artikel darzulegen. Ich beschäftige mich schon lange mit diesen Themen und habe noch viel mehr zu sagen. Bitte sagen Sie mir, ob das möglich wäre.
Es gibt 2 Arten von AWD
Der **clientseitige** Typ: Worüber dieser Artikel spricht.
Der **serverseitige** Typ: Worüber Luke Wroblewski und Aaron Gustafson sprechen: Responsive Server Side (RESS). Grundsätzlich progressive enhancement vom Server kommend.
Ehrlich gesagt, ich kann mit beidem leben.
Am Ende des Tages spielt es keine Rolle, welche AWD-Technik wir für unsere Websites verwenden, wir müssen nur verdammt sicher sein, unseren Besuchern und Nutzern das beste UX zu bieten. Punkt.
Großartiger Artikel Geoff. +1