Loading...
HTML & CSS Einführung für Designer:innen
Work in Progress

HTML & CSS Einführung für Designer:innen

Die Web-Grundprinzipien erfordern die Gestaltung neu zu denken. Dabei gilt es die Grundregeln von HTML & CSS, als modulares Baukasten-System kennenzulernen.

Alles ist im Fluss.

HTML fliesst. Merk dir das.

Text als Fluss

Die Grundstruktur

HTML ist das Textformat einer Webseite. Vom Inhalt wird alles abgeleitet. Die HTML-Elemente strukturieren diesen Inhalt.

Alles, was wir im FrontEnd sehen ist HTML, welches mit CSS, Javascript sowie Inhalten aus einem CMS angereichert werden kann.

Das World Wide Web diente zuallererst dem globalen Austausch von wissenschaftlichen Arbeiten, daher baut HTML auf der Struktur von wissenschaftliche Arbeiten auf.

Um zu verstehen, wie HTML funktioniert, beginnt man am besten bei einem einfachen Text. Haupttitel, Untertitel, Absätze, Referenzlinks und gelegentlich ein Bild. Die Auszeichnung, was ein Haupttitel oder Untertitel ist, referenziert 1:1 mit HTML. Denn Auszeichnungen heisst auf Englisch Markup.

Schreibt man an einem Text. Reihen sich Buchstaben an Buchstaben. Titel verdrängen den Inhalt auf der ganzen Linie und machen einen Absatz. Überarbeitet man den Text zu Oberst, rutscht der gesamte Inhalt automatisch nach unten. Er fliesst.

Was banal tönt, ist ein fundamentaler Unterschied zu klassischen Layoutprogrammen, welche Elemente absolut platzieren.

HTML Dokument

Hyper Text Markup Language

Es gibt zwei grundsätzliche Teile eines HTML-Dokumentes. Den Head sowie den Body. Beide haben ihre Funktion.

Head

Alle Elemente im Head sind nicht direkt sichtbar. Sie dienen der Webseiten-Logik, dem Browser sowie den Suchmaschinen. Zudem werden dort File-Verknüpfungen zu CSS, Javascript und Fonts etc. abgespeichert.

Body

Alles, was im Body steht, ist sichtbar. Es ist der visuelle Inhalt. Die ästhetische Arbeit fliesst fast ausschliesslich in den Body.

Syntax

Ein Browser liest das HTML-File von oben links nach unten rechts. Kann er etwas nicht lesen, blockiert dies den Ladeprozess. Schreibfehler im Code (ein Syntax-Error) verunmöglichen das Laden einer Webseite.

Das HTML-Element

Der Grundbaustein

HTML strukturiert Texte mit HTML-Elementen. Ein HTML-Element besteht aus zwei Tags. Einem Opening-Tag und einem Closing-Tag.

Dazwischen ist der sichtbare Inhalt. Im Opening-Tag können weitere Attribute zu diesem Element definiert werden.

HTML-Elemente sind klar definiert

Sie definieren, was für eine Titel-Hierarchie ein Titel hat oder ob es ein Link, ein Bild oder eine Tabelle ist. Jedes Element hat eine klare Aufgabe.

Diese Strukturierung wird genutzt, um CSS anzuknüpfen oder mit Javascript zu interagieren. Zudem hilft es Suchmaschinen, die Inhalte der Webseite in der richtigen Hierarchie zu lesen.

Hyper steht für die Möglichkeit der Verlinkung. Links sind die Essenz, woraus das Internet gemacht ist.

Häufige HTML-Elemente

Wie Voci büffeln

Es gibt gewisse HTML-Elemente, denen wir immer wieder begegnen. Die aller häufigsten hier.

Sie zu kennen hilft, sich im Dschungel zurechtzufinden:

H1-H6

Die Titel-Hierarchie in 6 Stufen von Heading 1 bis Heading 6. H1 ist der grösste Titel.

P

P wie Paragraph oder Absatz. So wird der Body-Text in Absätze unterteilt. Oft wird er mit dem Styling des Lauftexts gleichgesetzt. Im Grunde ist dies nicht korrekt, da er nur die Absätze innerhalb des Textes definiert. Standardmässig ist das Body-Text-Styling, das Lauftext-Styling.

Div

