Aralık ayının ve insanların geri sayım yapmak ve kutlamak için kullandığı birçok takvimin ruhuna uygun olarak, topluluktan ve Chrome ekibinden web içeriğini öne çıkarmak istedik. Her gün, 26 yeni demo sitesi, araçlar, duyurular, podcast’ler, videolar, makaleler ve örnek olay incelemeleri de dahil olmak üzere toplam 31 öne çıkan kullanıcı arabirimi geliştirme ve tasarımla ilgili içeriği öne çıkardık.
Tam deneyimi şu adreste görün: designcember.com.
genel bakış #
Amacımız, mümkün olan en az bayt ile erişilebilir, tuhaf, modern ve duyarlı bir web deneyimi sunmaktı. Kapsayıcı sorguları gibi yeni duyarlı API’leri öne çıkarmak ve tasarım odaklı ve varlık ağırlıklı bir web sitesine güzel bir karanlık mod örneği eklemek istedik. Bunu başarmak için dosyaları sıkıştırdık, birden çok biçim sunduk, statik site üretimi için optimize edilmiş derleme araçları kullandık, yeni bir çoklu dolgu gönderdik ve daha fazlasını yaptık.
kaprisli başlayan #
Designcember takvim sitesiyle ilgili fikir, Aralık ayı boyunca öne çıkarmak istediğimiz tüm çalışmalar için bir vitrin işlevi görürken kendisi bir demo sitesi gibi davranmaktı. Çerçeve içinde kendilerini yeniden düzenleyen pencereleri olan, daha uzun ve daha dar veya daha kısa ve daha geniş olabilen duyarlı bir apartman inşa etmeye karar verdik. Her pencere bir günü (ve dolayısıyla bir parça içeriği) temsil ediyordu. Illustrator ile çalıştık. Alice Lee vizyonumuzu hayata geçirmek.
Alice, ilk konseptlerinde bile heyecan verici olan süreçleri ve eskizleri paylaşarak ilham veriyordu. O sanat üzerinde çalışırken, biz mimariyi hackledik. İlk tartışmalar makro düzen, bina ve pencereleri etrafındaydı. Daha fazla görüntü alanı kullanılabilir hale geldikçe pencereler bir, iki veya üç sütuna nasıl uyum sağlar? Ne kadar küçülebilir veya uzayabilirler? Binanın maksimum boyutu ne olurdu? Pencereler ne kadar kayar?
İşte duyarlı bir prototipin önizlemesi grid-auto-flow: dense pencerelerin ızgara algoritması tarafından otomatik olarak nasıl yerleştirilebileceğini gösteriyor. En boy oranı ızgaralarının sanatı sergilemek için güzel bir performans göstermesine rağmen, pencerelerin büyüyüp tek tip olmayan kullanılabilir alana küçülmesine izin verme ve kapsayıcı sorgularının gücünü sergileme fırsatı sağlamadıklarını hemen fark ettik.
Genel ızgara nispeten sabit olduğunda ve binanın ve pencerelerinin yanıt verebilirliği için bir yön duygusu ilettiğinde, tek bir pencereye odaklanabildik. Bazı pencereler, ızgaradaki diğerlerinden daha fazla esnedi, küçüldü, sıkıştı, büyüdü ve kendilerini yeniden oluşturdu.
Her pencerenin belirli bir miktarda yeniden boyutlandırma türbülansını işlemesi gerekir. Aşağıda, her etkileşimli pencerenin ne kadar ayarlama yapmasını bekleyebileceğimizi gösteren, türbülansa yanıt verebilirliğini gösteren bir pencere prototipi bulunmaktadır.
Model sayfalarıyla pencere animasyonu #
Bazı pencerelerde, deneyime ekstra etkileşim getirmek için animasyonlar bulunur. Animasyonlar, Photoshop’ta kare kare elle çizilmiştir. Her çerçeve dışa aktarılır, bununla bir hareketli grafik sayfasına dönüştürülür hareketli grafik sayfası üreteci, ardından Squoosh ile optimize edildi. CSS animasyonu daha sonra kullanır background-position-x Ve animation-timing-function aşağıdaki örnekte gösterildiği gibi.
.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%; }
}
gibi bazı animasyonlar altıncı günün kumbarası, adım tabanlı CSS animasyonlarıydı. Bu etkiyi benzer bir teknikle elde ettik. steps()anahtar karelerin arka plan konumları yerine CSS dönüştürme konumları olması farkıyla.
CSS maskeleme #
Bazı pencerelerin benzersiz şekilleri vardı. Kullandığımız maskeler Ve aspect-ratio ölçeklenebilir, benzersiz şekilli ve uyarlanabilir bir pencere oluşturmaya yardımcı olmak için.
Sekizinci pencerede olduğu gibi bir maske oluşturmak için bazı klasik Photoshop becerilerine ek olarak web’de maskelerin nasıl çalıştığı hakkında biraz bilgi gerekiyordu. Sekizinci gün için pencereye bakalım.
Maske olabilmesi için içteki dört yapraklı yonca tipi şeklin kendi şekli gibi izole edilmesi ve beyaz renkle doldurulması gerekir. Beyaz, CSS’ye hangi içeriğin kalacağını ve beyazın dışındaki hiçbir şeyin kalmayacağını söyler. Photoshop’ta, pencerenin içi seçildi, yumuşatılmış 1 piksel (örtüşme sorunlarını gidermek için), ardından beyazla dolduruldu ve pencere çerçevesiyle aynı yükseklik ve genişlikte dışa aktarıldı. Bu şekilde çerçeve ve maske, beklendiği gibi çerçeve içindeki iç içeriği gösterecek şekilde doğrudan birbirinin üzerine yerleştirilebilir.
Tamamlandığında, pencerenin içeriği değiştirilebilir ve her zaman özel çerçeve içinde kalacak şekilde görünür. Aşağıdaki görüntü, farklı bir arka plan gradyanı ve ışığa bir parlaklık CSS filtresi uygulanmış pencerenin karanlık mod sürümünü göstermektedir.
Maskeleme, yanıt veren kapsayıcı sorgusu tabanlı pencereleri de destekler. Dokuzuncu pencerede, pencere daha dar bir boyuta gelene kadar bir maskenin arkasına gizlenmiş bir karakter var. Kullanıcının görüntüyü çerçeve dışına çıkaramayacağından emin olmak için, Alice bizim için tüm karakteri tamamladı. Karakter pencere içinde maskelenir, ancak bitkiler maskelenmez, bu nedenle ele aldığımız bir başka zorluk da maskelenmiş öğeleri maskesiz katmanlarla katmanlamak ve hepsinin birlikte iyi ölçeklenmesini sağlamaktı.
Aşağıdaki görüntü, pencerede ve karakterde maske olmadan nasıl göründüğünü göstermektedir.
sanatı ezmek #
Alice, çizimin aslına uygunluğunu korumak ve yüksek çözünürlüklü ekranların bulanık bir kullanıcı deneyimi yaşamamasını sağlamak için 3x piksel oranında çalıştı. Plan, imgix’i kullanmak ve sunucularında optimize edilmiş görüntüler ve formatlar sunmaktı, ancak Squoosh aracıyla manuel olarak ince ayar yapmanın bize %50 veya daha fazla tasarruf sağlayabileceğini gördük.
Çizim, özellikle Alice’in kullandığı fırça darbesi ve şeffaf pürüzlü kenar stili olmak üzere sıkıştırma için benzersiz zorluklara sahiptir. Photoshop dışa aktarılan her 3x png görüntüsünü Squoosh’u daha küçük bir png, webp ve avif olarak seçtik. Her dosya türünün kendi özel sıkıştırma yetenekleri vardır ve bazı genel optimizasyon ayarlarını bulmak için 50’den fazla görüntüyü sıkıştırmak gerekmiştir.
bu Squoosh CLI optimize edilecek 200’den fazla görüntüyle çok önemli hale geldi; tüm bunları manuel olarak yapmak günler alırdı. Ortak optimizasyon ayarlarına sahip olduktan sonra, bunları komut satırı talimatları olarak sağladık ve PNG görüntülerinin tüm klasörlerini toplu olarak WebP ve AVIF sıkıştırılmış eşdeğerlerine işledik.
İşte kullanılan örnek bir AVIF CLI squoosh komutu:
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
Optimize edilmiş çizimler depoya teslim edildiğinde, bunları HTML’den yüklemeye başlayabiliriz:
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>
Resim kaynak kodunu yazmak tekrarlayıcıydı, bu yüzden bir Astro bileşeni görüntüleri tek bir kod satırıyla gömmek için.
Pic filename="day1/inner-frame" role="presentation" />
Ekran okuyucu ve klavye kullanıcıları #
Designcember deneyiminin çoğu, sanat ve etkileşimli pencerelerden geçer. Bir klavye kullanıcısının siteyi kullanıp pencerelere göz atabilmesi ve ekran okuyucu kullanıcılarının güzel bir anlatım deneyimi yaşaması bizim için önemliydi.
Örneğin, kullandığımız görüntüleri yerleştirirken role="presentation" görüntüyü ekran okuyucular için sunum olarak işaretlemek için. 5 ile 12 arasındaki bir kullanıcı deneyiminin kırıldığını hissettik alt açıklamalar kötü bir deneyim olacaktı. Bu yüzden görüntüleri sunum olarak işaretledik ve genel bir pencere anlatımı sağladık. Bir ekran okuyucunun pencereleri arasında gezinmek, sitenin paylaşmak istediği tuhaf ve eğlenceli havayı sunmaya yardımcı olacağını umduğumuz güzel bir anlatım hissine sahip.
Aşağıdaki video, klavye deneyiminin bir demosunu göstermektedir. Sekme, enter, boşluk çubuğu ve kaçış tuşlarının tümü, pencere açılır pencerelerine ve pencerelere odaklanmayı düzenlemek için kullanılır.
Ekran okuyucu deneyimi, içeriğe netlik getiren özel ARIA özelliklerine sahiptir. Örneğin, günlerin bağlantılarında yalnızca “bir” veya “iki” yazıyor, ancak bazı ARIA eklendiğinde “Birinci Gün” ve “İkinci Gün” olarak duyuruluyorlar. Ayrıca, tüm görüntüler tek bir etikette özetlenir, böylece her pencerenin bir açıklaması olur.
Astro, önce statik, bileşen odaklı site oluşturucu #
yıldız ekibin sahada birlikte çalışmasını kolaylaştırdı. Bileşen modeli hem Angular hem de React geliştiricileri için tanıdıktı, kapsamlı sınıf adı stil sistemi ise her geliştiricinin bir penceredeki çalışmalarının başka hiç kimseyle çakışmayacağını bilmesine yardımcı oldu.
Bileşenler olarak günler #
Her gün bir bileşendi bu durum bir zaman veri deposu oluşturma. Bu, HTML tarayıcıya ulaşmadan önce şablon mantığını çalıştırmamıza izin verdi. Etkin olmayan günlerde pop-up’lar olmadığından, mantık günün araç ipucunu gösterip göstermeyeceğini belirler.
Derlemeler her saat çalıştırılır ve derleme sunucusu gece yarısını geçtiğinde derleme zamanı veri deposu yeni bir günün kilidini açar. Bu kendi kendini güncelleyen ve kendi kendine yeten küçük sistemler siteyi güncel tutar.
Kapsamlı stiller ve Açık Donanımlar #
yıldız bileşen modelinin içinde yazılan stilleri kapsamlariş yükünü birçok ekip üyesi arasında dağıtmayı kolaylaştıran ve aynı zamanda Açık Sahne eğlence. bu Props normalize.css’yi açın stiller, uyarlanabilir (açık ve koyu) temayla kullanışlı hale geldi ve ayrıca paragraflar ve başlıklar gibi içeriklerin karıştırılmasına yardımcı oldu.
Astro’yu erken benimseyenler olarak, PostCSS ile birkaç engelle karşılaştık. Örneğin, şu sürüme güncelleyemedik: en son Astro versiyonu çok fazla yapı sorunu nedeniyle. Derleme ve geliştirici iş akışlarını optimize ederek burada daha fazla zaman harcanabilir.
Esnek kaplar #
Bazı pencereler, sanatlarını korumak için en boy oranını koruyarak büyür ve küçülür. Bileşen tabanlı mimarinin gücünü konteyner sorgularıyla göstermek için başka pencereler kullandık. Kapsayıcı sorguları, pencerelerin kendi bireysel duyarlı stil bilgilerine sahip olabileceği ve kendi boyutlarına göre yeniden ayarlayabileceği anlamına geliyordu. Bazı pencereler dardan genişe gitti ve içlerindeki ortamın boyutunu ve bu ortamın yerleşimini ayarlaması gerekiyordu.
Bir pencere için daha fazla alan kullanılabilir hale geldikçe, pencerenin boyutunu veya alt öğelerini sığacak şekilde uyarlayabiliriz. Uyarlanabilir pencereleri yerine getirmek için kapsayıcı sorgularını sergilemenin sadece eğlenceli olmayacağı, gerekli olacağı ve belirli düzenleri düzenlemeyi büyük ölçüde basitleştireceği ortaya çıktı.
.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;
}
}
Bu yaklaşım, en boy oranını korumaktan farklıdır. Daha fazla kontrol ve daha fazla fırsat sunar. Belirli bir boyutta, birçok çocuk yeni bir düzene uyum sağlamak için hareket eder.
Konteyner sorguları ayrıca blok yönü (dikey) çevrelemeyi desteklememize izin verdi, böylece bir pencerenin uzunluğu büyüdükçe stillerini uygun şekilde ayarlayabiliyorduk. Bu, bağımsız olarak kullandığımız yükseklik tabanlı sorgularda ve genişlik tabanlı sorgulara ek olarak görülür:
.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);
}
}
Sanat giderek daha küçük boyutlarda kalabalık ve daha geniş boyutlarda daha boş hale geldiğinden, ayrıntıları göstermek ve gizlemek için kapsayıcı sorguları da kullandık. Dokuzuncu pencere, bunun devreye girdiği yerin harika bir örneğidir:
Tarayıcılar arası destek #
Özellikle kapsayıcı sorguları gibi deneysel API’ler için harika bir modern tarayıcılar arası deneyim oluşturmak için harika bir çoklu doldurmaya ihtiyacımız var. Ekibimize bir çağrı gönderdik ve Surma yeni bir yapının inşasına öncülük etti. kapsayıcı sorgu çoklu doldurma. polyfill dayanır Gözlemciyi Yeniden Boyutlandır, Mutasyon Gözlemcisi ve CSS :is() işlevi. Bu nedenle, tüm modern tarayıcılar çoklu dolguyu destekler, özellikle sürüm 88’den Chrome ve Edge, sürüm 78’den Firefox ve sürüm 14’ten Safari. Çoklu dolgunun kullanılması aşağıdaki sözdizimlerinden herhangi birine izin verir:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Karanlık mod #
Designcember web sitesi için gerekli olan son bir dokunuş, güzel bir karanlık temaydı. Harika bir karanlık mod deneyimi yaratırken aktif bir katılımcı olmak için sanatın kendisini nasıl kullanabileceğinizi göstermek istedik. Bunun için her pencerenin arka plan stillerini programlı olarak ayarladık ve pencere resmini oluştururken mantıklı olduğu kadar çok CSS kullandık. Arka planların çoğu, renk değerlerini ayarlamak daha kolay olacak şekilde CSS gradyanlarıydı. Daha sonra sanatı bunların üzerine yerleştirdik.
Diğer paskalya yumurtaları #
kişisel dokunuşlar #
Siteye daha fazla kişilik kazandırmak için sayfaya birkaç kişisel dokunuş ekledik. İlki, ekibimizden ilham alan karakter kadrosuydu. Ayrıca, aktif olmayan günlerde bir gerileme tarzı imleç ekledik ve favicon stiliyle oynadık.
Fonksiyonel dokunuşlar #
Ek işlevsel dokunuşlardan biri, binanın tepesinde oturan bir kuşla “Bugüne Atla” işlevidir. Bu kuşa tıklamak veya enter tuşuna basmak sizi sayfada ayın o gününe atlar, böylece en son lansmanlara hızlı bir şekilde ulaşabilirsiniz.
Designcember.com ayrıca, takvimi kendiniz yazdırabilmeniz ve tüm yıl boyunca şenlikli kalabilmeniz için 8,5″ x 11″ kağıtta en iyi sonucu veren belirli bir görüntüyü sunduğumuz özel bir baskı stil sayfasına sahiptir.
Sonuç olarak, Aralık ayında tüm ay boyunca kullanıcı arayüzü gelişimini kutlamak için eğlenceli, tuhaf bir modern web deneyimi oluşturmak için tonlarca çalışma yapıldı. Hoşunuza gittiğini umuyoruz!