Einleitung
Eines meiner vielen Interessen ist die Fotografie. Nach längerer Pause möchte ich diesem Hobby wieder etwas mehr Zeit widmen.
Anfang März habe ich eine neue Website veröffentlicht, um einige Fotos zu präsentieren:
www.sebastianklein
Mein erster Beitrag im Fotografie-Blog beschreibt die Website aus inhaltlicher Sicht. Hier gehe ich heute auf Design und Frontend-Technologien ein.
Der Impuls
Im Mai 2025 habe ich die beyond tellerrand in Düsseldorf besucht, bei der es gleich zwei interessante Frontend-Talks gab: "Modern CSS for Creative Developers" von Cyd Stumpel und "Painting With the Web" von Matthias Ott.
Was ich aus den beiden Vorträgen unter anderem mitgenommen habe:
- Die aktuellen Web-Features und APIs sind mächtige Werkzeuge
- Um die neuen Möglichkeiten effektiv nutzen zu können, sollten Webentwickler (und Designer) sie aktiv im Browser ausprobieren und Erfahrungen sammeln
Anhand einer langen Liste aktueller CSS-Features habe ich anschließend verschiedene kleine Demos erstellt. Von Beginn an geplant war, möglichst viele neue Technologien in einem echten Projekt anzuwenden – dem Fotografie-Portfolio.
Bevor wir uns der Technik zuwenden, schauen wir uns kurz das Design der Seite an.
Überlegungen zum Design
Meine Grundregel bei der Gestaltung der Seite lautete: Die Fotos müssen im Mittelpunkt stehen.
Das führte zu drei wesentlichen Entscheidungen:
- Der zielgerichtete Einsatz von Weißraum
- Die Begrenzung auf Schwarz-Weiß, zzgl. eines Grüntons zur Hervorhebung in der Navigation
- Eine ansprechende, aber nicht zu plakative Typografie
Eine Ausnahme sind die individuell entworfenen Fotoalben, in denen ich mir mehr gestalterische Freiheiten erlaube.
Alles fließt
Wichtig war mir ein flexibles Layout, das den Viewport möglichst ausnutzt. Lediglich der Inhaltsbereich des Blogs ist in seiner Breite beschränkt.
Die Elemente einer Seite werden von mir meist in einem CSS Grid grundlegend positioniert. Abstände und Elementgrößen wachsen mit der Viewport-Breite. Da Bilder eine Maximalgröße besitzen, wird je nach Bildschirmgröße weiterer Weißraum sichtbar. Diese Asymmetrien sind kein Makel, sondern erwünscht.
Fullscreen-Abschnitte
Einige Seiten sind in Abschnitte unterteilt, die jeweils (mindestens) die Größe des Viewports besitzen. Ihr Inhalt wird im Viewport vertikal zentriert. Dazu gehören die Foto-Detailansichten, das Iceland-Album sowie Unterseiten wie "About".
Der Sticky Header wird von der Höhe eines Abschnitts abgezogen. Der letzte Abschnitt lässt automatisch Raum für den Footer, sodass man dort nicht ein weiteres Mal scrollen muss.
Die Idee dahinter war, die Inhalte übersichtlich zu strukturieren und sie seitenweise durchblättern zu können (siehe scroll-snap).
Grids! Grids! Grids!
Das geplante Design bot mir viel Gelegenheit, verschiedene CSS Grids einzurichten und mit den dazugehörigen CSS-Eigenschaften zu spielen. Allein im Iceland-Album gibt es sechs Grid-Varianten, die sich über Media Queries mehrfach umstellen.
Viel experimentiert habe ich mit einer Idee, die mich nicht mehr los ließ: Kann man ein klassisches Gestaltungsraster, beispielsweise mit 12 Spalten, mit Layout Breakouts kombinieren? Wie sich herausgestellt hat, es geht: CSS Layout Breakout mit Multi-Column Grid
(Den zweiten Teil des Tutorials werde ich vielleicht, bald, wirklich, endlich angehen. Denke ich.)
View Transitions
Die View Transition API ermöglicht animierte Übergänge zwischen zwei Ansichten. Das gilt für dynamische Änderungen auf der bestehenden Webseite und für den Wechsel zwischen zwei Seiten.
Mit drei Zeilen CSS lässt sich bereits ein globaler Fade-Effekt einzurichten:
@view-transition {
navigation: auto;
}Zusätzlich habe ich die Eigenschaft view-transition-name an Bildern ergänzt. Wenn ich ein Bild mit dieser Eigenschaft anklicke und dessen Detailansicht öffne, findet eine Überblendung des Bildes zwischen Start- und Zielposition statt: Das Bild bewegt sich fließend an seine Stelle auf der aufgerufenen Seite. Einzige Voraussetzung ist der identische view-timeline-name am Bild auf beiden Seiten.
Technisch ist mit View Transitions noch weit mehr möglich, auch im Zusammenspiel mit JavaScript. Multiple Elemente können bei einer Überblendung auf verschiedene Weise animiert werden, wie diese Demo zeigt: https://live-transitions.pages.dev
Bei Gelegenheit überlege ich mir eine ansprechende Überblendung zwischen zwei aufeinander folgenden Foto-Detailansichten.
scroll-snap
Wie oben erläutert sind einige Seiten in Abschnitte aufgeteilt, die jeweils den Bildschirm ausfüllen.
Die geplante scroll-snap-Funktion funktioniert aktuell aber nicht gemeinsam mit dem Sticky Header und Footer. Es kommt zu zwei separaten vertikalen Scrollbars, wodurch die Funktion nicht mehr gegeben ist. Das Feature steht weiterhin auf meiner Liste der Verbesserungen.
Variable Schriftart mit OpenType-Features
Als Webfont habe ich die großartige Inter Var gewählt. Über CSS font-feature-settings konnte ich die Glyphen an meine Präferenzen anpassen: ss01 für alternative Ziffern, zero für eine gestrichene Null sowie ss08 für quadratische Anführungszeichen.
Die Schrift enthält zudem einige lange Pfeile als Sonderzeichen, die ich in der Browse-Navigation der Fotos verwende. Bei Hover/Focus werden die Pfeile über ihre Schriftstärke zurückhaltend animiert, ebenso wie die Titel in der Hauptnavigation.
Magic Numbers, oder: Der Kampf gegen Optimierungen
Ich verstecke gern einige kleine Easter Eggs in meinen persönlichen Websites. Wer sich beispielsweise die Stylesheets des Portfolios näher anschaut, wird über wiederkehrende Zahlenwerte für Größen oder Deckkraft stolpern, unter anderem die "66". Sie steht für das Kameramodell SL66 sowie das Mittelformat 6×6.
Die Linien unterhalb der Überschriften besitzen eine Breite von calc(24px + 36px), was dem Kleinbildformat (in mm) entspricht. Dieser kleine Hinweis war nicht leicht umzusetzen, denn: Gleich drei Tools in meinem Build-Prozess haben diese Berechnung zum finalen Wert "60px" optimiert.
Schlussendlich konnte ich Dart-Sass, cssnano und Vite überzeugen, diese calc()-Funktion beizubehalten. Viel Aufwand für den kleinen Spaß, aber am Ende ging es ums Prinzip. Und ich habe tiefere Einblicke in mein gewähltes Toolset erhalten.