Die Grundprinzipien der Webentwicklung — HTML, CSS und CMS
Das technische Fundament, das du kennen musst, um fürs Web gestalten und daran mitarbeiten zu können
Einleitung
Auch wenn du als Mediengrafikerin nicht unbedingt selbst programmieren musst, arbeitest du eng mit Webentwicklern zusammen — und je besser du die Technik hinter einer Website verstehst, desto besser werden deine Designentscheidungen und deine Zusammenarbeit. Web ist nicht nur eine Leinwand; es ist aus Strukturen gebaut, die eigene Regeln und Grenzen haben.
HTML — die Struktur des Inhalts
HTML (HyperText Markup Language) ist die Sprache, die die Struktur des Inhalts auf einer Webseite beschreibt: was eine Überschrift ist, was ein Absatz ist, was eine Liste oder ein Bild ist. HTML sagt nicht, wie etwas aussehen soll — nur, was es ist. Das ist eine wichtige Unterscheidung: Richtig eingesetztes HTML macht eine Seite für Browser, Screenreader und Suchmaschinen verständlich, unabhängig davon, wie sie visuell gestaltet ist.
CSS — Aussehen und Layout
CSS (Cascading Style Sheets) steuert, wie der HTML-Inhalt aussehen soll: Farben, Schriften, Abstand, Platzierung. Weil Aussehen und Inhalt getrennt sind, kann derselbe HTML-Inhalt je nach CSS ganz unterschiedlich dargestellt werden — das ist unter anderem das, was responsives Design möglich macht, bei dem eine Seite ihr Layout an die Breite des Bildschirms anpasst.
- 01Das Boxmodell — jedes HTML-Element ist eine Box mit Inhalt, Innenabstand, Rahmen und Außenabstand, die CSS steuert.
- 02Flexbox und Grid — moderne CSS-Werkzeuge, um Elemente flexibel auf einer Seite oder in einem Raster zu platzieren.
- 03Responsives Design — das Layout passt sich automatisch an die Bildschirmgröße an, vom großen Computerbildschirm bis zum kleinen Handy.
- 04Breakpoints — die Bildschirmbreiten, bei denen das Layout von einem Regelsatz zu einem anderen wechselt.
Von der statischen Seite zum CMS
Eine reine HTML/CSS-Website ist statisch: Der Inhalt ändert sich nur, wenn ein Entwickler den Code anpasst. Die meisten Websites werden heute stattdessen auf einem CMS (Content-Management-System) aufgebaut — einem System, das den Inhalt vom technischen Design trennt, sodass eine Redakteurin ohne Programmierkenntnisse Text und Bilder über eine Benutzeroberfläche aktualisieren kann.
| Typ | Merkmale |
|---|---|
| Statisches HTML/CSS | Keine Datenbank, schnell und einfach, erfordert aber einen Entwickler, um Inhalte zu aktualisieren |
| Traditionelles CMS | Inhalt, Design und Funktionen in einem System vereint, Redakteure können selbst aktualisieren |
| Headless CMS | Der Inhalt wird getrennt von der Darstellung gespeichert und kann aus demselben Inhalt auf mehreren Plattformen (Web, App, Bildschirm) angezeigt werden |
| E-Commerce-Plattform | CMS, spezialisiert auf Produkte, Warenkorb und Bezahlung |
Semantischer Code und Barrierefreiheit
Semantisches HTML bedeutet, die richtigen Elemente für das zu verwenden, wofür sie gemacht sind — eine Überschrift als Überschrift, eine Schaltfläche als Schaltfläche, nicht bloß ein Rechteck mit Text darin, das wie eine Schaltfläche aussieht. Das klingt nach einem Detail, ist für die Barrierefreiheit aber entscheidend: Ein Screenreader kann einer sehbehinderten Nutzerin nur dann sagen, dass 'hier eine Schaltfläche ist', wenn der Code tatsächlich sagt, dass es eine Schaltfläche ist.
Die Zusammenarbeit mit den Entwicklern
Je mehr du darüber verstehst, wie aus einem Design Code wird, desto einfacher wird die Zusammenarbeit mit den Entwicklern. Ein Design, das berücksichtigt, wie Text in der Länge variieren kann, wie Bilder auf verschiedenen Bildschirmgrößen beschnitten werden müssen und was innerhalb des Zeitrahmens technisch realistisch ist, erspart beiden Seiten wiederholte Korrekturen spät im Verlauf.
“Ein schönes Design, das sich nicht innerhalb der Frist bauen lässt oder auf einem Mobilgerät nicht funktioniert, ist kein fertiges Design — es ist eine gute Idee, der das letzte Glied fehlt.”
— Fachliche Betrachtung zur Zusammenarbeit zwischen Design und Entwicklung