Sich anpassendes Webdesign

"Responsive Design" leitet hier weiter. Für den computergestützten Entwurfsansatz siehe Responsive computergestützte Design.
Nicht zu verwechseln mit Empfänglichkeit.
Ein Screenshot von Wikipedia mit einer reaktionsschnellen Haut (Zeitlos).
Die gleiche Haut (Zeitlos) auf dem Handy; Beachten Sie, wie die Elemente sich neu ordnen, damit sie mobiler freundlicher sind.
Inhalt ist wie Wasser, ein Sprichwort, das die Prinzipien von RWD veranschaulicht
Ein Beispiel dafür, wie sich verschiedene Elemente einer Webseite an die Bildschirmgröße verschiedener Geräte anpassen, z.

Sich anpassendes Webdesign (RWD) oder sich anpassendes Design ist ein Ansatz zu Web-Design Dies zielt darauf ab, die Webseiten auf einer Vielzahl von Geräten und Fenstern oder Bildschirmgrößen von minimal bis zur maximalen Anzeigegröße gut zu machen, um die Benutzerfreundlichkeit und Zufriedenheit sicherzustellen.[1][2][3][4]

Ein reaktionsschnelles Design passt das Web-Page-Layout an die Betrachtungsumgebung an[1] Durch die Verwendung von Techniken wie flüssiger proportionalbasierter Gitter,[5][6] Flexible Bilder,[7][8][9] und CSS3 Medien-Anfragen,[3][10][11] eine Erweiterung der @Medien Regel,[12] Auf folgende Weise:

  • Die Flüssigkeit Netz Das Konzept erfordert, dass die Größe der Seitenelement -Größe in relativen Einheiten wie Prozentsätze und nicht absolute Einheiten wie sein Pixel oder Punkte.[6]
  • Flexible Bilder werden auch in relativen Einheiten dimensioniert, um zu verhindern, dass sie außerhalb ihrer enthalten Element.[7]
  • Mit Medienabfragen können die Seite verschiedene CSS -Stilregeln verwenden, die auf den Eigenschaften des Geräts basieren, auf dem die Website angezeigt wird, z. Breite der Rendering -Oberfläche (Browserfensterbreite oder physische Anzeigegröße).
  • Responsive Layouts stellen sich automatisch an und passen Sie sich an eine beliebige Gerätebildschirmgröße an, unabhängig davon, ob es sich um einen Desktop, einen Laptop, ein Tablet oder ein Mobiltelefon handelt.

Responsive Webdesign wurde wichtiger, da die Benutzer von mobilen Geräten die Mehrheit der Website -Besucher berücksichtigen.[13][14] Zum Beispiel kündigte Google beispielsweise im Jahr 2015 an Mobilgeddon und fing an, das zu steigern Seitenranking von mobilfreundlichen Websites bei der Suche von einem mobilen Gerät.[15]

Responsive Webdesign ist ein Beispiel für Benutzeroberfläche Plastizität.[16]

Verwandte konzepte

Mobile erste, unauffällige JavaScript und progressive Verbesserung

Siehe auch: Unauffälliges JavaScript und Progressive Enhancement

Mobile-First-Design und Progressive Enhancement sind verwandte Konzepte, die vor RWD.[17] Browser grundlegender Mobiltelefone verstehen JavaScript nicht oder nicht Medien-AnfragenEine empfohlene Praxis bestand darin, eine grundlegende Website zu erstellen und sie für zu verbessern Smartphones und persönliche Computeranstatt sich darauf zu verlassen anmutiger Abbau Um eine komplexe bildlebige Website zu erstellen, arbeiten Sie auf Mobiltelefonen.[18][19][20][21]

Herausforderungen und andere Ansätze

Luke Wroblewski hat einige der RWD- und Mobile-Design-Herausforderungen zusammengefasst und einen Katalog von Layoutmutern mit mehreren Geräten erstellt.[22][23][24] Er schlug vor, dass Ansätze im Vergleich zu einem einfachen HWD-Ansatz, Geräteerfahrung oder Ress (Responsive Web Design mit serverseitigen Komponenten) eine Benutzererfahrung bieten können, die für mobile Geräte besser optimiert ist.[25][26][27] Implementiert im serverseitigen CSS-Generator Implementierung von Stylesheet-Sprachen wie Sass kann Teil eines solchen Ansatzes sein. Google hat Responsive Design für Smartphone -Websites gegenüber anderen Ansätzen empfohlen.[28]

