Bücherregal CSS-Vorlagen

CSS-Vorlagen für ein ordentliches Bücherregal

Ein Bücherregal mit Buchcovern wirkt nur dann übersichtlich, wenn das Styling für ein einheitliches Erscheinungsbild sorgt. Hardcover-Scans, Taschenbuchfotos und ältere Ausgaben haben nie die gleiche Größe. Eine Bücherregal-Vorlage muss sie daher in einem einzigen Rahmen darstellen und gleichzeitig die Lesbarkeit von Titel und Autorennamen gewährleisten.

Ungleichmäßige Cover-Proportionen

Buchabbildungen haben selten ein einheitliches Seitenverhältnis. Ein Nachdruck kann gedrungen wirken, ein Bildband nahezu quadratisch, ein gescannter Klassiker oben beschnitten. Gleiche Kartengrößen ergeben keine gleich großen Cover, und diese Diskrepanz lässt ein Regal unordentlich aussehen. Ein festes Seitenverhältnis für den Coverbereich mit einer „Objektanpassungs“-Regel, die das Bild den gesamten Bereich ausfüllen lässt, sorgt dafür, dass alle Karten die gleiche Höhe haben und die Illustrationen an den Rändern beschnitten werden, anstatt sie zu strecken.

Lange Titel verursachen die andere Fehlausrichtung. Zwei Textzeilen unter einem Cover und vier unter dem nächsten führen dazu, dass die Autorennamen in der Reihe unterschiedliche Höhen haben.

Einige wenige Gestaltungselemente prägen die visuelle Wirkung einer Buchsammlung maßgeblich:

– ein festes Seitenverhältnis für den Coverbereich, sodass ein kompakter Nachdruck und ein hoher Bildband denselben Platz einnehmen;

– eine Zeilenbegrenzung für Titel, die die Autorenzeile auf jeder Karte auf gleicher Höhe hält;

– großzügige Abstände zwischen den Gruppen, sodass Neuerscheinungen und Empfehlungen der Redaktion wie separate Regale wirken;

– ein Hover-Effekt, der eine Bewertung oder eine kurze Inhaltsangabe anzeigt.

Nicepage steuert die meisten dieser Elemente über seine visuellen Steuerelemente, wobei das Rasterelement Spalten und Abstände festlegt.

Rasterspalten verkleinern sich auf schmalen Bildschirmen

Auf einem breiten Bildschirm lässt sich eine lange Reihe von Covern problemlos darstellen. Dieselbe Reihe wird auf einem Smartphone meist auf ein oder zwei Spalten reduziert. Was dazwischen passiert, sollte in jedem responsiven Modus überprüft werden.

Sorgen Sie dafür, dass Cover, Titel und Autor in jeder Breite gut lesbar sind. Genrebezeichnungen und Editionshinweise können auf kleinen Bildschirmen kleiner dargestellt werden, da Leser auf einem Smartphone beim Durchblättern eines Regals zuerst auf das Cover achten. Eine private Bibliothek verträgt mehr Dichte als die Auswahl einer Buchhandlung, wo jedes Cover gleichzeitig ein Produkt ist.

Benutzerdefinierte Regeln für ein einzelnes Regal

Manchmal benötigt eine Gruppe Funktionen, die die Standardeinstellungen nicht bieten, wie beispielsweise eine goldene Umrandung für Preisträger. Nicepage unterstützt Benutzerdefinierte CSS-Steuerelemente für einzelne Elemente, einzelne Seiten oder die gesamte Website und deckt damit solche Ausnahmen ab.

Die Bewertung einer Vorlage anhand ihres am stärksten frequentierten Regals ist aussagekräftiger als die Demo-Startseite. Laden Sie Ihr längstes Buch, Ihren am wenigsten ansprechenden Cover-Scan und die größte Gruppe, die Sie veröffentlichen, und prüfen Sie, ob die Zeilen noch stimmig sind.