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

Beitrag lesen

Hallo

Mal angenommen ich erstelle einen Onepager bestehend aus:

  1. Logo
  2. Titelbild
  3. Überschrift
  4. Absatz

Da muss ich doch dem Logo und dem Titelbild jeweils eine Größe zuweisen oder?

Ja. Die Größe des Logos kann sich aber beispielsweise bei schmalen Viewports [1] auf dessen Breite beziehen, zum Beispiel 100% der verfügbaren Breite einnehmen, aber auf breiteren Viewports gemeinsam mit der Überschrift Teil der Kopfzeile sein, deren Hintergrund das Titelbild ziert.

Oder ist es so, dass es in meinem Ermessen liegt, was die kleinste und größte Ansicht ist?

Wenn du eine Website nicht für bestimmte Anzeigegrößen un- oder beschränkt zugänglich gestalten willst, kannst nicht du die Instanz sein, die erlaubte Minimal- oder Maximalgrößen voraussetzt. Es gibt sie praktisch nicht. Die Möglichkeiten, eine Website anzuzeigen sind zu unterschiedlich, als dass du als Autor sie alle kennen oder gar berücksichtigen könntest.

Einer benutzt sein Smartphone, ein anderer sein Tablet, beide ihre Geräte mal im Hoch-, mal im Querformat. Ein nächster hat ein Laptop als Hauptgerät und noch ein anderer benutzt einen 4K-Fernseher als Display am PC. Letzterer hat aber wegen schlechter werdender Augen eine Normschriftgröße von 32px eingestellt, womit die Seitenbreite etwa der eines Full-HD-Displays entspricht. Da ist noch einer, der einen Zweitmonitor hochkant betreibt und sein Browserfenster dort darstellt, womit sich die Breite dieses Browserfenster auf den Wert beschränkt, der für einen Monitor als Höhe angegeben wird. Ach ja, nicht zu vergessen sind jene Besucher, die den Platz auf ihrem Display zwischen mehreren Programmen aufteilen, wo das Browserfenster bei jedem eine andere Größe hat.

Du siehst, das ist eine unbestimmbar große Palette an Möglichkeiten.

Ich benötige doch einen Ausgangspunkt …

Der Anzatz „Mobile First“ ist schon ein guter solcher. Dabei bestimmst du mit einer fertigen HTML-Struktur der Dokumente zuerst im CSS die grundlegenden Eigenschaften und das Layout für schmale Viewports. Danach bestimmst du mittels Media-Queries für breitere Viewports weitere Angaben und überschreibst, wo nötig, zuvor für schmalere Viewports bestimmte Regeln mit für breitere Viewports geeigneteren Regeln.

Das ist nicht mal eben gelernt oder getan. Wenn du dich mit dem Thema aber ernsthaft auseinandersetzen willst, ist das ein wesentlicher Teil, der dir, wenn erlernt, als stabile Grundlage dienen kann.

Tschö, Auge

--
Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
Kleine freie Männer von Terry Pratchett

  1. der Viewport ist die im Browserfenster für die Anzeige einer Seite verfügbare Fläche (Breite und Höhe). ↩︎