Die grundsätzlichen Elemente sollten passend gestaltet sein und auch für Laien eine saubere strukturierte Textgestaltung ermöglichen. Sie sollten nicht dazu verführen, unpassende Formate zu Gestaltungszwecken zu verwenden. Ebensowenig sollten sie eine barrierefreie und suchmaschinenfreundliche Verwendung erschweren, weil sie nicht hierarchisch verwendet werden können.

Eine Ausnahme können die wenig verwendeten Überschriften <h5> und <h6> bilden, die hierarchisch unter einem normalen Absatz liegen. Sie können als Bildunterschriften oder dgl verwendet werden.

Hinweis: Das nackte Template sollte keine Überschriften <h1> und <h2> enthalten. Auch Module sollten keine Überschriften über <h3> erzeugen, wenn nicht davon ausgegangen werden kann, dass der Modul-Output den wesentlichen Seiteninhalt erzeugt.

<h1>Basic Content Elements</h1>

Die Überschrift 1 sollte nur einmal pro Seite vorkommen.

<h2>Headline 2</h2>

Die Überschrift 2 sollte ebenfalls nur einmal pro Seite vorkommen, außer der Text ist sehr lang

<h3>Headline 3</h3>

Etwas normaler Text <p> (normal)

<h4>Headline 4</h4>

Etwas normaler Text <p> (normal)

<h5>Headline 5</h5>

<h6>Headline 6</h6>

Etwas Text (normal (div)). Dieser sollte genauso wie Absatz (normal) aussehen, aber weniger Abstand nach oben oder unten.

Absatz mit Stilen: This is bold <b>, and this is <strong>. Some italic words, and some with <em>. Und jetzt noch Links: A typical link, a link to an externalsite
Nicht vergessen werden sollte die class highlight, die von der Suche erzeugt wird.

  • Unordered List
  • beginnt mit einem Punkt
    • eine eingerückte Liste
    • also eine Liste in der Liste
  • und zurück
  1. Ordered List
  2. beginnt mit einer Zahl
    1. eine eingerückte Liste
    2. startet den Zähler neu
  3. und zurück

<blockquote>

wird für Zitate oder Kommentare verwendet und daher meist von solchen Modulen erzeugt. <blockquote> kann auch <headlines> enthalten, aber kein <div>

Eine Linie <hr/>


sollte mit etwas abstand nach oben und unten sein


In einem guten Template sollten alle Formular-Elemente gestylt sein. Die Gestaltung sollte nichts Überflüssiges enthalten oder gar die Elemente so verändern, dass sie unter Umständen unbenutzbar sind.

Wichtig ist auch, dass kleine Elemente auf dem Smartphone erreichbar sind. Wird box-sizing: border-box; verwendet, muss darauf geachtet werden, dass Module damit uU. unbearbeitbare Formularfelder erzeugen.

Form Elements

(in einer Layout-Tabelle)

das eine das andere
entweder oder

Nur Tabellen mit der class="table" dürfen gestaltet werden, keinesfalls alle Tabellen.

Tabellen

table.table:

Head1 Head 2 Head3
das 1 dies 1 dort 1
das 2 dies 2 dort 2
das 3 dies 3 dort 3

 

 

Responsive Classes

Used for show and hide elements by media queries

  .hideOnDesktops .hideOnTablets .hideOnMobiles
.hideOnDesktops
visible
visible
visible
.hideOnTablets
visible
visible
visible
.hideOnMobiles
visible
visible
visible

Responsive Picture Classes

pic2left / pic2right


pic3left / pic3right 


pic4left / pic4right


 

Link zu PDF

teaserbutton

Video: