Ein Einblick in den Prozess und die Tools, mit denen Designcember wie ein Kalender für die Festtage erstellt wurde.
Anlässlich des Dezembers und der vielen Kalender, die viele Leute zum Feiern und Countdown verwenden, wollten wir Webinhalte von der Community und vom Chrome-Team hervorheben. Jeden Tag haben wir einen Inhalt zum Thema UI-Entwicklung und Design mit insgesamt 31 Highlights vorgestellt, darunter 26 neue Demowebsites, Tools, Ankündigungen, Podcasts, Videos, Artikel und Fallstudien.
Die vollständige Version finden Sie unter designcember.com.
Überblick
Unser Ziel war es, mit so wenigen Bytes wie möglich eine barrierefreie, originelle, moderne und responsive Nutzererfahrung zu bieten. Wir möchten neue responsive APIs wie Containerabfragen hervorheben und ein schönes Beispiel für den dunklen Modus in eine designorientierte Website mit vielen Assets aufnehmen. Dazu haben wir unter anderem Dateien komprimiert, mehrere Formate angeboten, Build-Tools verwendet, die für die Generierung statischer Websites optimiert sind, und einen neuen Polyfill ausgeliefert.
Fantastisch
Die Website des Designcember-Kalenders sollte als Schaufenster für all die Arbeiten dienen, die wir im Dezember hervorheben wollten, und dabei wie eine Demo-Website selbst funktionieren. Wir beschlossen, ein responsives Apartmentgebäude zu entwickeln, das höher und schmaler oder kürzer und breiter werden könnte, mit Fenster, die sich im Rahmen neu anordnen. Jedes Fenster repräsentierte einen Tag (und somit einen Inhalt). Gemeinsam mit der Illustratorin Alice Lee haben wir unsere Vision zum Leben erweckt.
Alice war inspirierend und teilte Prozesse und Skizzen, die schon in ihren frühen Konzepten aufregend waren. Während sie an der Kunst arbeitete, haben wir uns an der Architektur beschäftigt. Zu Beginn ging es um das Layout mit Makros, das Gebäude und seine Fenster. Wie passen sich die Fenster an eine, zwei oder drei Spalten an, wenn mehr Platz für den Darstellungsbereich verfügbar wird? Wie weit können sie geschrumpft oder gestreckt werden? Wie groß wäre das Gebäude maximal? Wie stark würden sich die Fenster verschieben?
Hier ist eine Vorschau eines responsiven Prototyps mit grid-auto-flow: dense, der zeigt, wie Fenster automatisch durch den Rasteralgorithmus platziert werden können. Wir stellten schnell fest, dass die Raster mit Seitenverhältnissen zwar zur Darstellung von Kunst wunderschön funktionieren, sie aber keine Möglichkeit boten, die Fenster in einen ungleichmäßigen verfügbaren Platz zu vergrößern und zu verkleinern und die Leistungsfähigkeit von Containerabfragen zur Geltung zu bringen.
Sobald das allgemeine Raster relativ stabil war und eine Richtung für die Reaktionsfähigkeit des Gebäudes und seiner Fenster vermittelte, konnten wir uns auf ein einzelnes Fenster konzentrieren. Einige Fenster dehnten, schrumpften, drückten, wuchsen und schnitten sich neu zusammen als andere im Raster.
Jedes Fenster müsste einen bestimmten Grad von Turbulenzen bei der Größenänderung verarbeiten. Unten sehen Sie den Prototyp eines Fensters, das seine Reaktionsfähigkeit auf Turbulenzen zeigt und zeigt, wie stark sich jedes interaktive Fenster voraussichtlich anpassen wird.
Fensteranimation mit Sprite Sheets
Einige Fenster verfügen über Animationen, um zusätzliche Interaktionen zu ermöglichen. Die Animationen werden Frame für Frame von Hand in Photoshop gezeichnet. Jeder Frame wird exportiert, mit diesem Spritesheet-Generator in ein Sprite Sheet umgewandelt und dann mit Squoosh optimiert. In der CSS-Animation werden dann background-position-x und animation-timing-function verwendet, wie im folgenden Beispiel gezeigt.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
Einige Animationen, wie z. B. das Sparschwein des 6. Tages, waren schrittbasierte CSS-Animationen.
Diesen Effekt haben wir mit einer ähnlichen Technik und mit steps() erzielt. Der Unterschied war, dass es sich bei den Keyframes um CSS-Transformationspositionen und nicht um Hintergrundpositionen handelt.
CSS-Maskierung
Einige Fenster hatten individuelle Formen. Wir haben Masken und aspect-ratio verwendet, um ein skalierbares, einzigartiges und adaptives Fenster zu erstellen.
Um eine Maske wie diese für Fenster 8 zu erstellen, brauchten wir klassische Photoshop-Fähigkeiten und ein wenig Wissen darüber, wie Masken im Web funktionieren. Schauen wir uns das Zeitfenster für Tag acht an.
Um eine Maske zu werden, muss die innere Form der vierblättrigen Kleeblattart isoliert und in der Farbe Weiß gefüllt werden. Weiß gibt dem CSS an, welche Inhalte verbleiben. Alles außerhalb des weißen Felds bleibt unverändert. In Photoshop wurde das Innere des Fensters ausgewählt, 1 px geglättet (zum Entfernen von Aliasing-Problemen), dann weiß ausgefüllt und mit derselben Höhe und Breite wie der Fensterrahmen exportiert. Auf diese Weise können Frame und Maske direkt übereinander gelegt werden, sodass der innere Inhalt wie erwartet im Frame angezeigt wird.
Nach Abschluss des Vorgangs könnte der Inhalt des Fensters geändert werden und schien immer innerhalb des benutzerdefinierten Frames zu bleiben. Die folgende Abbildung zeigt die dunkle Version des Fensters mit einem anderen Hintergrundverlauf und einem CSS-Filter „Schein“, der auf das Licht angewendet wurde.
Die Maskierung unterstützt auch responsive, auf Containerabfragen basierende Fenster. In Fenster 9 ist eine Figur hinter einer Maske versteckt, bis das Fenster eine schmalere Größe hat. Damit die Nutzenden das Bild nicht außerhalb des Rahmens anpassen können, hat Alice die gesamten Zeichen für uns ausgefüllt. Die Figur ist innerhalb des Fensters maskiert, die Pflanzen jedoch nicht. Eine weitere Herausforderung bestand darin, maskierte Elemente mit nicht maskierten Schichten zu überlagern und sicherzustellen, dass sie alle gut zusammen skaliert werden.
Die folgende Abbildung zeigt, wie es ohne Maske auf dem Fenster und Zeichen aussieht.
Die Kunst schüchtern
Um die Qualität der Illustration beizubehalten und dafür zu sorgen, dass HD-Bildschirme nicht verschwommen dargestellt werden, arbeitete Alice mit einem 3-fachen Pixelverhältnis. Unser Plan war es, mit imgix optimierte Bilder und Formate auf dem Server bereitzustellen, aber wir fanden heraus, dass wir durch manuelle Anpassungen mit dem Squoosh-Tool mindestens 50% einsparen konnten.
Die Illustration stellt besondere Herausforderungen für die Komprimierung dar, insbesondere den Pinselstrich und den Stil der transparenten Kanten, den Alice verwendet hat. Wir entschieden uns für jedes 3x Photoshop exportierte PNG-Bild mit Squoosh, dann als kleineres PNG, WEBP und AVIF. Jeder Dateityp verfügt über spezielle Komprimierungsfunktionen. Mehr als 50 Bilder mussten komprimiert werden, um gängige Optimierungseinstellungen zu finden.
Die Squoosh-CLI wurde mit über 200 Bildern zur Optimierung entscheidend – alle diese manuellen Schritte hätten Tage gedauert. Sobald wir die allgemeinen Optimierungseinstellungen hatten, stellten wir sie als Befehlszeilenanweisungen bereit und verarbeiteten ganze Ordner mit PNG-Bildern im Batch in ihre komprimierten WebP- und AVIF-Dateien.
Hier ist ein Beispiel für einen verwendeten AVIF-CLI-Befehl:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
Wenn die optimierte Grafik im Repository eingecheckt ist, könnten wir sie aus HTML laden:
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
Es hat sich wiederholt, den Bildquellcode zu schreiben. Deshalb haben wir eine Astro-Komponente erstellt, um Bilder mit einer Codezeile einzubetten.
<Pic filename="day1/inner-frame" role="presentation" />
Nutzer von Screenreadern und Tastaturen
Ein Großteil der Erfahrung mit Designcember erfolgt in der Kunst und den interaktiven Fenstern. Uns war wichtig, dass Tastaturnutzer die Website nutzen und einen Blick in Fenster werfen können und dass Screenreader-Nutzer eine angenehme Erzählerfahrung erhalten.
Beim Einbetten der Bilder haben wir beispielsweise role="presentation" verwendet, um das Bild als Präsentation für Screenreader zu kennzeichnen. Wir hatten den Eindruck, dass eine Nutzerfreundlichkeit von 5–12 unterbrochenen alt-Beschreibungen als schlecht empfunden werden würde. Also haben wir die Bilder als Präsentation markiert und eine allgemeine Erläuterung des Fensters gegeben. Wenn man sich dann auf einem Screenreader durch die Fenster bewegt, entsteht ein schönes erzählerisches Gefühl, das unserer Hoffnung auf die skurrile und unterhaltsame Seite der Website beiträgt.
Im folgenden Video sehen Sie eine Demo der Tastatur. Die Tabulatortaste, die Eingabetaste, die Leertaste und die Esc-Taste werden alle verwendet, um den Fokus auf die und von den Pop-ups und Fenstern des Fensters zu orchestrieren.
Der Screenreader verfügt über spezielle ARIA-Attribute, die den Inhalt klarer machen. Die Links für die Tage lauten beispielsweise nur „eins“ oder „zwei“, aber mit einigen zusätzlichen ARIA-Informationen werden sie als „Tag eins“ und „Tag zwei“ angekündigt. Außerdem werden alle Bilder in einem einzigen Label zusammengefasst, sodass jedes Fenster über eine Beschreibung verfügt.
Astro – ein komponentengesteuerter Websitegenerator für statische Websites
Astro erleichterte dem Team die Zusammenarbeit an der Website. Das Komponentenmodell war sowohl Angular- als auch React-Entwicklern bekannt, während das skalierte Klassennamen-Stilsystem jedem Entwickler klar machte, dass seine Arbeit an einem Fenster nicht mit anderen in Konflikt geraten würde.
Tage als Komponenten
Jeder Tag war eine Komponente, die den Status aus einem Datenspeicher für Build-Zeiten abgerufen hat. Auf diese Weise können wir die Vorlagenlogik ausführen, bevor der HTML-Code den Browser erreichte. Die Logik bestimmt, ob die Kurzinfo für den Tag angezeigt werden soll, da für inaktive Tage keine Pop-ups angezeigt werden.
Builds werden stündlich ausgeführt und der Datenspeicher für die Build-Zeit würde einen neuen Tag entsperren, wenn der Build-Server erst nach Mitternacht war. Diese sich selbst aktualisierenden und eigenständigen kleinen Systeme sorgen dafür, dass die Website immer auf dem neuesten Stand ist.
Auf einen Bereich reduzierte Stile und offene Eigenschaften
Innerhalb des Komponentenmodells geschriebene Astro-Bereichsstile, was die Verteilung der Arbeitslast auf viele Teammitglieder erleichterte und auch die Verwendung von Open Props machte. Die Open Props normalize.css-Stile erwiesen sich durch das adaptive (helle und dunkle) Design als sehr praktisch. Sie halfen auch beim Wrangle von Inhalten wie Absätzen und Überschriften.
Als erste Nutzer von Astro haben wir einige Probleme mit PostCSS festgestellt. Wir konnten beispielsweise aufgrund zu vieler Build-Probleme nicht auf die neueste Astro-Version aktualisieren. Hier könnte mehr Zeit genutzt werden, um die Build- und Entwickler-Workflows zu optimieren.
Flexible Container
Einige Fenster vergrößern und verkleinern sich unter Beibehaltung des Seitenverhältnisses, um die Kunstwerke zu erhalten. Wir haben einige andere Fenster verwendet, um die Leistungsfähigkeit einer komponentenbasierten Architektur mit Containerabfragen zu demonstrieren. Dank Containerabfragen konnten Fenster ihre individuellen responsiven Gestaltungsinformationen übernehmen und sie an ihre Größe anpassen. Einige Fenster wurden von schmal zu breit und mussten die Größe der darin enthaltenen Medien sowie die Platzierung dieser Medien anpassen.
Wenn mehr Platz für ein Fenster verfügbar wird, könnten wir die Größe oder die untergeordneten Elemente des Fensters an das Fenster anpassen. Es stellte sich heraus, dass Containerabfragen nicht nur Spaß machen würden, um die adaptiven Fenster zu erfüllen, sondern sie wären erforderlich und müssten die Orchestrierung bestimmter Layouts drastisch vereinfachen.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
Dieser Ansatz unterscheidet sich von der Beibehaltung eines Seitenverhältnisses. Sie bietet mehr Kontrolle und mehr Möglichkeiten. Ab einer bestimmten Größe wechseln viele Kinder herum, um sich an ein neues Layout anzupassen.
Dank Containerabfragen konnten wir auch die Begrenzung in Blockrichtung (vertikal) unterstützen, sodass wir die Stile eines Fensters an die Größe anpassen konnten. Dies wird in den höhenbasierten Abfragen beobachtet, die wir eigenständig und zusätzlich zu den breitenbasierten Abfragen verwendet haben:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
Außerdem haben wir Containerabfragen verwendet, um Details ein- und auszublenden, da das Bild bei kleineren Größen immer mehr überfüllt und in größeren Formaten ausfüllt. Fenster 9 ist ein gutes Beispiel dafür, wie dies ins Spiel kam:
Browserübergreifende Unterstützung
Um eine moderne, browserübergreifende Erfahrung zu bieten, insbesondere für experimentelle APIs wie Containerabfragen, benötigen wir ein gutes Polyfill. Wir haben einen Anruf an unser Team gesendet und Surma leitete die Entwicklung für ein neues Polyfill-Tool für Containerabfragen. Der Polyfill basiert auf ResizeObserver, MutationObserver und der CSS-Funktion :is(). Daher unterstützen alle modernen Browser Polyfill, insbesondere Chrome und Edgefrom Version 88, Firefox ab Version 78 und Safari ab Version 14. Bei Verwendung von Polyfill ist jede der folgenden Syntaxen möglich:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Dunkler Modus
Ein letzter Punkt, der für die Designcember-Website unerlässlich war, war ein schönes dunkles Design. Wir wollten zeigen, wie du die Kunst selbst nutzen kannst, um den dunklen Modus aktiv mitgestalten zu können. Dazu haben wir die Hintergrundstile jedes Fensters programmatisch angepasst und so viel CSS-Code verwendet, wie beim Erstellen des Fenstermotivs sinnvoll wäre. Bei den Hintergründen handelte es sich bei den meisten Hintergründen um CSS-Farbverläufe, um die Anpassung der Farbwerte zu vereinfachen. Dann haben wir das Kunstwerk darüber gelegt.
Andere Easter Eggs
Persönliche Note
Wir haben die Seite um einige persönliche Details ergänzt, um der Website eine persönlichere Note zu geben. Das erste waren die Charaktere, inspiriert von unserem Team. Wir haben auch an inaktiven Tagen einen Cursor im Retro-Stil eingefügt und mit dem Favicon-Stil herumprobiert.
Funktionale Akzente
Einer der zusätzlichen funktionalen Elemente ist die Funktion „Zu heute springen“ mit einem Vogel, der auf dem Gebäude sitzt. Wenn du bei diesem Vogel auf die Eingabetaste klickst oder ihn drückst, gelangst du direkt auf die Seite zum aktuellen Tag des Monats.
Auf Designcember.com gibt es auch ein spezielles Stylesheet, auf dem wir ein bestimmtes Bild bereitstellen, das am besten auf Papier im Format 8,5" x 11" funktioniert.So können Sie den Kalender selbst ausdrucken und das ganze Jahr über festlich bleiben.
Insgesamt wurde eine Menge Arbeit in die Erstellung eines unterhaltsamen, skurrilen modernen Weberlebnisses gesteckt, um im Dezember den ganzen Monat lang die Entwicklung der Benutzeroberfläche zu feiern. Wir hoffen, es hat dir gefallen.
