Mosaik HTML-Vorlagen

Responsive Mosaic HTML-Vorlagen

Eine Mosaic HTML-Vorlage wird als Datei bereitgestellt, die Sie in einem Editor öffnen können: eine Seite, ein Stylesheet und Bilder, die bereits in Abschnitten unterschiedlicher Breite angeordnet sind. Der Demo-Screenshot zeigt eine Anordnung dieser Kacheln. Alle weiteren Änderungen erfolgen im Quellcode, daher empfiehlt es sich, den Quellcode vor der Vorschau zu öffnen.

Der Großteil dieser Arbeit beschränkt sich auf die Inhaltsebene. Fotos werden ausgetauscht, Bildunterschriften neu geschrieben und eine Karte dupliziert, sobald die Galerie größer als die Demo wird.

Markup hinter ungleichmäßigen Bildblöcken

Kachelkompositionen werden auf sehr unterschiedliche Weise erstellt, und der Unterschied wird sofort sichtbar, sobald Sie ein weiteres Element hinzufügen. Ein Raster, das durch Spalten- und Zeilenüberspannungen zusammengehalten wird, funktioniert auch beim Kopieren einer Karte. Ein Layout mit fixierten Abständen erfordert jedes Mal eine manuelle Anpassung.

Abschnitte wie diese machen auf einer Mosaikseite meist den größten Teil aus:

• ein breites Bild mit einem kurzen Titel darüber
• eine Karte, die sich in einer Galerie oder einem Kategorie-Feed wiederholt
• ein Textabschnitt für eine Dienstleistung, eine Notiz oder ein Zitat
• ein Call-to-Action-Abschnitt, der die visuelle Gruppe abschließt

Keine Vorlage enthält standardmäßig alle diese Elemente. Daher ist es hilfreich, die Demo zu öffnen, die tatsächlich wiederverwendbaren Elemente zu zählen und die übrigen zu ignorieren.

Quellreihenfolge auf schmalen Bildschirmen

Ein Smartphone zeigt die Komposition in einer einzigen Spalte an, die der Reihenfolge Ihrer Datei entspricht. Ein Abschnitt in der oberen rechten Ecke eines Laptops kann auf einem Smartphone an vierter Stelle stehen und dennoch die Hauptüberschrift enthalten.

Das lässt sich schnell überprüfen: Deaktivieren Sie die Formatierungen im Browser und lesen Sie die Seite als reinen Text. Das Ergebnis entspricht in etwa der Reihenfolge, in der ein Besucher mit dem Daumen scrollt. Falls sich dort wichtige Informationen befinden, verschieben Sie den Abschnitt in den HTML-Code. Eine weitere Media-Query würde ihn nur ausblenden.

Beispielcode bearbeiten, ohne die Kacheln zu beschädigen

Behandeln Sie Demoinhalte als Ersatzteile. Kopieren Sie eine Kachel, die bereits Ihren Anforderungen entspricht, fügen Sie sie an der gewünschten Stelle in die Galerie ein und ändern Sie anschließend das Bild und den Text. Die Klassennamen bleiben unverändert, und es ist teurer, diese Konvention mitten im Projekt zu ändern, als sie beizubehalten.

Verkleinern Sie dann das Browserfenster, bis das Mosaik in einer einzigen Spalte angezeigt wird, und prüfen Sie, welches Projekt ein Besucher zuerst sieht. Wenn es das Projekt ist, das Sie einem Kunden zeigen würden, ist die Vorlage bereit für Ihre Inhalte.