Wenn Seiten kein Papier sind: Der Designer-Leitfaden zum Layout-Code

InDesign-Boxen sind so einfach wie Klicken und Ziehen. Mithilfe der Photoshop-Ebenen können Maler Pixel überall einfärben, wo sie möchten. Aber das Layout mit HTML und CSS ist ein Spiel des Anstoßens und Kaskadierens.

Es passiert jeden Tag: Photoshop-erfahrene Art Directors entwerfen Entwürfe, verfeinern deren Abstände und wählen sorgfältig geeignete Schriftarten und Farben aus. Sie übergeben ihre Arbeit an einen eifrigen HTML-Entwickler, der ankündigt, dass es wahrscheinlich Tage dauern wird, bis der Entwurf in funktionierendes HTML/CSS umgewandelt wird. Schlimmer noch: Sie nehmen Änderungen vor, um unterschiedliche Bildschirmgrößen zu berücksichtigen. Der Zeitpunkt ist für beide Seiten ein Rätsel. Wird der Entwickler eine Stunde oder eine Woche brauchen, um sein PSD in funktionierendes HTML/CSS umzuwandeln?

Die Grundlagen des Weblayouts – das Mögliche, das Praktische, die Möglichkeiten – sind leicht zu verstehen. Wie beim Design selbst hilft das Verständnis der Prinzipien jedem Designer dabei, bessere Designs zu erstellen und den Prozess der Erstellung einer Website zu beschleunigen.

Blockelemente stapeln, Inline-Elemente fließen

Alles auf einer Webseite, von Absätzen über Bilder bis hin zu Links und fettem Text, befindet sich in unsichtbaren Feldern. Diese Boxen gibt es in zwei Varianten: Block und Inline. Der Unterschied zwischen Inline und Block liegt in ihrem Verhalten.

  • Blockelemente sind Rechtecke. Sie lieben es, horizontale Räume zu füllen.
  • Inline-Elemente sind rechteckig, außer dass sie umbrochen werden können.
Lesen:  PHP-Performance-Benchmarking für CMS, E-Commerce ...

Blockelemente stapeln sich übereinander. Sofern nicht anders angegeben, nehmen sie so viel horizontalen Raum wie möglich ein und drücken alles um sich herum nach oben oder unten. Für das Design sind Blockelemente das wichtigste Layout-Werkzeug.

Inline-Elemente basieren auf Textformatierung. Sie unterbrechen den Textfluss nicht und ihre Abmessungen passen sich dem Inhalt an. Es wird nicht funktionieren, einem Inline-Element anzuweisen, eine Breite von 200 Pixeln beizubehalten. Wenn Sie es mit Text füllen, wird dies der Fall sein.

Standardmäßig ist jedes Element im entweder ein Inline- oder Blockelement. Designer können ihre Natur mit ein wenig CSS ändern – beispielsweise indem sie einen Stapel von Listenelementen (nativ Blöcke) in eine Zeile oder eine Reihe horizontaler Links (nativ inline) in einen vertikalen Stapel umwandeln. Damit ist jedes sichtbare Element gemeint Mai für das Layout verwendet werden. Ob sie sollen hängt vom jeweiligen Layout ab.

Zu den nativen Blockelementen gehören: