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

[Auge]

Hallo

ganz herzlichen Dank für Dein Feedback. Okay, dass mit den verschiedenenGröße habe ich kapiert.

Guter Anfang.

Nur mal angenommen, ich erstelle mich jetzt an den Onepager ... Ich füge einen Header, eine Section und einen Footer jeweils mit Inhalt hinzu. Wenn ich auf nun auf die Vorschau gehe, ist alles so breit wie mein Bildschirm.

Ja, das ist das Normalverhalten in HTML. Also: Soweit, so gut.

Ich habe zum Beispiel eine Auflösung von H 1.920 Pixel x B 1.080 Pixel.

Dein Bildschirm ist Hochkant? 😉 Selbst wenn nicht, breit ist breit und an der Stelle stellt sich deine Frage nach der Einschränkung der Seitenbreite schon allein, weil bei der vom System vorgegebenen (und vom Benutzer nicht anders eingestellten) Schriftgröße die Textzeilen elendig lang werden. Das will man nicht lesen müssen.

Wenn ich das nun kleiner haben möchte, gebe ich dem Ganzen ein Breite. Bis dahin ist das doch richtig oder?

Richtig. Jetzt kommt es aber darauf an, was genau du da tust.

• Du kannst dem gesamten Inhalt eine feste Breite mit einem Pixelwert geben (statische Einheit (es gibt noch weitere, px ist aber die meist verwendete)), die sich ab einem bestimmten Grenzwert nicht mehr ändert. Das hieße aber, dass mit zunehmend beitem Browserfenster mehr leerer Platz vorhanden ist, weil der Inhalt selbst auf eine feste Breite beschränkt wird. Entweder es wird bei zunehmender Breite immer mehr Platz verschwendet oder du musst mit media Queries weitere Grenzwerte angeben, nur um die Breite des Inhalts nachzujustieren. Alles in allem ist das keine gute Lösung.
• Du kannst dem gesamten Inhalt eine feste Breite mit Bezug zur Schriftgröße oder zum Viewport an sich geben (relative Einheiten), so, wie Gunnar es mit der Verwendung der Einheiten em und rem beziehungsweise %, vw und vh (letzere hat Bezug zur Viewporthöhe) vorschlug. Damit erledigt sich grundsätzlich auch deine folgende Frage:

Wenn nun aber jemand auf die Website geht, der einen viel breiteren Monitor hat, hat also ein wenig Pech gehabt oder?

Nein, das hat er bei Verwendung relativer Einheiten für die Größen eben nicht (ungünstige Browsereinstellungen ausgenommen).

Ich ziehe an den meisten Stellen für Breiten den Bezug zur realen Schriftgröße mit em vor, da sich somit das Verhältnis von Schrift(größe) und Containerbreite nicht mehr ändert. Es gibt aber auch Werte, bei denen ich mit rem einen festen Bezug zur Basisschriftgröße des Browsers herstellen will. Containerhöhen sollten übrigens im Allgemeinen nicht angegeben werden. Je nach Schriftart und -größe kommt es zu unterschiedlichem Platzbedarf für Text, der mit vorgegebener Höhe zu Abschneidungen führen kann. Das will man nicht.

Ich möchte aber auch sagen, dass in einem Browser mit ungünstigen Einstellungen auch mit Verwendung relativer Größenangaben Platzverschwendung durch leere Flächen auftreten wird. Wenn ein Benutzer einen 4K-Display benutzt, in seinem Browser die Schriftgröße bei den meist systemseitig vorgegebenen 16px belässt und das Browserfenster im Vollbildmodus anzeigt, kann man die Breite des Inhalts so sehr relativ angeben, wie man will, es kommt Murks dabei heraus. 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.

Tschö, Auge