Frontend-Templates (HTML, CSS)

Neben den serverseitigen Funktionen, um Inhalte aus der Persistenzschicht zu holen, und ein paar Bild- und Schriftartendateien besteht unsere im Bau befindliche STURM-Webanwendung auch aus klassischem HTML (Seitenauszeichnung), CSS (Gestaltung) und JavaScript (Interaktion). Letzteres wird erst im Folgekapitel ergänzt.

In diesem Kapitel ergänzen wir HTML- und CSS-Dateien, wobei wir diese nicht als statische Dateien ausliefern sondern auch mit Hilfe der serverseitigen Template Engine Twig in Vorlagen umwandeln. Mit deren Hilfe liefert die Webanwendung dynamisch beim Seitenabruf HTML-Inhalte als Response aus. Dabei müssen wir darauf achten, dass wir nicht nur ein Template pro Seitentyp benötigen, sondern beispielsweise auch ein übergeordnetes Template für das Grundlayout inklusive Navigation, da dieses auf jeder Seite gleich sein soll.

Zusätzlich setzen wir mit Hilfe von CSS das geplante Layout der Anwendung um. In der Praxis lassen sich HTML und CSS nicht ganz trennen, so dass wir uns zunächst genauer mit mit medienübergreifenden Gestaltungsprinzipien beschäftigen müssen. Kentnisse in diesem Bereich helfen nicht nur als Fachgrundlage für Designgespräche, sondern auch bei der eigenständigen Weiterentwicklung sobald sich Anforderungen verändern.

Gestaltung von Webanwendungen

Dieser Unterabschnitt wurde ursprünglich von Sarah Pittroff verfasst.

Webanwendungen sind Kommunikationskanäle, die sich mit einem spezifischen Inhalt an eine mehr oder weniger genau abgrenzbare Nutzer:innengruppe richten. Einen Inhalt an Menschen zu vermitteln bedeutet immer, in Kommunikation mit Ihnen zu treten. Wie der Inhalt vom Empfänger angenommen und rezipiert wird, hängt maßgeblich vom Inhalt ab, zu guten Teilen aber auch von seiner Darbietung. Man sollte sich vergegenwärtigen, dass es keine Nicht-Kommunikation gibt. Was auch immer wir veröffentlichen wird auch wahrgenommen werden. Über das Wie haben wir mit den Mitteln der Gestaltung großen Einfluss. Der Einfluss bleibt gleichgroß, auch wenn wir uns wenige Gedanken machen. Nur wird das Ergebnis nicht in unserem Sinne sein.

Für alle Überlegungen sind immer mehrere Faktoren von Bedeutung: Wie wird der Inhalt charakterisiert, der vermittelt werden soll? Handelt es sich um eine Edition von Schriftstücken aus dem 18. Jahrhundert oder wird eine Webanwendung im Bereich Virtual Reality (VR) geplant? Hiervon hängt sehr wahrscheinlich die vermutete Nutzer:innengruppe ab. Diese sollte man sich genau vor Augen führen. Welche Erwartungen werden sie an die Nutzung einer Anwendung oder einer Webseite haben? Welche Gewohnheiten haben sie in der Nutzung von Angeboten im ähnlichen Kontext? Es ist in den seltensten Fällen sinnvoll, Bedienungserfahrungen zu brechen.

Die meisten Nutzer:innen möchten sich nicht ausführlich mit der Technik oder der Machart eines Produkts auseinandersetzen, sondern dessen Inhalt erfahren. Müssen sie sich zu viele Gedanken über die Menüführung oder das Auffinden von Inhalten machen, stößt das in Regel auf Ablehnung.

Figur-Grund-Beziehung

Neben der wohlüberlegten Informationsarchitektur helfen gekonnt eingesetzte gestalterische Mittel, Inhalte zu strukturieren und erfolgreich zu kommunizieren. Gestaltung meint hier also nicht grenzenlose Kreativität. Gestaltung meint die richtigen Fragen an Gebiete der Kommunikation zu stellen und sie gut zu beantworten.

Wenn wir Elemente jedweder Art wahrnehmen, haben wir sie vorher als autonome Figur identifiziert. Alle Buchstaben, die Sie hier lesen können, sind einzelne Figuren, die sie erkennen, weil sie in einem farblichen Kontrast zu ihrem Untergrund stehen und Ihnen die Bedeutung der Figuren bekannt ist. Wir nehmen hier unmissverständlich die helle Farbe als Grund wahr und die schwarzen Zeichen als Figur. Die menschliche Wahrnehmung entschlüsselt fortwährend, welche Region eines Seheindrucks als Figur und welche als Grund gelten kann. Die Organisation dieser Elemente findet dabei nur bedingt im Bild statt, sondern wird durch unsere Wahrnehmung konstruiert. Sie kann also auch unglücklich verlaufen oder kippen, wenn die Figur im Bild nicht einwandfrei entschlüsselt werden kann.

Gestaltgesetze nach Max Wertheimer

Zurück zu den Buchstaben. Mehrere dieser Buchstaben-Figuren ergeben eine Wort-Figur. Haben wir schon sehr viel gelesen, sind uns einige Wörter so sehr vertraut, dass wir sie auch an ihrem Umriss erkennen können. Wir müssen die einzelnen Buchstaben gar nicht entziffern. Woher wissen wir aber, wo ein Wort beginnt und wo es aufhört?

1) Gesetz der Nähe

Elemente, die nahe beieinander stehen, werden als zusammengehörig wahrgenommen. Im Gegensatz dazu werden Elemente, zwischen denen eine gewisse Distanz liegt, als voneinander getrennt betrachtet.

2) Gesetz der Ähnlichkeit

Weisen Elemente Ähnlichkeiten auf, werden sie in der Wahrnehmung gruppiert, auch wenn sie sich nicht nahe oder sogar unähnliche Elemente näher sind.

3) Gesetz der Geschlossenheit

Schließt die Anordnung von Elementen einen Raum in sich ein, so wird diese Gruppe als eine Gestalt wahrgenommen. Werden Elemente durch eine Form von einer größeren Gestalt getrennt oder umschlossen, werden diese Elemente in der Wahrnehmung gruppiert. Diese Tatsache kann man sich vor allem dann zu nutze machen, wenn Nähe und Ähnlichkeit bei komplexen Informationsstrukturen nicht mehr als Gestaltungsprinzipien ausreichen (Trennlinien, Hinterlegung).

