💪🏿 ↙️ 👩‍👦‍👦 हमने मेल थीम कैसे डिजाइन की 👰🏼 🚵 🤳

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

उसके ठीक एक सप्ताह पहले, हमने BEM ( http://bem.github.com/bem-method/pages/beginning/beginning.ru.html ) के मुख्य पृष्ठों का अनुवाद पूरा कर लिया है। यह केवल सीएसएस में विषयगत मेल अनुकूलन करने का निर्णय लिया गया था। लेकिन शुद्ध सीएसएस पर्याप्त नहीं है, हमें सीएसएस पीढ़ी के उपकरण की आवश्यकता है - और हमने एसएएसएस ( http://sass-lang.com/ ) को चुना।

जैसा कि मैंने ऊपर लिखा था, जब तक हमने मेल पर विषय करना शुरू किया, तब तक मुख्य पृष्ठ पहले से ही स्वतंत्र ब्लॉकों में अनुवादित हो चुके थे।

/css /blocks /messages ... /pages main.css

प्लस जो हमें तुरंत मिला वह कैस्केडबिलिटी की कमी है। यदि आप किसी ब्लॉक को रिप्लेस करते हैं, तो आप केवल उस ब्लॉक को ही रिपीट करते हैं; यह कहीं भी शूट नहीं करता है और न फटता है।

विषय पृष्ठभूमि पर चित्रों, साथ ही रंगों (फ़ॉन्ट, पृष्ठभूमि, सीमा ...) है। हमने ब्लॉक द्वारा ब्लॉक लिया और पूरे रंग भाग को अलग-अलग किया।

 /css /blocks /messages //   /themes /default /messages //     default.scss //      default.vars.scss //     /theme theme.scss //     theme.vars.scss // “”   /pages …

स्वाभाविक रूप से, हमें एक निर्माण प्रणाली की आवश्यकता थी। SASS पर चला गया। यह आपको एक बड़ी सीएसएस फ़ाइल में scss एकत्र करने की अनुमति देता है, साथ ही यह चर का उपयोग करना संभव बनाता है।

ब्लॉकों में से एक की शैली निम्नानुसार बनाई गई है:

 /css/blocks/messages/messages.scss .messages{ padding:20px; } /css/pages/mail.scss @import url(../messages/messages.scss); /css/themes/default/messages/messages.scss .messages{ background:$messages-background; } /css/blocks/default/default.scss @import url(messages/messages.scss);

इन शैली फ़ाइलों में, सीएसएस गुणों के सभी मूल्य चर हैं जो किसी विशेष विषय में परिभाषित किए गए हैं।

 /css/themes/theme/theme.vars.scss $messages-background: #FFF; /css/themes/theme/theme.scss @import url(theme.vars.scss); @import url(../default/default.scss);

SASS काम करने के बाद, हमें सभी ब्लॉकों की ज्यामिति के साथ एक फाइल मिलती है:

 /css/pages/mail.css

और रंग-कोडित फ़ाइलें विषय द्वारा टूट गईं:

 /css/themes/theme/theme.css;

उपयोगकर्ता को दो फाइलें अपलोड की जाती हैं - चयनित विषय की ज्यामिति और शैलियों।

विषय स्विचिंग

क्योंकि डिज़ाइन ज्यामिति से अलग है, डिज़ाइन को बदलने के लिए पृष्ठ को फिर से लोड करने की आवश्यकता नहीं है। जरूरत है कि नए विषय की शैलियों को अतुल्यकालिक रूप से लोड करना है, और फिर पुराने को हटा दें।

विषयों के साथ काम करने के लिए, एक जेएस-क्लास बनाया गया था, जिनमें से मुख्य तरीके हमारे लिए रुचि रखते हैं सेटमेम और स्विचथीमसीएससी।

विषयों के साथ अतुल्यकालिक काम के लिए एक कॉलबैक प्रणाली आस्थगित का उपयोग कर बनाया गया है।

सेटमिथे विधि विषय की स्थापना के लिए "प्रवेश बिंदु" है। यह एक विषय आईडी लेता है और आस्थगित करता है, जो दो तरीकों को निष्पादित करने की उम्मीद करता है: switchThemeCss (त्वचा की शैली को बदलें) और चयनित विषय को बचाने के लिए एक AJAX अनुरोध। ये दोनों तरीके भी आस्थगित के साथ काम करते हैं।

 return $.when(AJAX.post(...), switchThemeCss(themeId));

सबसे दिलचस्प बात switchThemeCss के अंदर होती है। पारित themeId के आधार पर, फ़ंक्शन स्टाइलशीट के लिए पथ बनाता है और इसे लोड करने का प्रयास करता है।

परियोजना ने jquery.getCSS शैलियों को लोड करने के लिए पहले से ही एक प्लगइन का उपयोग किया, और हमने इसका उपयोग करने का निर्णय लिया। लेकिन, दुर्भाग्यवश, यह निर्धारित करने की अनुमति नहीं है कि क्या शैलियों ने वास्तव में लोड किया है, या अनुरोध नेटवर्क कनेक्शन की कमी के कारण टाइमआउट द्वारा "गिर गया" है, जो हमारे लिए बहुत महत्वपूर्ण है, क्योंकि पुराने विषय की शैलियों को हटाना नए के शैलियों की सफल अनुप्रयोग के बाद ही आवश्यक है।

हमने इस समस्या को कई, शायद, जाने-माने, लेकिन सफलतापूर्वक भूल गए तरीकों की मदद से हल किया, जिसमें निम्नलिखित शामिल हैं।

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

हमारे मामले में, थीम आईडी में 100% विशिष्टता है। लेकिन इस आईडी का सीएसएस गुणों के संभावित मूल्यों से कोई लेना-देना नहीं है, जिसका अर्थ है कि सामान्य स्थिति में शैलियों को लागू नहीं किया जाएगा।

कुछ संपत्ति आवश्यक थी, जिसका मूल्य एक मनमाना स्ट्रिंग हो सकता है। सामग्री और फ़ॉन्ट-पारिवारिक गुण इसके लिए उपयुक्त हैं, लेकिन कुछ चेतावनी के साथ।

कुछ ब्राउज़र गैर-छद्म तत्वों के लिए सामग्री संपत्ति को लागू नहीं करते हैं, जिसके लिए यह इरादा है। और अन्य लोग फ़ॉन्ट-पारिवारिक संपत्ति का उपयोग नहीं करते हैं यदि ऐसा परिवार वास्तविकता में मौजूद नहीं है, लेकिन वे सामग्री संपत्ति का उपयोग करते हैं। हमने दोनों गुणों का उपयोग करने का निर्णय लिया, और ब्राउज़र में जो सामग्री संपत्ति के लिए एक खाली मान लौटाते हैं, फ़ॉन्ट-पारिवारिक संपत्ति में देखें।

परिणाम लगभग निम्नलिखित कोड (योजनाबद्ध रूप से) है:

 function getApplyedThemeId(){ var ff = hiddenElement.css('font-family'), content = hiddenElement.css('content'); return content || ff; }, function switchThemeCss (themeId){ var url = getThemeCssUrl(themeId) , deferred = newDeferred(); var oldThemeId = getApplyedThemeId(); //   themeId $.getCSS( url, function(link){ var newThemeId =getApplyedThemeId(); //   themeId //  id   –   if (newThemeId !== oldThemeId){ $ThemeCSS.remove(); //    $ThemeCSS = $(link); //   deferred.resolve(); //   } else { //   -    $(link).remove(); //  link    deferred.reject(); //  “ ” } } ); }

नतीजतन, हमें ऐसे विषय मिले जिन्हें बनाए रखना आसान है। इसके अलावा, उनका डाउनलोड प्रबंधित करना आसान है, और किसी भी पृष्ठ पर विषयों का चयन करने के लिए किसी भी फ्रंट-एंड समाधान के साथ डाउनलोड कोड का उपयोग किया जा सकता है।

तकनीकी कार्यान्वयन, 12 विषयों का निर्माण, डिबगिंग और उत्पादन रिलीज में एक व्यक्ति के काम के 2 महीने लगे।

अंत में - सबसे लोकप्रिय विषयों के बारे में मज़ेदार आँकड़े:

लाश मुख्य रूप से लड़कों द्वारा 12-25 सेट की जाती है। और यह Mail.ru मेल टीम का एक पसंदीदा विषय भी है :)

स्नोबॉल का खेल सर्दियों के बारे में सेगमेंट में अग्रणी है, फिलहाल इसे 300,000 से अधिक लोगों द्वारा स्थापित किया गया है, जिनमें से 2/3 महिलाएं 25-34 हैं

सबसे चंचल मोबाइल फोनों के विषय (12-17 वर्ष की लड़कियां)

सबसे geeky विषय ब्लैकबोर्ड है। आप इसे बिल्कुल भी इंटरफ़ेस से सक्षम नहीं कर सकते हैं! लेकिन आप इसे इस तरह के एक धोखा लिंक पर यहाँ सक्षम कर सकते हैं http://e.mail.ru/cgi-bin/msglist?folder=0&setTheme=t1026

सिमंस कैट - युवा महिलाओं के लिए विषय 25-34

पुनश्च: गोपनीयता के घूंघट को खोलना - निकट भविष्य में खेल के प्रशंसकों के लिए पहले दो विषयों को जारी किया जाएगा Allods और महापुरूष।

एंड्री सूमिन,
ग्राहक विकास प्रबंधक

हमने मेल थीम कैसे डिजाइन की

More articles: