Responsiv - best practice: welche Design-Umbrüche (Media Query Schritte) sind sinnvoll?

[alwin]

Hallo miteinander,

es gibt ja mittlerweile unendlich viele verschiedene Auflösungen von Endgeräten (Smartphone, Tablets, Netbooks, Notebooks, Desktops, etc.). Die einzelnen Layouts werden über MediaQuerys aktiviert. Frage: wie detailliert wird man hier? Wählt man eine Mini, Medium und eine Maxi-Version? Oder geht man in einzelnen Schritten min-width=400, min-width=500, min-width=700, min-width=1000, etc.?

Wenn man dann noch Landscape und Portrait Modus und evtl. noch andere Parameter berücksichtigt, dann wird das ganz schön viel.

Alwin

 

[Myhar]

Ich schreibe das auch gleich (etwas umformuliert) in den anderen responsive-Thread hinein, also nicht wundern wenn das doppelt auftaucht:
Zu responsive gibt es zwei sehr gute Bücher: Responsive Web Design von Ethan Marcotte und Mobile first von Luke Wroblewski.

Zu deinem Problem: Man macht idealerweise die Breakpoints dort, wo es vom Design her sinnvoll ist. Heißt jetzt: Wenn bei deinem Design 20em, 40em und 60em als gute Breakpoints funktioniern, dann nimm diese. Bei gutem adaptive-responsive Design passt dann die Anzeige zwischen 20 und 40em dann ja sowieso, also kein Grund die Zwischenauflösungen zu berücksichtigen. Es hat jedoch auch Sinn, sich an Portrait/Landscape Auflösungen zu orientieren. Aber nie die Auflösungen dazwischen vergessen!

 

[Rata]

*memory*

Tobt Euch aus!



Lieber Gruß
Rata

 

[lachender_engel]

Ich denke wir sollten hier erst Mal die Begriffe klären.
Was Du meinst, Alwin, ist nicht responsive Design sondern adaptiv Design.
Der Unterschied ist der: Beim adaptiv Design passt sich das Layout in Schritten der Auflösung an. Also sowas wie bis 400px, bis 700 px und ab 1000px. Dazwischen ändert sich die Darstellung nicht.
Das responsive Design ist Auflösungs-unabhängig. Dafür musst Du auch nicht mit Media-Queries arbeiten. Beim responsive Design richtet sich der Inhalt an JEDE Auflösung des Browsers. Du arbeitest quasi mit einem Master-Container und alle weiteren Angaben erfolgen nur in Prozent.
Ungefähr klar?!

 

[alwin]

[...]
Was Du meinst, Alwin, ist nicht responsive Design sondern adaptiv Design.
Der Unterschied ist der: Beim adaptiv Design passt sich das Layout in Schritten der Auflösung an. [...]

Wow! Das war schon mal ein guter Hinweis! Danke!

Keine MediaQueries klingt super!! Aber wie geht das? Ich hab zum Beispiel die BannerGrafik. Wenn ich die so einbaue, dass es im kleinen Display gut aussieht, dann werde ich beim 2000er Desktop Monitor erschlagen. Da muß sich irgendwas ändern. Oder kann man eine andere Linearität einstellen?

Wie macht man das mit den Schriftgrößen? font-size:1.0em oder font-size:150% ändert sich wohl nicht automatisch mit der BrowserBreite.

Wie macht man das mit Content-Strukturen, die erst ab einer bestimmten Auflösung erst angezeigt ( bzw. überhaupt erst geladen) werden sollen? Woher wissen die, dass sie angezeigt werden sollen, wenn nicht über MediaQueries?

Wie macht man das mit dem Skalieren von Grafiken, die über einen Container in ihrer Größe dynamisch reduziert werden. a) müssen die Grafiken irgendwann ausgetauscht werden (= im kleinen Display Ladezeiten reduzieren, bzw. nach oben hin Qualität verbessern) b) kann es nötig sein, den Aufbau umzustellen (von Bild hoch, Text runter zu Bild links, Text rechts).