Ein Division (div) ist eine Einheit. Dieses Element unterstützt das Layout, in dem es gruppiert. Es wird ständig eingesetzt, um andere Elemente zu verschachteln. Es gibt semantische Ersatz-Elemente, die präziser sind. Erfahre warum

a

Der a-Tag definiert einen Hyperlink. Er benötigt dazu das href Attribute, um dessen URL mitzugeben.

HTML Attribute

Zusätze für ein HTML-Element

HTML Attribute kommen immer in den Opening-Tag des HTML-Elementes. Sie unterstützen die HTML-Elemente mit wertvollen spezifischen Angaben zum Element.

Design relevante Attribute

Gewisse Attribute sind nur für spezifische HTML-Elemente gedacht, andere sind generell. Hier die häufigsten Attribute, die wir für die Gestaltung benötigen.

class

Klassen ermöglichen ein freies Gruppieren von Elementen. Unabhängig zum HTML-Tag selbst. Ideal für das CSS Styling.

href

Die Hyperlink-Reference. Also die Link-URL für dieses HTML-Element.

src

Die Source (Quelle) und referenziert eine File-URL eines Bildes. Dies ermöglicht zudem, dass ein Bild ein Link haben kann, indem der <img> HTML Element zwei Attribute (href und src) hat.

id

Pro Seite sollte jede ID nur einmal vorkommen, damit dieses Element gezielt angesprochen werden kann. Ideal für spezifische Javascript Interaktionen oder Ankerlinks.

Selektoren

HTML trifft auf CSS

HTML und CSS werden durch Selektoren verbunden. Es gibt verschiedene Selektoren, die zu unterschiedlichen Momenten oder Kombinationen die Gestaltung beeinflussen.

HTML-Element

Das HTML-Element selbst ist der dominanteste Selektor, da es der «Parent» der Selektoren ist. HTML-Elemente sind klar definiert.

Class (HTML-Attribute)

Klassen bringen mehr Logik & Verständnis in die Struktur. Meistens werden Klassen für die Gestaltung genommen. Klassen können frei benannt werden. Im CSS durch einen Punkt (.class) vornedran spezifiziert.

ID (HTML-Attribute)

Eine ID wird benutzt, um ein einziges Element eines HTML-Files zu definieren. Der Name ist frei definierbar. Im CSS mit einer Raute (#id-name) vornedran spezifiziert.

States (Pseudo-Class)

Alle States (Zustände) eines Elementes können separat im CSS gestaltet werden. Hover, Pressed, Focus, Visited, etc. Sie werden als Pseudoklassen bezeichnet. Pseudo, weil sie immer in Kombination mit einem Selektor stehen. Pseudoklassen sind klar definiert.

Verbinden wir nun die Struktur des HTML mit der Gestaltung.

Lernen wir CSS kennen.

CSS

Cascading Style Sheet

CSS ist für das visuelle Styling einer Webseite zuständig. Dabei werden die HTML-Elemente im CSS gestylt.

Der Selektor verbindet das CSS mit dem HTML und weist so die Gestaltungsdeklarationen (Properity + Value) eines CSS Rule-Sets einem HTML-Element zu.

Es können beliebig viele Gestaltungsdeklarationen (1, 2, N) einem Selektor zugewiesen werden. Die Gestaltungsdeklarationen sind klar definiert.

All diese «Rule-Sets» werden in einem «Stylesheet» zusammengefasst und beim Laden einer HTML-Seite eingespeist.

Repetitive Designfreiheit

Die Kraft von CSS

Webseiten sind modular aufgebaut und repetieren oft ihre Layout-Komponenten. Dies dient der Design-Konsistenz sowie einem schlanken Code.

Ein CSS Rule-Set wird somit an diversen Orten wiederverwendet. Damit dies sauber funktioniert, nutzt man die verschiedenen Selektoren, um die Zuweisung modular zu halten.

Beispielsweise werden viele Div-Elemente im HTML gesetzt, aber komplett unterschiedlich gestaltet, weil sie eine andere Klasse als Attribut haben. Man würde die Gestaltung enorm einschränken, wenn man statt der class direkt ein div mit Gestaltungsdeklarationen bestückt.

Die Gestaltungsdeklarationen werden überall mitgegeben, wo diese Klasse gesetzt wurde. Egal, ob dieses Rule-Set für ein h1 oder ein div angedacht war. Dies ist ein Unterschied zu den Absatzformaten, die wir aus InDesign kennen.

Die limitierte Anzahl HTML-Elemente gepaart mit der unendlichen Anzahl an Klassen und IDs, ermöglichen maximale Designfreiheit mit einer optimalen Repetition.

Selektoren Pakete

Baukasten-System

Diese Selektoren können kombiniert werden, um möglichst präzise «Rule-Sets» zu deklarieren.

So kann im CSS unterschiedliche Styles zu unterschiedlichen Kombinationen von Selektor-Pakete definiert werden.

Einem Baukasten System gleich, können nun die HTML-Elemente mit Klassen, Pseudo-Klassen (States) oder IDs kombiniert werden.

Diese Selektoren werden im HTML unter dem class Attribute kombiniert (class = "teaser-box hero specialbox"). Aber auch im CSS selbst können Bedingungen geschaffen werden, unter welchen Umständen, welches Rule-Set zum Einsatz kommt.

Selector Combinations

Verschiedene Optionen

Es gibt verschiedene Optionen, wie man Selektoren miteinander kombiniert, respektive unter welchen Umständen ein Rule-Set zum Einsatz kommt.

Die Möglichkeiten, wie CSS Selektoren kombiniert werden können, sind sehr breit. Wer mit CSS arbeitet, der tut sich gut, gewisse Kombinationen zu kennen. Beispielsweise kann man auch :not Selektoren nutzen, um gewisse Kombinationen auszuschliessen.

Im Bild werden vier Möglichkeiten gezeigt. Es sind alles Beispiele, die auch anders kombiniert werden können.

Nested Selector

Mit einem Leerschlag, werden Selektoren verschachtelt miteinander kombiniert. Beispielsweise: Wähle alle ::hover (State) innerhalb .titel-500 (Class) innerhalb einer h2 (HTML-Element) aus.

Packet Selector

Mit einem Komma trennt man verschiedenen Selektoren voneinander ab, die aber alle das gleiche Rule-Set erhalten sollen.

Child Selector

Mit einem Bracket > (rechte eckige Klammer) wird ein Rule-Set nur für Child-Elemente eines definierten Parents definiert.

Sibling Selector

Mit einem Plus-Zeichen + werden Elemente angesprochen, die auf gleicher Stufe stehen. Siblings = Geschwister.

Die elementarste Gestaltungsregel für HTML und CSS: Cascading

Einem Wasserfall (Kaskade) gleich, werden Gestaltungsdeklarationen gemäss der Verschachtelung des HTML sowie des CSS vererbt. Daher heisst es auch CSS.

Verschachteln

Einzüge im Code

Einzelne HTML-Elemente werden zu Komponenten von Modulen verschachtelt. Diese Verschachtelung (Nesting) wird auch mit Parent- und Child-Element bezeichnet und steht in einer hierarchischen Abhängigkeit.

Damit die Verschachtelung und die dadurch entstandene Abhängigkeit von Elementen während des Programmierens besser zu erfassen, werden diese Verschachtelungen im Code jeweils eingerückt. HTML-Elemente können unendlich oft ineinander verschachtelt werden.

Dabei gibt es HTML-Elemente, welche sich vorzugsweise um das Layout kümmern. Der Div-Tag oder semantische HTML-Tags beispielsweise.

Diese Verschachtelung definiert die gestalterische Vererbungslogik.

Vererbung

Vielseitig anwendbar

Das Verschachteln im HTML baut ein Parent-Child Prinzip auf. Eltern haben Kinder und Kindeskinder. Soweit klar.

Das Vererbungsprinzip

Der Clou an diesem Parent-Child Prinzip ist die Vererbungslogik. Gestaltungsdeklarationen, die einem Parent mitgegeben wurden, gelten auch für dessen Kinder und Kindes-Kinder. Ausser, dieser Wert wird überschrieben.

Das Parent-Child Prinzip und die Vererbungslogik gilt auch für die Attribute eines HTML-Elementes.

© Webdesign Essentials
6

Spezifität

Aus Design-Sicht spielen die globalen Vererbungsprinzipien eine tragende Rolle für ein konsistentes Design. Für Front-Ender:innen ist es wichtiger zu wissen, welche «specificity» ein bestimmtes Element hat, damit die Darstellung eines Elementes nicht durch eine ungewollte Vererbungslogik von mehreren gleichwertigen Vererbungen anders aussieht.

Dieses gängige FrontEnd Problem zeigt noch mehr, wie zentral für Designer:innen eine global spezifizierte Gestaltung ist.

Modularität der Elemente

Design Relevant

Die Kombination dieser Abhängigkeiten lässt uns ein schönes Design-System zusammenstellen, welches sich auf alle Gegebenheiten anpassen kann.

Wenn nun die Parent- und Child-Logik einer HTML-Struktur kombiniert wird mit der Hierarchie der Selektoren (Tags, Klassen, etc.), kann man  viele Abhängigkeiten definieren, welche richtig eingesetzt, den Code schlank und das Design sauber machen.

Richtig eingesetzt, vereinfacht es die Design-Spezifikation.

Auch wenn, Gestalter:innen den Code nicht schreiben. Die Modularität bleibt und sie zu verstehen hilft, das Design-System besser aufzubauen.

Globale Rule-Sets

Modularität als Waffe

Ein modulares Design System sollte man von global zu lokal aufbauen.

Es reicht, wenn ich an einem Ort definiere «Grundsätzlich sind alle Schriften der Webseite in der Schriftfamilie «Work-Sans», schwarz und linksbündig gehalten.»

Eine solche Definition kann im CSS des Body-Elementes oder HTML-Element (root) geschrieben werden. So vererbt sich dieses Rule-Set auf alle Elemente der ganzen Webseite. So muss nie mehr beispielsweise Work-Sans als Schriftfamilie, Schwarz als Schriftfarbe oder die Linksbündigkeit eines Textes deklariert werden. Nur, wenn ein Element von dieser Regel abweicht.

Zuerst definiere ich die Norm und danach die Abweichung. Das hält das CSS Schlank.

Semantik des Layouts

HTML-5 für eine bessere Barrierefreiheit

Bereits im HTML-Code, kann die Struktur verständlicher definiert werden.

Semantisch & Non-Semantische Elemente

Zum anderen muss man schauen, dass die jeweiligen HTML-Tags sowie CSS-Klassen richtig eingesetzt und gestylt werden.

Dazu hilft es, mit den Layout-HTML-Tags zu arbeiten. Am häufigsten trifft man den «div» an. Div steht für Division, also Einheit. Er ist aber wie der «span» ein Non-Semantisches Layout Element. Das heisst soviel, dass mit ihm keine Inhaltsdefinition gemacht wird.

Mit HTML-5 kamen aber semantische HTML Layout-Elemente. Semantische Layout-Elemente ermöglichen eine bessere Indexierung sowie Accessibility, weil Screenreader und Spiders/Crawlers die Inhaltsbereiche verstehen.

Beispiele von semantischen HTML-Elementen

nav - Definiert Navigationslinks

header - Definiert einen Header innerhalb des Dokumentes oder Section. (Nicht zu verwechseln mit dem head)

main - Definiert den Hauptinhalt

section - Definiert eine Section (Innerhalb des Dokumentes)

article - Definiert einen eigenständigen Artikel innerhalb des Dokumentes (z. B. Blog-Teaser)

footer - Definiert den Footer-Bereich innerhalb des Dokumentes oder Section.

Dies so zu definieren ist sinnvoller, als immer ein Inhalt unwissendes Div-Element zu verwenden.

Globale Variablen

Als Bindeglied zwischen den Welten

Viele Werte können als Variablen gesetzt werden. Dies ermöglicht einen noch schlankeren und sauberen Umgang mit der Gestaltung.

Variablen sind Container für einen Wert. Variablen sind lesbarer (semantischer) und somit intuitiver in der Designerklärung. Sie sind Mittelmänner für Design-Spezifikationen.

Zwei Beispiele

Farben

Die Variable «primary-dark» beinhaltet den schwer lesbaren HEX-Wert #2E7A93. Im Code wird an einer Stelle die Variabel definiert und an unzähligen Orten nur den Variablen-Namen gesetzt. Ändert den Wert der Variablen «primary-dark», ändert er global.

Grössen & Abstände

Statt 50px Abstand kann man auch die Variabel «Spacing-Medium» nehmen. So kann man eine Anzahl verschiedener Abstände als Variablen definieren. Dies erlaubt ein rasches Anpassen des Codes.

Es ist essenziell, dass wir Gestalter:innen die variable Logik von HTML und CSS verstehen und nutzen.

Wie wir nun ein Layout aufbauen können, ist im nächsten Kapitel beschrieben.

Webdesign Fundamentals

Eine Reise durch eine sich stetig verändernde Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off