Gunther: gefragt! Wie Seiten- (& Schriftgröße) festlegen?

Beitrag lesen

Hi Gunnar!

  1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)
  2. alle Angaben in Prozent
  3. alle Angaben in EMs
  4. Kombination aus verschiedenen Einheiten

A) Die linke Spalte (Hauptinhaltsspalte) soll aus Gründen der Usability eine Zeilenlänge von ca. 32em haben
B) Der Wrapper sollte im 'Ausgangs-/ Urzustand' (default) eine Breite von 750px haben
C) Die in den jeweiligen Browsern vorhandenen Möglichkeiten zur Schriftgrad/ -größen Einstellung sollen voll erhalten bleiben
D) horizontale Scrollbars sollen weitestgehend vermieden werden

Gunther,
D steht im Widerspruch zu B. Die vernünftige Entscheidung ist pro D.

Nicht unbedingt. Das hängt ja im wesentlichen von der Viweportbreite und der Schriftgröße ab.
Du würdest also mehr Gewicht auf die Vermeidung von horiz. Scrollbars legen?

Um die Vorgaben A) B) und C) zu erfüllen kommt nur Methode 3 in Frage.

3 steht im Widerspruch zu B. Aber B war ja schon aus dem Rennen.

Beispiel:
Schriftgröße 16px=1em
linke Spalte:   32em   = 512px
rechte Spalte:  14.9em = 238.4px
Gesamtbreite:   46.9em ~ 751px

Gib doch der „rechten“ Spalte (die durchaus auch ÜBER oder UNTER der linken sein kann, da du ja sicher mit float arbeitst) eine Breite
von etwa 10em. Der „linken“ gibst du gar keine, sie macht sich also so breit wie es geht, was du mit max-width auf 32em begrenzen kannst.

Wäre eine Möglichkeit, die aber ja nicht verhindert, dass ab einer gewissen Schriftgröße doch eine horiz. Scrollleiste auftaucht. Dies ließe sich imho ja nur durch eine max-width Angabe in Prozent (für den Wrapper) verhindern. Also alles in EMs (auch die max-width für die Spalten) nur max-width (für den Wrapper) in %.

Methode 1 ist wahrscheinlich des Designers liebstes Kind,

Des Printdesigners, der keine Ahnung von Webdesign hat und deshalb besser die Finger davon lassen sollte.

Gibt aber erstaunlicherweise viele Beispiele für fixed-layout Seiten von Leuten, die in der "CSS-Szene" Rang & Namen haben.
Beispiel gefällig? Stopdesign von D. Bowman

Methode 2 erfüllt Vorgabe D)
Bleibt noch Methode 4 […]

Ein durchaus gangbarer Weg: width in %, min-width UND max-width in em (und natürlich float).

Dreispaltiges Beispiel: http://gundi.de/verein/satzung

Der Nachteil an diesem Ansatz besteht halt darin, dass sich die Zeilenlänge verändert.

Mein Problem besteht in der Hauptsache darin, dass ich mich nicht entscheiden kann, da jede Variante ihre Vor- & Nachteile hat (wie fast alles im Leben). Jetzt war meine Idee halt die, getreu dem BBC-Motto "think about the 80%", also denk' an die Mehrheit, als Default-Style den einzustellen, den (vermeintlich) die meisten User bevorzugen und den/die anderen Style(s) als Alternative anzubieten.

Deine bevorzugte Alternative ist mir jedenfalls anhand deines Beispiellinks klar geworden - Danke!

Wie sieht es denn bei dir mit der Schriftgradänderung im Browser aus? Benutzt du die? Und welche Schriftgröße empfindest du als "angenehme (gut lesbare) Standardgröße"? Mir persönlich sind die 16px Defaultgröße in vielen Browsern schon zu groß. Meine favorisierte Größe liegt irgendwo zwischen 12-14px.

Gruß Gunther