Wie geht das alles ohne MediaQueries?

Alwin

 

[lachender_engel]

Oha, so viele Fragen, Alwin. Es hat schon seinen Grund, dass Mediengestalter ein Lehrberuf ist. Der ist nicht mal eben über ein Forum zu lernen.
Grundsätzlich schrieb ich nicht, dass Du keine Media Queries einsetzen darfst. Ich schrieb, dass Du es nicht musst. Aber das kommt natürlich auf Dein Design an.
Bilder fasst Du in Div-Container die sich prozentual zum Mutter-Container verhalten. Den Bildern gibst Du KEINE Größe mit, so passen sie sich dem Container an.
Ein gutest Beispiel für ein Responsive Webdesign findest Du hier . Es ist mit Media-Queries erstellt. Aber recht simple. Wenn Du Dir mit einem Webtool die CSS anschaust, kannst Du sicher viel daraus lernen, wie Du die einzelnen Parameter anwendest.
Verändere mal die Browser-Breite und/oder -Höhe. Du siehst, dass ich das Layout bei jedem PIxel mehr oder weniger anpasst. Ein ideales Responsive Webdesign ist ein solches, dass immer den vollen Browser ausnutzt. Da müssen nicht immer mehr Inhalte kommen, sondern die Schrift oder Bilder können auch größer werden, je größer die Darstellungsfläche ist.

 

[MainAngler]

Mir stellt sich die Frage auch gerade, wie ich meine Webseite - die in HTML&CSS steht - jetzt noch im Nachhinein in responsive bekomme.
Daher ist folgendes schon mal gut, dass ich das weiß:

Ich denke wir sollten hier erst Mal die Begriffe klären.
Was Du meinst, Alwin, ist nicht responsive Design sondern adaptiv Design.
Der Unterschied ist der: Beim adaptiv Design passt sich das Layout in Schritten der Auflösung an. Also sowas wie bis 400px, bis 700 px und ab 1000px. Dazwischen ändert sich die Darstellung nicht.
Das responsive Design ist Auflösungs-unabhängig. Dafür musst Du auch nicht mit Media-Queries arbeiten. Beim responsive Design richtet sich der Inhalt an JEDE Auflösung des Browsers. Du arbeitest quasi mit einem Master-Container und alle weiteren Angaben erfolgen nur in Prozent.
Ungefähr klar?!

Allerdings kapier ich gerade nicht, wenn ich keine media querys einsetzen möchte/muss, wie ich dann ein responsives Webdesign hinbekomme?!

Verstehe ich das richtig, dass ich dann nur %-Angaben verwenden muss?
Das nutzt man aber doch auch samt media querys!

Das Menü muss sich doch an den Viewport anpassen und irgendwann "umbrechen".

Ein Buch möchte ich mir nicht auch noch kaufen.
Gegoogelt habe ich schon zum Thema Respnsive Webdesign und media querys... nur weiß ich nicht was davon alles aktuell ist!

 

[FredBow]

Ich kämpfe mich da auch gerad durch das Thema. Was ich bisher so verstanden hab, ist dass Du im Grunde "nur" Prozentangaben brauchst.

Im Grunde! Denn abhängig von Deinen Designwünschen reicht das evtl. nicht aus. Du kommst vermutlich auch vom px-Layout. Da konnte man als Designer sehr schön sagen, welche Texte, welche Flächen wie belegt haben. (In den gewissen Grenzen, klar.).

Wenn Du Dir jetzt ein Layout bastelst (Grid), dass sich automatisch umbricht (aus 3 Spalten mache 3 Zeilen, wenn es zu schmal wird) , dann muss man ggf. ein paar Abstriche bei seinen Designansprüchen in Kauf nehmen. Und dann braucht man ggf. doch wieder Media Queries. Die Dinger sind eigentlich gar nicht soooo schlecht. Man muss sich nur gut überlegen, wann und wo man die einsetzt. Sonst gibt das ein riesen Gewusel!

