Media Queries Breakpoints - Responsives Webdesign 2021

So, noch eine Frage (oder mehrere) hinterher an die, die selbst Hand anlegen und nicht nur fertige CMS und Templates nutzen. Wo und warum legt Ihr Breakpoints fest? Arbeitet Ihr mit min-width oder max-width? Auch hier sagt der eine so, der andere so. Und in welcher Reihenfolge, kleine nach große Auflösung oder groß nach klein?

Mit den "Richtungen" sehe ich bei beiden Modellen Vor- und Nachteile, auch mit "Min" oder "Max", aber ich bekomme da keinen Schuh draus.

Von "klein nach groß" ist es eher optimiert für mobile Zugriffe. Klar, der Browser weiß schneller, welche Media-Query für ihn zuständig ist. Gleichzeitig bläht es aber auch den CSS-Code auf, da es dann nach unten hin immer mehr wird an Anweisungen. Ich empfinde das als wesentlich schwieriger wartbar. "groß nach klein" ist halt genau umgedreht, erst kommt das eigentliche CSS für die großen Ansichten (wie bei der anderen Version auch), dann wird per neuer Media-Query jeweils überschrieben. Die werden dann rein als Code aber immer weniger. Klar, es ist mehr Aufwand für den Browser, da er erst die erste Anweisung bekommt, dann merkt, es gibt eine andere, überschreiben, dann noch eine und noch eine usw.

Im Grunde ist die Frage nach dem "min-width oder max-width" die gleiche, denn es erfordert ein ganz anderes CSS-Design. Ich persönlich war bis heute immer der Befürworter von "max-width", eben weil das auch einfach zu handhaben ist, aber ist das sinnvoll?

Und zum Schluss, die Breakpoints. Die machen mich echt kirre, bei mir, aber auch auf anderen Seiten:

Dazu muss ich erst mal sagen, ich nutze in der Regel ein 3-Spalten-Layout. Je nach Breite werden dann Spalte links und rechts verkleinert, Content passt sich an. Wird es zu eng, dann verschwindet die rechte Spalte und es entsteht ein 2-Spalten-Layout. Noch viel kleiner, wird es dann nur noch eine Spalte. Aber wo da genau die Grenzen ziehen? Klar, die eindeutigen Mobilgeräte, die bekommen eine Spalte, die eindeutigen Desktops drei. Aber das dazwischen, das kann ja im Grunde alles sein. Mein Tablet hat z.B. auf seinen 10,1 Zoll eine höhere Auflösung als mein Laptop auf seinen 15 Zoll.

Wenn ich mal nach Bootstrap oder anderen fertigen CMS gehe, dann arbeiten die in der Regel mit 3-4 Media-Queries, ich habe hier aktuell an die 12! Aber die machen oft nicht viel, teils nur ein Element der Seite neu machen. Im Grunde machen nur 4 wirklich Layout, also Anzahl der Spalten.

Daher die Frage, wie Ihr das macht, denkt, wollt, erwartet. Ich für meinen Fall finde es fürchterlich, bei schon 640px auf 1-Spalten-Layout zu wechseln, wenn zwei auch noch passen. Ganz besonders dann hier nervend, wenn ich mal in den Split-Screen gehe und dann eben jede Seite nur noch knapp 1000px hat. 50% sind normal bedienbar, 50% wechseln da schon in den Mobilmodus. Am Desktop ist das fürchterlich, alleine schon Bilder, die dann teils 100% gezoomt werden. Das Forum hier genauso, ab 1024 oder kleiner, Mobilmodus. Finde ich fürchterlich. Was soll ich damit, ich habe eine Maus und kann normal klicken.

Also mit Bootstrap habe ich mal gearbeitet und es dann nach über einer Woche vergeblichen Versuchens aufgegeben. Für einfache Seiten ja, aber auf mein System konnte ich das nicht umsetzen, dass es in etwa gleich ausschaut und Funktion hat.

Aber was soll ich sagen? Habe mir heute morgen mal layoutit.com angesehen und war erstaunt, dass ich da nach ca. 20 Minuten einen "Bausatz" hatte, der zu 90% meinem Layout entspricht.

