Rzut oka na procesy i narzędzia używane do tworzenia w Designcember motywacji świątecznego.
W duchu grudnia i wielu kalendarzy, których ludzie używają do odliczania i obchodów, chcemy wyróżnić treści internetowe od społeczności i zespołu Chrome. Codziennie prezentowaliśmy jeden materiał dotyczący rozwoju interfejsu użytkownika i projektowania. Łącznie było to 31 materiałów, w tym 26 nowych witryn demonstracyjnych, narzędzi, ogłoszeń, podcastów, filmów, artykułów i studium przypadku.
Zapoznaj się z pełną wersją na stronie designcember.com.
Omówienie
Naszym celem było zapewnienie dostępu do nowoczesnej, nowoczesnej i elastycznej strony internetowej, która zajmuje jak najmniej miejsca. Postanowiliśmy zwrócić uwagę na nowe elastyczne interfejsy API, takie jak zapytania dotyczące kontenerów, i zamieścić piękny przykład trybu ciemnego w witrynie, która jest nastawiona na projekt i zawiera wiele zasobów. Aby to osiągnąć, skompresowaliśmy pliki, zaoferowaliśmy kilka formatów, użyliśmy narzędzi do kompilacji zoptymalizowanych pod kątem generowania witryn statycznych, wprowadziliśmy nowe narzędzie polyfill i wykonaliśmy wiele innych działań.
Zaczynając od kaprysu
Idea strony Designcember polegała na tym, aby była ona miejscem, w którym prezentowane są wszystkie projekty, które chcieliśmy wyróżnić w grudniu, a jednocześnie pełniła funkcję strony demonstracyjnej. Postanowiliśmy stworzyć elastyczny budynek mieszkalny, który może być wyższy i węższy lub niższy i szerszy, a okna w ramce mogą się przestawiać. Każde okno reprezentowało jeden dzień (a tym samym jeden element treści). Wspólnie z ilustratorką Alice Lee urzeczywistniliśmy naszą wizję.
Alice była inspirująca. Udostępniła nam procesy i szkice, które były ekscytujące nawet na etapie wczesnych koncepcji. Podczas gdy ona pracowała nad grafiką, my zajmowaliśmy się architekturą. Wczesne rozmowy dotyczyły ogólnego układu, budynku i jego okien. Jak okna dostosowują się do jednej, dwóch lub trzech kolumn, gdy dostępnej przestrzeni w widoku jest więcej? Jak bardzo mogą się kurczyć lub rozciągać? Jaki jest maksymalny rozmiar budynku? O ile przesunęłyby się okna?
Oto podgląd elastycznego prototypu w wersji grid-auto-flow: dense, który pokazuje, jak okna mogą być automatycznie umieszczane przez algorytm siatki. Szybko zdaliśmy sobie sprawę, że choć siatki z uwzględnieniem proporcji obrazu świetnie sprawdzają się w przypadku grafik, nie pozwalają na powiększanie i pomniejszanie okien w niejednorodnym dostępnym obszarze oraz nie pokazują potencjału zapytań kontenerowych.
Gdy ogólna siatka była stosunkowo stabilna i przekazywała kierunek reakcji budynku i jego okien, mogliśmy skupić się na jednym oknie. Niektóre okna w ramce rozciągały się, kurczyły, ściskały, powiększały i przestawiały się częściej niż inne.
Każde okno musiałby obsłużyć pewną liczbę turbulencji zmiany rozmiaru. Poniżej znajduje się prototyp okna przedstawiający jego reagowanie na turbulencje i pokazujący, jak bardzo można dostosować się w przypadku każdego okna interaktywnego.
Animacja okna z arkuszami sprite
Niektóre okna zawierają animacje, które zwiększają interaktywność. Animacje są rysowane ręcznie klatka po klatce w programie Photoshop. Każdy kadr jest eksportowany i zamieniany w arkusz sprite’ów za pomocą tego generatora arkuszy sprite’ów, a następnie optymalizowany za pomocą Squoosh. Animacja CSS używa wtedy wartości background-position-x i animation-timing-function, jak pokazano w tym przykładzie.
.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%; }
}
Niektóre animacje, np. skarbonka z 6 dnia, były animacjami CSS opartymi na krokach.
Uzyskaliśmy ten efekt za pomocą podobnej techniki, używając steps(), z tą różnicą, że kluczowe klatki miały pozycje transformacji CSS zamiast pozycji tła.
Maskowanie za pomocą CSS
Niektóre okna miały nietypowe kształty. Użyliśmy masek i aspect-ratio, aby utworzyć skalowalne, nietypowe i adaptacyjne okno.
Aby utworzyć maskę, taką jak ta dla okna 8, potrzebne były podstawowe umiejętności w Photoshopie oraz odrobina wiedzy o tym, jak działają maski w internecie. Spójrzmy na okno na ósmy dzień.
Aby uzyskać maskę, wewnętrzny kształt czterolistnej koniczyny musi mieć własny kształt i zostać wypełniony kolorem białym. Biały kolor informuje porównywarkę, które treści mają pozostać, a które nie. W Photoshopie wybrano wnętrze okna, zaokrąglono je o 1 piksel (aby usunąć problemy z aliasowaniem), a następnie wypełniono białym kolorem i wyeksportowano z taką samą wysokością i szerokością jak rama okna. Dzięki temu ramka i maska mogą być nałożone bezpośrednio na siebie, a zawartość wewnątrz ramki będzie wyświetlana zgodnie z oczekiwaniami.
Po zakończeniu procesu można modyfikować zawartość okna, która zawsze będzie się mieścić w ramce niestandardowej. Na poniższym obrazie widać okno w wersji ciemnej z innym gradientem tła i filtrem CSS świecenia zastosowanym do światła.
Maskowanie obsługuje też elastyczne okna oparte na zapytaniu kontenera. W oknie 9 jest postać, która jest ukryta za maską, dopóki okno nie zmniejszy się. Aby użytkownik nie mógł dostosować obrazu poza kadrem, Alice ukończyła rysowanie całej postaci. Postać jest zamaskowana w oknie, ale rośliny nie są, więc kolejnym wyzwaniem było ułożenie zamaskowanych elementów z niezamaskowanymi warstwami i upewnienie się, że wszystkie są dobrze dopasowane.
Na tym obrazie widać, jak wygląda bez maski na oknie i postaci.
Squooshing the art
Aby zachować wierność ilustracji i zadbać o to, aby ekrany o wysokiej rozdzielczości nie były rozmyte, Alicja pracowała z 3-krotnym współczynnikiem pikseli. Planowaliśmy użyć imgix i wyświetlać na serwerze optymalizowane obrazy i formaty, ale okazało się, że ręczne dostosowywanie za pomocą narzędzia Squoosh może przynieść oszczędności rzędu co najmniej 50%.
Kompresja ilustracji stwarza wyjątkowe wyzwania, zwłaszcza w przypadku rysunku wykonanego pędzlem i stylu z przezroczystymi, nierównymi krawędziami, którego Alice używała. Zdecydowaliśmy się na użycie narzędzia Squoosh, aby zredukować rozmiar każdego wyeksportowanego z Photoshopa obrazu PNG do 3 x, a następnie do mniejszego pliku PNG, WebP i avif. Każdy typ pliku ma swoje specjalne możliwości kompresji. Aby znaleźć typowe ustawienia optymalizacji, musieliśmy skompresować ponad 50 obrazów.
Interfejs wiersza poleceń Squoosh stał się kluczowy dzięki optymalizowaniu ponad 200 obrazów – ręczne wprowadzenie tych zmian zajęłoby nam wiele dni. Gdy mieliśmy już wspólne ustawienia optymalizacji, udostępniliśmy je jako instrukcje wiersza poleceń i przetworzyliśmy w partiach całe foldery obrazów PNG na ich skompresowane odpowiedniki w formacie WebP i AVIF.
Oto przykład polecenia squoosh w interfejsie wiersza poleceń AVIF:
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
Po sprawdzeniu zoptymalizowanej grafiki w repozytorium mogliśmy zacząć ładować je z kodu HTML:
<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>
Napisanie kodu źródłowego obrazu było powtarzalne, więc opracowaliśmy komponent Astro do umieszczania obrazów za pomocą jednego wiersza kodu.
<Pic filename="day1/inner-frame" role="presentation" />
Użytkownicy czytników ekranu i klawiatur
Większość Designcember to grafika i interaktywne okna. Ważne było dla nas, aby użytkownicy korzystający z klawiatury mogli korzystać z witryny i zaglądać do okien, a użytkownicy czytników ekranu mogli korzystać z przyjemnego dźwięku.
Na przykład podczas umieszczania obrazów użyliśmy tagu role="presentation", aby oznaczyć obraz jako element prezentacji dla czytników ekranu. Uznaliśmy, że od 5 do 12 uszkodzonych alt tekstów reklamy nie będzie raczej satysfakcjonująca. Dlatego oznaczono je jako obrazy prezentacyjne i dodano do nich ogólny opis. Przechodzenie przez okna za pomocą czytnika ekranu ma przyjemny charakter narracji, co, jak mamy nadzieję, pomoże w przekazaniu szaleństwa i zabawy, które strona chce zaoferować.
Ten film pokazuje klawiaturę w akcji. Klawisze Tab, Enter, Spacja i Escape służą do przełączania fokusu między oknami i wyskakującymi oknami.
Czytniki ekranu mają specjalne atrybuty ARIA, które ułatwiają zrozumienie treści. Na przykład linki dla określonych dni mają tylko wartość „jeden” lub „dwa”, ale przy niektórych dodanych ARIA są one ogłaszane jako „dzień pierwszy” i „drugi”. Ponadto wszystkie obrazy są podsumowane w jednej etykiecie, dzięki czemu każde okno ma opis.
Astro – generator witryn oparty na komponentach, który najpierw generuje wersję statyczną
Astro ułatwia zespołowi współpracę nad witryną. Model komponentów był znajomy zarówno deweloperom Angulara, jak i Reacta, a system ograniczonego stylu nazwy klasy pomagał każdemu deweloperowi wiedzieć, że jego praca nad oknem nie będzie kolidować z pracą innych.
Dni jako komponenty
Każdy dzień był komponentem, który pobierał stan z magazynu danych na czas kompilacji. Dzięki temu możemy uruchomić logikę szablonu, zanim kod HTML dotrze do przeglądarki. Logika określa, czy dany dzień ma wyświetlać tekst podpowiedzi, ponieważ w przypadku dni nieaktywnych nie ma wyskakujących okienek.
Kompilacje są wykonywane co godzinę, a magazyn danych z czasem kompilacji odblokuje nowy dzień, gdy serwer kompilacji przekroczy północ. Te samowystarczalne i samoaktualizujące się systemy dbają o aktualność witryny.
Style ograniczone i otwarte komponenty
Astro wykorzystuje style w ramach modelu komponentu, co ułatwia rozdzielanie zadań między wielu członków zespołu i czyni przyjemnym korzystanie z biblioteki Open Props. Style Open Props normalize.css przydały się do stworzenia motywu adaptacyjnego (jasnego i ciemnego), a także do zarządzania treściami, takimi jak akapity i nagłówki.
Jako użytkownicy wczesnej wersji Astro natknęliśmy się na PostCSS na kilka problemów. Na przykład nie udało nam się zaktualizować do najnowszej wersji Astro z powodu zbyt dużej liczby problemów z kompilacją. W tym przypadku można poświęcić więcej czasu na optymalizację procesu kompilacji i tworzenia.
Elastyczne kontenery
Niektóre okna mogą się powiększać i zmniejszać, zachowując stosunek proporcji, aby zachować wygląd. Użyliśmy też innych okien, aby pokazać możliwości architektury opartej na komponentach z zapytaniami dotyczącymi kontenerów. Zapytania dotyczące kontenerów oznaczały, że okna mogły mieć własne informacje o stylu elastycznym i dostosowywać je w zależności od rozmiaru. Niektóre okna zmieniły się z wąskich na szerokie, więc trzeba było dostosować rozmiar multimediów w nich oraz ich rozmieszczenie.
W miarę zwiększania się rozmiaru okna możemy dostosować jego rozmiar lub elementy podrzędne. Okazało się, że aby spełnić wymagania dotyczące okien adaptacyjnych, zapytania dotyczące kontenera nie tylko uatrakcyjniałyby prezentację, ale byłyby też wymagane i znacznie upraszczałyby tworzenie określonych układów.
.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;
}
}
To podejście różni się od zachowania współczynnika proporcji. Zapewnia ona większą kontrolę i więcej możliwości. W pewnym wieku dzieci zaczynają się przemieszczać, aby dostosować się do nowego układu.
Zapytania o kontenery umożliwiły nam też obsługę ograniczeń w kierunku bloku (pionowo), dzięki czemu w miarę wydłużania okna mogliśmy dostosowywać style do jego rozmiaru. Widać to w zapytaniach opartych na wysokości, które zostały użyte samodzielnie, oraz w zapytaniach opartych na szerokości:
.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);
}
}
Użyliśmy też zapytań kontenerowych, aby wyświetlać i ukrywać szczegóły, ponieważ grafika stawała się coraz bardziej zatłoczona w mniejszych rozmiarach, a w większych traciła na gęstości. Window Nine to świetny przykład, w którym ta funkcja się przydaje:
Obsługa różnych przeglądarek
Aby zapewnić nowoczesne działanie w różnych przeglądarkach, zwłaszcza w przypadku eksperymentalnych interfejsów API, takich jak zapytania dotyczące kontenerów, potrzebujemy świetnego rozwiązania polyfill. Wysłaliśmy prośbę do naszego zespołu, a Surma kierował pracami nad nową wersją polyfilla zapytań kontenera. Rozszerzenie oprogramowania pośredniczącego opiera się na interfejsie ResizeObserver, interfejsie MutationObserver i funkcji :is() w arkuszu CSS. Dlatego wszystkie nowoczesne przeglądarki obsługują tę funkcję, w szczególności Chrome i Edge od wersji 88, Firefox od wersji 78 i Safari od wersji 14. Dzięki polyfill możesz używać dowolnej z tych składni:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Tryb ciemny
Ostatnim elementem, który był niezbędny w przypadku witryny Designcember, był piękny ciemny motyw. Chcieliśmy pokazać, jak można wykorzystać grafikę, aby aktywnie uczestniczyć w tworzeniu świetnego ciemnego trybu. W tym celu dostosowaliśmy style tła każdego okna programowo i użyliśmy tyle kodu CSS, ile było to sensowne podczas tworzenia grafiki okna. Większość tła była w postaci gradientów CSS, aby ułatwić dostosowanie wartości kolorów. Następnie nałożyliśmy na nie grafikę.
Inne pisanki
elementy osobiste,
Dodaliśmy na stronie kilka elementów, które nadają jej indywidualny charakter. Po pierwsze, obsadę postaci, która powstała dzięki inspiracji od naszego zespołu. W dni bez aktywności dodaliśmy kursor w stylu retro i pobawiliśmy się stylem ikony.
Funkcjonalne elementy
Jedną z dodatkowych funkcji jest „Przejdź do dnia dzisiejszego”, która przedstawia ptaka siedzącego na dachu budynku. Kliknięcie tego ptaka lub naciśnięcie klawisza Enter spowoduje przewinięcie strony do bieżącego dnia miesiąca, dzięki czemu możesz szybko przejść do najnowszych premier.
Designcember.com zawiera też specjalną stronę ze stylem do drukowania, na której udostępniamy obraz, który najlepiej sprawdza się na papierze w formacie 8,5 x 11 cm. Możesz go wydrukować samodzielnie i utrzymywać świąteczny nastrój przez cały rok.
W rezultacie w grudniu przez cały miesiąc mieliśmy okazję korzystać z ciekawych, nowoczesnych i zabawnych stron internetowych. Mamy nadzieję, że Ci się podobało.
