Die Gestaltung von Webseiten ist nicht besonders flexibel: Das HTML-Grundgerüst folgt klaren Regeln, unter der Haube agiert CSS. Beider Manipulation erfordert ein bisschen Expertenwissen. Wer sich eine Webseite bauen lässt, möchte aber in der Regel vermeiden, sich in die Technik und irgendwelchen Code einzuarbeiten. Oft bestückt man die Webseite nur in unregelmäßigen Abständen, und wer soll sich dann all diese Codeschnipsel und wo sie hingehören behalten?

So wollte ein Kunde auf einer für mobile Geräte optimierten Seite in der mittleren Inhaltsspalte Bilder und Texte nebeneinander darstellen, und zwar mehrere Bilder. Seine Idee war, eine Tabelle anzulegen und die einzelnen Bausteine dort zu platzieren, wie man es mit MS-Word gerne macht. Tabellen so zu optimieren, dass sie auch auf Smatphones funktionieren bedeutet eigentlich, sie zu vermeiden. Statt einer HTML-Konstruktion

<table> <tr> <td> Bild </td> <td> Text </td> </tr> </table>

kommt für eine zweispaltige Darstellung eine Konstruktion

<div style="overflow: hidden;"> <div style="width: 49%; float: left;"> <div> Bild </div> </div> <div style="width: 49%; float: right;"> <div> Text </div> </div> </div>

zum Einsatz. Einem Kunden kann ich aber nicht zumuten, im WYSIWYG-Editor in die Quelltext-Ansicht zu gehen und irgendwelches HTML und CSS einzugeben. Will der in 14 Tagen seinen Text überarbeiten, weiß er schon nicht mehr, was wo hingehört. Und das ist ja auch nicht seine Aufgabe.

Das Problem haben aber auch andere Entwickler schon gehabt und deswegen hat jemand die Erweiterung "Layouter" programmiert. Layouter stellt verhältnismäßig einfach unterschiedliche Spaltenlayouts für an sich einspaltige Inhalte bereit.

Ein unauffälliger Link unter dem Editor-Fenster führt zu einem kleinen Popup, das die Layoutalternativen zum Auswählen angibt. Hat man sich für eine Variante entschieden, gibt man im Popup die Inhalte ein. Weiter gestalten kann man sie an dieser Stelle allerdings nicht, erst wenn man die Eingabe abschließt und die Inhalte in den WYSIWYG-Editor übernommen werden, kann man Texte ganz normal fett, kursiv oder mit Übrschriftsdefinitionen auszeichnen.

Mit Vorsicht zu genießen ist die Option, Text automatisch in zwei Spalten fließen zu lassen. Die resultierende Konstruktion

<p style="-moz-column-count: 2; -moz-column-gap: 16px; -webkit-column-count: 2; -webkit-column-gap: 16px; column-count: 2; column-gap: 16px;"> Text </p>

funktioniert nur in modernen Browsern und wird z.B. vom Internet Explorer unterhalb der Version 10 nicht unterstützt. Das ist allerdings kein Beinbruch, ältere Browser stellen den Text dann eben nur herkömmlich einspaltig dar.

Unterhalb einer mehrspaltigen Konstruktion eine weitere, unabhängige mehrspaltige Konstruktion einzufügen, ist jetzt nicht weiter schwierig: Den Cursor einfach ganz unten in den Editor setzen (wo sich eine leere Zeile befindet) und wieder den Layouter aktivieren. Natürlich kann man diese Layouts durch Unachtsamkeit und das Setzen des Cursors an die falsche Position zerstören, sie sind aber weitaus stabiler und flexibler als viele handgestrickten Varianten.