Jedes Element ob Parent oder Child, hat verschiedene Möglichkeiten sich Platz zu verschaffen und sich zu stylen.
Der Inhalt nimmt sich standardmässig den Platz, den es braucht.
Die Boxmodell-Logik ermöglicht es, den Textfluss: des Dokuments ihn in die gewünschte Form und in den gewünschten Raum zu bringen.
:Alles im Fluss - HTML & CSS Einführung
Die Box Eigenschaften sind wichtig.
Margin & Padding sind zwei Begriffe mit viel Gewicht. Sie definieren den Umraum innerhalb und ausserhalb einer Box und ihrem Content.
Margin: Befreit die Zone ausserhalb des Elements (ist transparent). Treffen sich zwei Margins wird nur der grössere Wert genommen, der andere Wert wird verschluckt.
Padding: Befreit die Zone innerhalb des Elements (ist transparent)
Border: Kann eingefärbt und in seiner Dicke verändert werden.
Content: Bilder, Text, etc. erscheinen hier. Kann eingefärbt oder eine definierte Höhe und Breite haben. (Grösse = Border + Padding + Content)
Jedes Element kann seine eigene Darstellung haben und seine Child- und Sibling-Elemente beeinflussen.
inline: Element nimmt nur seinen benötigten Platz ein.
block: Element nimmt sich die ganze Breite ein.
Die meisten HTML-Tags sind standardmässig entweder Inline oder Bock Elemente.
none: Element wird nicht dargestellt.
flex: Die Flexbox eignet sich besonders um mehrere Child-Elemente innerhalb eines Parent-Elements zu platzieren.
Grid: Elemente können in einem Raster dargestellt werden. Grid ist eine massive Optimierung für responsive Webdesign.
Jedes Element wird im HTML-Textfluss aneinander gereiht. Ohne Einstellungen wird alles schön der Reihe nach dargestellt.
Um gewisse Elemente spezifisch zu platzieren, können vier Möglichkeiten mit ihren jeweiligen Justierungen gewählt werden.
Auto/Statisch: Element bleibt im Fluss. Fliesst mit.
Relative: Element ist abhängig von seinem «Parent-Element»
Absolute: Element ist fix im Fluss (oder innerhalb des Parent) platziert.
Fixed: Element ist ausserhalb des Flusses positioniert. Und bleibt fix im Viewport sichtbar.
Sticky: Element ist innerhalb seines Parents positioniert. Aber reagiert auf den Viewport und bleibt «fixed» platziert, solange der Parent sich im Viewport befindet.
Hat man während der Gestaltung die Grundprinzipien von HTML und CSS im Kopf, kann man seine Designarbeit um ein vielfaches raffinierter angehen.
Deklariert man die Abhängigkeiten. Zuerst grob, dann fein. Schafft man bereits mehr Klarheit.
Farben und Abstände als Variablen setzen und dies so kommunizieren.
Während der Gestaltung bereits die verschiedenen Komponenten benennen und wieder verwenden. So manifestiert sich bereits während der Designphase die Begrifflichkeiten.
Aufbauend auf der Atomic Design Theorie. Mehr dazu unter Anatomie einer Webseite
Beginnt man die Bedingungen von HTML und CSS in seine Designarbeit einzuplanen, schafft man eine gute Grundlage für ein solides Design.
Während der Kreationsphase (Entwurfsphase) gilt es diese Logiken nur in den Hauptzügen mitzunehmen. Man definiert Variablen, definiert Schriftabhängigkeiten und zentrale Designregeln.
In der Reinzeichnung kann man dann die Spezifikation aller Elemente genauer definieren. Die Werte werden definiert, die Abhängigkeiten aufgezeichnet und jeder relevante Aspekt für die FrontEnd Umsetzung formuliert.
Ein fertiges Design, sauber im FrontEnd umzusetzen, ist die Aufgabe von Frontend-Entwickler:innen. Die unsrige Aufgabe ist es, aus der unendlichen Anzahl an Designmöglichkeiten das richtige Design System zu definieren.
Es gibt verschiedene Aspekte auf das Gleiche. Bei der Design-Umsetzung in Code kommen teilweise ganz andere Aspekte zum Tragen, als die Logik des Designs selbst.
Die FrontEnd Entwicklung kümmert sich nicht nur um die Gestaltung, dies trübt den rein visuellen Fokus.
Performance, Skalierbarkeit, Server-Abhängigkeiten oder die Logik von HTML und CSS aus Entwicklungssicht ändert die Konzeption und Planung einer FrontEnd-Umsetzung eines Designs.
Beispielsweise haben sich lange Zeit (noch immer?) CSS-Frameworks breit gemacht. Zum einen, um den die FrontEnd Umsetzung schneller und robuster zu machen, zum anderen, um statische Referenzdesigns umzusetzen.
Dabei wird der Design-Prototyp mit der Bootstrap-Brille analysiert und in dessen Logik umgesetzt.
Es gilt daher abzuklären, wie eine Design-Spezifikation erarbeitet wird, sodass die Essenz bestehen bleibt.
Wenn du vermeintlich viel über FrontEnd weisst, so hilfst dir dies in gewisser Hinsicht enorm bei der Gestaltung einer Webseite, aber gleichzeitig entstehen neue Gefahrenzonen.
Bis dahin müssen wir aber noch viele Mauern abreissen und Brücken bauen.
Für die Designplanung ist die HTML/CSS Logik fundamental anders, als all die klassischen Layoutprogramme, die wir nutzen. Der Umgang mit der Verschachtelung und den Layout-Möglichkeiten des Box-Modells gilt es zu lernen. Es hilft uns präzisere Anweisungen an Entwickler*innen zu geben oder selbst mit Webseiten zu arbeiten.
Möchtest du Google Analytics mit anonymisierter IP-Adresse zulassen?
