Diskussion:Responsive Webdesign

Gängige Geräteauflösungen

Hallo liebe Wikianer,

ich hatte folgende Änderung vorgenommen:

• Mobile devices (Smartphones): Querformat = 320 x 480 / Hochformat = 480 x 320
• Pad devices (IPad etc.): Querformat = 1024 x 768 / Hochformat = 768 x 1024
• Standard Website: Querformat = 1680 x 1050

Woraufhin Wikianer "Günther" der Ansicht war das es keine gängigen Auflösungen gäbe. Da ich mich nicht streiten oder aber einfach die Änderung rückgängig machen möchte, frage ich alle diejenigen die sich mit dem Thema "responsive design" beschäftigen fragen:

Gibt es gängige Auflösungen?

--Christian Ortwig (Diskussion) 18:08, 29. Aug. 2012 (CEST)

Ich verstehe grundsätzlich, was du meinst. Grundsätzlich falsch ist es von einer Standardwebsite zu sprechen, weil über die Auflösung beim PC-Benutzer nun wirklich nichts, aber auch gar nichts gesagt werden kann. Man könnte beispielhafte Größen von Displays nennen, etwa

IPad (1!) 1024 x 768 bei einer Displaygröße von 9,7''

IPad 2048 x 1536 bei einer Displaygröße von 9,7''

Galaxy Note II 1280 x 720 bei einer Displaygröße von 5,5''

Allein diese Beispiele sollten zeigen, dass die Abmessungen allein _keinerlei_ Hilfe für eine responsive design bieten.

-- Matthias (Diskussion) 17:49, 1. Sep. 2012 (CEST) --

Die Grundidee des Responsive Design ist ja gerade eine Website nicht mehr für eine (oder mehrere) Zielauflösungen zu optimieren, sondern so anzulegen, dass sie auf möglichst jedem denkbaren Endgerät möglichst optimal funktioniert. Natürlich orientiert man sich dabei ind er Praxis an beispielhaften Endgeräten (iPhone, iPad und die jeweils etabliertesten Android Pendants), aber es wäre ein großer Fehler explizit nur für diese Zielauflösungen zu entwickeln.

IMO ist es daher nicht sinnvoll eine Auflistung fester Bildschirmgrößen oder gar Breakpoints in den Artikel zu integrieren. Konkrete Geräte taugen hier allenfalls als Beispiele für die Vielfalt der Ausgabeauflösungen und Punktdichten. --Martin K. (Diskussion) 13:28, 25. Jun. 2013 (CEST)

Umbenennung des Lemmas

Ich schlage vor, das Lemma umzubenennen in "Responsive Webdesign". Dies ist ja der Begriff, um den es geht, und dieser ist im deutschen und internationalen Sprachraum der am meisten verbreitete. Ich warte mal Kommentare ab, werde also erstmal nichts ändern. --Chris Seidel (Diskussion) 16:12, 19. Feb. 2013 (CET)

ACK -- Matthias (Diskussion) 20:16, 19. Feb. 2013 (CET) --

Eine Woche ist rum, sonst keine Einwände, darum habe ich die Seite eben verschoben. --Chris Seidel (Diskussion) 13:16, 26. Feb. 2013 (CET)

Was für eine Sprache ist "responsive Webdesign" eigentlich? Englisch ist es nicht, denn web design sind zwei Wörter. Deutsch ist es aber auch nicht, denn es fehlt das s wie in "Rotes Meer", "schwarzes Loch", "alkoholfreies Bier" ( Siehe: artikelloses und daher stark gebeugtes Adjektiv, Nominativ Neutrum). Gruß --Liberatus (Diskussion) 13:40, 10. Apr. 2013 (CEST)

Stimme Liberatus zu. Wurde hier nur Faulheit der Übersetzung ins Deutsche zum "Fachbegriff" erkoren? Eine korrekte Übersetzung wäre z. B. "Agiles Webdesign". --My2Cents (Diskussion) 22:27, 2. Dez. 2014 (CET)

@My2Cents: Wie kommst Du denn zu dieser Übersetzung? RWD wird zwar häufig agil entwickelt, aber das ist definitiv nicht seine normative Eigenschaft.

