Mosaik HTML-Vorlagen

Responsive Mosaik-HTML-Vorlagen

Eine Mosaik-HTML-Vorlage wird als Dateiensatz geliefert, den Sie im Editor öffnen können: eine Seite, ein Stylesheet und Bilder, die bereits in Abschnitten unterschiedlicher Breite platziert sind. Der Demo-Screenshot zeigt eine mögliche Anordnung dieser Kacheln. Alles Weitere passiert im Quellcode dahinter – daher lohnt es sich, den Quelltext noch vor der Vorschau zu öffnen.

Der Großteil dieser Arbeit bleibt auf der Inhaltsebene. Fotos werden ausgetauscht, Beschriftungen neu verfasst und Karten dupliziert, sobald die Galerie über den Umfang der Demo hinauswächst.

Markup hinter ungleichmäßigen Bildblöcken

Kachelkompositionen werden auf sehr unterschiedliche Weise aufgebaut, und der Unterschied zeigt sich sofort, wenn Sie ein weiteres Element hinzufügen. Ein Raster, das durch Spalten- und Zeilenspannen zusammengehalten wird, funktioniert auch dann weiter, wenn eine Karte kopiert wird. Ein Layout mit festen Offsets erfordert dagegen bei jeder Anpassung manuelle Korrekturen.

Abschnitte wie diese tragen auf einer Mosaikseite meist das Hauptgewicht:

• eine breite Bildkachel mit einem kurzen, darüber platzierten Titel
• eine Karte, die sich in einer Galerie oder einem Kategorie-Feed wiederholt
• eine Textkachel für eine Dienstleistung, eine Notiz oder ein Zitat
• eine Call-to-Action-Kachel, die das visuelle Cluster abschließt

Keine Vorlage enthält standardmäßig alle diese Varianten. Es hilft daher, die Demo zu öffnen, die tatsächlich wiederverwendbaren Elemente zu zählen und den Rest zu ignorieren.

Quellcode-Reihenfolge auf schmalen Bildschirmen

Ein Smartphone stellt die Komposition einspaltig dar, und diese Spalte folgt exakt der Reihenfolge in Ihrer Datei. Eine Kachel in der oberen rechten Ecke auf einem Laptop kann auf dem Smartphone an vierter Stelle stehen, obwohl sie das Hauptprojekt zeigt.

Das lässt sich schnell überprüfen. Schalten Sie die CSS-Stile im Browser ab und lesen Sie die Seite als reinen Text. Das Ergebnis entspricht weitgehend der Abfolge, die Besucher mit dem Daumen durchscrollen. Liegt dort etwas Wichtiges zu weit unten, verschieben Sie den Abschnitt im HTML-Code. Eine weitere Media Query würde das Problem nur kaschieren.

Beispielcode anpassen, ohne Kacheln zu zerstören

Betrachten Sie Demo-Inhalte als Ersatzteillager. Kopieren Sie eine Kachel, die sich bereits genau wie gewünscht verhält, fügen Sie sie dort ein, wo die Galerie weitergeht, und tauschen Sie Bild sowie Text darin aus. Behalten Sie die vom Autor gewählten Klassennamen bei – mitten im Projekt gegen diese Konventionen anzuarbeiten, kostet mehr Zeit als ihnen zu folgen.

Verkleinern Sie anschließend das Browserfenster, bis das Mosaik zu einer einzigen Spalte zusammenfällt, und prüfen Sie, welches Projekt Besucher zuerst sehen. Wenn es genau das Projekt ist, das Sie einem Kunden präsentieren würden, ist die Vorlage bereit für Ihre Inhalte.