Trennung von Layout und Inhalt
Die Trennung von Layout (CSS) und Inhalt (HTML) wird von allen CMS unterstützt und hat insbesondere praktische Gründe: Ein einmal (im CSS) definiertes Format kann beliebig oft verwendet werden und ist einfach für alle gleichartigen Anwendungsfälle zu ändern. Außerdem entsteht weniger Code und die Trennung entspricht den Richtlinien der Barrierefreiheit, u. a. weil Strukturen für Screen-Reader und Suchmaschinen verarbeitbar sind.
Die meisten Layout-Definitionen sind durch das im Content Management System (CMS) verwendete Template (Designvorlage) für die Website festgelegt. Die CSS-Formatanweisungen befinden sich in separaten Dateien innerhalb des Template-Dateibaums. Die Nutzung des Template garantiert die Einheitlichkeit des Layouts auf allen Seiten der Website, "Layout-Wildwuchs" wird vermieden.
Voreingestellt sind in einem Template/Theme die verwendeten Layoutelemente wie
- Ausrichtung von Text, i. d. R. im Flattersatz (linksbündig)
- Schriftarten(en): z. B. Jura, sans-serif (serifenlos)
- Schriftfarben für Texte, Überschriften und Links, Link-Hover etc.
- Schriftformate für die Überschriften h1-h6, Absätze (p), Aufzählungen (ul,ol), etc.
Das CMS nimmt Ihnen als Online-RedakteurIn somit weitgehend das Layout bzw. die Einheitlichkeit der Formatierung (mit Hilfe des verwendeten Templates/Themes) ab. Sie sollten sich daher primär um den Inhalt und um dessen Strukturierung kümmern.
In Wordpress finden Sie entsprechende Blöcke: Absatz, Überschrift, Liste, Link, Tabellen, etc.
In Joomla stehen Ihnen im JCE-Editor entsprechende Icons zur Verfügung.
Hinter den WP-Blöcken bzw. JCE-Icons stehen insbesondere folgende zur Strukturierung von Inhalten relevante HTML-Tags ( Was ist ein HTML-Tag):
Mit fett <strong> und invers <em> können Sie einzelne Begriffe innerhalb eines Fließtextes hervor- bzw. abheben.
<p> Dieser Tag bewirkt einen PARAGRAPH/ABSATZ und wird automatisch erzeugt, wenn Sie im Editor die RETURN-Taste verwenden.
<br/> Dieser Tag bewirkt einen BREAK/UMBRUCH. In vielen Editoren entstehen BREAKS automatisch durch Verwendung der Tastenkombination SHIFT+RETURN. <br/> ist - wenn überhaupt - ausschließlich am Satzende einzusetzen, da Texte aus Gründen der Responsivität im Fließformat erstellt werden müssen. Bei unterschiedlichen Browsern und Geräten können Sie nie wissen, wo der Umbruch stattfinden wird!
<h1> bis <h6> Zeichnen Sie Überschriften immer(!) mit den entsprechenden Formaten/Blöcken aus" Außer für die Optik sind diese Strukturangaben auch für Suchmaschinen und für die Barrierearmut relevant. Die Strukturierung der Überschriften-Formate muss logisch sein, keine Hierarchiestufe darf ausgelassen werden. Die Überschrift 1 sollte nur einmal pro Seite vergeben sein, sie wird normalerweise bereits durch den Titel der Seite beansprucht! Mehrere Überschriften pro Seiten dürfen textlich nicht identisch sein.
<ol>, <ul> Für Aufzählungen sind immer(!) Listen (sortierte und unsortierte) zu verwenden.
<a href> Zur Erstellung von Links
Tabellen - Seit es CSS gibt, sollten Tabellen ausschließlich für tabellarische Daten und nicht mehr zum Layouting verwendet werden (da zu viel Code, schwer responsiv gestaltbar und problematisch bzgl. Barrierearmut).
Folgende HTML-Tags sind für RedakteurInnen obsolet, d. h. sie stehen bestenfalls gar nicht zur Verfügung bzw. sollten nicht verwendet werden:
- font-family und font-size (wird vom Theme/Template) vorgegeben.
- Das Icon für UNTERSTREICHEN sollte ebenfalls im Editor fehlen, da ausschließlich Links bei Maus-Over (automatisch) unterstrichen werden.
Hinweis: Aktuell gelten folgende Techniken zur Website-Gestaltung als veraltet unsicher oder benutzerunfreundlich und sollten unbedingt vermieden werden:
- Frames: Auch wenn Frames zu Beginn des Internet-Zeitalters eine einfache und intelligente Lösung zur Gestaltung und den Aufbau von Websites war, sollten Frames heute nicht mehr verwendet werden, weil insbesondere Suchmaschinen Websites mit Frames schlecht oder gar nicht ranken und sich Frames auch nicht gut für eine barrierearme Gestaltung von Websites eignen.
- Folgende HTML-Tags sollten vermieden werden, da sie entweder veraltet (d. h. nicht mehr unterstützt) oder überflüssig sind bzw. durch semantisch passendere Tags ersetzt wurden: acronym, applet, basefont, b, big, blink, center, dir, font, frame, frameset, noframes, marquee, nobr, i, isindex, listing, plaintext, s, small, tt, u, strike, xmp.