Da Responsive Webdesign (ob jetzt in der eingedeutschten oder der englischen Schreibweise) der etablierte Fachterminus ist, wäre jede Übersetzung schlicht Theoriefindung. Wir etablieren hier keine neuen Kunstbegriffe sondern stellen nur etabliertes dar.// Martin K. (Diskussion) 22:54, 2. Dez. 2014 (CET)

@Martin Kraft: "Agil" ist ja kein Fachterminus, sondern bedeutet schlicht und ergreifend "beweglich". Da erfinde ich nichts, sondern gebe lediglich das wieder, was es ist. "Responsive" ist jedenfalls nicht deutsch. Agil ist es zugegebenermaßen auch nicht. Aber eine korrekte Übersetzung ist nicht gleich eine Theoriefindung, nur weil sie keine schlampige Übersetzung ist.

Hierzu eine Referenz zu einer erträglichen Übersetzung: https://msdn.microsoft.com/de-de/magazine/dn890366.aspx

--My2Cents (Diskussion) 12:46, 14. Jan. 2015 (CET)

@My2Cents: Responsive Webdesign ist nunmal der etablierte Fachterminus. Es macht wirklich keinen Sinn ihn aus irgendwelche sprachästhetischen Überlegungen zu übersetzen, weil es eine solche Übersetzung nunmal nicht der in der zugehörigen Branche etablierte Begriff ist.

Wie man an anderen Artikeln wie Webdesign, Corporate Design, Corporate Architecture, Interaction Design sieht, gibt es in dieser Branche nunmal eine Menge mehr oder weniger glücklich eingedeutschte Lehnworte aus dem Englischen. Und unser Job ist es das so darzustellen, wie es ist, und nicht irgendwelche neuen Begriffe zu etablieren.

Daran ändert auch die Tatsache nichts, dass sich die Einzelworte durchaus übersetzen liesen. Wort haben nunmal je nach Kontext und Sprache unterschiedliche Bedeutungen. Was man übrigens auch am Wort agil bzw. agile sehen kann, das neben seiner deutschen und englischen Grundbedeutung nunmal auch als Fachbegriff etaliert ist. // Martin K. (Diskussion) 21:56, 18. Feb. 2015 (CET)

P.S.: Was Webdesign angeht ist Microsoft übrigens nicht wirklich eine erstzunehmende Quelle - schon allein weil sie in den letzten Jahrzehnt selbst das größte Entwicklungshemmnis waren und lieber auch proprietäre Hacks als auf nachhaltige standardkonforme Lösungen setzten. Und dieser Geist spricht leider auch aus dem Artikel, der RWD vorallem deshalb ablehnt, weil die MS eigenen Tools, Browser und Prozesse es nur unzureichend unterstützen. // Martin K. (Diskussion) 21:56, 18. Feb. 2015 (CET)

Ansicht simulieren durch kleiner machen des Browsers

Mal eine blöde Frage, da in den Weblinks eine Website aufgelistet ist, die andere Bildschirmgrößen simuliert. Kann man das auch nicht selber an einem normalen PC-Bildschirm machen in dem man einfach den Browser kleiner macht? Oder holt sich die responsive Website Daten, die über die Breite des Browsers/Bildschirm hinausgehen (im Artikel ist das nur angedeutet). Kann es also sein, dass man eine responsive Website am PC anschaut und den Browser zusammenschiebt, dies dann aber trotzdem (wesentlich) anders aussieht als mit dem Smartphone? Aus dem Artikel geht das irgendwie nicht heraus... --Friechtle (Diskussion) 12:25, 25. Jun. 2013 (CEST)

Ein klares jein. Da die am häufigsten angewandten Media Queries width und height sind, wird man einen Großteil der Responsiveness einer Website über die Skalierung des Browsers austesten können. Es gibt jedoch noch etliche andere Media Queries in CSS bzw. Eigenschaften in JS, auf die man eine Website reagieren lassen kann:

• So kann man z.B. an Hand von Punktdichte und Touch-Unterstützung entscheiden, ob auswerten ob die Buttons größer dargestellt oder bestimmte Interaktionsformen (Swipe) unterstützt werden.
• Außerdem können verschiedene Funktionalitäten entsprechend der Möglichkeiten des Browsers hinzukommen oder deaktiviert werden (-> Progressive Enhancement bzw. Gracefull Degregation).

--Martin K. (Diskussion) 13:18, 25. Jun. 2013 (CEST)

Ah okay, danke, dann hab ich es doch halbwegs verstanden. Aber nochmal zu dem Weblink. Gibt man dort eine Website an und sieht es dann auf einem simulierten Smartphone. Hat die Simulation dann auch diese Punktdichten, Tuch-Unterstützung, progressiv enhancement ect. berücksichtigt (geht das überhaupt?)? Also kann man mit nahezu zu 100% davon ausgehen, dass die Seite so auf einem Smartphone aussieht wie man sie in dieser Simulation aussieht? Oder wird da nur die Bildschirmbreite und -höhe bedacht? --Friechtle (Diskussion) 22:06, 25. Jun. 2013 (CEST)

@Friechtle: Antwort mit unglaublicher Verspätung:

Die webbasierenden Simulatoren schaffen es i.d.R. nur, die Größe anzupassen. D.h. wenn man 100% das Ergebnis auf einem bestimmten Gerät testen möchte, kommt man nicht drumrum, das auf genau diesem Gerät zu tun. // Martin K. (Diskussion) 20:32, 19. Feb. 2015 (CET)

screenshots vs iframe

Hi allerseits,

das webverlinkte Tool um die Darstellung von Webseiten auf mobilen Endgeräten zu simulieren bietet ja "nur" kleine iframes, das kann man halbwegs durch durch kleiner machen des Browsers simulieren. ami.responsivedesign.is bietet eine Auswahl an screen-shots, bietet imho mehr nutzen. Kann man das zusätzlich verlinken? greetz vanGore 09:34, 26. Sep. 2013 (CEST)

fixed, fluid, adaptive, responsive

Hi Martin, hi allerseits,

wäre es sinnvoll nicht nur die Abgrenzung zu einer adaptiven Website darzustellen, sondern auch fixed, fluid, adaptive, responsive gegeneinander abzugrenzen? Ich weiss nur nicht ob das dann noch in das Lemma Responsiv Design passt. greetz vanGore 09:47, 1. Jul. 2014 (CEST)

@VanGore: Grundsätzlich wäre es sicher sinnvoll, hier mal einen Überblick über die verschiedenen Ansätze zugeben. IMO sollte das allerdings in aller Kürze und idealerweise einem gemeinsamen Absatz geschehen.

Dabei sollte man aber auch bedenken, dass RWD im weiteren Sinne ein übergreifendes Konzept ist, unter das z.B. auch adaptive und fluid subsummiert werden können. Es wäre daher falsch fixed, fluid, adaptive, responsive einfach pauschal in diese Reihe zustellen. Nach meinem Verständniss sind das eigentlich nur Layout-Verhaltens-Pattern und keine übergreifenden Designprinzipien.

Ich hatte eigentlich eh schon länger mal vor diesen Artikel grundzuüberarbeiten - bin aber bisher leider zeitlich noch nicht dazugekommen.

@Martin Kraft: Die Abgrenzung adaptive, responsive hab ich von kulturbanause.de, da ich den Artikel recht gut verständlich fand. Zusätzlich fixed, fluid ist aus mayflower.de.

Fixed ist halt die "gar nicht angepasst"-Variante. adaptive und fluid als Anwendungsarten für RWD zu sehen finde ich gut. Eigentlich ist ein RWD, in Abgrenzung zu einem AWD, nur das es eben fluid, wie eine Style- und bildlose Webseite, ist. (fefe lädt gefühlt immer noch am besten auf jedem Device;) Sollte man adaptive und fluid als Unterpunkte zu Anwendung machen und nur die mobile Webseite als Abgrenzung? greetz vanGore 20:36, 1. Jul. 2014 (CEST)

Vorsicht, vorsicht AWD ist ein Finanzdienstleister, kein Designprinzip ;) Das ist ja gerade das was ich meinte:

• Responsive Webdesign (oder RWD) ist mittlerweile der etablierte Name für das übergreifende Prinzip ein Website-Frontend auf das jeweilige Endgerät reagieren zu lassen.
• fixed, fluid, adaptive, responsive hingegen sind nur Eigenschaften des Layouts und damit von ganz anderer Natur als das Lemma dieses Artikels.

