बिल्डिंग डिज़ाइनसींबर

Designcember के हॉलिडे कैलेंडर जैसे अनुभव को बनाने के लिए इस्तेमाल की गई प्रोसेस और टूल के बारे में जानकारी.

Adam Argyle

Una Kravets

दिसंबर के महीने में, लोग कई तरह के कैलेंडर का इस्तेमाल करते हैं. इनमें से कुछ कैलेंडर, छुट्टियों के दिन गिनने और उन्हें सेलिब्रेट करने के लिए इस्तेमाल किए जाते हैं. इसलिए, हमने कम्यूनिटी और Chrome टीम के वेब कॉन्टेंट को हाइलाइट करने का फ़ैसला किया. हमने हर दिन, यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट और डिज़ाइन से जुड़े एक कॉन्टेंट को हाइलाइट किया. इस तरह, हमने कुल 31 कॉन्टेंट को हाइलाइट किया. इनमें 26 नई डेमो साइटें, टूल, एलान, पॉडकास्ट, वीडियो, लेख, और केस स्टडी शामिल थीं.

designcember.web.app पर जाकर, पूरी जानकारी देखें.

खास जानकारी

हमारा मकसद, कम से कम बाइट में ऐसा वेब अनुभव देना था जो ऐक्सेस करने में आसान हो, मज़ेदार हो, आधुनिक हो, और रिस्पॉन्सिव हो. हम कंटेनर क्वेरी जैसे नए रिस्पॉन्सिव एपीआई को हाइलाइट करना चाहते थे. साथ ही, डिज़ाइन पर फ़ोकस करने वाली और ऐसेट से भरपूर वेबसाइट में डार्क मोड का एक बेहतरीन उदाहरण शामिल करना चाहते थे. इसके लिए, हमने फ़ाइलों को कंप्रेस किया, कई फ़ॉर्मैट उपलब्ध कराए, स्टैटिक साइट जनरेशन के लिए ऑप्टिमाइज़ किए गए बिल्ड टूल का इस्तेमाल किया, एक नया पॉलीफ़िल शिप किया, और भी बहुत कुछ किया.

मज़ेदार तरीके से शुरुआत करना

Designcember कैलेंडर साइट बनाने का मकसद यह था कि हम दिसंबर के पूरे महीने में जिस काम को हाइलाइट करना चाहते हैं उसे दिखाया जा सके. साथ ही, यह साइट डेमो साइट के तौर पर भी काम करे. हमने एक ऐसी अपार्टमेंट बिल्डिंग बनाने का फ़ैसला किया जो रिस्पॉन्सिव हो. इसका मतलब है कि वह लंबी और पतली या छोटी और चौड़ी हो सकती है. साथ ही, इसमें ऐसी खिड़कियां हों जो फ़्रेम में अपने-आप व्यवस्थित हो जाएं. हर विंडो एक दिन (और इस तरह, एक कॉन्टेंट) को दिखाती है. हमने अपने विज़न को साकार करने के लिए, इलस्ट्रेटर ऐलिस ली के साथ काम किया.

ऐलिस ने हमें काफ़ी प्रेरणा दी. उन्होंने ऐसी प्रोसेस और स्केच शेयर किए जो शुरुआती कॉन्सेप्ट में भी काफ़ी दिलचस्प थे. जब वह आर्ट पर काम कर रही थी, तब हमने आर्किटेक्चर पर काम किया. शुरुआती चर्चाओं में, मैक्रो लेआउट, बिल्डिंग, और उसकी खिड़कियों के बारे में बात की गई थी. व्यू पोर्ट का ज़्यादा स्पेस उपलब्ध होने पर, विंडो एक, दो या तीन कॉलम के हिसाब से कैसे अडजस्ट होंगी? उन्हें कितना छोटा या बड़ा किया जा सकता है? इमारत का ज़्यादा से ज़्यादा साइज़ क्या होगा? विंडो कितनी शिफ्ट होंगी?

यहां grid-auto-flow: dense का इस्तेमाल करके बनाए गए रिस्पॉन्सिव प्रोटोटाइप की झलक दी गई है. इसमें दिखाया गया है कि ग्रिड एल्गोरिदम, विंडो को अपने-आप कैसे व्यवस्थित कर सकता है. हमें तुरंत यह एहसास हुआ कि आसपेक्ट रेशियो ग्रिड, आर्ट को दिखाने के लिए बहुत अच्छे हैं. हालांकि, इनसे विंडो को उपलब्ध जगह के हिसाब से बड़ा और छोटा करने का विकल्प नहीं मिलता. साथ ही, कंटेनर क्वेरी की सुविधा को भी नहीं दिखाया जा सकता.

जब सामान्य ग्रिड काफ़ी हद तक स्थिर हो गया और इससे बिल्डिंग और उसकी खिड़कियों के रिस्पॉन्सिव होने के बारे में पता चल गया, तब हम एक खिड़की पर फ़ोकस कर सके. ग्रिड में मौजूद कुछ विंडो, दूसरी विंडो की तुलना में ज़्यादा स्ट्रेच, छोटी, सिकुड़ी, बड़ी, और फिर से व्यवस्थित हो गईं.

हर विंडो को, साइज़ बदलने की वजह से होने वाली गड़बड़ियों को ठीक करना होगा. यहां एक विंडो का प्रोटोटाइप दिया गया है. इसमें दिखाया गया है कि यह विंडो, टर्बुलेंस के हिसाब से कितनी तेज़ी से काम करती है. इससे यह भी पता चलता है कि हर इंटरैक्टिव विंडो में कितना बदलाव हो सकता है.

स्प्राइटशीट की मदद से विंडो ऐनिमेशन

कुछ विंडो में ऐनिमेशन होते हैं, ताकि उपयोगकर्ता को बेहतर अनुभव मिल सके. इन ऐनिमेशन को Photoshop में, हाथ से एक-एक फ़्रेम करके बनाया गया है. हर फ़्रेम को एक्सपोर्ट किया जाता है. इसके बाद, इस स्प्राइटशीट जनरेटर की मदद से, उसे स्प्राइटशीट में बदल दिया जाता है. इसके बाद, Squoosh की मदद से उसे ऑप्टिमाइज़ किया जाता है. इसके बाद, सीएसएस ऐनिमेशन में background-position-x और animation-timing-function का इस्तेमाल किया जाता है. इसका उदाहरण यहां दिया गया है.

.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%; }
}

कुछ ऐनिमेशन, जैसे कि छठे दिन का पिगी बैंक, स्टेप-आधारित सीएसएस ऐनिमेशन थे. हमने इसी तकनीक का इस्तेमाल करके यह इफ़ेक्ट हासिल किया है. इसके लिए, हमने steps() का इस्तेमाल किया है. हालांकि, इसमें अंतर यह है कि बैकग्राउंड की पोज़िशन के बजाय, सीएसएस ट्रांसफ़ॉर्म पोज़िशन का इस्तेमाल किया गया है.

सीएसएस मास्किंग

कुछ खिड़कियों का आकार अलग था. हमने मास्क और aspect-ratio का इस्तेमाल किया है, ताकि एक ऐसी विंडो बनाई जा सके जो अलग-अलग साइज़ में उपलब्ध हो, जिसका आकार यूनीक हो, और जो अडैप्टिव हो.

विंडो आठ के लिए इस तरह का मास्क बनाने के लिए, Photoshop की कुछ बुनियादी सुविधाओं का इस्तेमाल किया गया. साथ ही, वेब पर मास्क कैसे काम करते हैं, इसकी थोड़ी जानकारी भी ज़रूरी थी. आइए, आठवें दिन के लिए उपलब्ध विंडो देखें.

मास्क बनने के लिए, अंदर की चार पत्ती वाली क्लोवर टाइप की आकृति को अपनी आकृति के तौर पर अलग किया जाना चाहिए और उसमें सफ़ेद रंग भरा जाना चाहिए. सफ़ेद रंग से सीएसएस को यह पता चलता है कि कौनसा कॉन्टेंट दिखेगा. इसके अलावा, सफ़ेद रंग के बाहर मौजूद कॉन्टेंट नहीं दिखेगा. Photoshop में, विंडो के अंदर के हिस्से को चुना गया था. इसके बाद, एलियासिंग की समस्याओं को दूर करने के लिए, इसे 1 पिक्सल तक फ़ेदर किया गया. इसके बाद, इसे सफ़ेद रंग से भरा गया और विंडो फ़्रेम की ऊंचाई और चौड़ाई के बराबर एक्सपोर्ट किया गया. इस तरह, फ़्रेम और मास्क को एक-दूसरे के ऊपर सीधे तौर पर लेयर किया जा सकता है. इससे फ़्रेम के अंदर का कॉन्टेंट, उम्मीद के मुताबिक दिखेगा.

यह प्रोसेस पूरी होने के बाद, विंडो के कॉन्टेंट में बदलाव किया जा सकता है. साथ ही, यह हमेशा कस्टम फ़्रेम में दिखेगा. इस इमेज में, गहरे रंग वाले मोड में विंडो का वर्शन दिखाया गया है. इसमें बैकग्राउंड का ग्रेडिएंट अलग है और रोशनी पर ग्लो सीएसएस फ़िल्टर लागू किया गया है.

मास्किंग की सुविधा, रिस्पॉन्सिव कंटेनर-क्वेरी पर आधारित विंडो के साथ भी काम करती है. नौवीं विंडो में, एक किरदार है जो तब तक मास्क के पीछे छिपा रहता है, जब तक विंडो का साइज़ छोटा नहीं हो जाता. एलिस ने हमारे लिए पूरा कैरेक्टर बनाया है, ताकि यह पक्का किया जा सके कि उपयोगकर्ता इमेज को फ़्रेम से बाहर न कर पाए. विंडो में मौजूद वर्ण को मास्क किया गया है, लेकिन पौधों को नहीं. इसलिए, हमने एक और चुनौती का सामना किया. इसमें मास्क किए गए एलिमेंट को बिना मास्क की गई लेयर के साथ लेयर करना और यह पक्का करना था कि वे सभी एक साथ अच्छी तरह से स्केल हो जाएं.

इस इमेज में दिखाया गया है कि विंडो और कैरेक्टर पर मास्क न होने पर, यह कैसा दिखता है.

आर्ट को स्क्वीज़ करना

इमेज की क्वालिटी बनाए रखने और यह पक्का करने के लिए कि हाई डेफ़िनिशन स्क्रीन पर उपयोगकर्ताओं को धुंधली इमेज न दिखे, एलिस ने 3x पिक्सल रेशियो पर काम किया. हमारी योजना imgix का इस्तेमाल करने की थी, ताकि हम उनके सर्वर पर ऑप्टिमाइज़ की गई इमेज और फ़ॉर्मैट दिखा सकें. हालांकि, हमें पता चला कि Squoosh टूल का इस्तेमाल करके, मैन्युअल तरीके से इमेज में बदलाव करने पर हमें 50% या उससे ज़्यादा की बचत हो सकती है.

इलस्ट्रेशन को कंप्रेस करने में खास चुनौतियां आती हैं. खास तौर पर, ऐलिस ने जिस तरह के ब्रश स्ट्रोक और पारदर्शी रफ़ एज स्टाइल का इस्तेमाल किया है. हमने Photoshop से एक्सपोर्ट की गई हर 3x PNG इमेज को Squoosh किया. इससे हमें छोटी PNG, WebP, और AVIF इमेज मिलीं. हर फ़ाइल टाइप को कंप्रेस करने के लिए, अलग-अलग तरीके इस्तेमाल किए जाते हैं. साथ ही, ऑप्टिमाइज़ेशन की कुछ सामान्य सेटिंग ढूंढने के लिए, 50 से ज़्यादा इमेज को कंप्रेस किया गया.

200 से ज़्यादा इमेज को ऑप्टिमाइज़ करने के लिए, Squoosh CLI का इस्तेमाल करना ज़रूरी हो गया था. इन सभी इमेज को मैन्युअल तरीके से ऑप्टिमाइज़ करने में कई दिन लग जाते. ऑप्टिमाइज़ेशन की सामान्य सेटिंग तय करने के बाद, हमने उन्हें कमांड लाइन के निर्देशों के तौर पर उपलब्ध कराया. साथ ही, PNG इमेज के पूरे फ़ोल्डर को WebP और AVIF फ़ॉर्मैट में कंप्रेस किया.

यहां AVIF CLI स्क्वश कमांड का इस्तेमाल करने का उदाहरण दिया गया है:

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

ऑप्टिमाइज़ किए गए आर्टवर्क को रेपो में शामिल करने के बाद, हम उन्हें एचटीएमएल से लोड करना शुरू कर सकते हैं:

<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>

हमें इमेज के सोर्स कोड को बार-बार लिखना पड़ता था. इसलिए, हमने एक Astro कॉम्पोनेंट बनाया, ताकि एक लाइन के कोड से इमेज एम्बेड की जा सकें.

<Pic filename="day1/inner-frame" role="presentation" />

स्क्रीन रीडर और कीबोर्ड का इस्तेमाल करने वाले लोग

Designcember का ज़्यादातर अनुभव, कला और इंटरैक्टिव विंडो के ज़रिए मिलता है. हमारे लिए यह ज़रूरी था कि कीबोर्ड का इस्तेमाल करने वाला व्यक्ति साइट का इस्तेमाल कर सके और विंडो में झांक सके. साथ ही, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को अच्छी तरह से सुनाई दे.

उदाहरण के लिए, इमेज एम्बेड करते समय हमने role="presentation" का इस्तेमाल किया, ताकि स्क्रीन रीडर के लिए इमेज को प्रेजेंटेशनल के तौर पर मार्क किया जा सके. हमें लगा कि 5 से 12 फ़्रैक्चर्ड alt ब्यौरे के बीच का उपयोगकर्ता अनुभव खराब होगा. इसलिए, हमने इमेज को प्रज़ेंटेशनल के तौर पर मार्क किया और पूरी विंडो के बारे में जानकारी दी. स्क्रीन रीडर पर विंडो के बीच में नेविगेट करने पर, एक कहानी जैसा अनुभव मिलता है. हमें उम्मीद है कि इससे साइट को अपनी मज़ेदार और दिलचस्प जानकारी शेयर करने में मदद मिलेगी.

इस वीडियो में, कीबोर्ड के इस्तेमाल का डेमो दिखाया गया है. टैब, Enter, Spacebar, और Escape बटन का इस्तेमाल, विंडो पॉप-अप और विंडो पर फ़ोकस करने के लिए किया जाता है.

स्क्रीन रीडर के लिए, ARIA के खास एट्रिब्यूट होते हैं. इनसे कॉन्टेंट को समझने में आसानी होती है. उदाहरण के लिए, दिनों के लिंक के लिए सिर्फ़ "एक" या "दो" कहा जाता है. हालांकि, कुछ एआरआईए जोड़ने के बाद, इन्हें "पहला दिन" और "दूसरा दिन" के तौर पर बताया जाता है. इसके अलावा, सभी इमेज को एक ही लेबल में शामिल किया जाता है, ताकि हर विंडो में इमेज के बारे में जानकारी दी जा सके.

Astro, स्टैटिक फ़र्स्ट, कॉम्पोनेंट-ड्रिवन साइट जनरेटर

Astro की मदद से, टीम के सदस्यों को साइट पर एक साथ काम करने में आसानी हुई. कॉम्पोनेंट मॉडल, Angular और React, दोनों के डेवलपर के लिए जाना-पहचाना था. वहीं, स्कोप किए गए क्लासनेम स्टाइल सिस्टम से हर डेवलपर को यह पता चल जाता था कि विंडो पर उसका काम किसी और के काम से नहीं टकराएगा.

दिनों को कॉम्पोनेंट के तौर पर दिखाना

हर दिन एक कॉम्पोनेंट होता था, जो बिल्ड टाइम डेटा स्टोर से स्टेटस फ़ेच करता था. इससे हमें एचटीएमएल के ब्राउज़र तक पहुंचने से पहले, टेंप्लेट लॉजिक को चलाने में मदद मिलती है. इस लॉजिक से यह तय किया जाएगा कि दिन के लिए टूलटिप दिखानी है या नहीं. ऐसा इसलिए, क्योंकि जिन दिनों के लिए कोई गतिविधि नहीं की गई है उनके लिए पॉप-अप नहीं दिखते.

हर घंटे बिल्ड चलाए जाते हैं. साथ ही, बिल्ड टाइम डेटा स्टोर, आधी रात के बाद बिल्ड सर्वर के चालू होने पर नए दिन के लिए अनलॉक हो जाता है. ये छोटे सिस्टम, खुद अपडेट होते हैं और खुद ही काम करते हैं. इनसे साइट को अप-टू-डेट रखने में मदद मिलती है.

स्कोप किए गए स्टाइल और Open Props

Astro, अपने कॉम्पोनेंट मॉडल में लिखे गए स्टाइल को स्कोप करता है. इससे टीम के कई सदस्यों के बीच काम को बांटना आसान हो गया. साथ ही, Open Props का इस्तेमाल करना भी मज़ेदार हो गया. Open Props normalize.css की स्टाइल, आस-पास की लाइट के हिसाब से स्क्रीन की रोशनी को अडजस्ट करने वाली (लाइट और डार्क) थीम के साथ-साथ पैराग्राफ़ और हेडर जैसे कॉन्टेंट को मैनेज करने में भी काम आईं.

Astro का इस्तेमाल करने वाले शुरुआती लोगों में से एक होने के नाते, हमें PostCSS के साथ कुछ समस्याएं आईं. उदाहरण के लिए, हम बहुत ज़्यादा बिल्ड की समस्याओं की वजह से, Astro के नए वर्शन पर अपडेट नहीं कर सके. यहां ज़्यादा समय दिया जा सकता है, ताकि बिल्ड और डेवलपर वर्कफ़्लो को ऑप्टिमाइज़ किया जा सके.

फ़्लेक्सिबल कंटेनर

कुछ विंडो बड़ी और छोटी होती हैं. हालांकि, इनके आसपेक्ट रेशियो में कोई बदलाव नहीं होता, ताकि इनकी कला को सुरक्षित रखा जा सके. हमने कुछ अन्य विंडो का इस्तेमाल किया है, ताकि कंटेनर क्वेरी के साथ कॉम्पोनेंट-आधारित आर्किटेक्चर की क्षमता दिखाई जा सके. कंटेनर क्वेरी का मतलब है कि विंडो, रिस्पॉन्सिव स्टाइलिंग की अपनी जानकारी रख सकती हैं. साथ ही, अपने साइज़ के हिसाब से फिर से अडजस्ट हो सकती हैं. कुछ विंडो छोटी से बड़ी हो गई थीं. इसलिए, उनमें मौजूद मीडिया के साइज़ और जगह को अडजस्ट करना पड़ा.

किसी विंडो के लिए ज़्यादा जगह उपलब्ध होने पर, हम विंडो के साइज़ या चाइल्ड एलिमेंट को फ़िट करने के लिए अडैप्ट कर सकते हैं. हमें पता चला कि अडैप्टिव विंडो के लिए, कंटेनर क्वेरी को सिर्फ़ दिखाने के लिए इस्तेमाल नहीं किया जा सकता. इसके लिए, कंटेनर क्वेरी का इस्तेमाल करना ज़रूरी है. साथ ही, इससे कुछ लेआउट को व्यवस्थित करना काफ़ी आसान हो जाता है.

.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;
  }
}

यह तरीका, आसपेक्ट रेशियो बनाए रखने से अलग है. इससे आपको ज़्यादा कंट्रोल और ज़्यादा अवसर मिलते हैं. एक तय साइज़ के बाद, कई बच्चे नए लेआउट के हिसाब से खुद को ढाल लेते हैं.

कंटेनर क्वेरी की मदद से, हमें ब्लॉक-डायरेक्शन (वर्टिकल) कंटेनमेंट की सुविधा भी मिली. इससे विंडो की लंबाई बढ़ने पर, हम उसके स्टाइल को ज़रूरत के हिसाब से अडजस्ट कर सकते थे. यह ऊंचाई के आधार पर की गई क्वेरी में दिखता है. हमने इसका इस्तेमाल अकेले और चौड़ाई के आधार पर की गई क्वेरी के साथ किया है:

.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);
  }
}

हमने कंटेनर क्वेरी का भी इस्तेमाल किया. इससे, छोटे साइज़ में आर्ट के ज़्यादा घने होने और बड़े साइज़ में आर्ट के ज़्यादा खाली होने पर, जानकारी को दिखाया और छिपाया जा सका. विंडो नौ इसका एक बेहतरीन उदाहरण है:

अलग-अलग ब्राउज़र पर काम करने की सुविधा

अलग-अलग ब्राउज़र पर मॉडर्न वेब ऐप्लिकेशन का बेहतरीन अनुभव देने के लिए, हमें एक शानदार पॉलीफ़िल की ज़रूरत है. खास तौर पर, कंटेनर क्वेरी जैसे एक्सपेरिमेंटल एपीआई के लिए. हमने अपनी टीम को इस बारे में बताया. इसके बाद, सुरमा ने एक नई कंटेनर क्वेरी पॉलीफ़िल बनाई. यह पॉलीफ़िल, ResizeObserver, MutationObserver, और सीएसएस :is() फ़ंक्शन पर निर्भर करता है. इसलिए, सभी नए ब्राउज़र पॉलीफ़िल का इस्तेमाल कर सकते हैं. खास तौर पर, Chrome और Edge के 88वें वर्शन से, Firefox के 78वें वर्शन से, और Safari के 14वें वर्शन से. पॉलीफ़िल का इस्तेमाल करने पर, इनमें से किसी भी सिंटैक्स का इस्तेमाल किया जा सकता है:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

गहरे रंग वाला मोड

Designcember की वेबसाइट के लिए, गहरे रंग वाली एक शानदार थीम ज़रूरी थी. हम यह दिखाना चाहते थे कि गहरे रंग वाले मोड में शानदार अनुभव पाने के लिए, आर्ट का इस्तेमाल कैसे किया जा सकता है. इसके लिए, हमने हर विंडो की बैकग्राउंड स्टाइल को प्रोग्राम के हिसाब से अडजस्ट किया. साथ ही, विंडो आर्ट बनाते समय हमने ज़्यादा से ज़्यादा सीएसएस का इस्तेमाल किया. ज़्यादातर बैकग्राउंड सीएसएस ग्रेडिएंट थे, ताकि उनकी रंग वैल्यू को आसानी से अडजस्ट किया जा सके. इसके बाद, हमने इन पर आर्ट लेयर की.

अन्य छिपी हुई मज़ाक़िया चीज़ें

निजी तौर पर जुड़ाव

हमने पेज में कुछ निजी जानकारी जोड़ी है, ताकि साइट को ज़्यादा निजी बनाया जा सके. पहला, किरदारों की कास्टिंग थी. इसके लिए, हमारी टीम ने प्रेरणा ली. हमने उन दिनों के लिए थ्रोबैक स्टाइल वाला कर्सर भी शामिल किया है जब Doodle नहीं दिखता. साथ ही, हमने फ़ेविकॉन की स्टाइल में भी बदलाव किया है.

फ़ंक्शनल टच

इसमें एक और सुविधा जोड़ी गई है. "आज की तारीख पर जाएं" सुविधा के साथ-साथ, इमारत के ऊपर बैठी हुई एक चिड़िया भी दिखाई गई है. इस बर्ड पर क्लिक करने या Enter दबाने से, आपको पेज पर महीने की मौजूदा तारीख पर ले जाया जाता है. इससे आपको नए लॉन्च के बारे में तुरंत पता चल जाता है.

Designcember की वेबसाइट पर एक खास प्रिंट स्टाइलशीट भी है. इसमें हम एक ऐसी इमेज दिखाते हैं जो 8.5" x 11" पेपर पर सबसे अच्छी दिखती है. इससे कैलेंडर को खुद प्रिंट किया जा सकता है और पूरे साल त्योहार का माहौल बना रहता है.

कुल मिलाकर, दिसंबर के पूरे महीने में यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट को सेलिब्रेट करने के लिए, हमने मज़ेदार और दिलचस्प मॉडर्न वेब अनुभव बनाने के लिए काफ़ी मेहनत की. हमें उम्मीद है कि आपको यह पसंद आया होगा!