इसे व्यक्त

पुनः सायक्लिंग मंत्र है और वेब विकास में कोई अलग मतलब है. यह ऊर्जा, संरक्षण के प्रयास के मामले में!

सीएसएस लेखन और डिजाइन से HTML बनाने के वर्षों में, मैं कुछ सर्वोत्तम प्रथाओं का पालन किया है, क्या हम सामान्यतः "पुनः आविष्कार व्हील" के रूप में कार्यकाल में समय और ऊर्जा की बचत की खोज में. समय और बार फिर, मैं अपने आप को कहा है, कि मैं कुछ टेम्पलेट्स बनाने चाहिए, कुछ मानक सीएसएस फिर से प्रयोग करने योग्य है कि मैं बाहर बॉक्स का अपने भविष्य के काम में प्रयोग करेंगे. पूरी तरह से नहीं हालांकि, लेकिन मैं लक्ष्यों के कुछ हासिल करने के लिए प्रबंध किया था.

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

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

सीएसएस के पुन: साइकिल कुंजी:

नामकरण सम्मेलनों का उपयोग करें

यह सीएसएस / HTML पुनः प्रयोग करने योग्य बनाने में सबसे महत्वपूर्ण कारक है. पृष्ठ तत्वों को लगातार नाम देते पृष्ठ घटकों और उनकी शैली का थोड़ा या संशोधनों के साथ फिर से उपयोग में सक्षम बनाता है. इस तर्क के साथ लाइन में, यहां तक ​​कि HTML5, अपने पूर्ववर्तियों से एक बड़ा परिवर्तन में परिवर्तन करने के लिए कुछ अर्थात संरचनात्मक टैग का परिचय है. <article>, <section>, <header>, <aside>, और <nav> [है HTML5 क्या ले आए? ]. 4 HTML (या कम) के साथ भी, यह सबसे अच्छा है के लिए के तरह consistanly सरल उदाहरण में नीचे अपने पृष्ठ के मानक वर्गों के नाम ...

याद रखें, अपनी परियोजना पर अधिकांश पृष्ठों, अंत में एक ही मूल संरचनात्मक तत्वों. इन आम कोर पृष्ठ तत्वों को पहचानें ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

रीसेट डिफ़ॉल्ट शैली (सीएसएस रीसेट करता है): चाहे आप एक रूपरेखा का उपयोग करें या अपने लिखने के लिए, आप सीएसएस रीसेट करता है प्रदान करना होगा [ सीएसएस रीसेट करता है क्या हैं? ], के रूप में वे कम या कभी कभी कि विभिन्न ब्राउज़रों के बीच होते हैं दृश्य विसंगतियों को खत्म करने. सरल शब्दों में सीएसएस रीसेट तंत्र शून्य या शून्य मान के लिए HTML तत्व की शैली सेट, इस प्रकार किसी भी ब्राउज़र डिफ़ॉल्ट मानों वे बन गया है हो सकता है अधिभावी. यह किसी भी प्रयोक्ता एजेंट डिफ़ॉल्ट के इन तत्वों शून्य [के गुण सेट करने के लिए एक साफ स्लेट प्रदान करता है CSS2.1 उपयोगकर्ता एजेंट स्टाइल शीट मूलभूत ]. सभी सीएसएस चौखटे रीसेट तंत्र की है. यदि आप आप अपने सीएसएस रीसेट करता है लिख रहे हैं, सतर्कता का एक शब्द है कि यदि आप करने के लिए एक महत्वपूर्ण संपत्ति रीसेट भूलना होगा, यह पार ब्राउज़र मुद्दों है कि डिबग करने के लिए बहुत मुश्किल हैं ले जा सकता है. याद रखें, रीसेट शैलियों की एक प्रतिलिपि रखें और उन्हें आप एक नई परियोजना बनाने में छोड़.

  शरीर, div, डेसीलीटर, डीटी, डीडी, उल, राजभाषा, ली,
  H1, H2, H3, H4, H5, H6,
  पूर्व, प्रपत्र, fieldset, इनपुट, चुनें, textarea,
  पी, blockquote, मेज, वें, टीडी
  {
    सीमा: 0px;
    मार्जिन: 0;
    padding: 0;
  } 

सेट (आधारभूत शैलियाँ) मूलभूत तत्वों को:

के बाद आप (शून्य या शून्य) कुछ HTML तत्वों की कुछ विशेषताओं के डिफ़ॉल्ट मान सेट है, यह इन तत्वों के हर उदाहरण में कुछ शैलियों को लागू करने के लिए आवश्यक है. इन डिफ़ॉल्ट सेटिंग के डिजाइन के अनुसार भिन्न हो या आप का पालन सर्वोत्तम प्रथाओं के अनुसार सकता है.

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

