Sammlung HTML-Vorlagen

Übersichtliche Kollektions-HTML-Vorlagen zum Exportieren und Weiterbearbeiten

Ein Geschäft mit vierzig Keramikstücken und ein Archiv mit mehreren hundert Drucken stehen vor derselben Herausforderung: Der zehnte Artikel muss genauso harmonisch wirken wie der erste. Kollektions-HTML-Vorlagen sind fertige Designs für Kataloge, Galerien oder Archive, und der HTML-Zusatz verrät bereits das Endergebnis des Projekts. Nicepage exportiert das Design als statische Website, sodass die visuell arrangierte Kollektion zu HTML, CSS und JavaScript wird, die Sie direkt hosten oder im Quellcode weiterbearbeiten können.

Was eine exportierte Galerie enthält

Der Export lässt sich sowohl aus den Nicepage-Anwendungen als auch über den Online-Editor ausführen; das Ergebnis hängt also nicht davon ab, worin Sie gearbeitet haben. Dateiordner- und FTP-Exporte sind Bestandteil der Desktop-Anwendungen, was von Bedeutung ist, wenn der Veröffentlichungsweg bereits feststeht. Die Anleitung zum Exportieren von HTML-Websites beschreibt alle verfügbaren Modi.

Eine aus Nicepage exportierte Kollektions-Website umfasst:

1. Das Markup jeder erstellten Seite, einschließlich des Kollektionsindexes;
2. Das Stylesheet und die Skripte, auf denen das Design basiert;
3. Die Bilddateien der Produktfotos, Lookbook-Seiten und Archivscans.

Das gesamte Paket lässt sich auf einem gewöhnlichen statischen Webspace hosten, und derselbe Ordner kann an einen Entwickler übergeben werden, der an einem größeren Projekt arbeitet.

Rasterzellen auf schmalen Bildschirmen

Kollektionslayouts ordnen auf breiten Bildschirmen mehrere Bilder nebeneinander an, und das Raster-Element hält sie in Zellen, die sich untereinander anordnen, sobald der Bildschirm schmaler wird. Bei einer Katalogseite trägt dieses Verhalten die Hauptlast, da eine lange Liste ähnlicher Objekte das Design als Erstes an seine Grenzen bringt.

Sobald die Bildschirmbreite sinkt, erfordern meist dieselben typischen Stellen Aufmerksamkeit:

1. Artikelbezeichnungen, die länger als der Demotext sind und Karten vertikal aufweiten;
2. Bildunterschriften, die vom zugehörigen Bild wegrutschen;
3. Galerien, die mehr Spalten beibehalten, als der Bildschirm fassen kann.

Layouts für Produktlinien und Kunstserien

Nicht jede Kollektion erfordert dieselbe Seite. Eine Produktlinie liest sich hervorragend als gleichmäßiges Raster aus Artikeln mit Preisen und kurzen Beschreibungen, während ein Archiv neben jedem Scan ausreichend Platz für Legenden und Referenznummern benötigt. Der Demoinhalt liefert wertvolle Hinweise auf das zugrunde liegende Layout.

Fotos in einer Kollektion haben selten dasselbe Seitenverhältnis, was meist darüber entscheidet, ob ein Template den Inhaltsaustausch gut übersteht. Produktfotografien sind meist auf ein einheitliches Format zugeschnitten; Kunstwerke und Archivscans sind es selten. Der schnellste Test besteht darin, einen Abschnitt mit eigenen Bildern und Artikeltiteln zu füllen – insbesondere mit einem Namen, der doppelt so lang ist wie der Demonstrationsname. Wie sich das Design dort verhält, wird es sich im gesamten restlichen Katalog verhalten.