4) Gesetz der guten Gestalt

Die menschliche Wahrnehmung ist ökonomisch strukturiert. Sie bevorzugt das einfachere Angebot vor dem komplexen. Große, geometrische Flächen fallen schneller ins Auge, als Kleinteiliges. Wir sprechen von Prägnanz. Elemente werden in der Wahrnehmung zu möglichst einfachen Gestalten gruppiert. Schauen wir und beispielsweise die Webseite Lings Cars an, fällt die Wahrnehmung möglicherweise schwer.

5) Gesetz der guten Fortsetzung

Wiederholen sich Elemente in eine bestimmte Richtung oder an einer bestimmten Position, werden sie als zusammengehörig wahrgenommen. Auch wenn die Fortsetzung durch andere Elemente durchbrochen oder gekreuzt wird, werden die nach einer gewissen Regelmäßigkeit fortgesetzten Elemente als Gestalt wahrgenommen. Dieses Prinzip der fortgesetzten Gestalt kann beispielsweise bei Inhaltsangaben mit Hierarchie signalisierenden Einzügen beobachtet werden. Elemente auf der gleichen horizontalen Position werden als fortlaufende Gestalt identifiziert.

Raster

Bei der Gestaltung von Information sollten diese Gesetze der Gestalt immer dazu eingesetzt werden, zu möglichst klaren, eindeutigen Lösungen in der Organisation zu kommen. Visuelle Überfrachtung mit grafischen Mitteln führt zur Überforderung der Wahrnehmung, darunter leidet die Rezeption des Inhalts oder die Bedienbarkeit einer Anwendung.

Gleichzeitig sind wir schnell gelangweilt und verlieren das Interesse bei geringer Stimulation. Gute Gestaltung findet die Balance zwischen Einfachheit und ausreichender Komplexität. Um dies zu erreichen, ist es sehr empfehlenswert, ein Raster für die zu gestaltende Fläche zu erstellen. So können Regelmäßigkeit und Ordnung hergestellt werden. Es erlaubt dabei flexible Anordnungen, die Differenzierung und Hierarchisierung einzelner Elemente ermöglichen und das Betrachten oder Nutzen einer Seite oder Anwendung anregt. Abstände und Größen können normiert werden, Abweichungen können dabei gezielt eingesetzt werden, ohne dass das gesamte Gefüge in Unordnung verfällt.

Typographie

Der Bereich der typographischen Überlegungen erstreckt sich über die Wahl der Schriftart (Font) bis hin zur Gestaltung eines Schriftbildes innerhalb eines gegebenen Raums. Dabei verlangen beide Bereiche eigene Überlegungen im Vorfeld. Das folgende Schaubild zeigt Fachtermini zur Beschreibung von Charakteristika:

Es existiert eine unüberschaubar große Anzahl an Fonts, von digitalisierten Schriften, die ursprünglich zu Beginn der Neuzeit geschaffen wurden, bis hin zu brandaktuellen Schriftarten, die beispielsweise für optimierte Darstellungen am Monitor und mit variabler Dicke entworfen wurden.

Wir beobachten aber auch große Unterschiede in der Qualität der Fonts, die gerade im Bereich der Webanwendung von großer Bedeutung ist. Hier habe ich als Entwickler:in wenig Einfluss auf die Ausgabe der Schrift an den zahlreichen Geräten und Bildschirmen. Umso wichtiger ist es, einen gut gebauten Schriftsatz zu wählen, der ein gleichmäßiges Schriftbild im Fließtext ergibt. Unregelmäßig große Lücken zwischen dem Buchstaben etwa, ein unsauberes Kerning, hinterlässt beim Lesen unbewusst den Eindruck einer zerzausten Frisur. Unter Umständen möchte man den Inhalt oder den Absender des Textes dann nicht so recht ernst nehmen.

Schriftform und -stil

Die Fülle an Schriften kann man grob in vier unterschiedliche Formen unterteilen, die jeweils unterschiedliche Stile aufweisen:

• Antiqua (Serif): eine Schrift mit Serifen. Berühmteste Vertreterin: Times New Roman, Georgia
• Grotesk (Sans Serif): eine Schrift ohne Serifen. Berühmteste Vertreterin: Arial, Helvetica
• Monospaced: einer Schrift, in der alle Buchstabe die gleiche Breite aufweisen. Berühmteste Vertreterin: Lucida Console
• Schreibschrift (Handwriting): wie der Name schon sagt. Traurige Berühmtheit: Zapfino

Der Stil differenziert innerhalb der Form unterschiedliche Erscheinungen.

• Dynamisch: horizontale Ausrichtung der Buchstaben, gute Zeilenführung, bewegtes Schriftbild
• Statisch: vertikale Ausrichtung, angeglichene Proportionen, geschlossener Gesamteindruck
• Geometrisch: geometrisch konstruierte Formen, moderner/technischer Ausdruck
• Dekorativ (Display): Formen, die sich aus allen stilistischen Ansätzen speisen, auffallend, anregend

Die Bembo ist also eine dynamische Antiqua (Serif), die Arial eine statische Grotesk (Sans Serif).

Wichtig für die richtige Wahl einer Schrift ist die Frage: Was verknüpfen wir mit der Schriftart? Eine geometrische Sans Serif wie die Futura wurde in den 1920er Jahren als absolut avantgardistische Type entworfen und dient heute dazu, einen Retro-Charme zu transportieren. Serifenschriften haben einen konservativen, literarischen Charakter. Sie galten lange Zeit in ihrer Lesbarkeit unübertroffen. Heute hat sich das Auge, Arial sei Dank, an die moderneren Sans Serif gewöhnt. Lange Artikel im Netz sind heute meist in solchen Schriften zu finden.

Außergewöhnliche Schriftformen wie die Monospaced werden gedanklich immer an die Schreibmaschine gebunden bleiben, von der sie abgeleitet wurden. Hinzugekommen ist die Bedeutung als Darstellung von Konsolenbefehlen oder Code.

