[Diskussion] Was ist responsive Webdesign?

[wex_stallion]

Der olle Printosaurus mal wieder …

Ich hab mir in letzter Zeit diverse Tutorials zum Thema "Responsive Webdesign", sowohl hier als auch woanders im Netz, angeschaut und irgendwie das dumme Gefühlt, dass die Essenz dieser ganzen Tutorials im Grunde lautet:

»Pack zwei, drei, vier oder fünf pixelbasierte Layouts ins CSS und lass die über Mediaqueries passend anzeigen.«

Anders kann ich mir zumindest die weitreichenden Pixel-Angaben in den diversen Tutorials zum Thema kaum erklären.

Aber das kann doch nicht Sinn der Sache sein, denn in drei Jahren könnte sich ja theoretisch werweißwas ändern und es gibt nur noch die Wahl zwischen Armbanduhr-Display und Leinwand im Wohnzimmer oder was weiß ich noch alles. Ich sag nur Retina-Display, da drehen schon wieder alle am Rad wie man das bauen kann.

Sicher muss man "Rahmen" spannen für verschiedene Ausgabemedien, aber warum dann in fixen Einheiten?


Vielleicht hab ich das Prinzip auch nur falsch verstanden?

 

[pascal.k]

AW: [Diskussion] Was ist responsive Webdesign?

Eine Möglichkeit ist wohl, wie du schon sagtest, alle Angaben in Pixeln anzugeben und für die einzelnen Ausgabegeräte speziell zu optimieren. Eine Andere Möglichkeit ist es mit Prozentangaben zu arbeiten. Jedoch ist dies für die meisten in der Praxis verwendeten Designs nur schwer bis gar nicht anwendbar. Zum Beispiel ist eine Sidebar auf dem Handy einfach eher unpraktisch. Da muss man eben irgendwo die Grenze setzen an der man diese dann entweder ausblendet, oder anders positioniert. Hat man sein Layout jedoch speziell auf solche Voraussetzungen ausgerichtet, so ist es sicherlich auch das möglich ein Design nur in Prozent anzugeben. Bei solchen Problemen, wie mit der Sidebar muss man jedoch eben eine Grenze ziehen.

Ausschlag gebend beim Responsive Webdesign ist denke ich auch weiterhin, wer ist die Zielgruppe und mit welchen Geräten (Auflösungen) geht diese auf die Webseite. Dazu braucht man eben entweder ein vorgesetztes Ziel, oder man muss es über Analysetools raus finden. Man kann es halt nicht allen Recht machen. Und falls man das doch will, dann ist es eine Mammut-Aufgabe.

 

[wex_stallion]

AW: [Diskussion] Was ist responsive Webdesign?

Natürlich muss man Rahmen bauen um z.B. Smartphone, Tablet, Desktop usw. abzubilden.

Und da muss man sich auch die Frage stellen, ob man z.B. für das Smartphone die Sidebar weglässt oder drüber oder drunter packt.

Aber im Grunde sollte man den Krempel doch so flexibel bauen, dass man nicht beim nächsten Smartphoneauflösungsupdate wieder alles umbauen muss.

 

[Zenist]

AW: [Diskussion] Was ist responsive Webdesign?

Hallo,
beide Sichtweisen haben was für mich, allerdings finde ich das eigentlich schon ein "altes" Problem, denn wenn man barrierefreie Webseiten erstellen will, muss man ja noch viel mehr Zielgruppen bedenken, als die bisher denkbaren Display- Größen (und Browser Einstellungen), wenn man mehr als "nur" die technischen Hürden bedenkt... mir erschien jedenfalls deswegen schon vor über fünf Jahren die Webtechnologie als zu auszufernd.
Wichtig ist sicherlich auf alle Fälle, dass man genau definiert (und im Pflichtenheft festhält), welche Zielgruppe man bedienen will/soll.
Die neuen Funktionen von Dreamweaver CS6 sind sicherlich hilfreich, aber eben nur ein(ige) Teilaspekte berücksichtigend.

Auf alle Fälle eine spannende Frage und ich werde die Diskussion hier interessiert verfolgen, kenne mich selber aber viel zu wenig damit aus.

Gruß Z.

 

[pascal.k]

AW: [Diskussion] Was ist responsive Webdesign?

Aber im Grunde sollte man den Krempel doch so flexibel bauen, dass man nicht beim nächsten Smartphoneauflösungsupdate wieder alles umbauen muss.

Genau das lässt sich ja über Prozentangaben lösen. Man darf es eben nicht so sehen, dass man es für die Endgeräte auf eine spezielle Größe optimiert. Sondern man muss eben das Layout so anlegen, dass es immer auf 100% device Breite noch gut aussieht.

Vorgehensweise wäre dann beispielsweise:
1600 Pixel breites Layout - Alles sichtbar.
Und nun schiebt man das Fenster einfach kleiner. Die Webseite ist vom Layout her auf immer 100% breite eingerichtet. Sieht man nun, dass ab einer bestimmten Breite die Inhalte nicht mehr Benutzerfreundlich sind, so überarbeitet man diese Variante mittels @media min-width und eben dieser Breite. Dann schiebt man weiter. Und testet weiter. So hätte man immer die optimale Ansicht unabhängig vom Ausgabegerät.

Die Variante mit den Angaben von z.B. 480 Pixeln für Smartphones wird zur Zeit ja nur deshalb genutzt. Da dies eben zur Zeit ein gängiger Standard ist. Also kann man auf diesem Aufbauen. Dass Ausgabegeräte mit 490 Pixel dabei nicht abgedeckt werden ist eben ein hinzunehmendes Risiko der Betreiber. Optimiert man jedoch wie oben genannt, so entfällt dieses Problem.

 

[leveler]

AW: [Diskussion] Was ist responsive Webdesign?

