Clever Planing

Design Umsetzung

Die verschiedenen Grössen richtig anwenden.

Haben wir das Design analysiert und die Verschachtelung definiert, gilt es zu entscheiden, wo wir welche Grössen einsetzen.

Auch hier arbeiten wir uns von den grossen Layout-Muster zu den kleinen Mikrolayouts hinunter.

Die grossen Verhältnisse sollten in relativen Grössen definiert werden.

Wichtig ist der Unterschied zwischen den unterschiedlichen relativen Werten zu kennen und richtig einzusetzen.

Ziel ist es, die Layout-Parameter so zu definieren, um möglichst wenig Code zu produzieren. Dies auch in Bezug auf das responsive Verhalten.

schematische Darstellung einer Inhaltsbox die auf Desktop horizontal und auf mobile vertikal angeordnet ist.
© Webdesign Essentials

Bildlegende

Sind die Layout-Parameter in diesem Beispiel relativ, so müsste man «nur» den Breakpoint definieren, wo die Box von horizontal ins vertikale wechselt. Alle anderen Parameter wären responsiv. Was einfach im Unterhalt ist da weniger Code geschrieben wurde.

Vertiefe dich ins ganze Kapitel

Responsive Design