HTML लेआउट डिज़ाइनर वेब डिज़ाइनरों को इतना नापसंद क्यों करते हैं

एक लेआउट डिजाइनर के रूप में अपने काम के दौरान, मुझे अलग-अलग लेआउट के एक समूह से निपटना पड़ा, दोनों नवागंतुकों से लेकर (या कभी-कभी केवल बाएं हाथ वाले लोगों तक) और पेशेवरों तक। और इस समय के दौरान, मैं लेआउट में सबसे विशिष्ट बगों का एक सभ्य नमूना प्राप्त करने में कामयाब रहा, जो अनुभवी विशेषज्ञ भी बचने में सक्षम नहीं हैं। मैं अभी यह कहना चाहूंगा कि कुछ संगठनों में "डिज़ाइन लेआउट के लिए आवश्यकताएं", और सिद्धांत रूप में, यदि डिज़ाइन इन आवश्यकताओं को पूरा नहीं करता है, तो इसे बिना किसी प्रश्न के संशोधन के लिए भेजा जाना चाहिए, लेकिन वास्तविकता यह है कि दस्तावेज़ को पुश करने की तुलना में आवश्यक बदलाव करना अक्सर आसान होता है। यहाँ ट्रैकर पर। लेकिन इन "आवश्यकताओं" में भी सभी स्पष्ट रूप से संभव नहीं हैं "जाम" का उल्लेख किया गया है। मैं सबसे लोकप्रिय और सार्वभौमिक (व्यक्तिगत बंधन के बिना) देने की कोशिश करूंगा। हां, वैसे, मैं फ़ोटोशॉप psd का उपयोग करने के लिए सभी बग लाता हूं - ठीक है, वास्तव में यह वेब लेआउट में मानक है। हां, और मैं वेक्टर में अधिक लेआउट में नहीं आया (और मुझे कहना चाहिए, भगवान का शुक्र है)।

1. मार्कअप। पृष्ठ का आधार, तथाकथित लेआउट या कंकाल।
क) सबसे प्रसिद्ध और इतना लोकप्रिय नहीं है, लेकिन इससे कोई कम लोकप्रिय नहीं है - लेआउट की चौड़ाई हमेशा 20-24pix (सही ढंग से - कम से कम जीपिक्स) द्वारा डिस्प्ले डिवाइस की निहित चौड़ाई से कम होनी चाहिए। यानी यदि हम 1024 पिक्सेल के क्षैतिज रिज़ॉल्यूशन के लिए एक दस्तावेज़ तैयार करते हैं, तो अधिकतम लेआउट चौड़ाई 1000 पिक्सेल है। मुझे उम्मीद है कि यह समझ में आता है कि क्यों - हम स्क्रॉलबार और विंडो बॉर्डर की चौड़ाई को ध्यान में रखते हैं। यदि कोई सोचता है कि स्क्रॉलबार को कम ऊंचाई पर ध्यान में नहीं रखना अनुमत है, तो मैं देख सकता हूं कि उपयोगकर्ता हमेशा खिड़की को लंबवत रूप से सिकोड़ सकता है और ... यह शायद सबसे अधिक समय लेने वाली बग को ठीक करने के लिए है (यदि लेआउट डिजाइनर को इससे निपटना है), कभी-कभी अंतर्निहित ग्राफिक्स और / या मार्कअप बस पर्याप्त रूप से ऐसा करना संभव नहीं बनाता है। आपको टुकड़ों को काटना होगा, पैमाने, बाकी सामग्री को समायोजित करना होगा, आदि। हॉरर, संक्षेप में!
बी) मॉड्यूलर ग्रिड। या बल्कि, ग्रिड भी नहीं, लेकिन मुख्य ब्लॉकों / चित्रों के लिए तैयार गाइड - आप बस एक बार उनके बीच एक शासक आकर्षित कर सकते हैं और परिणामस्वरूप मूल्य को सीएसएस में चला सकते हैं। महत्वपूर्ण नहीं है, लेकिन यह जीवन को वास्तव में महान बनाता है। यह ध्यान दिया जाना चाहिए कि गाइड के बिना लेआउट बहुत दुर्लभ हैं। लेकिन ज्यादातर मामलों में, डिजाइनर मुख्य वक्ताओं के लिए बस कुछ गाइडों का प्रबंधन करता है।
ग) टाइपसेटिंग का एक ही जाना-माना शोक - तथाकथित "मछली", आमतौर पर पूरी तरह से खुदा हुआ है, और लगभग कोई भी कभी भी उदाहरणों को सम्मिलित नहीं करता है जो सामग्री की मात्रा में चरम पर हैं। और मुझे अनुमान लगाना होगा कि किसी विशेष ब्लॉक के व्यवहार को स्पष्ट करें, जब सामग्री पूर्ण हो या उसमें कमी हो (उदाहरण के लिए, चित्र का अनुपात लेआउट में रखी गई चीज़ों के अनुरूप नहीं है - छिड़कें, यदि हां, तो कैसे "दर्ज करें?" आदि, या उपयोगकर्ता का पहला / अंतिम नाम? इवानोव इवान, आदि की तुलना में लंबा होगा)
d) "रबर"। क्या आप रबर चाहते हैं? न्यूनतम और अधिकतम रिज़ॉल्यूशन के लिए 2 लेआउट संलग्न करने के लिए इतने दयालु बनें, ताकि लेआउट डिजाइनर आश्चर्यचकित हो जाए - कौन से ब्लॉक और वे कैसे खिंचाव करेंगे!

2. टाइपोग्राफी।
ए) हेडसेट। "सुरक्षित फ़ॉन्ट" की एक प्रसिद्ध सूची है। ज्यादातर इसके बारे में जानते हैं। लेकिन कभी-कभी कुछ असंख्य प्रो को गढ़ा जाता है और यह शुरू होता है ... आप यह समझाना शुरू करते हैं कि यह ओएस के साथ मानक पैकेज में शामिल नहीं है, इस तथ्य के बावजूद कि यह बेतहाशा लोकप्रिय है। ज्यादातर मामलों में, डिजाइनर आगे आता है और हेडसेट को बदल देता है, लेकिन ऐसे लोग हैं जो सीखना शुरू कर रहे हैं ... कहते हैं, लेकिन आपको @ फॉन्ट-प्रॉपर्टी के बारे में पता नहीं है। हां, मुझे पता है, लेकिन 1 - मुझे एक सामान्य उच्च-गुणवत्ता वाला फ़ॉन्ट दें ताकि मैं इसे परिवर्तित कर सकूं (सभी प्रकार के फ़ॉन्ट-स्क्वायर बहुत ही खराब "विशिष्ट" पिन नहीं), 2- और हम किसी भी कॉपीराइट का उल्लंघन नहीं करते हैं? ज्यादातर मामलों में, यह पता चला है, हाँ - फ़ॉन्ट का भुगतान किया जाता है। संक्षेप में, बहुत सारी समस्याएं।
b) स्मूदनिंग फोंट को हमेशा बंद रखना चाहिए! और मुझे "इलाज" करने की ज़रूरत नहीं है कि ब्राउज़र में से एक वहाँ कुछ करने में सक्षम है। उदाहरण के लिए, IE, कर सकता है - और इसलिए क्या? यह फ़ोटोशॉप के बारे में कोई विचार नहीं है "अचानक", "सुचारू रूप से", आदि। लेकिन वास्तव में यह पता चला है - प्रबंधक एक लेआउट को मंजूरी देता है, और लेआउट के आउटपुट में हमारे पास एक अनाड़ी अपठनीय कचरा है। और किसे दोष देना है?
ग) अग्रणी। कम से कम "ऑटो" हमेशा नीचे रखा जाना चाहिए (आमतौर पर इसका मतलब है कि आकार के बाद अगला "मानक" मान, लेकिन वास्तव में नहीं - आपको इसे मैन्युअल रूप से चुनना होगा), बल्कि एक विशिष्ट मूल्य। क्योंकि css को हमेशा पॉइंट वैल्यू और अग्रणी दोनों की आवश्यकता होती है। और आप इसे विश्वास नहीं करेंगे - मेरे कैरियर के दौरान, अग्रणी मूल्य की खिड़की में, मैंने सिद्धांत रूप में सभी संभावित मूल्यों को देखा है।
d) नॉन-डिफॉल्ट (100%) लेटर-टू-वर्ड स्पेसिंग भी आपको काफी तनाव देती है - यह क्या है? "पुरानी सेटिंग्स" से रहता है? एक डिजाइनर की सनक? या वास्तव में एक सचेत चाल है - आपको स्पष्ट करना होगा।
ई) पाठ प्रभाव के लिए, केवल एक छाया अनुमेय है, और उसकी क्षमता (चमक और स्ट्रोक) का अनुकरण किया जा सकता है, आंतरिक छाया और ढाल सीएसएस के माध्यम से समर्थित नहीं हैं (और यहां तक ​​कि जेएस के माध्यम से भी "खुशी")।

