MADie technische Entwicklung eines „Spaltensatzes“, welcher beim Layout einer Zeitung oder eines Buches eine ganz normale Angelegenheit ist, hat im Internet eine Weile gedauert. Was früher auf statischen Webseiten für den Normalmonitor (1024 x 768 Pixel) festgezimmert nebeneinander stand, kann nun aber seit „CSS3“ durch „Media Queries“ und definierte „Breakpoints“ (Pixelbreite für den Umbruch des Layouts) „mit flexiblen Kolumnen“ für Ausgabegeräte wie Smartphone, Tablet, Laptop oder Desktop optimiert und nach Bedarf eben auch untereinander angezeigt werden.
! Was braucht (D)eine Homepage ?
! Werkzeug ?
Mit welchem Content-Management-System (CMS) läßt sich mein Web-Projekt leicht (um)organisieren, (neu)gestalten und vor allem pflegen? Welches Werkzeug ist geeignet für meine Präsentation.
! Stilmittel ?
Mit perfekten CSS-Kenntnissen bekommt man noch lange keinen gepflegten Stil hin. Ebenso wichtig ist das richtige Gespür für Farben und Formen, um eine stimmige Atmosphäre entstehen zu lassen.
! Elemente ?
Ein wichtiges, oft vernachlässigtes Element ist der Raum zwischen den vielen Informationen. Texte, Bilder, das graphische Beiwerk und Schriften wirken erst mit den richtigen Proportionen zueinander.
Beispiel: Box mit 3 Kolumnen (one-third)
Während auf größeren Monitoren mehrere Kolumnen sehr schön nebeneinander präsentiert werden können, müssen diese auf kleineren Geräten untereinander dargestellt werden. Daher ist es unumgänglich eine moderne Homepage für unterschiedliche Ausgabegeräte mit einem flexiblen Layout auszustatten. Zwar gibt es auch Plugins, sogenannte „Page Builder“ (die letztlich ebenfalls mit Kolumnen arbeiten), allerdings verwende ich viel lieber die im Stylesheet per CSS definierten Kolumnen (wie one-half, one-third, one-fourth, …), die ein grundlegender Bestandteil meines Themes sind, aber auch unabhängig vom verwendeten Theme eingesetzt werden können.
Mit wenigen ergänzenden Angaben zum Breakpoint der Kolumnen funktioniert die Sache einwandfrei. Alle Fotos bekommen eine simple CSS-Regel – width=”100%” height=”auto” – mit auf den Weg und füllen damit die jeweilige Kolumne im Prinzip immer ganz aus. Wenn nicht, sind sie zu klein bemessen (die notwendige Mindestbreite ist abhängig vom Theme). Dadurch wird bei jeder Monitorgröße eine optimale Ausnutzung des Platzes (= Viewport) gewährleistet.
Code-Schnipsel der „Kolumnen“
.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds { float: left; margin-left: 2.564102564102564%; }
.one-half, .three-sixths, .two-fourths { width: 48.717948717948715%; }
.one-third, .two-sixths { width: 31.623931623931625%; }
.four-sixths, .two-thirds { width: 65.81196581196582%; }
.one-fourth { width: 23.076923076923077%; }
.three-fourths { width: 74.35897435897436%; }
.one-sixth { width: 14.52991452991453%; }
.five-sixths { width: 82.90598290598291%; }
.first { clear: both; margin-left: 0; }
2, 3, 4 oder 6 Kolumnen · Flexibel durch Breitenangabe in Prozent
Das CSS der Kolumnen basiert auf einer Version von „Bootstrap“ und läßt sich im Prinzip in das Stylesheet jedes Themes integrieren (plus Angaben zum Breakpoint für die verschiedenen Monitorgrößen). Im Unterschied zu einem „Page Builder“ gehört natürlich schon etwas elementares Grundwissen im Umgang mit HTML dazu. Dafür ist man bei der Gestaltung seiner Homepage aber unabhängig von der Weiterentwicklung solcher Plugins, die außerdem ihre jeweils eigenen Shortcodes und weiteren (relativ umständlichen) Quelltext generieren.
Fotos + Text · Gestaltung mit Kolumnen
Beispiel: „Fotos mit Kolumnen“ @ DEMO-Homepage
Beispiel: „Fotos mit Kolumnen“ @ DEMO-Homepage
Das Arbeiten mit einem „Page Builder“ geht weder besser noch schneller. Warum also nicht einfach einige der wesentlichen Grundbefehle des „HTML“ (= HyperText Markup Language) lernen, die sich beim Aktualisieren und Einpflegen neuer Daten (Fotos, Texte) sowieso ständig wiederholen und daher schnell Routine werden, anstatt weiterhin nichts zu verstehen, sich deshalb „blind“ einem Plugin anvertrauen zu müssen mit der Hoffnung, dass dieses zuverlässig arbeitet.
Kolumnen: Layout mit mehreren Spalten
Die journalistische „Kolumne“ ist hier nicht gemeint, sondern ein Layout mit mehreren Spalten (engl. „columns“). In diesem Artikel geht es um die Verteilung des Inhalts in „Kolumnen“ (= Spalten), jedoch nicht um den seit „CSS3“ möglichen „Spaltensatz“ (Gliederungsmittel beim Buchdruck), der im Web bislang eher selten anzutreffen ist.
Es gibt etliche nützliche Plugins, welche ich auch hier bei „MAMEDi“ einsetze. Manche Dinge lassen sich allerdings einfacher und sehr elegant mit wenigen Grundkenntnissen in „HTML“ per Hand erledigen. Die Auszeichnungssprache des Web (= HyperText Markup Language) ist nicht schwer zu lernen und eine Sache wirklich zu verstehen hat langfristig nur Vorteile.
Kommentar schreiben!