5202

ein Blog über technische Fragen zu Blogger

Blogger: Spalten im Zeitungsstil

von
Texte lassen sich nur bis zu einer bestimmten Textbreite flüssig lesen. Grund ist, dass das Auge am Ende einer Zeile zur nächsten Zeile 'zurückspringen' muss - ist die Zeile zu lang, kann das Auge den Zeilenwechsel verfehlen und das wird auf Dauer anstrengend.

Zeitungen benützen deswegen seit jeher den Spaltensatz - im Web ist das Äquivalent dazu das CSS3 Layout Konzept Multi-Column.

Neu: Skizzenbuch!

Eine kurze Bemerkung: Bis zum Layout-Wechsel habe ich Skizzen und Demos innerhalb der Posts gebaut. Wie ich inzwischen einsehe, ist das unprofessionell und falsch. Durch die viele CSS kann es zu allen möglichen Wechselwirkungen kommen und ein Layout-Wechsel ist für die Skizzen ... na ja ... schwierig. Der Punkt ist, ab jetzt schreibe ich Skizzen in mein Skizzenbuch, ein Blog mit speziell 'neutralem' Grundlayout.

'Skizzen' sind etwas anderes als Tutorials. Ein Tutorial beschreibt im Idealfall Schritt für Schritt, wie man einen bestimmten Effekt im Blogger-Layout erreicht. Ich mag Tutorials nicht besonders - für den Leser ist der Lerneffekt niedrig, oft versteht er nicht wirklich, was er dabei eigentlich macht (und die schlimmsten Tutorials sind die, wenn der Tutorial-Schreiber das selber nur irgendwo abgeschrieben hat und nichts versteht ...).

Ich denke, andere können das besser als ich. Meine Einfälle und Überlegungen sind nur 'Spielereien', die nicht unbedingt auf 'Einsatz' getrimmt sind. Ich garantiere, dass alles über was ich schreibe in Blogger funktioniert - was ihr damit allerdings 'praktisch' anfangen könnt ist Transferleistung und die müsst ihr selber erbringen (wobei ich euch natürlich gegebenenfalls Fragen beantworte).

Im übrigen: Ihr lernt mit HTML, CSS und Javascript umzugehen, indem ihr Sachen selber ausprobiert, ausprobiert und ausprobiert.

Die CSS3-Eigenschaft Multi-Column

Okay, kommen wir zurück zum Thema, nämlich dem CSS3 Konzept "Multi-Column". Dieses Layout Konzept beschäftigt sich mit der Formatierung von Inhalten und es geht grob gesagt darum, dass Texte innerhalb einer Seite in Spalten aufgeteilt werden und automatisch von einer Spalte in die nächste fließen.

In Demo1 habe ich den einfachsten Fall überhaupt gebaut - eine Seite Texte wird in einer definierten Spaltenbreite aufgeteilt. Ich setze für diese und alle anderen Skizzen folgende HTML voraus:
<div class="content">Die Regentrude ...</div>
Die Breite des gesamten Inhalts soll 980px betragen und ich definiere Spalten von jeweils 300px Breite:
.content{
  width: 980px;
  column-width: 300px
}
Dabei werden als Spaltenzahl nur ganze Zahlen verwendet - in 980px Gesamtbreite passen nur drei Spalten á 300px Breite - der Text wird also in drei Spalten angezeigt!
Exkurs: Browserunterstützung - Vendor Präfix
Die Eigenschaft column-width wird nun unglücklicherweise von keinem Browser unterstützt, sondern nur mit so genannten Vendor Präfix. In der 'vollen' Schreibweise sähe das so aus:
.content{
  width: 980px;
  -webkit-column-width: 300px;
     -moz-column-width: 300px;
      -ms-column-width: 300px;
       -o-column-width: 300px;
          column-width: 300px
}
Der Internet-Explorer kennt die Eigenschaft column-width und alle andern Multi-Column Eigenschaften erst ab Version 10, also ab dem neuen Windows 8. In älteren Versionen wird der Spaltensatz nicht angezeigt. Die anderen Browser kennen zwar diese Eigenschaft, interpretieren sie aber teilweise a bisserl anderes, d. h. das Spalten-Layout kann von Browser zu Browser leicht unterschiedlich ausschauen.

Früher galt es als Idealfall, dass ein Seite in allen Browsern gleich ausschaut - davon ist man inzwischen abgekommen. Benützer vom Internet Explorer erleiden ja keinen 'funktionalen' Nachteil, wenn sie keine Spalten sehen - die Seite wird ja angezeigt wie bisher.

Nur weil der Internet-Explorer veraltet, technisch überholt und nichtsnutzig ist, heißt das ja nicht, dass Nutzer richtiger Browser nicht von neuen CSS-Eigenschaften profitieren können. Man muss sich halt nur darüber klar sein, dass der Internet Explorer in allen bisherigen Versionen außen vor ist ...

Feste Anzahl der Spalten