Schriftgröße

Welche Größe verwendet wird, hängt ganz von Inhalt, Ausgabegerät und Anlass ab. Wichtig ist an dieser Stelle weniger der Hinweis auf die absolute Größe einer Schrift, sondern auf die Relationen zwischen verschiedenen Schriftbereichen.

Der Fließtext ist maßgeblich für den Ausgangpunkt der Überlegung. Ist er gut lesbar, muss die Headline (h1) deutlich größer sein, dabei im Verhältnis harmonisch bleiben. Zwischenüberschriften (h2, h3) können auch die gleiche Größe besitzen und durch unterschiedliche Dicken ausgezeichnet werden.

Oberste Prämissen sind einerseits die Deutlichkeit der Unterscheidung zwischen Überschrift und Fließtext sowie zwischen unterschiedlichen Arten der Überschriften. Daher ist auch eine zu große Anzahl an Zwischenüberschriften ungünstig. Andererseits gilt in der Webentwicklung die Faustregel, Schriftgrößen möglichst aufeinander aufzubauen, z.B. durch Nutzung der Einheit rem, die sich auf die Standardschriftgröße im Root-Element eines CSS-Stils bezieht. Diese Schriftgröße wiederum sollte möglichst mit der Einheit em variabel zur von Nutzer:innen eingestellten Schriftgröße festgelegt werden. Auf diese Weise wird die Schrift automatisch größer angezeigt wenn Nutzer:innen dies so eingestellt haben, z.B. um entspannter (oder überhaupt) lesen zu können.

Zeilenlänge und -höhe

Eine gute Lesbarkeit hängt unter anderem von der richtigen Zeilenlänge ab. Sie steht in Zusammenhang mit der Schriftgröße. Ist die Zeile zu lang, verpasst das Auge beim Lesen den Anschluss an die nächste Zeile und verrutscht. Ist die Zeile zu kurz, müssen zu viele Zeilensprünge für zu wenig Information gemacht werden, das Lesen wird unangenehm oft unterbrochen und dadurch anstrengend. Eine Faustregel besagt, dass 60 Zeichen pro Zeile gut seien. Doch auch hier ist Fingerspitzengefühl gefragt.

Auch der Abstand zwischen den Zeilen sollte bedacht werden. Unterschiedliche Zeilenabstände können auch zur Unterscheidung von Textelementen, wie etwa Passagen von Zitaten innerhalb eines Fließtextes dienen. Im Sinne der Barrierearmut wird eine Zeilenhöhe von ca. 1,5 Zeilen empfohlen.

Schriftmischung

Um ein interessantes, zum Lesen anregendes Schriftbild zu generieren oder etwa vollkommen unterschiedliche Arten an Informationen voneinander abzugrenzen, ist es sinnvoll, unterschiedliche Arten oder Formen an Schriften zu verwenden. Hier sind zwei Aspekte gleichermaßen wichtig. Zum einen die Harmonie zwischen den Schriftarten: Auch wenn ein starker Kontrast zwischen den Schriftformen erwünscht ist, sollte das Schriftbild miteinander harmonieren. Auf diese Weise erhält man einen gelungenen Gesamteindruck, der durch Details Spannung erzeugt. Zum anderen soll ein wahrnehmbarer Unterschied zwischen den Schriftarten bestehen. Liegen die Schriftarten zu nahe beieinander, z.B. Arial und Myriad, kann das Auge keine Unterscheidung auf den ersten Blick vornehmen und vermutet stattdessen eine fehlerhafte Darstellung. Auch bei Schriftenmischung der gleichen Schriftart in unterschiedlichen Schnitten sollte auf deutliche Unterscheidbarkeit geachtet werden.

Satz

Der Satz bestimmt das Schriftbild von Fließtexten. Er wirkt sich auf das Lesen des Textes aus. Lesegewohnheiten spielen eine wichtige Rolle. Wir unterscheiden zwischen Blocksatz und Flattersatz. Die Entscheidung zwischen diesen beiden ist eine funktionale, erst in zweiter Linie eine ästhetische. Gute Worttrennung (hyphenation) ist gerade für die deutsche Sprache mit ihren sehr langen Worten für beide Satzarten wichtig.

Der Blocksatz, bei dem jede Zeile des Absatzes (mit Ausnahme der letzten) gleich lang ist, ist seit der Erfindung des Buchdrucks Standard in der Lesetypographie. Diese Gleichmäßigkeit macht ihn mühelos zu lesen. Dies kann aber durch zu große Wortabstände gestört werden. Der Wortabstand muss kleiner sein als der Zeilenabstand. Gibt es hier Probleme, muss für mehr Worttrennungen gesorgt werden. Mehrspaltige Satzspiegel (Beispiel: Zeitung) profitieren wegen der Eindeutigkeit vom Blocksatz. Im Browser hängt die Fähigkeit zur Worttrennung per CSS (hyphens: auto) allerdings maßgeblich von den dort installierten Sprachen ab.

Einspaltige Layouts (Beispiel: Wikipedia) sind oft leichter im Flattersatz zu handhaben: Der Flattersatz erzeugt durch gleichmäßige Wortabstände ggf. ein ruhigeres Schriftbild. Ein schlechter Zeilenumbruch stört hier aber den Lesefluss viel stärker, als beim Blocksatz. In einem sehr guten Flattersatz wechseln sich kürzere und längere Zeilen rhythmisch ab. Der Unterschied in der Länge der Zeilen darf nicht zu groß und nicht zu klein sein. Diese gute Maß hängt wieder von der Zeilenlänge, der Schriftgröße und der Umgebung des Textes ab.

Gliedern und Auszeichnen

Es versteht sich von selbst, dass die gestalterische Auszeichnung stets der semantischen folgen muss. Eine Überschrift und ein Absatz sollten beispielsweise klar als entsprechende Textblöcke markiert werden. Zusätzlich gibt es auch Gliederungsmöglichkeiten innerhalb einer Textzeile, z.B. fett, kursiv oder VERSALIEN. Diese Auszeichnungen strukturieren den Text im Detail und können einzelne Wörter und Sätze hervorheben.

