Talent CSS-Vorlagen

Talent-CSS-Vorlagen für Künstlerlisten und Profilkarten

Abstände, Bildproportionen und visuelle Darstellungsweisen entscheiden darüber, ob eine Künstlerliste als einheitliches Set oder als uneinheitliche Profile wahrgenommen wird. Talent-CSS-Vorlagen enthalten diese Regeln bereits vordefiniert und lassen Raum für individuelle Anpassungen. Eine dreispaltige Liste von Künstlerkarten wirkt in einer Demo überzeugend, bis eine Karte eine lange Liste von Mitwirkenden enthält und die nächste nur zwei Zeilen.

Gestaltung von Karten mit ungleichmäßigem Inhalt

Kein Künstlerprofil ist gleich umfangreich, und die Gestaltung muss die Liste dennoch als einheitliches Set erscheinen lassen. Vier Regeln sind hierfür maßgeblich:

• Ein festes Bildproportion im Headshot-Bereich. Vertikale Studio-Porträts und breitere Standbilder füllen denselben Platz, und der Bildausschnitt bleibt über die Seite hinweg einheitlich.

• Eine Typografie-Skala, die die Karte ordnet. Der Name des Künstlers steht oben, die Rolle oder Spezialisierung eine Stufe darunter, die Mitwirkendenliste noch dezenter.

• Ein ausreichender Abstand, auch bei hoher Inhaltsdichte. Kartenbreiten, Rasterabstände und Innenabstände sorgen für einen übersichtlichen Zeilenaufbau, wenn ein Profil sehr lang ist. Eine Zeilenbegrenzung für die Biografie verhindert, dass eine ausführliche Karte den gesamten Zeilenbereich ausdehnt.

• Hover- und Fokus-Zustände. Eine hervorgehobene Karte sollte sich optisch von den übrigen Karten in der Zeile abheben.

Breakpoints und lokale Ausnahmen

Die Spaltenanzahl ist der einfache Teil der responsiven Gestaltung: vier Spalten auf einem Breitbild-Bildschirm, zwei auf einem Tablet und eine auf einem Smartphone. Wichtiger ist, was im schmalen Layout oben angezeigt wird. Daher gehören Porträt, Name und Kontakt-Aktion über eine lange Liste der Mitwirkenden, mit einem kürzeren Bildverhältnis und geringeren Abständen auf Mobilgeräten.

Nicepage bietet hierfür responsive Modi für große Bildschirme bis hin zu vertikalen Smartphones sowie benutzerdefinierten CSS-Code, der auf einzelne Elemente, einzelne Seiten oder die gesamte Website angewendet werden kann. Die Option „Minimales CSS pro Seite exportieren“ beschränkt das veröffentlichte Stylesheet auf die tatsächlich verwendeten Regeln.

CSS bestimmt, wie die Liste beim Scrollen aussieht. Testen Sie die Vorlage vor der endgültigen Festlegung in ihrer kompaktesten Form, mit der längsten Liste der Mitwirkenden, die Sie veröffentlichen, und dem breitesten Ausschnitt aus Ihrer Bibliothek. Wenn das Raster dann noch übersichtlich ist, bleibt es auch bei einer größeren Anzahl von Mitwirkenden erhalten. ...