Ich weiß natürlich, dass man die Bezeichnung adaptive Webdesign (und sogar das Kürzel AWD) durchaus in einigen (deutschsprachigen) Blogs findet. Wenn man sich diese aber mal genau anschaut, erscheint es wahrscheinlich, dass insbesondere bei dieser Gegenüberstellung fleißig von einander abgeschrieben wurde. Im englischen Sprachraum (und der ist in Webdesign-Dingen immer noch maßgeblich) meint der Begriff adaptiv Webdesign wieder etwas leicht anderes und wird z.T. sogar synonym zu RWD verwendet. Ich halte daher wenig davon, diese strikte Gegenüberstellung aus dem Blog hier weiter zu etablieren. --Martin K. (Diskussion) 21:46, 1. Jul. 2014 (CEST)

@Martin Kraft: Mir geht es vor allem darum dazustellen was RWD machen kann. Das es nicht darum geht ein komplett neues Template und Layout zu machen sondern eben eines was sich in viele Größen transformiert. Und ungefähr beschreiben was dabei passieren kann. Was hältst du von:

---

Vertikale Aufteilung

Webseiten mit grafische Blockelementen die nicht automatisch umbrechen, wie Bilder oder Spalten im Gestaltungsraster, werden klassisch mit einer definierten Breite (fixed) gestaltet. Diese richtet sich meist nach dem kleinsten Viewport der erwartenden Endgeräte, um vertikales Scrolling zu verhindern

Da mit mobilen Endgeräten aber mehr relativ schmale Viewports aufkommen, versucht Responsive Webdesign Websiten diese Blockelemente bei schmalen Ansichten auch anders zu positionieren.

Dabei können sich diese Elemente unterschiedlich verhalten:

Fluid

Elemente passen sich immer der Größe ihres umgebenden Elements oder des Viewports an und nutzen den Platz solange aus, bis diese nicht mehr sinnvoll nebeinander passen, weil Bilder zu klein würden oder Text zu oft umbricht. Dann werden diese umpositioniert: Meist untereinander verschoben oder weg gelassen, vor allem bei rein gestalterischen Elementen.

Breakpoints

Dabei beschränkt man sich jedoch auf eine feste Anzahl von Breakpoints zwischen denen das Layout jeweils statisch bleibt.

Teilweise auch adaptive web design genannt, wobei der Begriff Adaptive web design im Englischen ein serverseitg beeinflusstes Responsive Webdesign meint

---

greetz vanGore 22:34, 6. Jul. 2014 (CEST)

@VanGore: Find ich ehrlich gesagt immer noch etwas verwirrend und inhaltlich auch nicht ganz korrekt

• Breakpoints führen ja nicht zwangsläufig dazu, dass das Layout dazwischen immer statisch bleibt.
• Blockelemente ist erklärungbedürftig. Wer display:block und display:inline nicht kennt versteht das nicht.
• Links auf andere Sprachversionen gehören eigentlich nicht in den Artikel selbst.
• Wer entscheidet wann etwas nicht mehr sinnvoll nebeneinanderpasst und was hat das mit block-level-elements zu tun?

Wie gesagt: Ich hab eh eine Generalüberarbeitung dieses Artikels auf meiner persönlichen ToDo-Liste - z.Z. aber leider nicht genügend Zeit dafür. --Martin K. (Diskussion) 23:03, 6. Jul. 2014 (CEST)

Elementaufzählung

P.S.: Deine letzte Ergänzung find ich ehrlich gesagt nicht so gut. Natürlich ist der Umgang mit den einzelnen Elementen ein wichtiger Bestandteil des RWD. Allerdings ist diese abschließende Liste hier zu detailiert und erweckt zusammen mit dem imperativen Tonfall (muss) fälschlicherweise den Eindruck, es würde sich dabei um festgeschreibene Regeln handeln. RWD ist aber keine Sammlung von Faustregeln, sondern ein Designkonzept, dass in seiner Impementierung ganz unterschiedlich umgesetzt werden kann. --Martin K. (Diskussion) 11:02, 1. Jul. 2014 (CEST)