Vieles ist eben noch nicht im Alltag der meissten angekommen. Zb statt px für Schrifte kann man auch die relative Angabe in em(s) vornehmen, viele grafische Elemente lassen sich mittlerweile über css lösen, svg`s werden oftmals von den Entscheidungsträgern aus Unwissenheit nicht beachtet.Für Fotos taugen die allersdings auch nix.

 

[patrick_l]

AW: [Diskussion] Was ist responsive Webdesign?

Beim "responsiven Webdesign" geht es einfach darum unterschiedliche Devices abzudecken. Es wird ja auch nicht zwangsläufig für ein einzelnes Gerät optimiert. Vielmehr von bis.

So wie Pascal schon schrieb geht der Weg über % und EM-Angaben. Wenn dann die Website XY aufgerufen wird, werden entsprechend diese oder jene Teile geladen, angezeigt bzw. so der so positioniert.

Klar gibt es auch Angaben auch für bestimmte Geräte (z.B. iPad, iPhone). Aber die Kunst ist es wohl eben mit den relativen Angaben möglichst alles (bzw. vieles) abzudecken. Im Grunde ist es ja ähnlich wie ein Stylesheet zum Drucken, für die Anzeige und z.B. IE-Fixes.

Nur das es hier um die einzelnen Devices geht. Wie von mir bereits geschrieben geht es eben darum Geräte von Auflösung A bis B abzudecken. Der eine Teil regelt die Darstellung von Devices A bis B, die anderen von C bis D usw..

Grüße Patrick

 

[cythux]

AW: [Diskussion] Was ist responsive Webdesign?

Zu diesem Thema kann ich euch diese Seite empfehlen http://www.alistapart.com/articles/responsive-web-design/ und hier ein Beispiel Video von mir https://vimeo.com/35089224 an einem projekt an welchem ich arbeite 'so sieht man es in action'

lg

 

[mindraper]

AW: [Diskussion] Was ist responsive Webdesign?

hi

für meinen geschmack viel zu wenig bis gar nicht erwähnt wird vor allem folgender punkt beim thema responsive/adaptive webdesign: inhaltspriorisierung.

es geht hier doch nicht nur darum, technische aspekte zu beachten. viel wichtiger ist die priorisierung der inhalte, sprich: welche informationen will der user bzw. die zielgruppe denn haben?
ohne eine solche priorisierung ist es ein reines glücksspiel, ob man nicht für den/die user relevante inhalte plötzlich ausblendet/an andere stellen verschiebt.

zur anmerkung des TE, in den meisten tutorials werden unterschiedliche fixe layouts per media-queries angesprochen: das beweist in meinen augen nur, dass sich die autoren dieser tutorials wenig bis eher gar nicht mit responsive/adaptive webdesign auseinander gesetzt haben, weil sie – wie ja der TE richtig festgestellt hat – das problem nur aufschieben, bis eben ein neues gerät (oder eine gruppe) auf den markt kommt, dessen abmessungen wieder anders sind.

m. E. nach kann die einzig logische antwort bei der frage "responsive mit fixen angaben vs. responsive mit fluid" nur letzteres sein. und zwar aus genau dem gerade eben gesagten grund.

das einzige problem das dann noch bleibt sind: bilder. und daran arbeiten sowohl das w3c als auch die mitglieder im WHATWG. bis es dafür ein lösung gibt müssen wir uns wohl selbst behelfen was aber gott sei dank mit max-width: 100%; und width: auto; meist weniger problematisch ist.

mein fazit: bei der arbeit mit relativen angaben bleibt letzendlich ein (un-)lösbares problem. bei der arbeit mit mehreren fixen layouts bleiben am ende unbekannt viele probleme. und das kann nicht der sinn von einem responsive/adaptive gedanken sein.

 

[cythux]

AW: [Diskussion] Was ist responsive Webdesign?

Da stimme ich voll zu, dafür wird meist dann einige jquery libarys mit eingebaut, wie moderizer, responsive, usw... zudem gibt es ja dann noch die möglichkeiten mit Less oder SASS/SCSS und OOCSS zu arbeiten und man sollte es nur machen meiner Meinung nach - wenn man mit HTML5 arbeiten tut.

lg

 

[patrick_l]

AW: [Diskussion] Was ist responsive Webdesign?

für meinen geschmack viel zu wenig bis gar nicht erwähnt wird vor allem folgender punkt beim thema responsive/adaptive webdesign: inhaltspriorisierung.
[...] Zitat gekürzt

Kann mich dem nur anschließen. Responsives Webdesign, ich sag mal gerade was mobile Devices angeht ist so ein Sonderfall. Damit meine ich das sich dort am meisten tut was die unterschiedlichen Darstellungsflächen angeht.

Auch wie es bereits gesagt wurde, ist es unter anderem auch vom eigentlichen Content abhängig, der bereits gestellt wird. Je nach dem sollte man dann auch auf die einzelnen Devices im gesunden Maße Rücksicht nehmen.

So das was man bisher zu hören bekommen hat, erinnert ein wenig an die Zeit wo jeder Hans und Franz auf seiner Website stolz wie Oscar geschrieben hat. "Diese Website ist optimiert für XY". Im Grunde ist es dann nichts anderes wenn man für jede Devices wieder ein eigenes Süppchen kocht und mit den media-queries herum frickelt.

Grüße Patrick

 

[wex_stallion]

AW: [Diskussion] Was ist responsive Webdesign?

Ich hab halt irgendwie das dumme Gefühl, dass nach wie vor nur auf Viewportbreite geguckt wird, nun halt auf ein etwas größeren Bereich als vor ein paar Jahren.

Natürlich muss man auch mit Pixeln hantieren, wenn man an die Konzeption geht; wenn das Display nur 300 Pixel hergibt, dann braucht man da keine sechs Spalten reinzuhämmern, das wird immer shice aussehen.

Aber im Grunde müsste man doch, oder hätte eigentlich schon immer gesollt, nicht nur mit Viewportbreite alleine, sondern auch mit dem Formatverhältnis arbeiten zu müssen.

Bei gleicher Viewportbreite wirkt eine Seite mit 90% Width auf 4:3 anders als auf 16:9 und selbst da kann es u.U. sinnvoll sein, dem 4:3 ne Sidebar wegzunehmen oder das Bild zu verkleinern oder was auch immer, obwohl die Hardware von mir aus 1920 Pixel hergibt. Oder auch nur 800.

Wer weiß, vielleicht wäre uns das alles erspart geblieben, wenn "Border=0" nie funktioniert hätte …

 

[mindraper]

AW: [Diskussion] Was ist responsive Webdesign?

hi

@wex_stallion:
ich bin mir nicht sicher, ob es sinnvoll ist in seitenformaten zu denken. bei einem film z. b. machen diese überlegungen durchaus sinn, weil innerhalb des (fernseher-)viewports immer alles sichtbar sein soll und ich nicht scrollen kann (i. d. r. zumindest – fernsehtext mal ausgenommen), auf einer homepage sieht es aber anders aus. natürlich ist auch hier durch die hardware immer nur ein ausschnitt zu sehen, die page selbst kann ja aber auch ein 4:80 seitenverhältnis haben.

das soll nicht heißen, dass ich deine überlegung nicht nachvollziehen könnte! aber mit max-width ist es ja möglich, eine seite nicht mehr als z. b. 800px breit werden zu lassen, bevor sie via margin: 0 auto; dann zentriert o. ä. wird. die inhalte darin können ja durchaus in den breiten fluid sein. und mit media-queries werden dann nur noch breakpoints gesetzt, an denen sich das raster ändert. beispielsweise (bezogen auf den viewport):

1020px (max-width) -> 4 RS
800px -> 2 RS
500px und kleiner -> 1 RS

dabei gilt natürlich zu entscheiden, ab wann die breakpoints gesetzt werden. die aufteilung ab 1020, 800 oder 500 ist halt exemplarisch. persönlich beginne ich die breakpoints zu setzen, wenn die inhalte "zulaufen" bzw. es eben anfängt zu "klemmen".

gruß

 

[wex_stallion]

AW: [Diskussion] Was ist responsive Webdesign?

Irgendwann ist immer eine Grenze, die gesetzt werden muss. Das liegt in der Natur der Grenze. Da ist es im Endeffekt auch egal, wie willkürlich die ist.

Der 401te der in den 400-Leute-Club rein will findet die Regelung dann auch bescheuerter als der 672te.

Aber wenn ich auf Priorisierung gehe, dann ist es für mich auch ein logischer Schritt, auf das Seitenverhältnis zu gehen, WIDTH ist mir da im Grunde zu wenig.

Natürlich ist auch das irgendwo begrenzt; denn weder kann man alle mutmaßlich sinnvollen Verhältnisse abbilden, noch verhindern, dass jemand mit einem 20 Pixel Breiten Browserfenster surft.

 

[mindraper]

AW: [Diskussion] Was ist responsive Webdesign?

Aber wenn ich auf Priorisierung gehe, dann ist es für mich auch ein logischer Schritt, auf das Seitenverhältnis zu gehen, WIDTH ist mir da im Grunde zu wenig.

das "problem" ist, dass das web von natur aus kein seitenverhältnis hat (im gegensatz zu print- oder fernsehmedien beispielsweise). für mich klingt das so, als ob (wieder einmal) versucht wird, eine website mit allen mitteln zum A4 blatt zu machen. entschuldige bitte falls ich das falsch verstanden habe.

außerdem ist es möglicherweise gar nicht möglich, auf ein seitenverhältnis zu optimieren. wenn ein kunde beispielsweise ein CMS am laufen hat, kann er ja – sofern er will – 10 artikel mit 25 zeilen/artikel auf eine page setzen. bei einer anderen page aber vielleicht nur 2 artikel mit 30 zeilen/artikel. wie soll dabei ein system basierend auf einem seitenverhältnis funktionieren?

 

[wex_stallion]

AW: [Diskussion] Was ist responsive Webdesign?

Das Ur-Web war auch im Grunde responsiver, als alles, was es heute so gibt.

 

[mindraper]

AW: [Diskussion] Was ist responsive Webdesign?

stimmt

dann lassen wir doch am besten den ganzen sermon so, wie er ohne css halt ausschaut
schöne neue einfachheit

 

[pascal.k]

AW: [Diskussion] Was ist responsive Webdesign?

"Aus großer Macht, folgt große Verantwortung." ... würde Spidermans Onkel sagen. xD

 

[Julchen2012]

AW: [Diskussion] Was ist responsive Webdesign?

Ich finde responsive Webdesign richtig gut gerade weil mindestens die hälfte meiner Besucher laut Google Analytics mit mobilen Endgeräten auf meine Webseite zugreift.

Da ich nicht so der Experte bin nutze ich Wordpress und habe mir eines der zahlreichen responsive Wordpress Themes zugelegt.

Tipps und Tools hole ich mir dann bei www.wpresponsive.com

Gruß Julia