Ferner kennen wir Unterstreichung (je fetter, desto lauter), Farbe und farbige Unterlegung. Auch hier müssen wir beachten, dass Lesegewohnheiten (unterstrichene Wörter = Links) gewisse Erwartungen mit sich bringen, die wir – wenn überhaupt – nur bewusst brechen sollten.

Farbe

Farbe ist eine Sinneswahrnehmung. Sie wird hervorgerufen durch Lichtstrahlen, die in unserem Auge die Rezeptoren für Kontrast (Stäbchen) und Farbe (Zapfen) reizen. Die Zapfen sind empfindlich für Lichtwellen unterschiedlicher Länge. Das menschliche Augen nimmt Farben mit drei Zapfensorten wahr: Rot, Grün und Blau. Dies sind die drei Grundfarben. Aus der Mischung dieser drei Farben und ihren unterschiedlichen Sättigungs- und Helligkeitswerten kann das menschliche Gehirn etwa 20 Millionen unterschiedliche Farbtöne berechnen.

Die Menge dieser Farben wird im Farbraum definiert. Der Farbraum menschlicher Wahrnehmung unterscheidet sich von dem technischer Geräte. Um den Umfang menschlicher Farbwahrnehmung zu beschreiben, nutzt man den Farbraum „CIE-L*a*b*“: Die Commission Internationale d’Éclairage (CIE, die Internationale Beleuchtungskommission) definiert eine Farbe nach Helligkeitswert (Luminanz), einem Farbwert zwischen den Komplementärfarben Rot und Grün (Wert a) und einem Farbwert zwischen den Komplementärfarben Gelb und Blau (Wert b).

Farbdarstellung

Die additive Farbmischung beschreibt die Zusammensetzung aller Farben, die durch die Lichtfarben Rot, Grün und Blau gemischt werden. Dies sind die reinen Farbelemente des Lichts, die das menschliche Auge durch entsprechende Zapfen wahrnehmen kann. Alle Farben zusammen ergeben weißes Licht. Seine einzelnen Farbanteile werden durch Lichtbrechung, zum Beispiel durch ein Prisma, sichtbar.

Um diese Lichtfarben durch technische Geräte darstellbar zu machen, abstrahiert man sie häufig in den RGB-Farbraum. Hier wird ein Wert von 0 bis 255 (insgesamt also 256 verschiedene Werte) für jede der drei Primärfarben ermittelt. Reines Rot hat demnach den Wert R=255 / G=0 / G=0. In einem 8-bit-System können so theoretisch über 16 Millionen Farben errechnet werden. Der in der Theorie existierende Farbraum aller durch das menschliche Auge erfassbaren Farben ist wesentlich größer als der, der durch technische Geräte aufgenommen oder wiedergegeben werden kann. So entwickelten sich viele unterschiedliche, auf ihre Anwendung hin spezifizierten RGB-Farbräume, die untereinander nicht immer problemlos und bei Umrechnungen verlustfrei kompatibel sind.

Die Menge aller Farben, die ein Gerät aufnehmen oder ausgeben kann, wird Gamut genannt. Der Gamut wird häufig in einem Koordinatensystem dargestellt, in dem man anschaulich die Differenzen der unterschiedlichen Farbräume darstellen kann. Die folgende Abbildung zeigt den Unterschied zwischen der theoretisch wahrnehmbaren Menge an Farben und der im Standard-RGB-Farbraum (sRGB) darstellbaren Farben:

Eine weitere Abstraktion ist der HSL-Farbraum. Er definiert Farben über die Koordinaten in einem dreidimensional imaginierten Farbraum. Der Farbwert (Hue) wird in einem Winkel mit der Benennung einer Gradzahl angegeben. Sättigung (Saturation), von innen nach außen zunehmend wird ebenso wie die Helligkeit (Lightning) der Farbe in Prozent angegeben.

Neben der additiven Farbmischung der Lichtfarben sprechen wir bei den physischen Farben von der subtraktiven Farbmischung, die im CMYK-Farbmodell wiedergegeben wird. Beide Farbräume können über den CIE L*a*b*-Farbraum aufeinander gemappt werden. Allerdings können die farblichen Entsprechungen aufgrund der unterschiedlichen Natur der Farben nur Annäherungen sein.

Probleme der Farbdarstellung

Die Ausgabe farbiger Bilder auf Bildschirmen unterliegt großen Unsicherheiten. Jedes Ausgabegerät stellt Farben anders dar, teilweise sogar mit einem deutlich wahrnehmbaren Farbstich. Das gleiche gilt für den Helligkeitskontrast, was sich vor allem bei gering voneinander abweichenden Graustufen bemerkbar macht.

Zu der Zeit, in der Bildschirme und Grafikkarten nur einen Bruchteil der heute möglichen Farben darstellen konnten, gab es daher die Empfehlung, auf die Palette der sogenannten „websichere Farben“ zurückzugreifen. Sie wurde aus nur sechs unterschiedlichen Tönungen der Grundfarben entwickelt und umfasste so nur 216 Farben, die dafür aber sicher angezeigt werde konnten. Heute sind sehen wir 256 Farbtönungen pro Grundfarbe und erhalten so 16,7 Mio. Farben. Und ebenso viele abweichende Darstellungen davon.

Daher empfiehlt es sich, Farben und Kontraste immer auf sehr unterschiedlichen Ausgabegeräten zu testen, um ihre Darstellung zu beurteilen.

Farbwirkung

Warum verwenden wir Farbe überhaupt in der Kommunikation? Die Antwort liegt in der starken Wirkung, die sie auf unsere Wahrnehmung hat. Farbe erzeugt Aufmerksamkeit. Dabei spielt die sehr unterschiedliche Wirkung der verschiedenen Farben eine große Rolle. Denn es ist nicht gleichgültig, welche Farbe verwendet wird. Außerdem kann eine spezifische Farbverwendung identitätsbildend sein und einen starken Wiedererkennungswert haben.

Farbe ist Emotionsträger. Dabei ist nicht nur das eigene Empfinden von Bedeutung sondern auch die Zuschreibung. Auf der einen Seite fühlen wir uns wohl oder unwohl, wenn wir gewisse Farben sehen, werden angeregt oder gedämpft. Auf der anderen Seite machen wir unterschiedliche Annahmen über eine Information, je nachdem mit welcher Farbe sie übermittelt wird.