In Demo1 ist eine Spaltenbreite vorgegeben - in Demo2 habe ich nun eine feste Spaltenzahl plus einen Abstand zwischen den Spalten definiert:
.content{
  width: 980px;
  -webkit-column-count: 2;
     -moz-column-count: 2;
      -ms-column-count: 2;
       -o-column-count: 2;
          column-count: 2;
    -webkit-column-gap: 70px;
       -moz-column-gap: 70px;
        -ms-column-gap: 70px;
         -o-column-gap: 70px;
            column-gap: 70px;
}
Der Unterschied zur festen Spaltenbreite wird in Layouts wichtig, die sich flexibel der Bildschirmgröße anpassen - während es bei ersteren Methode bei größeren Bildschirmen mehr Spalten gibt, werden bei fester Spaltenzahl die Spalten breiter, bleiben aber ansonsten gleich.

In meinem alten Layout habe ich diese Methode benützt um dann mit Media Queries die Spaltenzahl auf der iPad-Größe angepasst. Fand ich so intuitiver, ist aber wohl Geschmackssache - funktionieren tun auf jeden Fall beide Methoden.

Seitenfalz

Kommen wir zu einem wichtigen (und umstrittenen!) Punkt, nämlich der Seitenfalz (d.i. der Bereich, den ihr auf euren Monitor ohne zu scrollen maximal sehen könnt). In Demo1 und Demo2 habe ich bewusst sehr 'hohe' Spalten gewählt, wo ihr zum lesen hoch und runterscrollen müsst. Es gibt nun eine Theorie, das jedes scrollen über und unter die Falz für eure "Besucher-Erfahrung" Gift ist und deswegen unbedingt vermieden werden sollte ... hmhm. Ich bin da weniger dogmatischer Meinung - scrollen ist nicht per se schlecht, sondern die Frage ist vielmehr, wie ist die Seite horizontal gegliedert?

Eine rein vertikale Ausrichtung in Spalten wirkt schnell monoton und langweilig. Als Beispiel wie es besser geht, habe ich in Demo3 jetzt mal die Spalten horizontal mit Überschriften 'gebrochen'. Für solche Elemente gibt es eine eigene Eigenschaft, nämlich column-span. Für eine h6 Überschrift sähe die CSS mit allen Venor-Präfixen so aus:
h6 {
 -webkit-column-span: all;
    -moz-column-span: all;
     -ms-column-span: all;
      -o-column-span: all;
         column-span: all;
}
column-span: all bedeutet, dass die Überschrift alle Spalten bricht und quer über sie hinweg läuft. Ihr könnt das nicht nur mit Überschriften machen, sondern auch mit Bildern, anderen HTML-Elementen, whatever. Der Textkörper wird damit horizontal gegliedert - ihr kennt das sicher aus Zeitungen.

Leserlichkeit

Wie alles im Web-Design sind Spalten kein Selbstzweck um der Spalten selber willen, sondern verfolgen ein Ziel, nämlich die Leserlichkeit von Texten zu verbessern. Gute 'Leserlichkeit' lässt einen Text besser und angenehmer lesen und ich denke, das ist auch das einzige Kriterium dabei.

In Demo4 habe ich verschieden Sachen ausprobiert, um die Leserlichkeit zu verbessern: Blocksatz, graphische Trennlinie zwischen den Spalten, Silbentrennung. Wie weit das tatsächlich zur Leserlichkeit beiträgt ... ist wohl eine ganz eigene Diskussion:=). Ich gebe nur mal die CSS dafür:
.content{
  width: 980px;
  text-align: justify;
 /*Silbentrennung*/
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  -webkit-column-count: 2;
     -moz-column-count: 2;
      -ms-column-count: 2;
       -o-column-count: 2;
          column-count: 2;
    -webkit-column-gap: 70px;
       -moz-column-gap: 70px;
        -ms-column-gap: 70px;
         -o-column-gap: 70px;
            column-gap: 70px;
  /*Separator-Linie mit rgba Farbe*/
  -webkit-column-rule: 4px solid rgba(17, 17, 17, .4);
     -moz-column-rule: 4px solid rgba(17, 17, 17, .4);
      -ms-column-rule: 4px solid rgba(17, 17, 17, .4);
       -o-column-rule: 4px solid rgba(17, 17, 17, .4);
          column-rule: 4px solid rgba(17, 17, 17, .4);
}

Weitere Eigenschaften ...

... gibt es zuhauf, die aber alle das gleiche Problem haben, nämlich nur von Opera unterstützt zu werden - fail. Ich denke mal mit column-count, column-width, column-gap, column-span und column-rule habt ihr alle Eigenschaften vom Multi-Column an der Hand, die ihr heute schon bedenkenlos einsetzen könnt.

Noch zu meinen eigenen Erfahrunge: Ich habe in meinem alten Layout ja mit Spalten gearbeitet und das hat auch 'technisch' gut funktioniert, nur war die Reaktion von den Lesern gemischt - es gab einige, die das gar nicht gefallen hat. Lag vielleicht daran, dass ich es schlecht umgesetzt habe - prinzipiell sind Spalten ab einer Textbreite von etwa 650px aber eine gute Sache.

Anmerkungen, Kritik, Fragen

Was sind eure Erfahrungen mit Spaltenlayouts? Gut, schlecht, geht so? Könnt ihr euch das im 'Skizzenbuch' besser vorstellen? Oder immer noch zu abstrakt?