Obwohl viele Verlage reaktionsschnelle Designs implementiert haben, war eine Herausforderung für die RWD -Einführung, dass einige einige Bannerwerbung und Videos waren nicht flüssig.[29] Jedoch, Suche Werbung und (Banner) Werbung anzeigen kam, um bestimmte Geräteplattform -Targeting und unterschiedliche Anzeigengrößenformate für Desktop, Smartphone und grundlegende mobile Geräte zu unterstützen. Anders Zielseite URLs wurden für verschiedene Plattformen verwendet,[30] oder Ajax wurde verwendet, um verschiedene Werbevarianten auf einer Seite anzuzeigen.[31][23][32] CSS -Tabellen erlaubten hybride feste und flüssige Layouts.[33]

Es gab viele Möglichkeiten, RWD -Designs zu validieren und zu testen.[34] Abreichung von Validatoren für mobile Website und mobilen Emulatoren bis hin zu gleichzeitigen Testtools wie Adobe Edge Inspect.[35] Die Browser von Chrome, Firefox und Safari und Entwickler haben ebenso wie Dritte reaktionsschnelle Tools für die Änderungsgrenze für das Design von Ansichtsfenster angeboten.[36][37]

Geschichte

Die erste Site, die ein Layout enthält, das sich an die Breite des Browser -Ansichtsfensters anpasst Audi.com Ende 2001 gestartet,[38] Erstellt von einem Team bei Rasierer bestehend aus Jürgen Spangl und Jim Kalbach (Informationsarchitektur), Ken Olling (Design) und Jan Hoffmann (Schnittstellenentwicklung). Begrenzte Browserfunktionen bedeuteten, dass das Layout für Internet Explorer im Browser dynamisch anpassen konnte, während die Seite für Netscape bei der Änderung des Servers aus dem Server neu geladen werden musste.

Cameron Adams hat 2004 eine Demonstration geschaffen.[39] Bis 2008 eine Reihe verwandter Begriffe wie "flexibel", "flüssig",[40] "Flüssigkeit" und "elastisch" wurden verwendet, um Layouts zu beschreiben. CSS3 -Medienabfragen waren Ende 2008/Anfang 2009 fast bereit für die Hauptsendezeit.[41] Ethan Marcotte prägte den Begriff sich anpassendes Webdesign[42]- und definierte es als Flüssigkeitsnetz / flexible Bilder / Medienabfragen - in einem Artikel im Mai 2010 in Eine Liste auseinander.[1] Er beschrieb die Theorie und Praxis des reaktionsschnellen Webdesigns in seinem kurzen Buch von 2011 mit dem Titel " Sich anpassendes Webdesign. Responsive Design wurde als Nummer 2 in Top -Webdesign -Trends für 2012 von aufgeführt .NET Magazine nach Progressive Enhancement um 1.[43]

Massig genannt 2013 das Jahr des reaktionsschnellen Webdesigns.[44]

Siehe auch

Verweise

  1. ^ a b c Marcotte, Ethan (25. Mai 2010). "Sich anpassendes Webdesign". Eine Liste auseinander.
  2. ^ "Ethan Marcotte 20 Lieblings -Reaktionsstellen". .NET Magazine. 11. Oktober 2011.
  3. ^ a b Gillenwater, Zoe Mickley (15. Dezember 2010). Beispiele für flexible Layouts mit CSS3 -Medienabfragen. Atemberaubendes CSS3. p. 320. ISBN 978-0-321-722133.
  4. ^ Schade, Amy (4. Mai 2014). "Responsive Web Design (RWD) und Benutzererfahrung". Nielsen Norman Group. Abgerufen 19. Oktober, 2017.
  5. ^ "Kernkonzepte des reaktionsschnellen Webdesigns". 8. September 2014.
  6. ^ a b Marcotte, Ethan (3. März 2009). "Flüssigkeitsnetze". Eine Liste auseinander.
  7. ^ a b Marcotte, Ethan (7. Juni 2011). "Flüssigkeitsbilder". Eine Liste auseinander.
  8. ^ Hannemann, Anselm (7. September 2012). "Der Weg zu reaktionsschnellen Bildern". Netzmagazin.
  9. ^ Jacobs, Denise (24. April 2012). "50 fantastische Tools für reaktionsschnelles Webdesign". .NET Magazine.
  10. ^ Gillenwater, Zoe Mickley (21. Oktober 2011). "Qualitätsanfragen von Qualitätsmedien basteln".
  11. ^ "Responsive Design - die Kraft der Medienfragen härt". Google Webmaster Central. 30. April 2012.
  12. ^ "@media regel". W3.org. W3c.
  13. ^ "Cisco Visual Networking Index: Globaler Datenverkehrsprognose für mobile Datenverkehr 2014–2019 White Paper". Cisco. 30. Januar 2015. Abgerufen 4. August, 2015.
  14. ^ "Mobiler Anteil der US -amerikanischen Bio -Suchmaschinenbesuche 2021". Statista. Abgerufen 29. Oktober, 2021.
  15. ^ "Offizielles Google Webmaster Central Blog: Einführung des mobilfreundlichen Updates". Offizieller Google Webmaster Central Blog. Abgerufen 4. August, 2015.
  16. ^ Thevenin, d.; Coutaz, J. (2002). "Plastizität von Benutzeroberflächen: Rahmen- und Forschungsagenda". Proc. Interact'99, A. Sasse & C. Johnson EDS, IFIP IOS Press. Edinburgh. S. 110–117.
  17. ^ "Was ist reaktionsschnell Webdesign". 23. Juli 2012.
  18. ^ Wroblewski, Luke (3. November 2009). "Mobil zuerst".
  19. ^ Firtman, Maximiliano (30. Juli 2011). Programmieren des mobilen Webs. pp.512. ISBN 978-0-596-80778-8.
  20. ^ "Anmutiger Abbau gegen progressive Verbesserung". 3. Februar 2009. archiviert von das Original am 13. November 2014.
  21. ^ 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.
  22. ^ Wroblewski, Luke (17. Mai 2011). "Mobilismus: JQuery Mobile".
  23. ^ a b Wroblewski, Luke (6. Februar 2012). "Unsere reaktionsschnellen Ärmel hoch rollen".
  24. ^ Wroblewski, Luke (14. März 2012). "Multi-Device-Layoutmuster".
  25. ^ Wroblewski, Luke (29. Februar 2012). "Responsives Design ... oder Ress".
  26. ^ Wroblewski, Luke (12. September 2011). "Ress: Responsive Design + Server -Seitenkomponenten".
  27. ^ Andersen, Anders (9. Mai 2012). "Erste Schritte mit Ress".
  28. ^ "Aufbau von Smartphone-optimierten Websites".
  29. ^ Snyder, Matthew; Koren, Etai (30. April 2012). "Der Zustand der reaktionsschnellen Werbung: Die Perspektive der Verlage". .NET Magazine.
  30. ^ "Google Partners helfen". Google.com. Abgerufen 21. Mai, 2015.
  31. ^ "Erkennung der Server-Seite Geräte: Verlauf, Vorteile und Anleitungen". Smashing Magazine. 24. September 2012.
  32. ^ JavaScript und reaktionsschnelles Webdesign Google -Entwickler
  33. ^ "Die Rolle von Tabellenlayouts im reaktionsschnellen Webdesign". Webdesign -Tuts+. Abgerufen 21. Mai, 2015.
  34. ^ Young, James (13. August 2012). "Top responsive Webdesignprobleme ... Testen". .NET Magazine.
  35. ^ Rinaldi, Brian (26. September 2012). "Browser -Test ... mit Adobe Edge inspizieren".
  36. ^ "Responsive Design View". Mozilla Developer Network. Abgerufen 21. Mai, 2015.
  37. ^ Malte Wassermann. "Responsive Design Testing Tool - Ansichtsfenster - emulieren Sie verschiedene Bildschirmauflösungen - Best Developer -Geräte -Test -Symbolleiste". maltgessermann.com. Abgerufen 21. Mai, 2015.
  38. ^ Kalbach, Jim (22. Juli 2012). "Die erste Reaktionsdesign -Website: Audi (circa 2002)."[Selbstveröffentlichte Quelle?]
  39. ^ Adams, Cameron (21. September 2004). "Auflösungsabhängige Layout: Variierendes Layout gemäß Browserbreite". Der Mann in Blau.
  40. ^ "G146: Verwenden von Flüssiglayout". W3.org. Abgerufen 21. Mai, 2015.
  41. ^ "Medien-Anfragen". W3.org. Abgerufen 21. Mai, 2015.
  42. ^ "Outseller Group - Organisieren, optimieren, maximieren". Outseller.net. Abgerufen 21. Mai, 2015.
  43. ^ Grannell, Craig (9. Januar 2012). "15 Top -Webdesign- und Entwicklungstrends für 2012". .NET Magazine. Archiviert von das Original am 11. September 2013. Abgerufen 29. Oktober, 2021.
  44. ^ Cashmore, Pete (11. Dezember 2012). "Warum 2013 das Jahr des reaktionsschnellen Webdesigns ist".