Farbe oder Farbkombinationen können, wenn sie raffiniert eingesetzt werden, den visuellen Kern einer Marke bilden:

Aufmerksamkeit und Kontrast

Objekte und Typographie, die farbig hervorgehoben sind, werden auf diese Weise ausgezeichnet. Eine Farbgebung signalisiert: Ich bin ein Bedeutungsträger. Diese Farbwirkungen basieren nicht nur auf der Wahl der Farbe sondern mitunter auch auf ihrer Kombination. Unterscheiden wir mehrere Farbeindrücke, dann geschieht das aufgrund eines größeren oder kleineren Kontrastes zwischen den Farben.

Hell-Dunkel-Kontrast: Der stärkste solche Kontrast liegt zwischen Weiß und Schwarz. Ein hoher Kontrast erlaubt scharfe Abgrenzung, kann in der Lesetypographie zum Beispiel auch ermüdend wirken.

Warm-Kalt-Kontrast: Farben aus dem gelben Spektrum werden als warm und nah während solche aus dem blauen Spektrum als kalt und fern empfunden werden.

Qualitätskontrast: Hiermit ist die Sättigung einer Farbe gemeint. Eine Farbe in mehreren Schattierungen zu nutzen hebt die Zusammengehörigkeit der Elemente hervor.

Quantitätskontrast: Bei der Verwendung von zwei oder mehreren Farben spielt nicht nur Farbe als solche eine Rolle, sondern auch die mengenmäßige Verteilung der Farbflächen. Eine harmonische Wirkung wird erzielt, indem eine unaufdringliche Farbe in größerer Quantität, eine prägnante Farbe dagegen in geringeren Mengen eingesetzt wird.

Komplementärkontrast: Jede Farbe hat eine Komplementärfarbe, ihr farbliches Gegenteil. Für die Grundfarben Gelb, Blau und Rot sind das Lila, Orange und Grün. Dieser Kontrast kann die Leuchtkraft der Farben jeweils hervorheben. Dieses Phänomen eignet sich auch für sehr subtile Kontrastierungen durch Einfärbung gewisser Bereiche ohne gleich eine sehr bunte Wirkung zu erzielen.

Simultankontrast: Gerade in Kombination mit dem Quantitätskontrast sollte bedacht werden, dass die Farben einer Fläche, die von einer weiteren umschlossen ist in Wechselwirkung treten. So werden Tönung und Helligkeit beeinflusst. Das Auge sucht in der mengenmäßig untergeordneten Fläche die Komplementärfarbe der dominanten Fläche und so scheint diese Farbe eine abweichende Schattierung zu erhalten.

Farbwahl

Bevor man also für eine App oder eine Website mit Farben arbeitet, sollte man sich sehr genau im Klaren darüber sein, welche Wirkung die Farben erzielen und welche Aussage sie treffen sollen. Auch die Abwesenheit von Farbe hat im Übrigen eine ganz dezidierte Wirkung. Die Verwendung von Grautönen, Schwarz oder Weiß kann besonders klar und cool wirken, aber eben auch trist. Ob Farben miteinander harmonisch wirken oder aufreibend, kann jeder an sich oder Probanden im näheren Umfeld testen. Aus 16,2 Mio. Farben die richtige zu wählen kann aber sehr langwierig sein. Zum Glück gibt es gewisse Gesetze, von denen hier einige angesprochen wurden, die bereits in Algorithmen übersetzt sind. So finden sich im Netz hilfreiche Tools, die Anhaltspunkte zu Kombination von Farben geben:

• Adobe Color
• paletton

Bewegung und Interaktion

Im Bereich Webgestaltung gewinnen Bewegung und Interaktion an Bedeutung. Der Bereich User Experience (UX) behandelt die konkrete Erfahrung in der Interatktion mit einem Webprodukt oder einer App. Schon die Veränderung eines Buttons oder eines Links beim Hovern oder Klicken zählt hierzu. Moderne Produkte verfügen über ein ausgefeiltes Portfolio an Kommunikation über Bewegungen. Direkte kinetische Reaktion auf die Bedienung von Elementen ist für eine sichere Nutzerführung vor in der Anwendungsentwicklung zum Standard geworden. Hier stellen sich dann Fragen nach Geschwindigkeit, Richtung und Tiefe von Bewegungen in der Navigation. Außerdem sollten Nutzer:inneneinstellungen zur Reduktion von Bewegung unbedingt beachtet werden.

Wie in vielen Bereichen ist Google fortgeschritten in der Entwicklung und Bereitstellung von Standards. Vor allem die großen Anbieter der Mobile-Betriebssysteme iOS und Android setzen Maßstäbe, die nicht zuletzt der Distinktion dienen. Auch der Linux-Desktop Gnome hat eigene entsprechende Empfehlungen herausgegeben, an denen man sich orientieren kann.

• Gnome Human Interface Guidelines
• Google Material 3
• Apple Human Interface Guidelines

HyperText Markup Language

Die HyperText Markup Language (HTML) dient der semantischen Auszeichnung von Informationen. Während in alten Versionen des entsprechenden Standards auch Tags existierten, die ausschließlich zur Darstellung der Inhalte gedacht waren (bspw. <b>), so steht in der aktuellen Fassung die semantisch korrekte Auszeichnung dessen im Vordergrund, was dann auch per CSS visuell kommuniziert werden soll (bspw. <strong>). Gerade das semantisch recht leere <div> zur Definition von Abschnitten wird jedoch ab und zu rein als Grundlage für spätere CSS-Regeln benötigt.

In diesem Abschnitt lernen wir die wichtigsten HTML-Elemente kennen. Empfehlenswert für die weitere Beschäftigung und Praxis mit HTML sind folgende Referenzseiten:

• MDN, Getting started with HTML
• MDN, HTML Referenz
• caniuse.com
• Jens Oliver Meiert, HTML-Elemente (mit Link zur jeweiligen Spezifikation)
• HTML Tag Cheatsheet, WebsiteSetup.org
• Beginner’s HTML Cheatsheet, WebsiteSetup.org
• Mark Pilgrim, Dive Into HTML5