Was ich mal gemacht hab:
- Header mit Bild und Text drüber (Logo/Claim)
- Eigenes DropDownMenü im Header.
- diverse Kastenelemente mit Bildern und Text drüber
- eigene kleine Slideshow mit Bild und Text drüber
- Formulare mit Beschriftung und Hilfe
- Footer mit Text und Links drin

Für alles gab es in der Entwicklungsversion eigene CSS-Dateien. Da ich bei jedem Segment (Header, Footer, Slideshow, etc.) genaue Vorstellungen hatte, wo und wie Texte zu positionieren sind, welche Größe sie haben sollen, welche Teile vom Foto bedeckt sein sollen und welche gerade nicht, hatte ich in jeder CSS Datei eigene Media-Queries. Alle mit unterschiedlichen und zahlreichen Umbrüchen, da ja jedes Element anders strukturiert war.

Irgendwann wird man dabei wahnsinnig Ich fürchte, da muss man einfach mal durch.
Wie ich es beim nächsten mal mache, weiß ich noch nicht. Aber in jedem Fall anders

Fred

 

[MainAngler]

Kann mich absolut damit nicht anfreunden!
Ich kapiers einfach nicht!
Habe jetzt schon einiges porbiert, aber jedesmal geht etwas schief.

Seite ist auch nicht online...

Nur als Beipsiel:
Die Seite ist für eine Auflösung von 1024px x 768px erstellt.
Mein Wrapper hat eine Breite von 990px.
Verwendet wird ein Grid, glaube damals das 960.gs verwendet zu haben (auf alle Fälle ist es nicht responsive!).
Ab einer Auflösung von 1020px habe ich dann horizontale Scrollbalken, da das Menü sowie der Inhalt ja so breit sind wie der Wrapper.
Habe schon probiert mit @media (max-width: 1020px) checke es aber nicht!

 

[FredBow]

Was glaub ich auch ein Problem ist, ist einer bestehenden Seite einfach einen responsiven Mantel anziehen zu wollen. Dein ganzes Innenleben muss ja auch respoinsiv sein.

Wenn Du z.B. längeren Text darstellen willst, wird er auf einem Desktop in 3,4,5 Spalten angezeigt. Ziehst Du das Fenster klein (oder nimmst Dein xyzPhone), dann hast Du statt der Spalten nun Zeilen. Das geht mit nur einem außen liegenden Grid nicht. Dein Text muss sich ja schon in dem "responsiven Gummi" befinden.

Ich hatte da neulich das ZitronenGrid in den Fingern. Lemongrid. Oder so ähnlich. Der Tipp stand hier neulich im Forum. Wirf mal die SuFu an. Ich hab den Link gerad nicht parat. Da wird sehr schön erklärt, wie so ein responsives Grid aufgebaut ist. Und man merkt, wie es funktioniert.

Und nicht aufgeben! Wenn man vom alten klassischen Webdesign kommt, ist es eine harte Nuss. Da muss man durch

Was sich statt der px neben % noch lohnt anzusehen, ist em bzw. rem als Schriftgröße bzw. auch als Maßangabe für alle Maßangaben.

Fred

 

[afr0kalypse]

ohne code keine hilfe

zu deiner eigentlichen frage: ich nutze fast ausschließlich 2 media queries
- smartphone, tablet, ende offen. zwischengrößen werden durch skalierung übergangen.
ob das dann jetzt responsive oder adaptive oder responsive-adaptive ist, soll mir egal sein.

lemonade kann ich auch nur empfehlen. die idee habe ich für mein layout auch übernommen.

http://webdesign.tutsplus.com/artic...eezed-responsive-grid-system--webdesign-14888

 

[lachender_engel]

Allerdings kapier ich gerade nicht, wenn ich keine media querys einsetzen möchte/muss, wie ich dann ein responsives Webdesign hinbekomme?!

