Orlando: Das typografische Nonplusultra: 50em!

Beitrag lesen

Hallo Serife,

war die Überschrift provokant genug? Sehr schön: ;-)

Mich hat sie angelockt. :-)

Seit Wochen brüte ich über der Frage, flexibles Layout - ja oder nein. Ich entwerfe gerade eine für mich sehr wichtige Seite, die aus kleinen bis sehr langen Texten besteht, teilweise mit illustrativen Bildern ergänzt. Gestern habe ich nun beschlossen, mein ursprüngliches Layout mit einer festen Breite von 760 Pixel umzusetzen, weil ich nur so meine grafischen und vor allem typografisch Vorstellungen verwirklichen kann.

Das möchte ich bezweifeln. Pixel sind nicht geeignet, da sie nicht mit der eingestellten Schriftgröße korrelieren. Eine sinnvolle Beschränkung der Breite ergibt sich einzig aus der Anzahl der Zeichen pro Zeile (Satzbreite) – ob nun mit 50, 60 oder 70 Zeilen pro Zeile sei dahingestellt. Warum also nicht die Breite mittels http://de.selfhtml.org/css/eigenschaften/positionierung.htm#max_width@title=max-width und der Einheit http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=em definieren? Du verlierst damit die Kontrolle über die Passform etwaiger Hintergrundgrafiken, ja. Aber stellst nicht gerade du höhere Anforderung an die Lesbarkeit deiner Texte?

Alle hier öfters empfohlenen Seiten konnten mich typografisch nicht überzeugen.

Lässt sich diese Kritik in allgemeine Worte fassen oder anders gefragt: Welche Eigenschaften würden dich überzeugen?

Ich kenne kein Blog, das nicht auf eine Breite von rund 800 Pixel ausgelegt wäre.

Unseres. Die Breite ist in „em“ definiert, weshalb die Satzbreite mit steigendem Schriftgrad mitwächst. Ich lese es beispielsweise mit 120 % Zoom (Screenshot), was auf ca. 1.000 Pixel hinausläuft.

Hierbei zeigt es sich immer wieder, dass die Zeilenlänge sowohl bei kurzen als auch längeren Texten optimal ist. Sich bei größeren Fenstern ergebende freie Flächen rechts und links sind leicht in ein gesamtkonzept zu intergrieren. Auch ein Logo oder eine Fotografie im Header. Bei flexiblen Layouts funktioniert das Skalieren des Kopfbereiches meist ziemlich bescheiden.

Darauf kann man reagieren, indem man die Grafiken breiter anlegt, das heißt, links und rechts einen Puffer berücksichtigt, der erst bei Skalierung sichtbar wird. Das Problem liegt meines Erachtens bei der unglücklichen Nur-Schrift-Skalierung in Mozilla/Firefox, die Bilder nicht berücksichtigt. Bei einem echten Zoom wird alles proportional vergrößert.

Man kann es nicht allen recht machen. Aber es ist keineswegs ein Vergehen zu sagen, ich gestalte eine Website zum "Hausgebrauch", die in Fenstergrößen ab 800 bzw. 760 Pixel in den allermeisten Fällen gleich oder ähnlich angezeigt wird.

Doch, wenn du als Breite 800px fest definierst, anstatt etwa 50em Maximalbreite. Das Ergebnis wird zwar in den meisten Fällen identisch sein, bei kleinem Fenster und/oder einer von der Normaleinstellung abweichenden Schriftgröße aber unbrauchbar.

Mein Ziel ist der Leser, der am Abend Zeit und Muse hat, sich mit meinen präsentierten Inhalten zu befassen.
                                                 ^

Aha, ein Partnerprogramm also. ;-)

So, nun habe ich eine Gegenposition bezogen.

Das sehe ich nicht so. Mit der „Optimierung“ auf eine gewisse Breite befolgst du typographische Empfehlungen und setzt nur auf die falsche Einheit.

Aber mit mir ist zu reden. Wenn du mir flexible Layouts zeigen kannst, die typografisch anspruchsvoll gestaltet sind, lasse ich mich gerne noch umstimmen.

Ich behaupte, alle mit max-width:em gestalteten Seiten skalieren bestmöglich.

Grüße
 Roland

0 91

von 800x600 über 1024x768 zu 1280x1024

KNT
  • design/layout
  1. 4
    Christoph Schnauß
    1. 7

      Das typografische Nonplusultra: 800 Pixel!

      Serife
      1. 1
        Der Martin
        1. 0
          Serife
          1. 0
            Der Martin
            1. 0
              Serife
              1. 0
                Mathias Brodala
                1. 0
                  Der Martin
                  1. 0
                    at
              2. 0
                Der Martin
                1. 0
                  Patrick Andrieu
                  1. 0
                    Der Martin
                    1. 0
                      Mathias Brodala
                    2. 0
                      Auge
                      1. 0
                        at
                    3. 0
                      at
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunnar Bittersmann
              3. 0
                Gunnar Bittersmann
                1. 0
                  Der Martin
                  1. 0
                    Gunnar Bittersmann
                2. 0
                  at
              4. 0
                at
            2. 0
              at
          2. 0
            Chräcker Heller
            1. 0
              Serife
          3. 0
            at
        2. 0
          at
          1. 0
            Der Martin
            1. 0
              at
      2. 3

        Das typografische Nonplusultra: 50em!

        Orlando
        1. 0
          Serife
          1. 0
            at
      3. 0
        Struppi
        1. 0
          at
      4. 0
        Christoph Schnauß
        1. 0
          Serife
          1. 0
            at
        2. 0
          Wilhelm Turtschan
          1. 1
            Struppi
            1. 0
              Gunnar Bittersmann
              1. 0
                Struppi
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Struppi
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Struppi
                        1. 0
                          Chräcker Heller
                          1. 0
                            Struppi
                            1. 0
                              Chräcker Heller
                              1. 0
                                at
            2. 0
              Wilhelm Turtschan
              1. 0
                Struppi
                1. 0
                  Chräcker Heller
                  1. 0
                    Struppi
                    1. 0
                      Orlando
                      1. 0
                        Struppi
                  2. 0
                    at
                    1. 0
                      Chräcker Heller
                      1. 0
                        at
                        1. 0
                          Struppi
                          1. 0
                            Chräcker Heller
                            1. 0
                              Struppi
          2. 0
            Christoph Schnauß
        3. 0
          Chräcker Heller
      5. 1
        Wilhelm Turtschan
        1. 0
          Christoph Schnauß
          1. 0
            Serife
            1. 0
              Christoph Schnauß
          2. 0
            Wilhelm Turtschan
        2. 0
          at
          1. 0
            Wilhelm Turtschan
            1. 0
              at
              1. 0
                Wilhelm Turtschan
                1. 0
                  at
                  1. 0

                    Schuster bleib bei Deinen Leisten? Immer gueltig?

                    Wilhelm Turtschan
                    • meinung
                    1. 0
                      at
      6. 0
        Chräcker Heller
  2. 0
    Selma
    1. 0
      KNT
      1. 0
        Selma
        1. 0
          Chräcker Heller
        2. 0
          at
          1. 0
            Selma
            1. 0
              at
      2. 0
        at
      3. 0
        Struppi
    2. 0
      Serife
  3. 3
    Orlando
    1. 0
      Chräcker Heller
  4. 0
    KNT