Grundlegende Syntax

HTML beschreibt die Umklammerung von Text mit Tags, die Abschnitte verschiedenster Art definieren. Nur eine begrenzte Anzahl an Tags darf auch einzeln, also ohne schließendes Tag, genutzt werden, weil kein „Textknoten“ dazwischen benötigt wird.

Folgende Tabelle bietet einen Kurzüberblick über die wichtigsten HTML-Elemente im Kopf einer HTML-Datei:

Folgende Tabelle bietet einen Kurzüberblick über die wichtigsten HTML-Elemente im Rumpf einer HTML-Datei:

Diese Tabellen stellen keine vollständige Zusammenstellung aller Elemente dar sondern bieten eine Grundlage für den Einstieg in HTML. Idealerweise werden die Elemente und die dahinterstehenden Konzepte memoriert. Durch eine kontinuierliche Praxis und die stete Konsultation entsprechender Referenzseiten können fortgeschrittene Techniken wie bspw. die Arbeit mit <canvas> erlernt werden.

Der HTML(5)-Standard

Die Standardisierung von HTML wird gegenwärtig von zwei Organisationen vorangetrieben: der WHATWG und dem W3C. Die WHATWG (Web Hypertext Application Technology Working Group) entstand im Jahr 2004. Sie wird von mehreren Organisationen und Firmen unterstützt, darunter die Mozilla Foundation, Opera, Apple und inzwischen auch Google. Sie ist im Vergleich zum W3C (World Wide Web Consortium), dem nach wie vor Tim Berners-Lee vorsteht, nicht anbieterunabhängig.

Als ein Hauptgrund für die Gründung der WHATWG wird häufig angegeben, dass viele Browserhersteller unzufrieden mit den langsamen Standardisierungsprozessen des W3C waren. Auch die Entscheidung des W3C, HTML durch einen XML-basierten Standard (XHTML) zu ersetzen, stießen seinerzeit auf Kritik. XHTML hat sich als Markup-Standard nicht durchsetzen können. Das W3C hat daher 2009 die Arbeit an der 2. Version von XHTML zugunsten von HTML5 eingestellt.

Der Vorschlag und die Basis für die Entwicklung einer neuen Version von HTML kam im Jahr 2007 von der WHATWG. Danach verlief die Zusammenarbeit zwischen W3C und WHATWG nicht reibungslos. Während die WHATWG der Ansicht war, dass HTML aufgrund der schnellen technologischen Entwicklung im Web ein „lebender Standard“ sein muss, der kontinierlich erweitert, revidiert und in der Praxis durch die Implementierung in den unterschiedlichen Webbrowsern vorangetrieben wird, verfuhr das W3C nach wie vor nach dem klassischen versionsgetriebenen Standardisierungsmodell.

Nachdem es also lange zwei Formen des neuen HTML-Standards gab, haben sich WHATWG und W3C 2019 geeinigt, dass der lebende Standard der WHATWG nun als einzig gültiges Dokument gilt.

HTML-Validierung

Im Vergleich zu Programmiersprachen wird HTML von Browsern fehlertolerant interpretiert. Webseiten können daher angezeigt werden, auch wenn sie HTML-Fehler enthalten. Historisch betrachtet hat diese Fehlertoleranz sehr zur Verbreitung von HTML und dem Web beigetragen. Dennoch ist aus Gründen der Qualität und Nachhaltigkeit gerade im Bereich von Webanwendungen fehlerfreies HTML-Markup wichtig. Fehlerhaftes HTML-Markup kann zudem zu schwer nachvollziehbarem Renderingverhalten in Webbrowsern und einem hohen Zeitaufwand bei der Fehlersuche in einer Webanwendung führen.

HTML-Markup sollte immer validiert werden. Dies beginnt schon bei der Arbeit im Texteditor oder der Entwicklungsumgebung. Alle nennenswerten HTML-Editoren verfügen über sogenannte Linter, die das HTML on-the-fly bei der Eingabe im Editor überprüfen.

Sowohl W3C als auch WHATWG bieten zudem Online-Validatoren an, mit denen eine Überprüfung des Markups möglich ist:

• W3C Markup Validation Service
• WHATWG HTML Conformance Checkers

Cascading Style Sheets

Wir benötigen Cascading Stylesheets (CSS) um die per HTML strukturierten Seiten zu gestalten. Neben der Syntax und der Verarbeitung im Browser müssen wir dabei auch wichtige Grundbegriffe wie Visual Formatting Model und Box Model erlernen. Anschließend widmen wir uns fortgeschritteneren Techniken wie die Anpassung von Layoutregeln für bestimmte Bildschirmgrößen.

Maßgeblich für die weitere Beschäftigung und Praxis mit CSS sind die folgenden Referenzseiten:

• MDN, Introduction to CSS
• MDN, CSS Referenz
• caniuse.com
• Jens Oliver Meiert, Übersicht aller CSS-Eigenschaften (mit Link zur jeweiligen Spezifikation)
• CSS Cheat Sheet, WebsiteSetup.org
• Beginner’s CSS Cheatsheet, WebsiteSetup.org
• Rachel Andrew, How To Learn CSS

Grundlegende Syntax

CSS besteht maßgeblich aus Selektoren für bestimmte HTML-Tags und dazu definierten Regeln. „Cascading“ steht dafür, dass sich einige Regeln vom äußersten bis zum tiefsten HTML-Element vererben. Wenn wir also im <html>- oder im <body>-Element eine Schriftart und -größe festlegen, werden diese Regeln auch für (fast) alle anderen Elemente gelten.

Folgende Tabelle bietet einen Kurzüberblick über die wichtigsten CSS-Konzepte:

Diese Tabelle stellt keine vollständige Zusammenstellung aller CSS Eigenschaften dar sondern bietet die Grundlagen für den Einstieg in CSS. Idealerweise werden die Elemente in dieser Tabelle und die dahinterstehenden Konzepte memoriert. Durch eine kontinuierliche Praxis und die stete Konsultation entsprechender Referenzseiten können fortgeschrittene Techniken wie bspw. flex, grid, transition oder animation erlernt werden.