Gar nicht. Noch mal: Es gibt drei Arten von "angepasstem" Webdesign: Adaptive, Responsive, Fluid. Schmeiße die Begriffe nicht alle in einen Topf und meine es ist alles dasselbe. Ist es nämlich nicht!

Die Bezeichnungen sagt schon klar, wo die Unterschiede sind:
Bei Adaptive "adaptiert" der Entwickler das Design auf verschiedene Auflösungen.
Bei Responsive "reagiert" der Entwickler auf die Eigenschaften des jeweils benutzten Endgeräts, wie Smartphones und Tablets.
Während die beiden Arten jeweils zwingend Media-Queries brauchen passt sich das Layout beim Fluid bei jeder Größe des Browsers automatisch in der Anzeige an. Und das ist die Kunst des Webdesigns. Damit ist es egal ob der Besucher 2560x1600 oder 400x1000 oder 1600x200 Pixel im Browser hat. Es gibt keine Sprünge sondern eine "flüssige" Anpassung der Inhalte an das Ausgabemedium.

Wie schon geschrieben wurde ist die verwendete Technik eine Frage des Layouts.
Ich entwerfe mittlerweile nur noch Layouts die auch Fluid umsetzbar sind. Denn sonst muss ich mir in der Entwicklungen immer wieder Gedanken machen wie das Layout auf 'nem Smartphone und einem Tablet aussieht. Am Ende entwerfe und "baue" ich dann mindestens 3-5 verschiedene Webseiten bzw. Layout um möglichst vielen Endgeräten gerecht zu werden.

Doch dabei vergessen fast alle Entwickler, dass die Ausgabegeräte nicht nur kleiner sondern auch größer werden. Und das ist zu sehen daran, dass fast alle Gridsysteme auf einer Breite von 960 Pixeln beruhen, damit die Seite bei 1024-Pixel Monitorauflösung noch zu erkennen ist. Doch was machen die User deren Monitore eine Breite von 2560 Pixeln liefern? Die haben rechts und links Trauerränder und "verschenkten Platz.

Arbeitest Du im fluid Design musst Du Dir tatsächlich VORHER mehr Gedanken machen aber bei der Entwicklung der Pflege macht sich das dann bezahlt - denn dann arbeitest Du immer nur an einem Layout - unabhängig von der Ausgabegröße des Endgerätes.

 

[MainAngler]

@lachender_engel
Danke!
Adaptive wusste ich - da "springt" das Layout je nach Auflösung des Endgeräts.
Ahh, dachte responsive sei gleich zu setzen mit fluid.
Gut, dem ist also nicht so.

Ich verwende tatsächlich das Grid von 960.gs und konnte es, dank deren Webseite, in fluid umwandeln.
Allerdings habe ich ja das Problem, da ich statisch gearbeitet hatte, dass ich meine Webseite jetzt nicht responsive oder fluid bekomme.
Mein Wrapper hat eine Breite von 990px, größer soll die Webseite, auch bei größeren Monitoren garnicht (unbedingt) werden.
Wenn es (fluid) einfach umzusetzen wäre, dann ok, dann könnte ich auch größere Monitore bedienen, aber meine Grafiken (für den Hintergrund der Divs) haben nun mal nur eine Breite von 1024px).

Bei Responsive verstehe ich nicht, wann ich max-width und wann ich min-width verwende!

Code... naja, wird von einem CMS verwendet... wenn ich da nur den HTML- & CSS-Code posten würde, weiß ich nicht ob jemand damit was anfangen kann.

 

[FredBow]

[...] passt sich das Layout beim Fluid bei jeder Größe des Browsers automatisch in der Anzeige an. Und das ist die Kunst des Webdesigns. Damit ist es egal ob der Besucher 2560x1600 oder 400x1000 oder 1600x200 Pixel im Browser hat. Es gibt keine Sprünge sondern eine "flüssige" Anpassung der Inhalte an das Ausgabemedium.

