Schleife HTML-Vorlagen

HTML-Vorlagen für wiederkehrende Inhalte

Eine HTML-Vorlage für wiederkehrende Inhalte definiert eine einzelne, sich wiederholende Einheit und füllt diese mit dynamischen Inhalten aus Beiträgen, Produkten oder Projektdatensätzen. Sie wählen einen vorgefertigten Elementblock aus, passen ihn an die zu veröffentlichenden Einträge an, und die Schleife generiert dieses Markup für jeden Datensatz. Nichts wird manuell dupliziert, sodass ein einzelner Block die Darstellung des gesamten Rasters bestimmt.

Wo die Vorlage endet und der Inhalt beginnt

Die häufigste Verwechslung von Schleifen besteht darin, die Vorlage mit dem Element zu verwechseln. Eine Vorlage enthält leere Felder: oft einen Bildbereich, eine Überschrift und eine Metadatenzeile. Bearbeiten Sie einen Produktnamen, ändert sich ein Datensatz; bearbeiten Sie das Markup, verschiebt sich das gesamte Raster.

Diese Aufteilung führt dazu, dass die Schleife aus drei beweglichen Teilen besteht:

1. Dem Element-Markup, das Hierarchie und Lesereihenfolge festlegt;

2. Den dynamischen Feldern, die Werte in dieses Markup einfügen;

3. Dem äußeren Raster, das bestimmt, wie viele Elemente nebeneinander angezeigt werden.

Diese drei Elemente entscheiden darüber, ob eine vorgefertigte Vorlage verwendbar ist. Ein Elementblock mit zwei Feldern kann keine Einträge mit fünf Feldern aufnehmen.

Feldgruppen unterscheiden sich je nach Schleife

Nicht jede Schleife enthält ein Bild, einen Titel und eine Beschreibung. Die Feldgruppe richtet sich nach dem Inhaltstyp und bestimmt, was dem Leser zuerst auffällt.

Drei bekannte Beispiele verdeutlichen die Unterschiede:

1. In einer Beitragsschleife sind Datum, Autor und Auszug an die Überschrift gebunden, sodass der Auszug nie wichtiger ist.

2. In einer Ereignisschleife stehen Datum und Ort im Vordergrund, daher ist der Zeitblock wichtiger als das Bild.

3. In einer Verzeichnisschleife werden Kategorie, Adresse und Kontaktdaten angezeigt, daneben befindet sich die Aktionsschaltfläche.

Alle drei Schleifen folgen demselben Grundgerüst, doch die Gewichtung der Felder variiert. Die passende Vorlage für diese Gewichtung zu finden, ist der größte Teil der Auswahlarbeit. Die Anpassung eines Beitragslayouts für Ereignisdatensätze erfordert eine Neuanordnung der Felder.

Beibehaltung der Darstellungsreihenfolge auf verschiedenen Bildschirmgrößen

Wiederholte Blöcke sind auf breiten Monitoren gut lesbar, werden aber schwerer lesbar, sobald die Spalten umgeklappt werden. Entscheidend ist dann, ob ein Datensatz weiterhin übersichtlich dargestellt wird: Bild über dem Titel, Preis neben dem Namen, Aktion im zugehörigen Eintrag.

Beispielinhalte verdecken dies, da Demo-Elemente in der Regel die gleiche Höhe haben. Probleme entstehen, wenn ein Projekttitel drei Zeilen umfasst und der nächste fast keine Beschreibung enthält. Es empfiehlt sich, die längsten und kürzesten Einträge in eine Vorlage Ihrer Wahl zu laden, bevor Sie die Seite in großem Umfang veröffentlichen.

In Nicepage platziert das Grid-Element wiederholte Elemente in responsiven Zellen; die Anleitung für responsives Webdesign beschreibt die zugehörigen Steuerelemente.

Eine HTML-Vorlage mit Schleife ist dann sinnvoll, wenn Struktur, Lesbarkeit und Datenreihenfolge unabhängig von der Anzahl der Datensätze und der Bildschirmbreite erhalten bleiben.