Intip proses dan alat yang digunakan untuk membangun pengalaman gaya kalender liburan Designcember.
Untuk menyambut bulan Desember dan berbagai kalender yang digunakan orang-orang untuk menghitung mundur dan merayakan hari libur, kami ingin menyoroti konten web dari komunitas dan tim Chrome. Setiap hari, kami menyoroti satu konten terkait pengembangan dan desain UI, dengan total 31 sorotan, yang mencakup 26 situs demo, alat, pengumuman, podcast, video, artikel, dan studi kasus baru.
Lihat pengalaman lengkapnya di designcember.web.app.
Ringkasan
Tujuan kami adalah menghadirkan pengalaman web yang mudah diakses, unik, modern, dan responsif dengan byte sesedikit mungkin. Kami ingin menyoroti API responsif baru seperti kueri penampung, dan menyertakan contoh mode gelap yang indah di situs yang berfokus pada desain dan memiliki banyak aset. Untuk mencapainya, kami mengompresi file, menawarkan beberapa format, menggunakan alat build yang dioptimalkan untuk pembuatan situs statis, mengirimkan polyfill baru, dan banyak lagi.
Mulai dengan keunikan
Ide di balik situs kalender Designcember adalah untuk berfungsi sebagai etalase semua karya yang ingin kami soroti sepanjang bulan Desember, sekaligus berfungsi sebagai situs demo. Kami memutuskan untuk membangun gedung apartemen responsif yang bisa dibuat lebih tinggi dan lebih sempit, atau lebih pendek dan lebih lebar, dengan jendela yang disusun ulang di dalam bingkai. Setiap jendela mewakili satu hari (dan dengan demikian, satu konten). Kami bekerja sama dengan ilustrator Alice Lee untuk mewujudkan visi kami.
Alice menginspirasi, membagikan proses dan sketsa yang menarik bahkan dalam konsep awalnya. Saat dia mengerjakan seni, kami meretas arsitektur. Diskusi awal berkisar pada tata letak makro, bangunan, dan jendelanya. Bagaimana jendela akan menyesuaikan diri dengan satu, dua, atau tiga kolom saat ruang tampilan yang lebih luas tersedia? Seberapa jauh mereka bisa menyusut atau meregang? Berapa ukuran maksimum bangunan tersebut? Seberapa jauh jendela akan bergeser?
Berikut adalah pratinjau prototipe responsif menggunakan grid-auto-flow: dense yang menunjukkan cara penempatan otomatis jendela oleh algoritma petak. Kami segera menyadari bahwa meskipun petak rasio aspek berfungsi dengan baik untuk menampilkan karya seni, petak tersebut tidak memberikan peluang untuk membiarkan jendela tumbuh dan menyusut ke ruang yang tersedia non-seragam dan menampilkan kecanggihan kueri penampung.
Setelah petak umum relatif stabil dan mengomunikasikan arah responsivitas bangunan dan jendelanya, kami dapat berfokus pada satu jendela. Beberapa jendela diregangkan, diperkecil, diperas, diperbesar, dan disusun ulang lebih banyak daripada jendela lainnya di petak.
Setiap jendela harus menangani sejumlah turbulensi pengubahan ukuran. Di bawah ini adalah prototipe jendela yang menunjukkan responsivitasnya terhadap turbulensi, yang menunjukkan seberapa besar penyesuaian yang dapat kita harapkan dari setiap jendela interaktif.
Animasi jendela dengan sprite sheet
Beberapa jendela memiliki animasi untuk menghadirkan interaksi tambahan pada pengalaman. Animasi digambar tangan, frame demi frame, di Photoshop. Setiap frame diekspor, diubah menjadi spritesheet dengan
generator spritesheet ini, lalu dioptimalkan dengan Squoosh. Animasi CSS kemudian menggunakan background-position-x dan
animation-timing-function seperti yang ditunjukkan dalam contoh berikut.
.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%; }
}
Beberapa animasi, seperti celengan hari keenam, adalah animasi CSS berbasis langkah.
Kita mencapai efek ini dengan teknik serupa, menggunakan steps(), dengan perbedaan bahwa keyframe adalah posisi transformasi CSS, bukan posisi latar belakang.
Masking CSS
Beberapa jendela memiliki bentuk yang unik. Kami menggunakan
masker dan
aspect-ratio untuk membantu membuat jendela yang dapat diskalakan, berbentuk unik, dan adaptif.
Untuk membuat mask, seperti mask untuk jendela delapan ini, diperlukan beberapa keterampilan Photoshop klasik, ditambah sedikit pengetahuan tentang cara kerja mask di web. Mari kita lihat periode untuk hari kedelapan.
Untuk menjadi mask, bentuk dalam semanggi berdaun empat harus diisolasi sebagai bentuknya sendiri dan diisi dengan warna putih. Warna putih memberi tahu CSS konten mana yang tetap ada, dan semua konten di luar warna putih tidak akan ditampilkan. Di Photoshop, bagian dalam jendela dipilih, diberi efek feather 1 piksel (untuk menghilangkan masalah aliasing), lalu diisi dengan warna putih dan diekspor dengan tinggi dan lebar yang sama dengan bingkai jendela. Dengan begitu, frame dan mask dapat disusun langsung di atas satu sama lain, menampilkan konten dalam frame seperti yang diharapkan.
Setelah selesai, konten jendela dapat diubah dan akan selalu tampak berada dalam frame kustom. Gambar berikut menunjukkan versi mode gelap jendela, dengan gradien latar belakang yang berbeda dan filter CSS glow yang diterapkan pada cahaya.
Penyamaran juga mendukung jendela berbasis kueri-penampung responsif. Di jendela sembilan, ada karakter yang tersembunyi di balik topeng hingga jendela berukuran lebih kecil. Untuk memastikan pengguna tidak dapat menyesuaikan gambar keluar dari frame, Alice menyelesaikan karakter sepenuhnya untuk kami. Karakter ditutupi dalam jendela, tetapi tanaman tidak, jadi tantangan lain yang kami hadapi adalah menyusun elemen yang ditutupi dengan lapisan yang tidak ditutupi, dan memastikan semuanya diskalakan dengan baik bersama-sama.
Gambar berikut menunjukkan tampilannya tanpa mask di jendela dan karakter.
Memadatkan karya seni
Untuk mempertahankan kualitas ilustrasi dan memastikan layar beresolusi tinggi tidak mendapatkan pengalaman pengguna yang buram, Alice bekerja dengan rasio piksel 3x. Rencananya adalah menggunakan imgix dan menayangkan gambar serta format yang dioptimalkan di server mereka, tetapi kami menemukan bahwa penyesuaian manual dengan alat Squoosh dapat menghemat 50% atau lebih.
Ilustrasi memiliki tantangan unik untuk kompresi, terutama gaya sapuan kuas dan tepi kasar transparan yang digunakan Alice. Kami memilih untuk mengompresi setiap gambar png yang diekspor dari Photoshop 3x, menjadi png, webp, dan avif yang lebih kecil. Setiap jenis file memiliki kemampuan kompresi khusus, dan diperlukan kompresi lebih dari 50 gambar untuk menemukan beberapa setelan pengoptimalan umum.
Squoosh CLI menjadi sangat penting dengan lebih dari 200 gambar yang perlu dioptimalkan. Jika dilakukan secara manual, proses ini akan memakan waktu berhari-hari. Setelah memiliki setelan pengoptimalan umum, kami memberikannya sebagai petunjuk command line dan memproses batch seluruh folder gambar PNG menjadi gambar WebP dan AVIF yang dikompresi.
Berikut adalah contoh perintah squoosh CLI AVIF yang digunakan:
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
Dengan gambar yang dioptimalkan yang diperiksa ke repo, kita dapat mulai memuatnya dari 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>
Menulis kode sumber gambar secara berulang-ulang, jadi kami membuat komponen Astro untuk menyematkan gambar dengan satu baris kode.
<Pic filename="day1/inner-frame" role="presentation" />
Pengguna pembaca layar dan keyboard
Sebagian besar pengalaman Designcember dapat dinikmati melalui jendela interaktif dan seni. Kami harus memastikan pengguna keyboard dapat menggunakan situs dan melihat sekilas ke dalam jendela, serta pengguna pembaca layar mendapatkan pengalaman narasi yang baik.
Misalnya, saat menyematkan gambar, kami menggunakan role="presentation" untuk menandai gambar sebagai presentasi untuk pembaca layar. Kami merasa bahwa pengalaman pengguna dengan 5 hingga 12 deskripsi alt yang tidak lengkap akan menjadi pengalaman yang buruk. Jadi, kami menandai gambar sebagai presentasi dan memberikan narasi jendela secara keseluruhan. Menjelajahi jendela di pembaca layar kemudian memiliki nuansa naratif yang bagus, yang kami harapkan dapat membantu menyampaikan keunikan dan keseruan yang ingin dibagikan situs.
Video berikut menunjukkan demo pengalaman keyboard. Tombol tab, enter, spasi, dan escape digunakan untuk mengatur fokus ke dan dari pop-up jendela dan jendela.
Pengalaman pembaca layar memiliki atribut ARIA khusus yang memberikan kejelasan pada konten. Misalnya, link untuk hari hanya bertuliskan "satu" atau "dua", tetapi dengan beberapa ARIA tambahan, link tersebut diumumkan sebagai "Hari satu" dan "Hari dua". Selain itu, semua gambar diringkas dalam satu label sehingga setiap jendela memiliki deskripsi.
Astro, generator situs berbasis komponen yang mengutamakan statis
Astro memudahkan tim bekerja sama di situs. Model komponen sudah tidak asing bagi developer Angular dan React, sementara sistem gaya nama class yang tercakup membantu setiap developer mengetahui bahwa pekerjaan mereka di jendela tidak akan berkonflik dengan orang lain.
Hari sebagai komponen
Setiap hari adalah komponen yang mengambil status dari penyimpanan data waktu build. Hal ini memungkinkan kita menjalankan logika template sebelum HTML mencapai browser. Logika akan menentukan apakah hari tersebut harus menampilkan tooltip atau tidak, karena hari yang tidak aktif tidak memiliki pop-up.
Build dijalankan setiap jam dan penyimpanan data waktu build akan membuka hari baru saat server build melewati tengah malam. Sistem kecil yang dapat mengupdate sendiri dan mandiri ini menjaga situs tetap terbaru.
Gaya yang dicakup dan Open Props
Astro mencakup gaya yang ditulis di dalam model komponennya, yang mempermudah pendistribusian beban kerja di antara banyak anggota tim, dan juga membuat penggunaan Open Props menjadi menyenangkan. Gaya Open Props normalize.css sangat berguna dengan tema adaptif (terang dan gelap), serta membantu mengatur konten seperti paragraf dan header.
Sebagai pengguna awal Astro, kami mengalami beberapa masalah dengan PostCSS. Misalnya, kami tidak dapat mengupdate ke versi Astro terbaru karena terlalu banyak masalah build. Lebih banyak waktu dapat dihabiskan di sini untuk mengoptimalkan build dan alur kerja developer.
Penampung fleksibel
Beberapa jendela diperbesar dan diperkecil, dengan mempertahankan rasio aspek untuk mempertahankan kualitas visualnya. Kami menggunakan beberapa jendela lain untuk menunjukkan keunggulan arsitektur berbasis komponen dengan kueri penampung. Kueri penampung berarti jendela dapat memiliki informasi gaya responsifnya sendiri dan menyesuaikan kembali berdasarkan ukurannya sendiri. Beberapa jendela berubah dari sempit menjadi lebar dan perlu menyesuaikan ukuran media di dalamnya, serta penempatan media tersebut.
Saat lebih banyak ruang tersedia untuk jendela, kita dapat menyesuaikan ukuran atau elemen turunan jendela agar sesuai. Ternyata, untuk memenuhi jendela adaptif, kueri penampung tidak hanya akan menyenangkan untuk ditampilkan, tetapi juga diperlukan dan akan menyederhanakan secara drastis orkestrasi tata letak tertentu.
.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;
}
}
Pendekatan ini berbeda dengan mempertahankan rasio aspek. Fitur ini menawarkan lebih banyak kontrol dan peluang. Pada ukuran tertentu, banyak anak yang bergerak untuk menyesuaikan diri dengan tata letak baru.
Kueri penampung juga memungkinkan kami mendukung penampungan arah blok (vertikal), sehingga saat jendela bertambah panjang, kami dapat menyesuaikan gaya agar sesuai dengan tepat. Hal ini terlihat dalam kueri berbasis tinggi, yang kami gunakan secara mandiri, dan selain kueri berbasis lebar:
.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);
}
}
Kami juga menggunakan kueri penampung untuk menampilkan dan menyembunyikan detail saat gambar menjadi semakin padat pada ukuran yang lebih kecil, dan lebih kosong pada ukuran yang lebih lebar. Window sembilan adalah contoh bagus di mana hal ini berperan:
Dukungan lintas browser
Untuk menciptakan pengalaman lintas browser modern yang luar biasa, terutama untuk API eksperimental seperti kueri penampung, kita memerlukan polyfill yang luar biasa. Kami mengirimkan permintaan kepada tim kami, dan Surma memelopori pembuatan polyfill kueri penampung baru. Polyfill ini mengandalkan ResizeObserver, MutationObserver, dan fungsi CSS :is(). Oleh karena itu, semua browser modern mendukung polyfill, khususnya Chrome dan Edge dari versi 88, Firefox dari versi 78, dan Safari dari versi 14. Penggunaan polyfill memungkinkan salah satu sintaksis berikut:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Mode gelap
Sentuhan terakhir yang penting untuk situs Designcember adalah tema gelap yang indah. Kami ingin menunjukkan cara Anda dapat menggunakan seni itu sendiri untuk berpartisipasi aktif dalam menciptakan pengalaman mode gelap yang luar biasa. Untuk itu, kami menyesuaikan gaya latar belakang setiap jendela secara terprogram, dan menggunakan CSS sebanyak yang diperlukan saat membuat seni jendela. Sebagian besar latar belakang adalah gradien CSS, sehingga nilai warnanya lebih mudah disesuaikan. Kemudian, kami menempatkan gambar di atasnya.
Fitur tersembunyi lainnya
Sentuhan pribadi
Kami menambahkan beberapa sentuhan pribadi ke halaman untuk memberikan kepribadian yang lebih kuat pada situs. Yang pertama adalah karakter, yang terinspirasi dari tim kami. Kami juga menyertakan kursor bergaya throwback pada hari tidak aktif dan bereksperimen dengan gaya favicon.
Sentuhan fungsional
Salah satu sentuhan fungsional tambahan adalah fungsi "Lompat ke Hari Ini", dengan burung yang bertengger di atas bangunan. Jika Anda mengklik atau menekan enter pada burung ini, Anda akan diarahkan ke bagian bawah halaman ke hari dalam bulan saat ini, sehingga Anda dapat dengan cepat melihat peluncuran terbaru.
Situs Designcember juga memiliki stylesheet cetak khusus yang pada dasarnya menayangkan gambar tertentu yang paling cocok untuk kertas berukuran 8,5" x 11" sehingga Anda dapat mencetak kalender sendiri dan tetap merayakan Natal sepanjang tahun.
Secara keseluruhan, banyak upaya dilakukan untuk menciptakan pengalaman web modern yang menyenangkan dan unik untuk merayakan pengembangan UI sepanjang bulan Desember. Semoga Anda menyukainya.
