Adaptives Webdesign

"M2 Mobile Web", das Original Mobiles Web Frontende von Twitterdiente später als Fallback -Legacy -Version zu Kunden ohne JavaScript Unterstützung und/oder inkompatible Browser, wie z. Spielekonsole Mit begrenzten Web -Browserfunktionen. Es wurde im Dezember 2020 geschlossen.[1]

Adaptives Webdesign (Awd) fördert die Schaffung von mehreren Versionen von a Website um das Gerät des Benutzers besser anzupassen, im Gegensatz zu ein einzelnes statisch Seite, die auf allen Geräten oder einer einzelnen Seite, die nachbestimmt und nachbestimmt und aussieht) und aussieht) Größenänderung Inhalt Verantwortlich Basierend auf dem Gerät/Bildschirmgröße/Browser des Benutzer.

Dies beschreibt am häufigsten die Verwendung von a Handy, Mobiltelefon und ein Desktop Version einer Seite (oder in den meisten Fällen der gesamte Fälle Seite? ˅), eines davon wird basierend auf dem abgerufen User-Agent definiert in der Http bekommen Anfrage, die als bekannt ist als dynamisches Servieren. Das adaptive Webdesign war eine der ersten Strategien für Optimierung eine Website für Mobilgeräte LesbarkeitDie häufigste Praxis bestand darin umgeleitet zur mobilen Version der Website serviert auf einen Subdomain (Oft die Subdomain der dritten Stufe, bezeichnet "m"; z.B. http: //m.website.com/; und/oder URL -Parameter wie & app = m & persist_app = 1 auf YouTube verwendet). Heute wird die Verwendung von zwei separaten statischen Websites für die Besichtigung mobiler und Desktops weitgehend ausgeschaltet, mit Server -Seiten -Skripte stattdessen verwendet, um zu dienen dynamisch Erzeugte Seiten oder um dynamisch zu entscheiden, welche Version einer statischen Seite zu dienen ist, obwohl die Verwendung unabhängiger Websites für Mobilgeräte und Desktop immer noch häufig beobachtet werden kann. Während viele Websites entweder reaktionsschnell einsetzen oder Adaptive Webdesign -Techniken, die beiden sind nicht gegenseitig exklusiv, und empfohlene Vorgehensweise für die Meisten allgemein Lesbar gestaltete Inhalte verwenden eine Kombination aus den beiden Techniken, um ein vollständiges Spektrum von zu unterstützen Hardware- und Software.[2]

Das Vorhandensein separater Frontends ermöglicht es Kunden, die technische Probleme haben, entweder auf einen anderen zurückzukehren, mit der Wahrscheinlichkeit, dass das Problem nicht auftritt.

Technische Definition

Das adaptive Webdesign ist ein Prozess der serverseitigen Erkennung, der ein Design-Layout und eine zu Anzeige ausgewählte Größe auswählt. Alle Arten von Webdesign -Layouts können verwendet werden, einschließlich des reaktionsschnellen Layouts (obwohl responsive Webdesign normalerweise die gesamte Steuerung des adaptiven Webdesigns ermöglicht, ohne dass mehrere Seiten für Updates bearbeitet werden müssen). Das adaptive Design serviert unterschiedliche Versionen der Website (oder Seite) für verschiedene Geräte, die auf gemeinsamen Bildschirmgrößen und -auflösungen basieren. Der einzige Unterschied ist die Art und Weise, wie das Design von einem Sicherheiten oder Gerät aus betrachtet wird Standpunkt eher als das sich anpassendes Webdesign (RWD) Einheitliche Ansatz für das Layout.[3] Der Begriff wurde zuerst von Aaron Gustafson in seinem Buch geprägt Adaptives Webdesign: Erstellen Sie reichhaltige Erfahrungen mit progressiver Verbesserung Im Mai 2011.[2]

Terminologie der Techniken

Das adaptive Webdesign verwendet mehrere Seitenlayouts für eine einzelne Webseite und manchmal Progressive Enhancement (SPORT). Das adaptive Modell ist im Gegensatz zu einem "mobilen separaten" Layout "Mobil zuerst" JavaScript, und Progressive Enhancement des reaktionsschnellen Webdesigns.[3] "Mobile separat" ist das gleiche Konzept wie "Mobile First", außer dass das Design -Layout von AWD ein separates mobiles Basislayout im Vergleich zum einzigen Design -Layout von reaktionsschnellem Webdesign hat.

Browser von grundlegenden Mobiltelefonen verstehen JavaScript nicht oder nicht Medien-AnfragenEine empfohlene Praxis besteht darin, ein grundlegendes mobiles Layout zu erstellen und zu verwenden Progressive Enhancement für Smartphones, anstatt sich darauf zu verlassen anmutiger Abbau Um eine komplexe bildlebige Website zu erstellen.[4][5]

Technologieentwicklung führt zur Notwendigkeit

Das adaptive Design ist ein umfassender Ansatz für das Webdesign, der sich auf die Eignung für eine Vielzahl von einer Vielzahl von konzentriert Schnittstellen anstatt sich auf das Format einzuschränken, das für ein Desktop -Display bestimmt ist. Dies ist insbesondere 2018 bei Smartphone von Bedeutung Suche Bände haben Desktop -Suchvolumina in 10 Ländern überholt, auch wenn Tablette Suchvorgänge wurden in der Kategorie Desktop gezählt.[6] Es sind neue Technologien entstanden, die das Gesicht des Webdesigns als Ganzes verändert und das dynamische grafische Webdesign neues Leben einhauchen. Beachten Sie, dass dynamische Webpraktiken, obwohl es seit mehr als zwei Jahrzehnten gibt, dynamisches Design in Bezug auf das grafische Layout, insbesondere für die Anzeige von Mobilgeräten, ein viel neueres Konzept ist. Es ist auch wichtig, wenn Sie den Unterschied zwischen RWD definieren (sich anpassendes Webdesign) und AWD (adaptives Webdesign), dass neue Technologien (wie z. CSS3 Medienfragen, Ajax, HTML5, in der Nähe von Universal JS Integration usw.) haben sich um rwd- konzentriert. nicht AWD, das normalerweise effizienter und effektiver ist als AWD. AWD existiert nur im neuen Design, um RWD zu ergänzen, bei dem RWD-Technologien nicht vom Browser ordnungsgemäß interpretiert werden können (im Fall von "nicht-schläfrig" -Browsern und veralteten Smartphones). Diese jüngsten Änderungen (der Übergang vom Desktop zu Mobile) machen flüssiges mobiles Design zu einem der wichtigsten Konzepte in der grafischen Webentwicklung und haben zu einem starken Übergang zu RWD und weg von AWD geführt.

Geschichte, Anpassung und Evolution

Das adaptive Webdesign erfasst die Bildschirmgröße während der Http bekommen Anfrage, bevor die Seite bedient wird, und laden Sie die entsprechend gestaltete Seite, die spezifisch ist User-Agent. Mit einem adaptiven Standard -Layout entwerfen Sie im Allgemeinen eine adaptive Site für sechs gemeinsame Bildschirmbreiten: 320, 480, 760, 960, 1200 und 1600 ".[7][8] Dies war nicht nur übliche Praxis für die mobile Optimierung, sondern auch die Übergangsphase zwischen 4: 3 niedrig Auflösung Crt Monitore und hohe Auflösung 16: 9 LCD Monitore. Standard adaptive Webdesign war erforderlich, um Flüssigkeitslayouts für die verschiedenen verfügbaren Monitore zu erstellen.[7]

In den frühen Tagen von Smartphones wie die Brombeere Von der Mitte bis Ende der 2000er Jahre waren die Bildschirmabmessungen sehr unterschiedlich, und außerdem fehlten mobile Browser auf diesen Geräten die erweiterte Funktionalität und Plugins, die zum Erstellen von reichhaltigen Umgebungen in Desktop-Browsern verwendet wurden. Darüber hinaus waren die Daten eine hochpreisige Ware und sehr langsam, sodass es erforderlich war, spezielle "abgespeckte" mobile Seiten mit weniger Bildern (oder niedrigeren Qualität) und scharfen Textverschlüssen für einfache Lesbarkeit zu entwerfen. Anzeigen mussten skaliert werden Auch erheblich. HTML zu der Zeit nur für feste Koordinaten und keine Skalierung zugelassen (das ist der Grund, warum Websites in bestimmten Regionen fast immer nach links oder oben rechts gebunden waren. Zentrierte Inhaltsseiten). Um Seiten zu erreichen, die auf Mobilgeräten geladen würden, mussten Entwickler völlig neue Seiten für die mobile Anzeige entwerfen, meistens nicht von vorne anfangen. Da diese Browser oft schwer zu navigieren waren, war es auch erforderlich, große, leicht zu ersichtliche Verbindungen zu erzeugen.[3] Die nächste große Änderung des adaptiven Standard -Webdesigns kam in den letzten Jahren, insbesondere mit dem Aufstieg der iPhone und zwei Jahre später weit verbreitet 3g Die Verfügbarkeit erhöhte die Verbindungsgeschwindigkeiten und die verfügbare Bandbreite dramatisch, ein dynamisches System mit zwei Designs wurde zum am häufigsten verwendeten, ein mobiles Layout (normalerweise mit dem Subdomain -Präfix "m") Optimiert für das iPhone und ein Desktop -Layout. Die mobilen Versionen waren normalerweise immer noch "skaliert" mit Bildern mit geringerer Qualität und manchmal Inhalt wie Videos, die entfernt wurden, um die Ladezeit zu verkürzen. Dies war auch das erste Mal, dass Webentwickler mit einem Touchscreen entwerfen mussten, wobei größere klickbare Links und Schaltflächen verwendet wurden, um die Verwendung von Fingern als Zeiger zu erleichtern.[3] Als Google Android OS stieg an Popularität und führte mehr Variation des Marktanteils von Smartphones sowie die weit verbreitete Implementierung von ein 4G LTEDas ultra schnelle mobile Breitband war nicht mehr erforderlich, um die Qualität des mobilen Mediens zu fördern oder Inhalte zu schließen, um mit langsamen Verbindungsgeschwindigkeiten und mit so vielen Variationen der Geräte das mehrseitige Paradigma des Standards zu handeln Dynamisches Webdesign weithin verlorene Gunst bei Entwicklern. Während einige das Konzept weiterhin verwenden, um das Design von Touchscreen-Inhalten vom Desktop-Design vollständig zu trennen, verfügt das Responsive Webdesign für fast alle Tools, die erforderlich sind, um nahezu jede Manipulation als Reaktion auf eine Vielzahl von Faktoren auszuführen, sodass eine Seite alle Zwecke bedienen kann. Beim Integrieren in Material Design oder Gerätspezifische Layout- und Farbschemata, einige Entwickler finden es einfacher, drei Seitenvorlagen (Android, iPhone/iOS, Desktop) zu erstellen, die die Symbole und Farben zwischen den einzelnen ändern, während Sie Medienfragen verwenden, um das Layout zu bestimmen. Die Praxis führt zu viel einfacherem Seitendesign und -code, aber die Aktualisierung erfordert die Bearbeitung aller 3 Vorlagen. Es gibt Variationen dieses Konzepts, die die Grenzen zwischen AWD und RWD verwischen, wie Django'S "Ansichten."[3][8][9][2]

Responsive Web Design vs. Adaptive Webdesign

Obwohl es keinen Konsens über die Benennung gibt, da sowohl adaptiv als auch reaktionsschnell das gleiche Verhalten dargestellt werden können, verwendet das, was häufig als reaktionsschnelles Design bezeichnet wird, weniger Seitenlayouts als Standard -adaptives Design, normalerweise (in fast allen Fällen) nur eines. Das adaptive Design wird als weniger zukunftssicher und ein weitaus weniger effizientes Designmodell als reaktionsschnelles Design angesehen, da sich die Bildschirmgrößen der gängigen Geräte ständig ändern und sehr unterschiedlich sind. In den frühen Tagen der Einführung von Massen-Smartphones funktionierte das einfache Modell mit 2-stelliger 2-Stelle gut (eine medienreiche, Widescreen-Seite für die Desktop-Anzeige; eine kleinere Größe (in Bezug auf die Qualität/Dateigröße von geladenen Vermögenswerten- zum Speichern von Daten) Seite formatiert für kleine Bildschirmansicht, mit weniger Unordnung, größeren Schriftarten und engeren Textverschiebungen für die mobile Anzeige). In den ersten Jahren des Smart-Phone-Booms machten nur wenige Modelle den größten Teil des Marktanteils aus Beliebte Geräte. Mit dem Aufstieg der iPhoneViele Entwickler begannen ihre mobilen Websites speziell auf das iPhone- und Touchscreens. Responsive Design basiert auf einem Flüssigkeitsnetz gegen das feste Netz eines adaptiven Designs.[3] Das hybride adaptive/responsive Designmodell umfasst mehrere Seiten, die in Formatiert sind sich anpassendes Webdesign Layout, wenn das nächstgelegene entsprechende Layout bedient wird, antwortet die Seite auf das Gerät des Benutzers.[7]

Standard adaptiv Ansichtsfenster Responsive Skalierung der Seite in Verbindung (wie in reaktionsschnellem Webdesign), aber neue Strategien und Technologien für reaktionsschnelle Webdesigns und Technologie haben so gut wie separate Multi-Screen-Seiten veraltet, außer dass die Site Nutzer von nicht-smartem Internet ansprechen möchte. fähige mobile Geräte und veraltete Smartphones, die nicht auf neue reaktionsschnelle Designskripte reagieren.[7] Wie bereits erwähnt, Dinge wie Djangos "Ansichten" -Konzept und einige Aspekte von Ajax verwischen die Linien, da sie aus vielen Gründen unterschiedliche Versionen von Seiten dienen, aber einige können für die Fließfähigkeit auf verschiedenen Geräten sein. Seiten werden jedoch dynamisch und nicht statisch erzeugt (obwohl man argumentieren könnte, dass die "Ansichten" statische Vorlagen sind Mit Inhalten gefüllt. Am Ende liegt alles an dem Entwickler, wie er oder sie die am besten geeignete Art ist, die Geräte zu zielen, auf die ihr Inhalt auf fließendste, sauberste und integrierte Weise angezeigt wird. Es gibt sicherlich mehr als Eine Möglichkeit, die Katze der dynamischen Webentwicklung zu häuten.[3][8][9][2]

Siehe auch

Verweise

  1. ^ "Legacy Twitter -Shutdown bedeutet, dass Sie nicht mehr von den 3Ds twittern können.". Screenrant. 2020-11-28.
  2. ^ a b c d Gustafson, Aaron. Adaptives Webdesign: Erstellen Sie reichhaltige Erfahrungen mit progressiver Verbesserung. Easy Readers, LLC; 1. Auflage, 2011.
  3. ^ a b c d e f g "Verständnis und Vergleich reaktionsschnell, adaptives und flüssiges Design | ICO Web Solutions". ICO Web Solutions. 16. Januar 2014. Abgerufen 17. April 2017.
  4. ^ "Anmutiger Abbau gegen progressive Verbesserung". 3. Februar 2009. archiviert von das Original Am 2014-11-13. Abgerufen 2016-12-21.
  5. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (Februar 2010). Entwerfen mit progressiver Verbesserung. p. 456. ISBN 978-0-321-65888-3. Abgerufen 1. März, 2010.
  6. ^ Sterling, Greg (5. Mai 2015). "Es ist offiziell: Google sagt jetzt mehr Suchanfragen auf dem Handy als auf dem Desktop.". SearchEngineland.com. Abgerufen 27. Januar 2017.
  7. ^ a b c d Adiseshiah, Emily Grace (1. März 2016). "Auswahl eines Webdesigns: Responsive vs Adaptive".
  8. ^ a b c VenturePact, Venturepact. "Entwerfen für 10000 Bildschirme 4 Layout -Tipps für reaktionsschnelles Webdesign".
  9. ^ a b Firtman, Maximiliano (30. Juli 2010). Programmieren des mobilen Webs. pp.512. ISBN 978-0-596-80778-8.