Was mich dabei interessieren würde, wie handhabst Du in einem Fluid-Layout

a) Grafiken/Fotos. Lädst Du die immer in der größten Ausgabe rein und skallierst einfach nur runter? (Was ja Verschwendung wäre) Oder hast Du Skripte am Laufen (php, javascript), die die Bilder entsprechend vorher runter rechnen bzw. beim Laden bestimmen, welche Auflösung für ein Bild gebraucht wird und nur diese dann laden?

b) Schriftgrößen. Ein font-size:60% richtet sich ja wohl nicht nach der Bildschirmbreite. Zumindest, was ich bisher so gefunden habe. Ansonsten müsste man ja wieder mit Media Queries arbeiten und die Schriftgröße entsprechend anpassen.

Fred

 

[Myhar]

Allerdings habe ich ja das Problem, da ich statisch gearbeitet hatte, dass ich meine Webseite jetzt nicht responsive oder fluid bekomme.

Wenn man von Beginn an ordentlich arbeitet hat man keine Probleme, eine Website responsive zu gestalten. Löse dich von dem Gedanken, dass Bereiche immer auf allen Geräten zB 900px breit sein müssen. Sie sind so breit, wie es ihnen möglich ist. Mit gewissen min- und max-width beschränkungen.

Bei Responsive verstehe ich nicht, wann ich max-width und wann ich min-width verwende!

Das ist ganz einfach: Du verwendest es dann, wenn du es brauchst. So simpel ist das. Du siehst, du wirst nicht umhin kommen, die Grundlagen zu lernen.

 

[FredBow]

Bei Responsive verstehe ich nicht, wann ich max-width und wann ich min-width verwende!

Ich denke, Du meinst das ganze im Zusammenhang mit den Media Queries. Es gibt da verschiedene Ansätze. Man kann eine responsive Webseite von klein nach groß (mobile first) oder von groß nach klein (desktop first) bauen. Entsprechend werden dabei wohl nur die einen (min-width) bzw. die anderen (max-width) Regeln verwendet. (Hab ich zumindest mal so gelesen)

Ich persönlich bin noch dabei die Grenzen einer Query mit Start und Ende zu definieren. Zum Beispiel so:

@media only screen and  (min-width: 701px) and (max-width: 1000px) {
...
}

@media only screen and  (min-width: 551px) and (max-width: 700px) {
...
}

Warum das eine nun besser als das andere sein soll, ist mir auch noch nicht klar. Ich gehe hier bei den Ansatz: es steht ganz klar da, wofür es gilt. Dann muss ich nicht rätselraten, ob nun gerade diese oder jene Query greift.
Nachteil: du musst beim Ändern Deiner Grenzen immer zwei Werte anpassen.

Fred

 

[Myhar]

Warum das eine nun besser als das andere sein soll, ist mir auch noch nicht klar. Ich gehe hier bei den Ansatz: es steht ganz klar da, wofür es gilt. Dann muss ich nicht rätselraten, ob nun gerade diese oder jene Query greift.
Nachteil: du musst beim Ändern Deiner Grenzen immer zwei Werte anpassen.

Du schreibst schon, warum das eine besser ist als das andere. Also ist es dir sehr wohl klar. Man muss das CSS mit den mediaqueries schon strukturieren, dann hat es einen Vorteil nur mit zB max-width zu arbeiten.

@media only screen and (max-width: 60em)
@media only screen and (max-width: 47.9375em)
@media only screen and (max-width: 30em)
[CODE]
Ordnet man das zB so an, dann gilt alles, was man bei 60em schreibt auch für alle kleineren Bildschirmgrößen, da muss man nichts rätselraten. Oft braucht man einen Selektor sowieso für Größen kleiner als (bzw. größer als). Und braucht man ihn ab einer Größe nicht mehr, dann überschreibt man ihn auf der Größe. 
So erspart man sich das doppelte Angeben von Selektoren (Was du aber anscheinend gerne machst)