© Finsterbach/Shutterstock.com
Modulare Webentwicklung

LEGO im Frontend


In allen Programmiersprachen gibt es Diskussionen darüber, wie man seine Applikation möglichst effizient und gut wartbar entwickelt. Die Diskussionsergebnisse fließen in Entwicklungsparadigmen wie MVC (Model View Controller) oder in Benennungsrichtlinien ein. Folgt man solchen Standards, ist es leichter, Code von anderen zu verstehen und zu übernehmen.

Auch in der Frontend-Entwicklung sind solche Standards entstanden. Allerdings werden sie kaum beachtet. Sie haben leider nie die normative Kraft entfaltet, die ihnen zustehen würde, denn schließlich arbeiten viele unterschiedliche Entwicklertypen mit Frontend-Code. Insbesondere diejenigen, die wenig Kenntnisse und noch weniger Motivation für guten Frontend-Code haben, würden von guten und verständlichen Standards profitieren.

Vor der hilfreichen Benennungsrichtlinie steht aber der richtige Blick auf den Frontend-Code. Dabei müssen wir immer bedenken, dass wir mit HTML und CSS Designs umsetzen, also primär eine Verbindung zur Optik haben, nicht aber zur Programmierung.

Eine Seite besteht aus vielen LEGO-Steinen

Eine Webseite setzt sich aus vielen unterschiedlichen Einzelteilen zusammen: Es gibt einen Header, meist einen Footer und einen mehr oder minder stark unterteilten Inhaltsbereich. Im Inhaltsbereich können sich eine Fotogalerie, Teaser, ein großer Fließtext und vieles andere mehr befinden. Alle diese Bestandteile können und sollten für sich selbst betrachtet werden.

Eine Webseite ist dann eine Zusammenstellung aus vielen Einzelteilen. Meist werden sie aus einem CMS gespeist. Die Analogie zu LEGO liegt auf der Hand. Auch bei LEGO werden Objekte aus unterschiedlich großen Einzelteilen zusammengesetzt.

Im Grunde entwickeln wir keine Seiten, sondern „Systeme“. Die Einzelteile dieser Systeme bezeichne ich als „Module“. Mittlerweile wird auch gerne der Begriff „Patterns“ benutzt. Die Module sind prinzipiell unabhängig voneinander, jedes ist ein eigenes kleines Universum. Gängige Module sind beispielsweise:

  • Navigationen

  • Linklisten in Seitenleisten oder im Footer

  • Teaserboxen – mit oder ohne Bild

  • Slider/Karussell

  • in einem Akkordeon organisierte Inhalte

  • in einem Tabinterface organisierte Inhalte

  • eine eingebettete Landkarte

grochtdreis_lego_1.tif_fmt1.jpgAbb. 1: Einzelne Module der Startseite von ZEIT ONLINE markiert

Abbildung 1 repräsentiert eine nicht mehr aktuelle Version von ZEIT.de. Sie zeigt die modulare Zusammensetzung der Seite. Mitte 2017 sieht die aktuelle Version von ZEIT ONLINE (www.zeit.de) aus wie in Abbildung 2.

grochtdreis_lego_2.tif_fmt1.jpgAbb. 2: ZEIT ONLINE Mitte 2017 – einzelne Module markiert

Dave Rupert hat in seinem Screenshot des Microsoft-Designs die gleichartigen Module markiert (Abb. 3). Dabei sollte auffallen, dass das Modul „Linkliste“ durchaus unterschiedlich aussieht. Optische Abweichungen sind also kein Grund, ein neues Modul zu erschaffen. Man sorgt stattdessen dafür, dass ein Standard erstellt wird. Und von diesem gibt es mittels zusätzlicher Klassen die notwendigen optischen Abweichungen.

grochtdreis_lego_3.tif_fmt1.jpgAbb. 3: Der Aufbau der 2012 redesignten Seite von Microsoft (Quelle: [1])

Erst der Sinn, dann die Optik

Vergessen Sie bitte nie, dass CSS und JavaScript nur die Erweiterungen für die gute Basis, das semantische HTML sind. Bevor Sie also anfangen, die Gestaltung mit CSS umzusetzen, sollten Sie zuerst sinnvolles HTML erzeugen.

Wenn Sie Designentwürfe zur Verfügung haben, drucken Sie sie am Besten aus, schneiden die Module aus und gruppieren diese dann nach Ähnlichkeit. Ähneln sich zwei Module sehr stark – gibt es nur geringe Abweichungen –, so ist die Wahrscheinlichkeit hoch, dass Sie nur ein Modul und eine kleine Modifikation erstellen müssen. Dazu später mehr.

Setzen Sie als Nächstes diese Module in semantischem HTML um. Suchen Sie sich also aus dem größer gewordenen Sprachumfang die passenden Elemente für die jeweiligen Inhalte heraus. Es gibt wesentlich mehr als nur div, p und span. Für die Gestaltung sollten Sie den einzelnen Bestandteilen der Module noch passende Klassennamen geben.

Erst wenn Sie sich Gedanken über das korrekte HTML gemacht haben, sollten Sie sich mit CSS und JavaScript beschäftigen. Und denken Sie immer daran, welches HTML-Element dem Sinn nach genutzt werden sollte, nicht der Optik nach. Schließlich besteht ein Teil der späteren Arbeit darin, die eigentlich gewohnte Optik von Elementen stark zu verändern. Bei Navigationen machen wir dies immer. Niemand sieht ihnen an, dass sie eigentlich Listen sind. Mit ein wenig CSS können auch Absätze ganz schnell wie Listen aussehen (Abb. 4).

grochtdreis_lego_4.tif_fmt1.jpgAbb. 4: Absätze können wie Listen aussehen (Quelle: [2])

Layout und Design

Die einzelnen Module sollen später auf der Webseite platziert werden. Diese horizontale und vertikale Verteilung von Inhalten nennen wir „Layout“. Üblicherweise nutzen wir hierfür Grids, meist auf der Basis von Floats. Wenn den einzelnen Modulen dann eine Optik verpasst wird, so sprechen wir von „Design“. Design ist also im Idealfall „schön“.

Das Layout ist unabhängig vom jeweiligen Design, das sich im Wesentlichen mit Farben, Größen und Abständen beschäftigt. Es ist auch unabhängig von den zu verteilenden Inhalten. Deshalb sollten Sie beide Ebenen trennen. Erstellen Sie erst ein Layoutraster, in dessen leere Container Sie dann die Module platzieren. Den Modulen sollte dabei die exakte Platzierung egal sein. Wenn Sie alles richtig gemacht haben, sieht die Navigation immer noch korrekt aus, wenn man sie (auch gerne zusätzlich) in den Seiten-Footer platziert. Ein Beispiel für ein Layoutgerüst (ohne Inhalte) zeigt Listing 1.

Listing 1: Layoutgerüst

<div class="ym-grid"> <div class="ym-g60 ym-gl"> <!-- Hier kommt das Inhaltsmodul hin! --> </div> <div class="ym-g40 ym-gr">  <!-- Hier kommt das Inhaltsmodul hin! --> </div> </div>

Wir diskutieren hierbei nicht über die korrekte Verwendung von Klassen. Mir ist nur wichtig zu zeigen, dass mit dieser einfachen Struktur und diesen wenigen Klassen ei...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang