Mengintip proses dan alat yang digunakan untuk membangun pengalaman bergaya kalender liburan Designcember.
Dalam semangat bulan Desember dan banyak kalender yang digunakan orang untuk menghitung mundur dan merayakan, kami ingin menyoroti konten web dari komunitas dan tim Chrome. Setiap hari, kami menyoroti satu konten terkait pengembangan UI dan desain, yang berjumlah 31 sorotan, termasuk 26 situs demo, alat, pengumuman, podcast, video, artikel, dan studi kasus baru.
Lihat pengalaman lengkapnya di designcember.com.
Ringkasan
Tujuan kami adalah memberikan pengalaman web yang mudah diakses, unik, modern, dan responsif dalam jumlah byte sesedikit mungkin. Kami ingin menyoroti API responsif baru seperti kueri container, dan menyertakan contoh mode gelap yang bagus di situs yang berfokus pada desain dan sarat aset. Untuk mencapai hal ini, kami mengompresi file, menawarkan beberapa format, menggunakan alat build yang dioptimalkan untuk pembuatan situs statis, mengirimkan polyfill baru, dan lainnya.
Memulai dengan keinginan
Ide seputar situs kalender Designcember adalah untuk berfungsi sebagai etalase untuk semua karya yang ingin kami soroti sepanjang bulan Desember, sekaligus bertindak seperti situs demo itu sendiri. Kami memutuskan untuk membuat gedung apartemen responsif yang dapat menjadi lebih tinggi dan lebih sempit, atau lebih pendek dan lebih lebar, dengan jendela yang mengatur ulang sendiri dalam bingkai. Setiap periode mewakili satu hari (dan dengan demikian, satu konten). Kami bekerja sama dengan ilustrator Alice Lee untuk mewujudkan visi kami.
Alice sangat inspiratif, membagikan proses dan sketsa yang menarik bahkan dalam konsep awalnya. Saat dia mengerjakan seni, kami meretas arsitekturnya. Diskusi awal seputar tata letak makro, gedung, dan jendelanya. Bagaimana jendela beradaptasi dengan satu, dua, atau tiga kolom ketika lebih banyak ruang tampilan yang tersedia? Sejauh mana ia dapat menyusut atau melar? Berapa ukuran maksimum bangunan tersebut? Berapa banyak jendela akan bergeser?
Berikut adalah pratinjau prototipe responsif menggunakan grid-auto-flow: dense yang menunjukkan bagaimana jendela dapat ditempatkan secara otomatis dengan algoritma petak. Kami dengan cepat menyadari bahwa meskipun petak rasio aspek berperforma baik untuk menampilkan karya seni, petak tersebut tidak memberikan peluang untuk membiarkan jendela berkembang dan mengecil menjadi ruang yang tersedia yang tidak seragam dan menunjukkan kekuatan kueri container.
Setelah petak umum relatif stabil dan menyampaikan kesan arah untuk responsivitas bangunan dan jendelanya, kita dapat berfokus pada satu jendela. Beberapa jendela membentang, menyusut, menyempit, tumbuh, dan menyusun ulang dirinya sendiri lebih dari yang lain dalam petak.
Setiap jendela harus menangani turbulensi pengubahan ukuran dalam jumlah tertentu. Di bawah ini adalah prototipe jendela yang menunjukkan responsivitasnya terhadap turbulensi, yang menunjukkan seberapa banyak kita dapat mengharapkan setiap jendela interaktif untuk menyesuaikan.
Animasi jendela dengan spritesheet
Beberapa jendela memiliki animasi untuk memberikan interaksi tambahan ke 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 mendapatkan efek ini dengan teknik serupa, menggunakan steps(), dengan perbedaan bahwa keyframe adalah posisi transformasi CSS, bukan posisi latar belakang.
Penyamaran CSS
Beberapa jendela memiliki bentuk unik. Kami menggunakan
mask dan
aspect-ratio untuk membantu membuat jendela yang skalabel, 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 jendela untuk hari kedelapan.
Agar menjadi masker, bentuk jenis semanggi empat daun bagian dalam harus diisolasi sebagai bentuknya sendiri dan diisi dengan warna putih. Warna putih memberi tahu CSS konten apa yang tetap ada, dan yang di luar warna putih tidak. Di Photoshop, bagian dalam jendela dipilih, di-feather 1 piksel (untuk menghapus masalah aliasing), lalu diisi dengan warna putih dan diekspor dengan tinggi dan lebar yang sama dengan bingkai jendela. Dengan cara ini, bingkai dan mask dapat dilapiskan langsung di atas satu sama lain, yang menunjukkan konten bagian dalam dalam bingkai seperti yang diharapkan.
Setelah selesai, konten jendela dapat diubah dan akan selalu muncul dalam bingkai kustom. Gambar berikut menampilkan versi mode gelap jendela, dengan gradien latar belakang yang berbeda dan filter CSS glow yang diterapkan ke cahaya.
Penyamaran juga mendukung jendela berbasis kueri penampung yang responsif. Di jendela sembilan, ada karakter yang disembunyikan di balik topeng hingga jendela berukuran lebih sempit. Untuk memastikan pengguna tidak dapat menyesuaikan gambar di luar bingkai, Alice menyelesaikan karakter lengkap untuk kita. Karakter disamarkan dalam jendela, tetapi tanaman tidak, sehingga tantangan lain yang kami hadapi adalah menempatkan elemen yang disamarkan dengan lapisan yang tidak disamarkan, dan memastikan semuanya diskalakan dengan baik.
Gambar berikut menunjukkan tampilannya tanpa mask pada jendela dan karakter.
Mempersempit karya seni
Untuk mempertahankan fidelitas ilustrasi dan memastikan layar beresolusi tinggi tidak akan 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 mendapati bahwa penyesuaian manual dengan alat Squoosh dapat menghemat 50% atau lebih.
Ilustrasi memiliki tantangan unik untuk kompresi, terutama goresan kuas dan gaya tepi kasar transparan yang digunakan Alice. Kami memilih untuk memilih Squoosh setiap 3x Photoshop mengekspor gambar png, ke 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 harus dioptimalkan—melakukan semua itu secara manual akan memerlukan waktu berhari-hari. Setelah memiliki setelan pengoptimalan umum, kami menyediakannya sebagai petunjuk command line dan memproses seluruh folder gambar PNG secara batch menjadi format 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 karya seni yang dioptimalkan yang di-checkin ke repo, kita dapat mulai memuat karya seni tersebut 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 berulang kali, 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 adalah melalui seni dan jendela interaktif. Kami ingin pengguna keyboard dapat menggunakan situs dan melihat jendela, serta pengguna pembaca layar mendapatkan pengalaman narasi yang baik.
Misalnya, saat menyematkan gambar, kita menggunakan role="presentation" untuk menandai gambar sebagai presentasi untuk pembaca layar. Kami merasa bahwa pengalaman pengguna dengan 5 hingga 12 deskripsi alt yang terpecah akan menjadi pengalaman yang buruk. Jadi, kami menandai gambar sebagai presentasi dan memberikan narasi jendela secara keseluruhan. Bergerak melalui jendela pada pembaca layar akan menciptakan nuansa naratif yang menyenangkan, yang kami harap akan membantu menghadirkan imajinasi dan keseruan yang ingin dibagikan oleh situs ini.
Video berikut menampilkan 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 yang ditambahkan, link tersebut akan diumumkan sebagai "Hari pertama" dan "Hari kedua". Selain itu, semua gambar diringkas dalam satu label sehingga setiap jendela memiliki deskripsi.
Astro, generator situs berbasis komponen dan statis
Astro memudahkan tim untuk bekerja sama di situs. Model komponen sudah dikenal oleh developer Angular dan React, sedangkan sistem gaya nama class cakupan membantu setiap developer mengetahui bahwa pekerjaan mereka di jendela tidak akan bertentangan dengan orang lain.
Hari sebagai komponen
Setiap hari terdapat 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 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 melakukan update sendiri dan mandiri ini membuat situs selalu aktual.
Gaya cakupan dan Properti Terbuka
Astro mencakup gaya yang ditulis di dalam model komponennya, yang mempermudah distribusi 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 mengelola 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 alur kerja build dan developer.
Container fleksibel
Beberapa jendela membesar dan mengecil, mempertahankan rasio aspek untuk mempertahankan gambarnya. Kami menggunakan beberapa jendela lain untuk menunjukkan keandalan arsitektur berbasis komponen dengan kueri penampung. Kueri penampung berarti jendela dapat memiliki informasi gaya responsif masing-masing dan menyesuaikan kembali berdasarkan ukurannya sendiri. Beberapa jendela berubah ukuran dari yang kecil menjadi lebar dan perlu menyesuaikan ukuran media di dalamnya, serta penempatan media tersebut.
Karena lebih banyak ruang yang 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 menyederhanakan orkestrasi tata letak tertentu secara drastis.
.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. Hal ini menawarkan lebih banyak kontrol dan lebih banyak peluang. Pada ukuran tertentu, banyak anak yang berpindah untuk beradaptasi dengan tata letak baru.
Kueri penampung juga memungkinkan kita mendukung pembatasan arah blok (vertikal), sehingga saat panjang jendela bertambah, kita dapat menyesuaikan gayanya agar sesuai. Hal ini terlihat pada kueri berbasis tinggi, yang kami gunakan secara terpisah, 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 karena gambar menjadi semakin ramai pada ukuran yang lebih kecil, dan lebih kosong pada ukuran yang lebih lebar. Jendela sembilan adalah contoh yang bagus tentang penerapannya:
Dukungan lintas browser
Untuk menciptakan pengalaman lintas browser modern yang luar biasa, terutama untuk API eksperimental seperti kueri penampung, kita memerlukan polyfill yang bagus. Kami telah menghubungi tim kami, dan Surma memelopori build untuk polyfill kueri container baru. Polyfill mengandalkan ResizeObserver, MutationObserver, dan fungsi:is() CSS. 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 menggunakan seni itu sendiri sebagai peserta aktif dalam menciptakan pengalaman mode gelap yang luar biasa. Untuk itu, kami menyesuaikan gaya latar belakang setiap jendela secara terprogram, dan menggunakan CSS sebanyak mungkin saat membuat gambar jendela. Sebagian besar latar belakang adalah gradien CSS, sehingga akan lebih mudah untuk menyesuaikan nilai warnanya. Kemudian, kita menambahkan lapisan gambar di atasnya.
Telur Paskah lainnya
Sentuhan pribadi
Kami menambahkan beberapa sentuhan pribadi ke halaman untuk memberi situs lebih banyak kepribadian. Yang pertama adalah pemeran karakter, yang terinspirasi dari tim kami. Kami juga menyertakan kursor bergaya kilas balik pada hari tidak aktif dan bermain-main dengan gaya favicon.
Sentuhan fungsional
Salah satu sentuhan fungsional tambahan adalah fungsi "Langsung ke Hari Ini", dengan burung yang duduk di atas bangunan. Dengan mengklik atau menekan enter pada burung ini, Anda akan diarahkan ke hari ini dalam bulan tersebut, sehingga Anda dapat dengan cepat membuka peluncuran terbaru.
Designcember.com 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 meriah sepanjang tahun.
Secara keseluruhan, banyak pekerjaan yang dilakukan untuk menciptakan pengalaman web modern yang menyenangkan dan unik untuk merayakan pengembangan UI sepanjang bulan Desember. Semoga Anda menyukainya.