3. प्रभाव और ग्राफिक्स।
a) परतों के लिए प्रभावों को कम नहीं करना बेहतर है - क्योंकि कुछ प्रभाव CSS के माध्यम से लागू किए जा सकते हैं, और यह अनुकूलन है।
बी) परतों और प्रभावों में, किसी भी परिस्थिति में आपको सामान्य के अलावा किसी भी परत सम्मिश्रण मोड का उपयोग नहीं करना चाहिए, क्योंकि यह अंतर्निहित परतों पर निर्भर करता है - और यह भी परतदार परतों पर लागू होता है और ग्राफिक्स का उपयोग करके चिपक जाता है। यह आम तौर पर महाकाव्य है! जैसा कि किसी तरह का ओवरले फंस गया है, और केवल एक ही रास्ता है - सभी परतों को कम करने और तत्व को अचार करने के लिए, और यह, यह ध्यान दिया जाना चाहिए, कभी-कभी एक वेक्टर में प्रतिपादन करने के लिए समान है - खासकर अगर किसी बड़े त्रिज्या के साथ कोई चमक / छाया हो।
ग) बुद्धिमानी से प्रभाव का उपयोग करें - लेबल को एक रंग में क्यों डालें, और फिर "रंग ओवरले" प्रभाव का उपयोग करें ??? एक ही समय में बाहरी और आंतरिक छाया का उपयोग क्यों करें? आदि स्नातक - ठीक है, अलग से बातचीत की ...
डी) एम्बेडेड ग्राफिक्स (आइकन, बटन और अन्य सजावट) के लिए - परतों को एक साथ लाने की सलाह दी जाती है ताकि लेआउट डिजाइनर वांछित परतों की तलाश में लेआउट के माध्यम से अफवाह न करें। और इसे स्मार्ट ऑब्जेक्ट के साथ एम्बेड करना बेहतर है - एम्बेडेड छवि बहुत तेज़ी से बनाई गई है और यदि आवश्यक हो, तो आप इसमें बदलाव कर सकते हैं।

4. अन्य।
a) सभी डिजाइन तत्वों और चिपकाए गए गाइड के साथ तैयार सीएसएस-स्प्राइट होना अच्छा होगा - लेकिन यह एनएफ क्षेत्र से है!
बी) लेआउट के साथ एक व्याख्यात्मक नोट के साथ सलाह दी जाती है, जो सूचीबद्ध करेगा:
- उपयोग किए गए हेडसेट (पृष्ठ के लिए मुख्य फ़ॉन्ट परिवार को तुरंत पंजीकृत करने और केवल व्यक्तिगत ब्लॉकों के लिए इसे बदलने की क्षमता के लिए);
- "गैर-स्वचालित" अग्रणी और अंतराल के उपयोग के साथ ब्लॉक;
- रंग योजना - मुख्य पाठ ब्लॉकों के लिए तुरंत निर्धारित रंग (उपयोग किए गए सभी रंग सूची में नहीं आते हैं), लिंक रंग - डिफ़ॉल्ट रूप से, होवर पर, दौरा किया; उपयोग किए गए ग्रेडिएंट के संदर्भ रंग आदि।

यहाँ शायद मुख्य बात है। जैसा कि आप देख सकते हैं, इन बिंदुओं को ध्यान में रखने के लिए डिजाइनर के लिए बहुत सारे और इतने तनावपूर्ण नहीं हैं। लेकिन लेआउट समय आधे से कम हो गया है, निश्चित रूप से! मुझे खुशी होगी अगर कोई इसे कार्रवाई के लिए एक मार्गदर्शक के रूप में लेता है, और कम से कम आंशिक रूप से अपने लेआउट को बेहतर बनाता है - और अचानक वे एक साथ काम करने के लिए होते हैं।

पुनश्च मैं उदाहरण के लिए सचित्र उदाहरण पोस्ट नहीं करता, आप खुद समझ सकते हैं कि किन कारणों से। यदि आपके कोई प्रश्न हैं, तो पूछें।
PPS धन्यवाद उफौ!