Page Floats - Wie mit herkömmlichem CSS umsetzen?

[Matthias Scharwies]

Servus!

Ich habe die bestehenden Tutorials zum Ausrichten mal zu einem Kurs Ausrichtung mit CSS zusammengefasst.

Als Ausblick habe ich Page Floats vorgestellt:

Wie würdet ihr dieses Beispiel umsetzen?

Evtl. geht das schon mit heutigem CSS:

• Spalten mit columns
• Unterüberschrift oben links, statt in der 2. Spalte (Warum da?)
• Pull quote ohne Einrückung des Haupttexts

Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

Oder soll ich das Beispiel erst mal zurückstellen?

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

Vielleicht so:

article {
  columns: 2 25em;
}
p {
  columns: 2 12em;
}

So kannst du Überschrift und Bild gleich behandeln (column-span: all).

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo Matthias Scharwies,

Aber wie kann man das untere Bild über 2 Spalten fließen lassen?

Vielleicht so:

article {
  columns: 2 25em;
}
p {
  columns: 2 12em;
}

So kannst du Überschrift und Bild gleich behandeln (column-span: all).

Danke! Ich probier mal rum und berichte!

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Apsel,

Vielleicht so:

article {
  columns: 2 25em;
}
p {
  columns: 2 12em;
}

So kannst du Überschrift und Bild gleich behandeln (column-span: all).

Da du keine Überschrift als Kind von p festlegen kannst, musst du vielleicht section verwenden.

http://selfhtml.apsel-mv.de/forum/ak.html

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

http://selfhtml.apsel-mv.de/forum/pf.html

Schön ist anders. Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen - aber nicht so. Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

Technisch geht fast alles, inhaltlich ist das unter Umständen unsinnig. Ich glaube Jen Simmons hat mal versucht mit CSS Grid ein Layout umzusetzen, ich meine auf der SmashingConf. Ich versuche das mal rauszufinden - kann man sich Ideen holen (fertig wurde sie in der vorgegebenen Zeit (45min) des Talks allerdings nicht).

Gruß,

Marc

[marctrix]

Hej marctrix,

Technisch geht fast alles, inhaltlich ist das unter Umständen unsinnig. Ich glaube Jen Simmons hat mal versucht mit CSS Grid ein Layout umzusetzen, ich meine auf der SmashingConf. Ich versuche das mal rauszufinden - kann man sich Ideen holen (fertig wurde sie in der vorgegebenen Zeit (45min) des Talks allerdings nicht).

War ja gar nicht so schwer zu finden (Achtung, englisch!!!):

Thinking with Grid A presentation at Smashing Conference in April 2019 in San Francisco, CA, USA by Jen Simmons

Marc

[Der Martin]

Hallo,

Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

jedenfalls nicht immer und nicht um jeden Preis.

Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

Ciao,
 Martin

[Matthias Scharwies]

Servus!

Hallo,

Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

jedenfalls nicht immer und nicht um jeden Preis.

Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

Und da setzt Page Floats ein: Mobile first!, dann eine Ansicht in 2 Spalten und dann 4 Spalten, wenn's breit genug ist. Und das ohne weiteres HTML-Markup und ohne viele media queries. Bis jetzt unterstützt's nur der firefox so halb.

Im SELF-Wiki-Artikel war dieser Screenshot:

Da Problem hier ist, dass man bei sehr engen Texten ewig lange bis unten scrollen muss, bevor man zur zweiten Spalten dann wieder ganz nach oben muss.

Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

Das ist wohl die Absicht. Bei vielen Beispielseiten geht's nicht um ellenlange Texte, sondern um eine Startseite mit nur einem Foto und dann pro Seite ein kurzen Satz oder eine Adresse. Einen langen Wikipedia-Artikel würde man so nicht gestalten können.

Herzliche Grüße

Matthias Scharwies

[marctrix]

Hej Der Martin,

Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

jedenfalls nicht immer und nicht um jeden Preis.

Jein - grundsätzlich möchte man schon näher an Zeitschriften-Layouts rankommen

Möchte man dass? Ich dachte immer, gerade im fließenden Layout, das sich an die Abmessungen des Anzeigemediums anpasst, liegt die Stärke von guten Web-Layouts.

Unter dieser Prämisse möchte man es. Ich jedenfalls. Das Layout von Zeitschriften ist ein Layout das funktioniert, es ist Jahrhunderte lang erprobt, wird verstanden und ist dennoch abwechslungsreich und interessant.

Je mehr ich davon übernehmen kann, je mehr Wahlmöglichkeiten ich bei einem Design habe, das für alle funktioniert - umso besser (finde ich).

Insbesondere nun wo jeder Browser mit dem Lesemodus eine kinderleicht bedienbare Option hat, das vorgeschlagene Layout gegen ein simples, ablenkungsfreies einzutauschen - und das sogar (jedenfalls im Safari) als Voreinstellung je Website individuell fest zu legen.

Was nicht heißt, dass die selbst entwickelte Darstellung Barrieren haben sollte.

Marc

[Gunnar Bittersmann]

@@Der Martin

Deswegen kann ich mehrspaltige Layouts im Web auch nur dann gutheißen, wenn der Container, der die Spalten enthält, eine sehr kleine Höhe hat. Eine Höhe, die mit großer Wahrscheinlichkeit auf eine Bildschirmseite passt, ohne dass man scrollen muss.

Wobei man sich bei „großer“ nicht mit Wahrscheinlichkeiten zufriedengeben sollte, die unter 1 liegen.

Mit max-height: 100vh kann man da ja nachhelfen. Das sollte aber besser in einem @media (min-height: …)-Block stehen; für kleine Viewporthöhen gibt’s keine Mehrspaltigkeit.

LLAP 🖖

[klawischnigg]

Hi there,

http://selfhtml.apsel-mv.de/forum/pf.html

Schön ist anders. Es ist vielleicht insgesamt keine gute Idee, Drucklayouts ins Web übertragen zu wollen.

Ja, das ist klassisches Werbeagentur-Thinking. Ich sag' immer, gehen tut alles, aber es kostet. Und damit stellt sich sofort die Frage, ob es dafür steht. Natürlich wird eine optisch ansprechende Seite lieber gelesen, aber in Wahrheit interessiert "Design" die Leser nicht, und schon gar nicht, ob ein Bild über zwei Spalten geht oder doch nur über eine, auch und besonders, wenn es nur als "Aufheller" oder "Stimmungsbild" eingesetzt wird.

Damit lautet die Antwort imho eindeutig "nein", auch wenn ich einräume daß es natürlich immer wieder interessant und eine Herausforderung sein kann, Spinnereien von Werbeagenturen und "Designern" umzusetzen. Aber das ist dann fast schon eine andere Geschichte...