Struktur einer CSS-Datei

In der aktuellen CSS-Entwicklung werden Selektoren und Regeln gerne im Sinne eines Baukastens als Atomic Design gruppiert. Dabei hangelt man sich von den kleinsten Einzelelementen (atoms) zu Beginn über deren Kombinationen (molecules) und kleine Seitenbereiche (organisms) bis hin zu Stilen für Seitenvorlagen (templates) und bei Bedarf Sonderregeln für ganze Seiten (pages).

Zu Beginn einer CSS-Datei werden jedoch oft einige Standardformatierungen überschrieben, damit man sie im Rest der Datei nicht mehr störend mit den selbst festgelegten Regeln interagieren. Auch Variablen sollten dennoch zu Beginn festgelegt werden, beispielsweise für Farben, die man immer wieder verwenden möchte:

html {
    --color-main: #ff8800;
}

h3 {
    color: var(--color-main);
}

Viele neuere CSS-Frameworks teilen die oft lange CSS-Datei in kleinere, leichter überschaubare Einzeldateien auf. Dafür unterstützen moderne Browser Befehle wie diesen zu Beginn einer CSS-Datei:

@import url('base.css');

Während man so Lesbarkeit und Übersicht fördern kann, verursachen solche Verschachtelungen aber auch zusätzliche Requests. Auf weniger potenten Servern kann dies zum langsameren Laden der Seiten führen. Aus diesem Grund sind auch CSS Post-Processors wie Sass gebräuchlich, mit denen quasi die fertige CSS-Datei aus kleinen Einzeldateien kompiliert werden muss bevor die darin festgelegten Regeln funktionieren und wie gewünscht ineinander greifen. Ein Nachteil ist jedoch der bei jeder Änderung zusätzlich nötige Zwischenschritt.

Layout-Konzepte in CSS

Innerhalb von CSS gelten einige übergreifende Layout-Konzepte, deren Kenntnis von grundlegender Bedeutung ist. Nachfolgende Passagen geben einen kurzen Überblick über diese Konzepte. Für die Praxis empfiehlt sich nach Bedarf ein genaues Studium der entsprechenden Artikel im Mozilla Developer Network.

Das Visual Formatting Model

Das Visual Formatting Model ist das übergreifende Layout-Modell von CSS. Bei der Formatierung einer Seite mit CSS werden für jedes Element im Dokument entweder keine, eine oder mehrere Boxen generiert. Diese Boxen wiederum folgen dem Box Model. Aus diesem Modell leiten sich die Dimensionen (defined, constrained oder not) und das Layout jeder Box ab: inline, inline-level, atomic inline-level oder block. Außerdem ergibt sich daraus die Positionierung jedes Elementes nach einem von drei Positionierungsschemata: im Fluß des Dokumentes (normal flow), umfließend (float) oder absolut positioniert (absolute).

Eine Box ist nicht vollständig gleichzusetzen mit einem Element. HTML-Elemente können mehrere Boxen erzeugen (zum Beispiel erzeugen Listenelemente eine Box für den Inhalt des Listenelements und eine weitere Box für die Gliederungszeichen). Ebenso sollten eine Box und ein Block nicht verwechselt werden. Faustregel: Elemente generieren Boxen. Boxen generieren Blöcke. Boxen sind entweder vom Typ inline (“Zeilenebene”) oder block (“Absatzebene”). Jede erzeugte Box eines HTML-Elementes lässt sich mit den dazu passenden CSS-Regeln formatieren.

Inline und Block Formatting Context

Elemente, die Boxen vom Typ block erzeugen (bspw. ein <p>), generieren blocks of content. Eine solche Box umschließt alle Boxen der Kindelemente des Elements, das die Box erzeugt hat. Block-Boxen nehmen am block formatting context teil. Das bedeutet unter anderem, dass vor und nach der Box bzw. dem Element ein Umbruch erfolgt (abhängig vom Positionierungsschema der Box).

Demgegenüber gilt für Elemente, die Boxen vom Typ inline erzeugen (bspw. ein <strong>), ein Zeilenkontext. Diese Elemente nehmen am inline formatting context teil. Das bedeutet unter anderem, dass Inline-Boxen bzw. -Elemente automatisch auf mehrere Zeilen(boxen) verteilt werden können.

Das Box Model

Beim Box Model handelt es sich um das grundlegende Layoutkonzept von CSS. Alle Boxen (inline wie block), die bei der Formatierung mittels CSS für ein Dokument erzeugt werden, entsprechen diesem Modell. Nach dem Zwiebelschalen-Prinzip besteht jede CSS-Box aus Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin).

Wichtig ist hierbei, dass sich die CSS Angaben für width und height (im Standardfall) immer auf den content-Bereich einer Box beziehen. Werte für padding, border und margin werden zur Höhe und Breite einer Box hinzuaddiert. Zu erwähnen ist noch die outline-Eigenschaft, die einen äußeren Rahmen um eine gegebene Box legt. Im Vergleich zur border-Eigenschaft spielt dieser Rahmen keine Rolle im Größenverhältnis der Box zu anderen sie umgebenden Boxen.

Containing Block

Größe und Position einer Box werden maßgeblich durch den containing block bestimmt, der die jeweilige Box enthält. Der containing block ist immer ein Element, das eine block-Box erzeugt hat. Dies muss jedoch nicht notwendigerweise ein Elternelement vom Typ block sein. Zum Beispiel können sich je nach Positionierungskontext einer Box unterschiedliche Szenarien ergeben. Es gelten folgende Regeln:

1. Im Normalfall wird der containing block durch die Größe der content box des am nächsten stehenden Elternelements bestimmt, das vom Typ block ist.
2. Bei absoluter Positionierung ist der containing block durch die Dimensionen der padding box des am nächsten stehenden Elternelements bestimmt, dessen position-Angabe nicht static ist.
3. Bei fixierter Positionierung ist der containing block der Viewport.

Der containing block ist beispielsweise relevant für die Kalkulation von width, height, padding, margin und offset von absolut positionierten Elementen, die Prozentangaben verwenden.

Stacking Context