Hatte das vorher schon mal versucht, glaube auch mit 12-col und 24-col, ist aber schon ein paar Jahre her. Bin verzweifelt gewesen. Aber mit dem Generator hat das nun erstaunlich gut funktioniert. Klar, da ist noch viel zu machen und auch die Frage, wo nimmt man was von Bootstrap und wo was eigenes, aber das Layout ansich, das hat von der Funktion her funktioniert. Da bin ich vorher schon immer gescheitert, an die Inhalte kam ich erst gar nicht.

Ich schrieb ja drei Spalten. Das ist aber nicht einfach so drei Spalten wie üblich, sondern die sind auch "unterbrochen" in Rows, teilweise.

Also eigentlich außen rum ein 12, darin ein 4-8. In dem 4 ist dann die Navi. In den 8 muss wieder ein 12. Das ist der Content-Bereich und auch die Sidebar. Wobei da mehrere Rows sein können, denn die Sidebar soll mobil nicht ans Ende, sondern zwischenrein. Also in das 12 wieder in dem Fall 8-4. 3-4 Stück, dann ein neues 12er-Row und wieder 3-4 Stück 8-4. Dann bricht die Sidebar dahin um, wo sie hin soll, nämlich mitten in den Content und nicht an das Ende.

So weit war ich mit Bootstrap ehrlich gesagt noch nie. Keine Inhalte drinnen, aber ich schaffte noch nicht mal das normale Layout zu erstellen. Gut, bisher auch manuelles Tippen.

Zitat von Abakus Forumsfossil

Also das muss man sich zumindest erstmal alles in ruhe durchlesen und die beispiele (inklusive quelltext/aufbau/verwendete css klassen) ansehen, damit man weiss wo man es sinnvoll einsetzt bevorm an mit einer neuen bootstrap seite anfaengt.

Das ist genau das Problem, denke ist. Bei meinen reinen Content-Seiten, links Navi, rechts Content mit Text, umflossenen Bilder, Listen, Galerien, sicherlich kein Problem. Da ist auch alles sehr flexibel und kann quasi machen was es will bis zu bestimmten Größen.

Bei meinen Reiseportalen ist das anders. Das ist auch alles irgendwie "flexibel", aber nicht unbedingt "liquid", bekomme ich aber ohne Probleme runter bis auf 300px Breite. Da sind bestimmte Bereich "fest", fest im Sinne, dass die nur in bestimmten Breiten springen dürfen. Also z.B. Navi. 300px, 200px, umschalten auf Mobil. Sidebar das gleiche. Der Content selbst darf machen was er will, so lange es nicht zu eng wird.

Bild ist schwierig, da verzeichne ich mich wahrscheinlich 100 mal und eben auch da, es gibt feste Bereiche und "liquid".

Im Grunde ist das Gerüst außen rum also ein 4-8. 4 die Navi, 8 der Main-Bereich. Die Navi darf aber nur in festen Abständen springen, nicht einfach so jedes Pixel ihre Breite ändern. Die 8, also der Main darf das an sich. Aber.

Im Main ist dann der eigentliche Content und die Sidebar, jeweils mehrfach vorhanden, damit die Sidebar sich bei kleineren Auflösungen an bestimmten Stellen einsortiert und nicht am Ende der Seite. Z.B. Sidebar rückt in den "Contentbereich" nach Unterkunft 3, 7, und 10. Also im Grunde drei Rows im Main-Bereich (können auch mehr oder weniger sein, aber als Beispiel). Das erste Row enthält Unterkunft 1, 2 und 3, sowie eine Sidebar daneben. Die anderen eben analog dazu.

So, und nun das, was ich oben meinte. War eigentlich gar keine Frage, sondern nur ein geschriebener Gedanke. Die Unterkünfte selbst sind wieder jeweils 4 Bereiche. Oben Titel, darunter "Bild + Beschreibung", darunter Info. Im Grunde Also was wie

<div aussenrum>

<h3 Überschrift>

<div mit Bild, 216px breit> daneben <div floatend mit Text, liquid>

<div Info 100% breit>

<div aussenrum Ende>

dieses Gebilde habe ich mir mit Bootstrap auch zusammengebaut, hat an sich funktioniert, also optisch, was die Verschachtelung angeht. Nur das waren letztendlich gut 50% mehr Quellcode als vorher Und das Bild muss eben seine 216px einhalten. Der Text daneben darf schmäler werden, das Bild aber nicht. Bis dann ein Punkt erreicht wird, wo sich die beiden "trennen". Bild ist dann oben "100% von "aussenrum" und der "text" darunter auch. Im Grunde wird da also nur das "floaten" beendet und alles geht auf 100%.

