Fliesen HTML-Vorlagen

Saubere HTML-Kachelvorlagen mit bearbeitbarem Quellcode

Wenn ein Entwickler eine HTML-Kachelvorlage übernimmt, erhält er einen Satz Dateien. Wie angenehm der nächste Monat verläuft, hängt davon ab, wie diese Dateien zusammengestellt werden. Das Muster findet sich überall wieder: im Portfolio-Index, in der Produktübersicht oder auf der Titelseite eines Magazins. Der untenstehende Code entscheidet darüber, ob das Hinzufügen von zweihundert Einträgen eine Nachmittagsaufgabe ist oder eine komplette Überarbeitung erfordert.

Markup-Muster, die Sie häufig verwenden werden

Wiederholung ist das zentrale Element eines Kachel-Layouts und sollte als Erstes überprüft werden. Eine Karte enthält üblicherweise ein Bild, einen Titel und einen Link, und ihre Form sollte vom ersten bis zum letzten Eintrag identisch bleiben. Öffnen Sie den Quellcode und achten Sie auf Folgendes:

1. Semantische Abschnitte um jede Kachelgruppe anstelle eines endlosen Containers.

2. Überschriften, die in der Reihenfolge ihrer Gliederung angeordnet sind, mit einem hervorgehobenen Eintrag über den jeweiligen Elementen.

3. Ein Kartenmuster, das unverändert wiederholt wird, wobei die Klassen-Hooks für spätere Bearbeitungen erhalten bleiben.

4. Links, die direkt auf die Elemente geschrieben sind, die ein Besucher anklickt.

Lesereihenfolge bleibt auch nach dem Zusammenklappen erhalten

Eine Kachelanordnung, die auf einem Breitbildschirm gut lesbar ist, kann auf einem Smartphone in einer ungewöhnlichen Reihenfolge erscheinen, da die visuelle Position eines Panels und seine Position im Quelltext voneinander abweichen. Das hervorgehobene Element oben links sollte nicht unter drei kleineren Karten angezeigt werden. Prüfen Sie jeden wiederholten Block:

1. Das Element, das ein Besucher zuerst benötigt, steht im Quelltext an erster Stelle.

2. Der Begleittext bleibt mit dem Bild verbunden, das er beschreibt.

3. Der Link schließt den Block, anstatt über dem zugehörigen Inhalt zu schweben.

Wenn dies in einer einzelnen Karte korrekt umgesetzt ist, wird es automatisch von allen weiteren Karten übernommen. Andernfalls werden Sie von einem Kunden, der ein Smartphone benutzt, darauf hingewiesen.

Nach dem Export: Links zuerst prüfen

Nicepage exportiert das Projekt aus der Desktop-Anwendung. Die Exportanleitung beschreibt diesen Workflow. Was auf der Festplatte landet, ist ein Satz von Dateien, die Sie überall hosten können. So sind Sie nicht an das Hosting von Nicepage gebunden und der Quellcode bleibt für weitere Bearbeitungen offen.

Der erste Durchgang nach dem Export ist kurz und lohnt sich. Prüfen Sie, ob relative Links und Asset-Pfade auch auf dem Server noch funktionieren, ob die Alt-Attribute der Bilder den Inhalt korrekt beschreiben und ob die Überschriften nach dem Austausch der Inhalte in der richtigen Reihenfolge geblieben sind. Wiederholte Karten sollten Sie sich noch einmal ansehen, sobald sie mit echtem Material gefüllt sind, denn ein Titel, der in der Demo mit vier Wörtern gut passt, passt selten in zwölf Wörtern zur Realität.

Sie beurteilen, wie benutzerfreundlich der Quellcode ist. Markup, das Sie problemlos lesen, bearbeiten und erweitern können, bleibt auch lange nach Änderungen der Bildschirmdarstellung nützlich.