Spannweite der viewports

[Jean]

Guten Tag,
man soll ja mit dem Design einer Homepage mit dem Smartphone beginnen.
Da gibt es ja die unterschiedlichsten Größen der Viewports.
Bei welcher Viewportbreite ist daher es sinnvoll, das Layout zu beginnen?

[klawischnigg]

Hi there,

man soll ja mit dem Design einer Homepage mit dem Smartphone beginnen.

Was heisst schon "soll"? Das hängt auch vom Thema und der Art der Besucherschaft ab, an der sich Deine Seite richtet. Bei einem möglichst allgemein gehaltenen und möglichst großem erwünschtem Publikum stimmt's gleichwohl auf alle Fälle.

Da gibt es ja die unterschiedlichsten Größen der Viewports.
Bei welcher Viewportbreite ist daher es sinnvoll, das Layout zu beginnen?

Diese Frage in dem Zusammenhang stellen heisst soviel wie: zurück an den Start!

Wenn Du in Viewportbreiten denkst, dann machst Du etwas grundsätzlich verkehrt. Die Vorgabe muß sein, daß Dein Inhalt immer 100% der Breite eines Geräts ausmacht. Unabhängig vom Gerät. (Das stimmt bis weit hinauf in den Desktopbereich, aber bei den übergroßen Monitoren ist dann einmal Schluss. Kein Mensch will eine Webseite mit 3000 Bildschirmpixel Breite)...

[Rolf B]

Hallo klawischnigg,

Kein Mensch will eine Webseite mit 3000 Bildschirmpixel Breite)...

Doch, wenn es ein riesiger, hochauflösender Bildschirm ist, der nicht mehrere Gerätepixel zu einem CSS Pixel zusammenfasst, und die Fontsize auf 100px gezoomt ist.

Klingt jetzt doof, aber irgendwie musste ich jetzt deine px Angabe ad absurdum führen 😉

Die Antwort ist - wie immer - kommtdraufanwasmantut.

Kein Mensch will einen Text mit 100em Breite lesen. Das Limit eines Artikels sollte, meine ich, bei 40em oder so liegen. Dazu noch etwas nav und aside, und man ist bei 60em für normale Webseiten.

Es könnte aber sein, dass die Webseite eine Art Plakatwand mit vielen kleinen "Zetteln" ist, von denen keiner breiter als - sagenwirmal - 30em ist. Ein Kanban-Board, ein schwarzes Brett, irgendsowas in der Art. Wenn der Bildschirm groß und hochauflösend genug ist, kann so eine Seite auch dann width: 100vw haben, wenn das 200em oder mehr sind.

Rolf

[Robert B.]

Moin klawischnigg,

Wenn Du in Viewportbreiten denkst, dann machst Du etwas grundsätzlich verkehrt. Die Vorgabe muß sein, daß Dein Inhalt immer 100% der Breite eines Geräts ausmacht. Unabhängig vom Gerät.

Wobei vernünftige Maximalbreiten für einspaltigen Text schon sinnvoll sind.

Kein Mensch will eine Webseite mit 3000 Bildschirmpixel Breite)...

Das Corona-Dashboard des RKI schon … 😉

Viele Grüße
Robert

[Rolf B]

Hallo Jean,

Bei welcher Viewportbreite ist daher es sinnvoll, das Layout zu beginnen?

Du meinst, welche Mindestviewportbreite man annehmen sollte?

Ich würde sagen: 10em. Auf der Smartwatch.

20em. Auf einem Smartphone.

Du musst halt gucken, ab welcher em Breite deine Seite sich sinnvoll verbreitern lässt. Sinnvoll nutzen lassen soll sie sich ja auch im schmalen Modus.

Unterhalb von 60em darfst Du - finde ich - gerne eine Breite von 100vw ausnutzen. Unterhalb von 30em würde ich auch das Entfernen jeglicher body-Margins für sinnvoll halten.

Aber mach nicht zu viele media-Breaks. Weniger ist da mehr. Jeder Media-Break muss getestet werden, ob das Layout noch passt.

Rolf

[Matthias Scharwies]

Servus!

Hallo Jean,

Bei welcher Viewportbreite ist daher es sinnvoll, das Layout zu beginnen?

Du meinst, welche Mindestviewportbreite man annehmen sollte?

Ich würde sagen: 10em. Auf der Smartwatch.

20em. Auf einem Smartphone.

Ja, 20 bis 25em sind normal für mobile Geräte. Wie @Rolf B schon sagte, gibt es keinen Grund das Layout nicht bei 0 beginnen zu lassen, z.B für SmartWatches. Besser ist es

1. keine Breitenangaben zu setzen (Mobile first!)

2. irgendwann mit einer Mindestbreite etwas anderes zu machen:

@media (min-width: 50em) {
  aside {
     ...
  }
}

Lies mal hier: CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_über_Design

Du musst halt gucken, ab welcher em Breite deine Seite sich sinnvoll verbreitern lässt. Sinnvoll nutzen lassen soll sie sich ja auch im schmalen Modus.

Unterhalb von 60em darfst Du - finde ich - gerne eine Breite von 100vw ausnutzen. Unterhalb von 30em würde ich auch das Entfernen jeglicher body-Margins für sinnvoll halten.

Aber mach nicht zu viele media-Breaks. Weniger ist da mehr. Jeder Media-Break muss getestet werden, ob das Layout noch passt.

Genau.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

Unterhalb von 30em würde ich auch das Entfernen jeglicher body-Margins für sinnvoll halten.

Ich nicht. Auch bei schmalen Viewports soll der Text nicht am Rand kleben.

(body { margin: 0 } kann aber dennoch sinnvoll sein, wenn der Abstand auf andere Weise erzeugt wird, bspw. main { padding: 0.5rem }, insbesondere wenn Hintergrund­­­­farben/-bilder im Spiel sind, die bis zum Rand gehen sollen.)

😷 LLAP

[Gerrit]

Hallo,

Unterhalb von 30em ........

(body { margin: 0 } kann aber dennoch sinnvoll sein, wenn der Abstand auf andere Weise erzeugt wird, bspw. main { padding: 0.5rem }, .......

warum wird einmal em und ein anderes Mal rem angegeben?
Gruß
Gerrit

[Auge]

Hallo

main { padding: 0.5rem }

warum wird einmal em und ein anderes Mal rem angegeben?

Beide Einheiten beziehen sich auf die Schriftgröße. Allerdings hängt ein padding oder margin, angegeben mit em, an der Schriftgröße des betroffenen Elements (margin: 1em an einem Absatz resultiert in einem anderen Abstand als margin: 1em bei einer Überschrift mit größerer Schriftgröße), wohingegen ein margin: 1rem in jedem Fall gleich groß ist, da sich rem auf die im Browser voreingestellte Basisschriftgröße bezieht.

Bei einer Basisschriftgröße von 16px entspricht 1rem immer 16px und auch margin: 1rem sind 16px. Hingegen entspricht margin: 1em bei einer Schriftgröße von 1.5em, was in unserem Fall 24px entspricht, ebenfalls 24px.

Tschö, Auge