Der stacking context wird im Rahmen von (absoluten) Positionierungen von CSS-Boxen relevant. Durch die Eigenschaft z-index wird eine Box in einer virtuellen, dreidimensionalen Repräsentation des Dokumentes auf eine bestimmte Ebene einsortiert. Diese Einsortierung entscheidet darüber, welche Boxen diese Box überlagert.

Gestaltungsraster

Gestaltungsraster dienen der Ordnung und Organisation von (grafischen) Elementen. Ihre Geschichte reicht zurück bis in die klösterlichen Schreibstuben des Mittelalters (zur richtigen Raumeinteilung für die Seiten einer Handschrift). Sie dienen der systematischen und logischen Aufteilung von Information mit dem Ziel, ein besseres Verständnis der dargebotenen Inhalte zu erreichen. Auch im Web sind Gestaltungsraster von Bedeutung, da sie die Rezipierbarkeit von Online-Inhalten vereinfachen. In den frühen Jahren des Web wurde mangels Alternativen häufig das <table>-Element für die Erzeugung von Gestaltungsrastern verwendet. Ein solcher Gebrauch war aus der Perspektive der Markup-Semantik problematisch.

Mit der Einführung von CSS um die Jahrtausendwende änderte sich diese Situation. Dennoch dauerte es einige Jahre, bis die Implementierung von CSS in den damaligen Browsern so weit fortgeschritten war, dass sich CSS-Layouts als echte Alternative zu tabellenbasierten Layouts etablieren konnten. Spätestens mit der Einführung des flexbox- und des grid- Moduls in CSS3 ist die Situation grundlegend anders: Damit lassen sich über CSS native Gestaltungsraster für eine gute Aufteilung von Inhalten erzeugen.

CSS-Frameworks

Insbesondere bei größeren Webprojekten, bei denen zahlreiche Entwickler:innen in verteilten Teams an der gleichen Codebasis arbeiten, werden gemeinsame Richtlinien und Verfahrensweisen notwendig. Doch nicht nur in Teams, auch in der Einzelprogrammierung ist der Aufbau von Komponentenbibliotheken, die über mehrere Projekte hinweg wiederverwendet werden können, sehr sinnvoll. Dies gilt (vielleicht sogar besonders) für die Arbeit mit CSS.

In den vergangenen 10 Jahren haben sich zahlreiche große und kleine CSS-Frameworks entwickelt, die in ein Projekt eingebunden werden können. Sie bringen je nach Umfang vorbereitete Gestaltungselemente von minimalen Gestaltungsrastern bis hin zu ausgefeilten UI-Komponenten mit. Entwicklerisch ermöglicht der Einsatz von CSS-Frameworks eine Fokussierung auf die Spezifika der jeweiligen Webanwendung, ohne Zeit mit den Grundlagen (wie bspw. dem Bau eines projektspezifischen Gestaltungsrasters) zu verbringen.

Der Einsatz von CSS-Frameworks hat aber auch Konsequenzen. So kann es (insbesondere bei der Verwendung von großen Frameworks, die viele Komponenten vorgeben) leicht passieren, dass eine Webanwendung ihren individuellen Charakter verliert. Auch werden durch den Einsatz eines Frameworks Abhängigkeiten von Drittbibliotheken erzeugt, die unter Umständen nicht weiter gepflegt oder unterstützt werden. Dieser Faktor wirkt sich bei Programmbibliotheken jedoch stärker aus als bei CSS-Bibliotheken, da Browser als Laufzeitumgebung für CSS auch ältere CSS-Techniken meist noch für Jahre unterstützen – sofern sich ein CSS-Framework an die CSS-Spezifikationen hält.

CSS-Frameworks unterscheiden sich vor allem in ihrem Umfang und Ziel. Generell kann in Reset Frameworks (zum Zurücksetzen der browsereigenen Default-Renderingstile), Lightweight bzw. Microframeworks (konzentrieren sich auf spezielle Aspekte wie bspw. ein Gestaltungsraster oder die Webtypographie) und General Purpose Frameworks (Multikomponentenframework mit Gestaltungsraster, GUI Komponenten und häufig auch noch zusätzlichen JavaScript-Funktionalitäten) unterschieden werden. Vor dem Einsatz eines CSS-Frameworks sollte der gestalterische Rahmen des Projektes genau analysiert werden. Es gilt die Faustregel: so wenig Framework wie möglich, soviel Framework wie nötig.

Folgende Zusammenstellung bietet einen guten Überblick über aktuelle CSS-Frameworks, wobei sich Tailwind CSS Schätzungen zufolge derzeit der größten Beliebtheit erfreut:

• troxler, Awesome CSS Frameworks

Responsive Gestaltung

Die STURM-Webanwendung soll für unsere User z.B. auch auf Smartphones und Tablets funktionieren. Dies kann man mit Hilfe von Media Queries erreichen, durch die wir mehrere CSS-Breakpoints für die optimale Ansicht auf Tablets und Smartphones ergänzen. Folgende Viewport-Größen sollen einen nicht festgelegten Richtwert dafür geben, an welchen Breakpoints oft CSS-Sonderregeln festgelegt werden:

• Große Bildschirmauflösung (Darstellung größer als 1250px)
• Kleinere Bildschirmauflösungen (Darstellung kleiner als 1024px)
• Kleine Bildschirmauflösungen (Darstellung kleiner als 900px; ab hier einspaltiges Layout)
• Mittelgroße mobile Ansicht (Darstellung kleiner als 600px; ab hier mobile Navigation)
• Ansicht für Smartphones (480px / Landscape und 320px / Portrait)

Bei solchen Sonderregeln findet man zwei verschiedene Ansätze. Vor einigen Jahren war es üblich, eine Seite für Laptops und größere Bildschirme zu schreiben und dann Sonderregeln für kleinere Varianten anzulegen. Nach dem Motto „mobile first“ findet man heute aber auch Stylesheets, die die mobile Ansicht zugrundelegen und dann Varianten für größere Bildschirme daraus ableiten.

Zum Testen der Bildschirmgrößen können die mobilen Ansichten der Firefox-Entwicklertools und deren Responsive Design Mode verwendet werden.