याद रखें, आधारभूत शैलियों शैली है कि जा रहे हैं डिजाइन व्यापक इस्तेमाल किया जा सेट किया जाता है. जैसे.

  एचटीएमएल {font-size: 77%; font-परिवार: Arial, बिना सेरिफ़;}
 मजबूत, H1, H2, H3, H4, H5, H6 {font-वजन: बोल्ड;} 

आम एचटीएमएल अवयव और सामान्य श्रेणी के लिए सार शैलियाँ:

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

आम HTML घटकों के लिए पुन: प्रयोज्य शैलियों परिभाषाओं को परिभाषित करने के अलावा, हम सार शैलियों कक्षाएं टाइपोग्राफी रंग, या भी लेआउट के लिए संबंधित सकता है. मैं खुद करते हैं आप का उपयोग करें ... Clearfix, Font08, FontGrey, AlignL, DisplayB आदि की तरह सामान्य वर्गों

  प्रपत्र इनपुट {सीमा: 0px; पृष्ठभूमि: # FFFFFF; padding: 10px 0px; _padding: 0px 0px; ऊँचाई: 26px; रंग: # 000000; रेखा से ऊँचाई: 30px, font-size: 1.1em;}
 प्रपत्र textarea {: # FFFFFF; रंग: # 000000, font-size: 0.9 उन्हें लाइन ऊँचाई: 1.5em, अतिप्रवाह: पृष्ठभूमि 0px सीमा दिखाई;}
 Fbold {font-वजन: बोल्ड, रंग: # cccccc;}.
 . Fgrey {रंग: # 666,666;}
 . Flightgrey {रंग: # bbbbbb;}
 . Clearfix {स्पष्ट: दोनों;}
 विभक्त {सीमा टॉप: 1px ठोस 647B06 #; सीमा - नीचे: 1px ठोस 9CC00A; ऊँचाई: 0px;}
 {प्रदर्शन: ब्लॉक;} displayb. Displayn {प्रदर्शन: कोई नहीं;}
 {पाठ संरेखित: सही} alignr के. Alignc {text-align: केंद्र}
 {फ्लोट: सही;} floatr floatl. {फ्लोट: छोड़ दिया;} 

सामान्य ब्राउज़र quirks के लिए फिक्स

विभिन्न ब्राउज़रों सीएसएस कोड लागू करने और सीएसएस विनिर्देशों के लिए समर्थन के स्तर अलग प्रदान करते हैं. इस का परिणाम .... "ब्राउज़र Quirks, कि हम डेवलपर्स से निपटने के लिए छोड़ दिया जाता है. विशेष रूप से, IE6 के समय सीमा को पूरा करने के लिए साथ सबसे सीएसएस coders के सत्ता. अच्छी खबर यह है कि अनुभव एक साथ लाया है इन मुद्दों (अक्सर के रूप में कहा संभव पुन: प्रयोज्य फिक्सेस सीएसएस भाड़े ).

याद रखें, इन हैक्स / फिक्सेस काम रखें

  / * निम्नलिखित ज़ूम: 1 नियम IE6 + IE7 के लिए विशेष रूप से है.  * /
    * Html clearfix.
    *: प्रथम बच्चे + html clearfix {
           ज़ूम: 1;
      } 

अपने सीएसएस को रिफ़ाइन

• दिन में फिर से साइकिल की आदत आप में नहीं आएगा. यह करने के लिए विकसित किया है. तो अपने पुनः सायक्लिंग की योजना है. मन में यह सहन कि आप सार शैलियों चूक, टाइपोग्राफी परिभाषाएँ, लेआउट, HTML तत्व शैलियाँ आदि के लिए आगे की सोचने की कोशिश करो सकता.
• इसके अलावा अपने अतीत परियोजनाओं पर वापस देखो, यह शैली है कि आप अक्सर porjects भर उपयोग करते हैं की पहचान में मदद करेगा. यह सार.
• किसी भी अप्रयुक्त शैली निकालें. इस अभ्यास "फूल" नामक एक आम लक्षण से अपने सीएसएस ढांचे रखेंगे
• दोहराव शैलियों निकालें.
• निर्माण शैलियों का एक सेट है कि काफी लचीला के लिए परियोजनाओं के पार बंदरगाह हैं.

सीएसएस चौखटे पर एक नज़र

अंत में. यदि आप प्रेरित कर रहे हैं और सीएसएस चौखटे में से एक या एक से अधिक उपयोग करना चाहते हैं, यहाँ कुछ लोकप्रिय लोगों में से एक त्वरित सूची है ....

• 960 ग्रिड प्रणाली : 960 ग्रिड प्रणाली एक 960 पिक्सल की चौड़ाई के आधार पर सामान्य रूप से उपयोग किए जाने आयाम प्रदान करके वेब विकास कार्यप्रवाह को कारगर बनाने का प्रयास है. 12, 16 और 24 कॉलम, जो अलग या अग्रानुक्रम में इस्तेमाल किया जा सकता है: वहाँ तीन वेरिएंट हैं. सोचा था कि कुछ भी नहीं है कि आप आसानी से अपने खुद के लिए पर्याप्त नहीं बना सकते हैं, ढांचे को PDF स्वरूप है, कि एक अपने पृष्ठ designs.Bet के स्केच का उपयोग कर सकते हैं प्रिंट के लिए ग्रिड टेम्पलेट्स प्रदान करता है, यह एक पेशेवर छाप बनाने के लिए, अगर आप कुछ जब पत्रक ले आप यूआई आवश्यकताओं सभा के लिए एक ग्राहक के लिए जाना. यह भी पटाखे, फ्लैश, InDesign, Illustrator, फ़ोटोशॉप, Visio, आदि दस के लिए एक "स्टार्टर" करने के लिए अपने डिजाइन का काम शुरू प्रदान की तरह लोकप्रिय डिजाइन सॉफ्टवेयर के लिए बुनियादी ग्रिड टेम्पलेट्स प्रदान करता है.
• खाका : खाका रीसेट करता है के लिए साफ़ तौर पर वर्गीकृत सीएसएस फ़ाइलों, ग्रिड, फार्म, मुद्रण, टाइपोग्राफ़ी के लिए प्लगइन्स बटन, टैब्स और sprites आदि यह भी शामिल हैं एक अलग रूप में IE के लिए सहायता प्रदान करता है प्रदान करता है.
• SenCSs : उपरोक्त दो के विपरीत, SenCSs (स्पष्ट नब्ज), लेआउट के लिए सीएसएस परिभाषा नहीं है. यह फोंट, paddings, मार्जिन, तालिकाएँ, सूचियाँ, हेडर, blockquotes, रूपों और अधिक शामिल है.
• BlueTrip : प्रसिद्धि के लिए मूल का दावा था कि, यह सबसे अच्छा ब्लू प्रिंट ट्रिप, ओली की तरह अन्य दूसरों से जहां यह उसका नाम हो जाता है ... चौखटे द्वारा उपलब्ध कराई गई सुविधाओं का एक संयोजन था. इसकी सुविधा सेट 24 स्तंभ ग्रिड, टाइपोग्राफी शैलियों, orm शैलियों, प्रिंट, बटन आदि शामिल हैं
• YUI ग्रिड : Yahooo डेवलपर नेटवर्क के द्वारा आप के लिए लाया, 750px, 950px और 974px पर तरल पदार्थ चौड़ाई (100%) के रूप में अच्छी तरह से पूर्व निर्धारित लेआउट निर्धारित चौड़ाई लेआउट का समर्थन करता है, और आसानी से किसी भी संख्या के लिए अनुकूलित करने की क्षमता है. जैसा कि आप देख सकते हैं, यह तकनीकी रूप से अभी लेआउट अवयव. YUI भी अन्य पृष्ठ तत्वों के लिए HTML / सीएसएस सेट प्रदान
• YAML (फिर भी एक अन्य एकाधिक स्तंभ लेआउट)
• Emastic

याद रखें, सीएसएस चौखटे का उपयोग मतलब है कि आप अपना खुद का बनाने के लिए आलसी नहीं कर रहे हैं ... यह अर्थ है कि आप स्मार्ट करने के लिए दूसरों के अनुभव और गलतियों से सीखते हैं, समय और उत्पादकता में वृद्धि बचाओ!!

Photoshop और Illustrator जैसे उपकरणों के साथ अपने सीमित कौशल सेट के साथ, मैं ईमानदारी से कि मैं एक बेहतर डेवलपर है की तुलना में मैं एक डिजाइनर हूँ कबूल कर सकते हैं. लेकिन कोर के साथ मेरी पृष्ठभूमि (सर्वर साइड) जावा / PHP / कोबोल के साथ विकास, मेरे यूआई विकास कौशल पर एक बहुत ही सकारात्मक प्रभाव दिया गया है. मैं क्या मतलब है, जबकि मेरे डिजाइन बनाने, यानी जब भी मैं डिजाइन करते हैं, मैं कैसे डिजाइन सबसे अच्छा-HTML सीएसएस में परिवर्तित किया जा सकता है और जब HTML के सीएसएस कर के बारे में सोचते हैं, मैं बैकेंड प्रौद्योगिकी के बारे में एक विचार दे और यथोचित सुनिश्चित करें कि कि HTML XSL के छोरों या PHP के टुकड़े आदि में आसानी से लागू किया जा सकता है

इन वर्षों में, मैं डिजाइन करने के लिए किया गया है जो शायद donot एक सुराग HTML या सीएसएस क्या है यूआई डिजाइनर द्वारा सिर फेंक दिया. इन वर्षों में मैं सोच रहा है कि मैं बहुत अधिक के लिए पूछ रहा होगा, अगर मैं सिर्फ डिजाइनर, जो मेरे गले के नीचे अपने कोड के लिए डिजाइन "असंभव" Shov की कोशिश कर रहा है बस थोड़ा सा क्या अपने डिजाइन परिवर्तित किया जाएगा समझने के लिए उम्मीद में. कि सही में मदद मिलेगी?

तो, मैं आज इस पोस्ट के पार आया था ... वेब डिजाइनर, जो कोड नहीं कर सकते हैं ... धन्यवाद भगवान! मैं सिर्फ कई लोग ऐसा ही लगता है ... ऊपर artitle घना एक सा है .. लेकिन पढ़ा है, इसके बारे में हर शब्द के लायक.

इलियट जे स्टॉक धन्यवाद ... मैं निश्चिंत लग रहा है!

यहाँ से कुछ अंश प्रस्तुत है Elliots लेख .

वाह, क्या एक दिन! यह एक छोटे से चहक के साथ शुरू किया और चर्चा है कि पूरे वेब डिजाइन समुदाय भर झाडू लग रहा था के साथ समाप्त हो गया. ऐसा लगता है वहाँ कुछ बहुत मजबूत राय है कि वेब डिजाइनर कोड करने के लिए सक्षम होना चाहिए विषय पर आयोजित कर रहे हैं.
...
तो, इससे पहले कि हम इस में मिलता है, मुझे जल्दी से संक्षिप्त करने के लिए मैं क्या चहचहाना पर आज सुबह पर कहा की अनुमति:

ईमानदारी से, मैं हैरान हूँ कि 2010 में मैं अभी भी वेब डिजाइनर, जो अपने स्वयं के डिजाइन कोड नहीं कर सकते हैं भर में आ रहा हूँ. कोई बहाना नहीं है.

... मैं एक छोटे से अधिक मेरे कलरव में विशिष्ट किया गया है चाहिए. मैं डिजाइनर, जो भी सबसे मूल HTML और सीएसएस कौशल नहीं है एक वास्तविक साइट में एक फ्लैट डिजाइन बारी के बारे में बात कर रहा था. लोग हैं, जो जानबूझकर कोड के लिए नहीं चुन नहीं, जो लोग नहीं कर सकते. और मैं भी केवल सामने अंत कोड रहा हूँ यहाँ जिक्र है, निश्चित रूप से यह हास्यास्पद लगता है कि डिजाइनरों को भी अद्भुत वापस अंत प्रोग्रामर होना चाहिए ...

हम 'वेब', Illustrator 300dpi में भेजा डिजाइन, कोड के लिए असंभव है, कोई संगति / प्रयोज्य मिलता है.
~~ एमी Mahon

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

दिन के अंत में, मैं जो कोड और नहीं कर सकते हैं जो कर सकते हैं पर किसी भी नींद नहीं खोना है. मैं सिर्फ सही मायने में हूँ तो कई डिजाइनरों है कि सामने अंत कौशल की कमी है, के रूप में मैंने सोचा कि यह अतीत की बात थी खोजने के लिए आश्चर्य है.

भी टिप्पणी पढ़ने के लिए, वहाँ 320 के आसपास टिप्पणी थे, के रूप में मैं लिखना ... वे कर रहे हैं एक पढ़ने के काबिल है.
कृपया Elliots पूरा पोस्ट यहाँ पढ़ें .. वेब डिजाइनर, जो कोड नहीं कर सकते हैं

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

सीएसएस 2.1 उपयोगकर्ता एजेंट स्टाइल शीट्स चूक की एक पूरी सूची के लिए यहाँ क्लिक करें

कल, हर दूसरे ग्राउंड हॉग दिवस "की तरह मैं कुछ सीएसएस / tableless लेआउट पर काम कर रहा था. सभी 7 IE, एफएफ 3 और क्रोम में अच्छी तरह से जा रहा था, जब तक अचानक मैंने देखा कि कुछ संयुक्त राष्ट्र के ignorable मार्जिन केवल गूगल क्रोम में देखा. बहुत अजीब और worring हालांकि, यह कुछ नए बग / मुद्दे था कि मैं भर में आया था, वहाँ अंत में अपने सांसारिक काम में कुछ मसाला था. दुख की बात है (लेकिन अच्छा) यह जांच के कुछ ही मिनटों के भीतर तय हो गया ...

असल में, यह देखा कि गूगल क्रोम की तरह मेरे सीएसएस रीसेट करता है (मार्जिन: 0px) को नजरअंदाज कर दिया. यह वास्तव में उपयोगकर्ता एजेंट स्टाइलशीट (वेबकिट - गद्दी से शुरू: 40px) की वजह से किया गया था. 0 दुर्व्यवहार तत्व: तो समाधान के लिए गद्दी की स्थापना द्वारा इस शैली को रीसेट किया गया था.
किसी भी तत्व के लिए हो रहा से इस समस्या को रोकने के लिए एक अच्छा तरीका के रूप में एक वैश्विक सीएसएस आराम का उपयोग

* मार्जिन: 0; padding: 0;}

प्रयोक्ता एजेंट स्टाइल शीट (विशिष्टता) क्या है?
निम्नलिखित उद्धरण से लिया जाता है http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , का पालन करें लिंक करने के लिए उपयोगकर्ता एजेंट स्टाइल शीट पर और अधिक पढ़ें

लेकिन यकीनन सांसारिक - तरीके एक सीएसएस कहा कि प्रत्येक प्रयोक्ता एजेंट (UA, अक्सर एक वेब ब्राउज़र 'या' वेब ग्राहक ') एक डिफ़ॉल्ट शैली पत्रक है कि एक उचित दस्तावेजों को प्रस्तुत करना होगा विचार परिचय. CSS 2 कहते हैं कि अनुरूप उपयोगकर्ता एजेंटों के एक डिफ़ॉल्ट शैली पत्रक (या व्यवहार के रूप में यदि वे) लागू करना चाहिए कि एक उपयोगकर्ता एजेंट डिफ़ॉल्ट शैली पत्रक तरीके है कि दस्तावेज़ की भाषा के लिए यह सामान्य प्रस्तुति अपेक्षाओं को पूरा में दस्तावेज़ की भाषा का तत्व मौजूद होना चाहिए, सीएसएस 3 के लिए एक ही मन की होने की संभावना है.

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

न तो मैं बहुत उपयोगकर्ता इंटरफ़ेस (UI) के विकास के लिए नया हूँ और न ही मैं एक अनुभवी हूँ और जैसा कि मैं हमेशा यह डाल, मैं कि एक डिजाइनर की तुलना में अधिक यूआई डेवलपर की प्रोफ़ाइल में कोई पछतावा नहीं के साथ फिट. वैसे ओह! मैं के बारे में क्या लिख ​​रहा था? थोड़ी देर के लिए अब (कम कोई नहीं के वर्षों में होना चाहिए), हर अब और फिर जब मैं UI डिज़ाइन (जब पेशेवर डिजाइनर छुट्टी पर चला गया है) के एक बिट में मिलता है, मैं हमेशा खिचड़ी भाषा रोक यह सोच कर कि मेरे डिजाइन चाहिए ठीक complient है या नहीं हो सकता है (ईमानदारी से, मैं 100% मानकों का अनुपालन नहीं है कि प्राप्त है, यदि मैं भी चाहता था सकता है). तो मैं अपने आप को बता, क्या बकवास है! ... डिजाइन सरल, अच्छा है और मुख्य रूप से प्रयोग करने योग्य लग रहे हो, यह आगंतुकों भाग नहीं ... या उछाल चाहिए चाहिए (तकनीकी). क्या अच्छा है एक अच्छा tableless सीएसएस लेआउट ... आगंतुक, जो सभी स्मार्ट HyperText और कास्केडिंग स्टाइल शीट अपने वेबपेज के त्वचा के नीचे करने के लिए अनजान है Zilch होगा!
यह अच्छा लग रही है और उपयोग करने के लिए आसान होना चाहिए ... तो सभी मानकों का सामान आता है.

मैं भर की जेसन फ्राइड द्वारा इस ब्लॉग प्रविष्टि stumbbled है 37 सिग्नल जो 2004 में इसी तरह कुछ लिखा है और मुझे विश्वास लगभग 5 साल के लिए, (जो जो अवगत 37 संकेत onces जो Basecamp, कैम्प आदि जैसे कुछ भयानक वेब क्षुधा बनाया है नहीं कर रहे हैं के लिए) और उस के बाद से ज्यादा नहीं बदला है ... मैं अपने पद को पढ़ने के लिए खुश था, के रूप में मैं पूरी तरह से वह क्या कहना है और यह भी सच है, उसे अपनी बस अपने आंत लग रहा है के बारे में क्या कह रही है के बारे में यकीन नहीं है के साथ सहमत हैं और इसलिए मेरा है

जेसन फ्राइड: "वहाँ बहुत ज्यादा है सीएसएस और XHTML और मानक और पहुँच के बारे में बात करते हैं और लोगों के बारे में पर्याप्त बात नहीं. सीएसएस और मानकों के अनुरूप कोड औजार - आप को पता है कि इन उपकरणों के साथ निर्माण करने के लिए है. महान है, मुझे खुशी है कि अपने UI तालिकाओं का उपयोग नहीं करता हूँ. तो क्या हुआ? कौन परवाह करता है अगर यह अभी भी लोग अपने लक्ष्यों को प्राप्त नहीं करता है. वेब मानकों महान हैं, लेकिन लोगों को स्वयं के मानकों हो रही बातें किया है (और है कि अभी भी बहुत कठिन है ऑनलाइन कर) शामिल हैं.

इस समय अपने कोड बेहतर लग रहा है के अलावा. यूआई डिजाइनर वही पुरानी मौलिक गलतियों "दूसरी तरफ इंसान के बारे में भूल कर रहे हैं कोड validators नहीं - मनुष्य के उपयोग इंटरफेस.

चेकआउट जेसन फ्राइड पूर्ण लेख

DISCALIMER: इसका मतलब यह नहीं कि हम मानकों के बारे में सब परेशान नहीं करना चाहिए. मानक के लिए है और उन्हें छड़ी के रूप में संभव के रूप में ज्यादा अच्छे हैं. हम केवल कि अच्छा यूआई डिजाइन को समझने में हमेशा 100% मानक complience या उपाध्यक्ष प्रतिकूल मतलब यह नहीं है ....

मेरी सबक सीखा की मेरी सूची से, मैं कुछ UI डिजाइन और विकास स्वर्ण नियम ... चोटी के 10 यहाँ का पालन करें ... नहीं है कि आप उन्हें भी पालन ...

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

2. सादगी रखें और अपने प्राथमिक guidlines के उपयोग की आसानी. स्क्रीन पर भी कई चीजें हैं, अधिक संभावना है कि एक उपयोगकर्ता या भ्रमित हो जाएगा उनके मूल कार्य से विचलित.

3. सीमाओं में ... donot प्रयोज्य, पहुंच और मानकों में भी ज्यादा लिप्त है. मानकों का प्रभावी ढंग से प्रयोग करें और उन्हें टीम के लिए समझ बनाने. इस उत्पाद में सही स्थिरता सुनिश्चित करेगा

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

5. अपने डिजाइन और बातचीत में निरंतरता बहुत महत्वपूर्ण है. अप्रत्याशित बातचीत और gizmos के साथ अपने उपयोगकर्ता को भ्रमित donot.

6. अपने "डिजाइन देखें मिशन स्टेटमेंट" समझे. Aways पृष्ठ डिजाइन beign की प्राथमिक कार्रवाई पर ध्यान केंद्रित. इसके अलावा, आपके पृष्ठ पर seconday कार्यों की एक सूची बनाने, और उन्हें प्राथमिकता.

7. साइट उपयोगकर्ताओं के लिए उचित प्रतिक्रिया दें. AJAX के चारों ओर डिजाइन वेबसाइटों के अधिकांश के साथ, पृष्ठ में परिवर्तन के बारे में उपयोगकर्ता के लिए दृश्य cues प्रदान करते हैं. उपयोगकर्ता किसी भी काम वह करता है के पूरा होने के एक रसीद दी है. Donot उपयोगकर्ता प्रतीक्षा और लगता है, जैसे के लिए. फ़ाइल uplaods प्रगति संकेतक प्रदान करते हैं.

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

9 donot डिजाइन पर बहुत अधिक पुनरावृति. याद रखना! पूरे उत्पाद अधिक डिजाइन कि अकेले होते हैं. डिजाइन iterations के लिए अपनी परियोजना अनुसूची में उचित समयसीमा बनाएँ और इसे से चिपके रहते हैं. चलना हमें पता लगाने के लिए क्या काम करता है और क्या, बाहर नहीं मुसीबत स्पॉट लेने में मदद करता है. एक अच्छा इंटरफ़ेस के रूप में समय लगता है, विकास चक्र की शुरुआत में पुनरावृत्तियों के लिए समय प्रदान करते हैं, ताकि डिजाइन पुनरावृत्तियों सीधे rework करने के लिए समानता doesnot. बहुत rework के समय सीमा jeopradize सकता है.

10 वापस बैठो और एक उपयोगकर्ता की तरह कभी कभी लगता है.

क्या आप animoto.com देखा है? अच्छी तरह से! यह एक विज्ञापन नहीं है, मैं वास्तव में यह पसंद है! और यह गधा यूआई वास्तव में किस

मैं इस साइट भर में एक कुछ हफ्ते पहले आया था. प्रथम पृष्ठ देखा, बहुत परेशान सहारे. मेरे लिए, यह सिर्फ कुछ अमीर फ़्लैश सामग्री के साथ एक और साइट था, उपयोगकर्ताओं छवियों को अपलोड करने के लिए, कुछ ट्रैक का चयन करें और यह एक अच्छी तस्वीर स्लाइड शो में परिवर्तित करने की अनुमति है. डाउनलोड FLV करने, और यह अपनी पसंद के किसी भी साइट (YouTube, Metacafe, सुझाव और पसंद) ... अवधि पर डाल दिया.

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

Http://animoto.com/ ... ... नजर है और रजिस्टर और इसके साथ खेलते हैं ... तो ही आप प्रतिभा की सराहना कर सकते हैं.

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

आमतौर पर, जब हम सीएसएस लेआउट बनाने के लिए, हम "स्थिति" या "मंगाई", या दोनों का एक बहुत बुरा संयोजन का उपयोग करें. एरिक सोल और उनकी टीम एक सीएसएस लेआउट तकनीक है, जो वे "नकली निरपेक्ष पोजिशनिंग" के रूप में अशुद्ध कॉलम तकनीक के बाद कि किसी स्तंभ की उपस्थिति simulates का नाम दिया है एक नए प्रकार की सही तकनीक के लिए अगले परिभाषित.

आपको लगता है कि समस्या हमारे सीएसएस डेवलपर्स के सभी बिखरने लेआउट (अप्रत्याशित सामग्री में परिवर्तन है कि लपेटो करने के लिए संपूर्ण स्तंभ का कारण है, जब हम जारी लेआउट का उपयोग करें) के साथ ठीक है पता है ...! इतिहास लगता है!!
इस लेआउट तकनीक अभी भी बहुत युवा है, और वहाँ बाहर उन सभी सीएसएस गुरु द्वारा ट्रैश किए गए है, इससे पहले कि यह एक संयुक्त राष्ट्र लिखा मानक बन जाता है. मैं अब यह उपयोग करने के लिए खुश हूँ! ... और FAP लेआउट में मेरे पहले समस्याग्रस्त / अस्थायी संयुक्त राष्ट्र जरूरी लेआउट को पहले से ही परिवर्तित करने के बीच में पहले से ही कर रहा हूँ ... और कहने के लिए खुश हूँ. "हम पहले से ही इस ब्लॉग साइट के लिए के रूप में अच्छी तरह से कर रहे हैं नकली निरपेक्ष पोजिशनिंग का उपयोग" यह कोशिश, अब जाओ!

एरिक यश!

पृष्ठ पर डोम तत्वों धीमी यह renders, धीमी जावास्क्रिप्ट में डोम का उपयोग है. डोम तत्वों की एक उच्च संख्या के कारण बुरा लेआउट डिजाइन किया जा सकता है. उदाहरण के लिए, नेस्टेड तालिका लेआउट प्रयोजनों के लिए किया गया हो सकता है इस्तेमाल किया. जहां समझ में आता है अर्थ की दृष्टि से किसी भी HTML टैग का उपयोग करें. उदाहरण के लेआउट के लिए donot उपयोग तालिकाओं के लिए, लेकिन donot संकोच करने के लिए उन्हें का उपयोग करें जहाँ आप तालिका डेटा प्रदर्शित करने के लिए है, और इसलिए डोम तत्वों को कम करने के लिए, तुलना में एक समान ही DIVs का उपयोग कर बनाई गई संरचना, का उपयोग करेगा ..

अपने HTML पृष्ठ में डोम तत्वों की संख्या का परीक्षण करने के लिए, बस Firebug कंसोल में निम्न लिखें: document.getElementsByTagName('*').length

वहाँ कितने डोम तत्व भी कई हैं के रूप में कोई निर्धारित मानक है. अन्य इसी तरह के पन्नों कि अच्छा markup.Eg है की जाँच करें. Yahoo! होम पेज एक बहुत व्यस्त पृष्ठ है और 700 अभी भी के तहत तत्वों (HTML टैग).

AJAX अनुरोध के लिए मिल का उपयोग

यह पाया गया है कि जब XMLHttpRequest का उपयोग कर, डाक ब्राउज़रों में एक दो कदम प्रक्रिया के रूप में कार्यान्वित किया जाता है: हेडर पहले भेजने, तो डेटा भेजने. तो यह सबसे अच्छा है, जो केवल एक TCP पैकेट भेजने के लेता है (जब तक आप कुकीज़ का एक बहुत कुछ है) का उपयोग करें. IE में अधिकतम यूआरएल लंबाई 2K है, इसलिए यदि आप अधिक 2K डेटा से भेजने के लिए आप प्राप्त का उपयोग करने में सक्षम नहीं हो सकता है.
एक दिलचस्प पहलू प्रभावित वास्तव में किसी भी डेटा प्राप्त की तरह बर्ताव करता है पोस्टिंग के बिना है कि पोस्ट है. जानकारी पुन: प्राप्त करने के लिए मतलब है, तो यह भावना (शब्दार्थ) प्राप्त का उपयोग करें जब आप केवल डेटा, के रूप में डाटा भेजने के सर्वर - साइड संग्रहीत किया जा करने के लिए विरोध का अनुरोध कर रहे हैं बनाता है.

तुल्यकालिक AJAX कॉल से बचें

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

छवियों का अनुकूलन

अनुकूलन केवल छवि छोटा रखने के लिए आवश्यक स्तर पर छवि की गुणवत्ता के आकार रखने का मतलब है. वहाँ प्रक्रियाओं है कि एक बार बाहर ले जाने के लिए इससे पहले कि वे प्रसव के लिए सर्वर के लिए लोड कर रहे हैं छवियों का अनुकूलन कर सकते हैं लोड कर रहे हैं. उपकरण है कि हम इन छवियों के निर्माण के लिए उपयोग (Photoshop, पटाखे आदि) आमतौर पर उपकरण है कि उपयोगकर्ताओं को वेब इस्तेमाल के लिए छवि का अनुकूलन करने के लिए अनुमति है.
• GIF की जाँच करें देखने के लिए अगर वे एक पैलेट छवि में रंग की संख्या के लिए इसी आकार का उपयोग कर रहे हैं. जब एक छवि 4 रंग और एक 256 रंग पैलेट उपयोग कर रहा है, तो छवि के आगे अनुकूलित हो सकता है

• परिवर्तित GIF, PNG के संभव जहां है और देखने के लिए अगर वहाँ एक बचत है. अधिक बार नहीं, वहाँ है. संकोच नहीं पीएनजी का उपयोग करने के लिए, के रूप में वे पूरी तरह से आमतौर पर इस्तेमाल किया ब्राउज़रों के सबसे द्वारा समर्थित हैं. एक PNG एक GIF क्या करता पारदर्शिता सहित, कर सकते हैं एनीमेशन क्षमताओं की अपेक्षा करें.

सीएसएस sprites में इस्तेमाल किया छवियों के लिए •, प्रेत क्षैतिज रूप में खड़ी एक छोटे फ़ाइल आकार में आमतौर पर परिणाम के लिए विरोध में छवियों की व्यवस्था. इसके अलावा, एक प्रेत में इसी तरह के रंग के साथ छवियों गठबंधन. यह आप आदर्श PNG8 एक में फिट करने के लिए 256 रंग के तहत, रंग गिनती कम रखने में मदद करता है.

• यदि आप एक favicon.ico का उपयोग कर रहे हैं, यह छोटा सा 1K के तहत रखने के लिए, अधिमानतः.

ठीक से पहुंचा / का उपयोग करें छवि का आकार बदला.

हमेशा कोशिश करते हैं और आकार बदला छवियों का उपयोग करें, यानी एक बड़ा छवि की तुलना में आप की जरूरत सिर्फ इसलिए कि तुम और HTML में चौड़ाई और ऊंचाई सेट कर सकते हैं का उपयोग नहीं है. यदि आप पृष्ठ पर एक 100px एक्स 100px छवि प्रदर्शित करने की जरूरत है, तो एक छोटा 200x200px छवि नीचे का उपयोग नहीं करते हैं.

प्रगतिशील छवियाँ

एक वेब ब्राउज़र पहले से ही छवियाँ उत्तरोत्तर renders के. और भी बेहतर करने के लिए, बस "interlaced के विकल्प, या" प्रगतिशील "विकल्प के साथ अपने JPEG छवियों के साथ अपने GIF, या PNG छवियाँ को बचाने के.

वहाँ है कि प्रगतिशील छवि का उपयोग एक वरदान या एक बाधा के रूप में वेब उपयोगकर्ताओं के बीच बहस चल रही है. यह भी एक प्रगतिशील छवि लगभग 20% अपने गैर प्रगतिशील समकक्ष से अधिक वजन का होता है. तो, अगर आपको लगता है कि आप लेआउट छवियों कि यह प्रगतिशील जा रहा है के द्वारा उपयोगकर्ता अनुभव में बाधा नहीं होगा का उपयोग करता है, ऐसा करने के लिए स्वतंत्र महसूस हो रहा है.