Screendesign | Welche Breite bei der Desktop- und Mobilien-Version?

[marctrix]

Hej Marc,

herzlich willkommen und Glückwunsch zu deinem coolen Vornamen! 😉

Wird Zeit, dass wir der Mathiasesierug hier mal was entgegen setzen! 😉

@Auge hat geschrieben:

Je nach verwendeter Einheit für die Breite wird entweder der Inhalt in seinem Container sehr schmal dargestellt oder der Container wächst schön mit, die Schrift aber nicht, was zu sehr langen Zeilen führt. In einem solchen Fall kann und muss der Benutzer selbst gegensteuern, das kannst du nicht.

Dazu wollte ich noch ergänzen: entscheidend ist, dass dein Design dem Nutzer genau dazu die Möglichkeit gibt: nachzujustieren. Wie Auge bereits sagte, möchte er vielleicht größere Schriften verwenden oder nciht den ganzen Bildschirm nutzen, um daneben noch einen Film gucken oder die Aktienkurse in einem zweiten Browserfenster im Auge zu haben - oder was auch immer.

Wenn du zuerst mit mobilen kleinen Bildschirmen begonnen hast, solltest du auch für Breakpoints oder minimal-maximal-Angaben für Flexboxen oder Grids immer em als Einheiten verwenden. Dann fällt Dein Layout auch auf dem Desktop in die Darstellung für kleine Bildschirme zurück, so dass alle Inhalte vernünftig angezeigt werden.

Wenn Dein onepager wenig Inhalte hat, können die einzelnen Elemente bei genügend Platz auch nebeneinander stehen. Dann hat man auf großen Bildschirmen ggfs. etwas ähnliches wie eine Tageszeitung vor sich. Und im Idealfall passt die ganze Seite auf den Schirm und man muss gar nciht mehr scrollen (wobei das ein geringer Vorteil ist und niemals Absicht sein sollte. Denn wie gesagt: es wäre Zufall, wenn es bei jemandem so funktionieren würde, weil es von zu vielen unbekannten abhängt).

Also:

1.) mit der kleinsten Displaygröße beginnen: die kann auch weniger als 320px breit sein und Pixel sind eine schlechte Ausgangsbasis, daher 2.) am besten ausschließlich relative Einheiten für Breiten, Höhen, Schriftgrößen, Breakpoints usw verwenden (meist dürften em und rem sinnvoll sein, manchmal % oder vw | vh manchmal aber auch eine Kombination, wie calc(100% - 2rem) wenn eine Box in ein Elternelement mit oder ohne Inneabstand bündig eingepasst werden soll. - In CSS-Kalkulationen kannst du beliebig Einheiten miteinander kombinieren.

Marc