So, und das "<div Info 100% breit>" enthält eine weitere Verschachtelung von drei Bereichen. Aktuell schlicht ein flex:0 0 33%. Bei Bootstrap also ein 4-4-4

Also ein <div>1</div><div>2</div><div>3</div> Bei kleinen Auflösungen muss sich das aber komplett ändern. Optisch muss es ein

<div>1</div><div>3</div>

<div>2</div>

werden. Wobei 1 und 3 auf 50% gehen, 2 auf 100%.

Von meiner Preistabelle rede ich mal gar nicht. Die besteht in der Regel aus 12 Spalten und unbekannt vielen Zeilen (Eine Tabelle ist eine Saison, es kann aber eine geben, 5, 10 oder auch 30). Spalten und Zeilen haben aber teils Col- und Rowspans von 3-8 drauf, damit alles kompakter wird. Aktuell sortiere ich die einfach mit CSS um und 5 Zellen, die dann auch ganz wo anders hin müssen mit "::after {content:"xxx"}"

Das alles aber nur als Info, dass das hier eben nicht so einfach ist, ohne was groß am Außen der Seite zu ändern. Als ich Bootstrap damals testete, hatte ich keinen Generator, nur die Doku und baute mir das per Hand zusammen. War auch in Zugzwang, denn meine Seiten waren damals nicht responsiv. Daher der Versuch. Aber mit etwas zu beginnen bei einer Seite, die solche Anforderungen stellt, das ist der falsche Startversuch. Daher gescheitert und dann mein eigenes System aufgebaut.

Jetzt aktuell arbeite ich an dem Thema "CSS, welche Richtung" und stelle eine Seite auf "klein nach groß" um. Das ist schon die Hölle, aber es wird, sehe immer mehr Erfolge.

Abakus Forumsfossil Danke Dir für Deine Antworten bisher . Muss da wohl ein neues Thema aufmachen wegen Bootstrap.

Möchte nur anmerken, dass meine eigentliche Frage die Breakpoints waren und die hat Bootstrap ja auch. Nur welche sind sinnvoll? Ich finde es immer wieder verstörend, wenn eine Webseite meint, nur weil ich mit 1024px komme, ich sei mobil unterwegs und liefert mir z.B. Bilder mit 360px aus, die dann auf 1024px gezoomt werden, weil die meinen, 1024px wäre mobil. Texte, Zeilen, die so lang sind, dass man schon nach 2 Zeilen den Überblick verliert und sich in den Zeilen "verheddert".

Es war also eigentlich keine technische Frage, sondern eine danach, wo ihr das selbst wollt, ab wann Mobil, ab wann Desktop.

Ich glaube es war auch NTV, aber noch viele andere. Da ist mir das halt sehr aufgefallen als ich krank im Bett lag. Laptop, 1024, fast überall "mobil" und nicht brauchbar. Tablet, wesentlich kleineres Display, aber als "Desktop" erkannt. Das Forum hier schaltet seine Navi auch bei 1024 in den Mobil-Modus, aber zum Glück nur die und die Sidebar rechts, der Content schaltet erst bei 768 um. Navi finde ich aber auch zu früh, aber das ist nur meine Meinung, daher die eigentliche Frage.

Also das mit dem Media-Object kommt sehr gut hin. Das Bild bzw. dessen Div muss gleich bleiben, der media-body daneben muss sich anpassen. Das Bild umfließen soll er auch nicht, das würde also genau so passen.

Im Grunde passt das erste Beispiel sehr gut. Stell Dir darüber eine Überschrift vor, also über dem Bild und unten drunter unter dem "Media" eine weitere 100% breite Box, das wäre dann meine "Info". Und ab einer Bild-Breite von 420px müsste sich Media dann auflösen, also nicht mehr Text neben Bild, sondern darunter. Passt sonst einfach nicht. Bei nem Handy mit 360px geht ein 216px Bild schlicht nicht und Text daneben. Da haben die es in dem Beispiel einfacher, da eigentlich nur sehr kurze Wörter. Hier kommt es oft vor, dass da recht lange sind und nicht automatisch umgebrochen werden können, also brauche ich irgendwann maximalen Platz, sonst läuft der Text rechts raus.

Und Navi ist im Grunde das gleiche. Die darf "definiert springen", also so wie da auf der Seite auch, aber zwischen den Points nicht die Größe ändern, was sie hier tut. Auch hier das Problem mit langen Wörtern, die dann entweder umbrechen, was komisch ausschaut oder eben rechts überlaufen, was noch schlimmer ist. Also auch wie hier im Forum. Links die Userinfo bleibt gleich, der Post passt sich an.

Vom Prinzip her ist die Seite aber sehr sehr ähnlich mit meiner. Auch hier verschwindet ab einem gewissen Punkt die rechte Sprung-Navigation (ist bei mir quasi die Sidebar). Bei mir müsste die sich dann quasi unter "Nesting" einsortieren und nicht ganz verschwinden.

Aber ja, das Problem ist immer das, dass alles liquid ist, das war auch mein Problem damals zu großen Teilen.

Das versuche ich gerade alles anzupassen, also auch dass erst mal alles gestapelt wird und dann bei größeren Auflösungen erst mal flex:row oder float kommt.

Prinzipiell habe ich auf meinen Seiten keinen "Schnickschnack", ganz im Gegenteil. Das meiste, was ich mal hatte, ist seit Jahren weg. Das was sich hier nun so kompliziert anhört oder nach Schnickschnack vermuten lässt ist Branchen-Standard. Ich habe zwar mein System komplett selbst entwickelt, aber vom Layout her und den Funktionen, wie was angeordnet ist, ist den "großen" abgeschaut.

Die Unterkunftslisten z.B. Bei Handy bis 420px oder gar 480px kann ich stapeln, das ist nicht das Problem. Da würde ein float auch nicht passen, da Schrift dann zu breit, dafür geht dann das Bild auf 100% (Standard). Aber bei größeren Auflösungen muss es floaten, denn es macht keinen Sinn, da dann ein Bild auf 1024px zu zommen oder wenn nicht, den Text dennoch darunter zu lassen. Also hier muss ein Float oder Flex Bild <-> Text her. Und in dem Fall arbeiten die dann auch noch mit "Cover", weil ich schlicht keine Kontrolle darüber habe, was das für Bilder sind, welches Format, wie ausgerichtet. Das reicht von 4:3, 16:9, individuellen Dingen bis hin zu Panorama und "vertikale Collage". Der schlimmste glaube ich hat was von 200x3000px. Ich erzeuge beim Upload zwar schon neuen Versionen, beschneide sie, dimensioniere sie neu, entweder auf fixe Breite oder fixe Höhe, aber das reicht nicht. Manchmal braucht man andere oder die Quelle ist so "sonderbar", dass man daraus nicht wirklich was passendes erstellen kann. Daher das Cover. Noch mehr Bilder erstellen? Nee, nicht wirklich. Ich habe jedes schon in 8 Versionen vorliegen und das alles nur als JPG. Irgendwann kommt noch webP dazu.

Das muss alles irgendwie so rein, dass jede Unterkunft letztendlich den gleichen Raum einnimmt und nicht einer das 10-fache, nur weil sein Bild 10 mal höher aber auch 10 mal schmäler ist als andere. Und ja, durch Cover fehlen dann auch immer wieder Bildbereiche, daher ist das hier so ausgelegt, dass es für die meisten passt, aber es eben Sonderfälle gibt, die fürchterlich sind. Geht aber nicht anders, dann müssten andere Bilder her, aber das sind eben nicht meine.

Und das andere komplizierte, die Preistabelle, die ist auch Standard. Könnte man viel einfacher machen, wenn es nur eine Saison oder zwei geben würde, aber viele Nutzer haben bis zu 30 das dann auch noch mit jeweils 5 Staffelungen und mehreren Personenanzahlen. Wenn man das dann einfacher darstellt, dann scrollte man 2 Minuten, bis man an den Preisen vorbei ist oder was darin findet.

Und Wortlängen, da gibt es hier alles mögliche. Das längste Wort hat glaube ich fast 50 Zeichen. Andere Schreiben Sätze mit . und Komma, aber ohne Leerzeichen. Auch das korrigiert mein System schon, aber es kann nicht alles korrigieren, manches ist ja "richtig".