@Martin Kraft: Ich hab die Aufzählung auch nur angefangen um Anwendungsbeispiele zu geben was man konkret mit unterschiedlichen Gestaltungselementen machen kann. Es genügt ja nicht nur ein grid zu haben. Den impertaiv mach ich raus und die Listenform gefällt mir auch nicht mehr. Werde ich ändern. Ich hab mal den imperativ entfernt und "entliste". Kannst du den Abschnitt bitte kritisch gegenlesen und entschlacken. greetz vanGore 20:36, 1. Jul. 2014 (CEST)

Erste responsive Website?!

@Hanzobert: Ich habe gerade auch Deinen letzten Edit rückgängig gemacht. Bitte lies Dir hierzu mal Interessenkonflikt, Was Wikipedia nicht ist und Weblinks durch. Wikipedia ist der falsche Ort um aus SEO-Gründen irgendwelche Backlinks zu setzen. Und falls Du für die Agentur Beluga arbeiten solltest, bist Du nach den Nutzungsbedingungen der Wikipedia verpflichtet, diese transparent zu machen.

Darüber ob Audi.com tatsächlich die erste Seite war, die sich „automatisch Größe des Browsers anpassen konnte“, lässt sich streiten:

• Zum Einen war HTML von seinem Grundkonzept her ja immer responsive. Bevor man sich die Designer irgendwann in den 90ern zu fixen Layout-Größen verstiegen hatte, passte sich praktisch jede Seite fluide an den Browser an. Das gilt insbesondere auch für die erste Website überhaupt.

• Und selbst wenn es um komplexere Anpassungen des Inhalts an den zur Verfügung stehend Raum geht, bezweifle ich, dass da Audi.com die Singuläre Rolle zukommt, die ihr Ihre Macher zuschreiben. Die Audi-Geschichte geht ja vor allem auf die Selbstdarstellung von Razorfish zurück.

Ich selbst arbeite seit Ende der 90er im Webbereich und habe um die Jahrtausendwende herum an einigen Projekten mitgearbeitet, die zumindest ansatzweise responsive Funktionalitäten boten (meistens allerdings in Flash). Meiner (ggf. noch mit Quellen zu belegender) Auffassung zu Folge, war das eher ein allmählicher Übergang, der dann 2010 von Ethan Marcotte verbalisiert wurde.

Selbst wenn wir Audi.com hier unbedingt erwähnt werden sollte, dann bitte auf Basis der besten verfügbaren Quellen dazu. Und in diesem Sinne ist der in der en.WP als Beleg angegebene Blogpost von Jim Kalbach bzw. dessen Urahn deutlich sinnvoller als irgendeine Agenturwebsite, die das gerade mal in einem Halbsatz erwähnt. // Martin K. (Diskussion) 14:54, 21. Apr. 2016 (CEST)

@Martin Kraft: Vielen Dank Herr Kraft, ich habe meinen Fehler verstanden! (nicht signierter Beitrag von Hanzobert (Diskussion | Beiträge) 15:31, 21. Apr. 2016 (CEST))

Website

Wieso wird eigentlich hier auf die Website abgestellt? Kann man eine einzelne Webseite nicht responsive webdesignen? --Eppelheim (Diskussion) 08:21, 1. Dez. 2016 (CET)

Breakpoint

Im Artikel wird mehrmals der Begriff Breakpoint erwähnt, ohne dass seine Bedeutung auch für Laien verständlich wird. Die Weiterleitung auf Cascading Style Sheets#Eigenschaftsspezifische Stylesheets (Media Queries) beim 2. Auftauchen des Begriffs hilft auch nicht weiter, da "Breakpoint" dort gar nicht erwähnt wird. Vielleicht könnte man den Artikel dahingehend ergänzen. --Zinnmann d 10:51, 27. Mär. 2017 (CEST)

Einzelnachweise

Die Nummern 1 und 8 sind ohne Anmeldung nicht verfügbar und sollten durch freie Quelle ersetzt werden. Nummer 3 liefert auch keinen Inhalt mehr. (nicht signierter Beitrag von 2001:16B8:578D:4B00:6016:8703:6A81:38B6 (Diskussion) 10:41, 27. Apr. 2020 (CEST))