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

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

नया बैनर प्रारूप

हमारे HTML5 मार्कअप के रूप में बैनर को लचीला बनाने का एकमात्र तरीका इसे HTML5 में लिखना है। सबसे पहले यह एक पागल विचार की तरह लग सकता है, लेकिन मैं आपको विश्वास दिलाता हूं कि यह नहीं है। वास्तव में, इस दृष्टिकोण के कई फायदे हैं:

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

इसे कैसे प्राप्त किया जाए?

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

थोड़ा प्रदर्शन का समय

यहां लोकप्रिय 125 x 125 px प्रारूप ("स्क्वायर बटन") के HTML5 बैनर का एक उदाहरण दिया गया है। और यहाँ संशोधित चौड़ाई के साथ उसी बैनर का एक उदाहरण है। ब्राउज़र विंडो का आकार बदलते समय यह बैनर कैसे व्यवहार करता है, इस पर ध्यान दें। सुरुचिपूर्ण, है ना? :)

नया बैनर आकार समझौता

अनुकूली लेआउट के लिए आवश्यक है कि पृष्ठ तत्वों की एक चर चौड़ाई हो, इसलिए बैनर को भी इस समझौते का पालन करना होगा। अनुकूली लेआउट में ऊँचाई इतनी महत्वपूर्ण नहीं है, अर्थात्। हम अपनी आवश्यकता के अनुसार किसी भी ऊंचाई का मूल्य चुन सकते हैं। लेकिन इसका मतलब यह नहीं है कि हमारा बैनर इस मूल्य पर "अटक जाएगा" - हम किसी भी बैनर के लिए कई मूल्यों को परिभाषित कर सकते हैं!

पिछड़े संगतता को बनाए रखने के लिए, उत्तरदायी बैनरों में पारंपरिक बैनरों के समान ऊँचाई के मान होने चाहिए। सैद्धांतिक रूप से, हम ऐसे बैनर बना सकते हैं जो किसी भी चौड़ाई / ऊंचाई के साथ काम करते हैं, लेकिन वे डिजाइन या परीक्षण करना बहुत कठिन हैं। मेरा सुझाव है कि 88 px की न्यूनतम चौड़ाई से शुरू करें और मानक ऊंचाइयों के निम्नलिखित सेट पर रहें:

31px माइक्रो

• माइक्रो स्ट्रिप (88 x 31)

60px बटन

• बटन 2 (120 x 60)
• आधा लंबा बैनर (234 x 60)
• लंबा बैनर (468 x 60)

90px बैनर

• बटन 1 (120 x 90)
• क्षैतिज (लीड) लंबा (728 x 90)

125px "छोटा आयत"

• वर्ग बटन (125 x 125)

250px मध्यम आयत

• ऊर्ध्वाधर बैनर (120 x 240 * पर्याप्त बंद करें!)
• पॉप-अप स्क्वायर (250 x 250)
• मध्यम आकार का आयत (300 x 250)

400px बड़ा आयत

• ऊर्ध्वाधर आयत

600px गगनचुंबी इमारत

• गगनचुंबी इमारत (120 x 600)
• चौड़ी गगनचुंबी इमारत (160 x 600)
• आधा पृष्ठ विज्ञापन (300x600)

ऊपर की सात ऊंचाइयां ऊर्ध्वाधर आकारों की एक श्रृंखला का प्रतिनिधित्व करती हैं; चर चौड़ाई के साथ संयोजन में, वे आज सबसे लोकप्रिय बैनर विज्ञापन प्रारूपों को कवर करते हैं। बेशक, पारंपरिक बैनर के साथ, आप एक अलग, गैर-मानक प्रारूप का उपयोग कर सकते हैं।

सबसे उल्लेखनीय तथ्य यह है कि 14 आम तौर पर स्वीकृत बैनर प्रारूप केवल सात तक आते हैं, जिनमें से सभी को केवल एक एचटीएमएल 5 बैनर के साथ दर्शाया जा सकता है! इसके अलावा, मेरा डेमो बैनर सभी घटकों (HTML, CSS और JPG छवि) के साथ 25k से कम समय लेता है।

उत्तरदायी बैनर की जाँच के लिए मेरे आवेदन में इन नए स्वरूपों को आज़माएँ - इसके साथ आप अपने स्वयं के बैनर का परीक्षण कर सकते हैं। अपनी ब्राउज़र विंडो का आकार बदलकर देखें कि वे सभी "फिट" कैसे हैं।

CSS मीडिया प्रश्नों का उपयोग करके एक आइफ्रेम का आकार बदलना

कभी-कभी आपके बैनर के लिए ऊंचाई में भी अनुकूलन करना आवश्यक हो सकता है - यह सीएसएस मीडिया प्रश्नों का उपयोग करके आइफ्रेम को आकार देकर प्राप्त किया जा सकता है। मैंने पाया कि ऐसा करने का सबसे अच्छा तरीका यह है कि आइफ्रेम की ऊंचाई और चौड़ाई को 100% तक सेट किया जाए और इसे सीएसएस में विशेष सेट के साथ एक डिव के साथ लपेटा जाए। यहाँ यह कैसा दिखता है:

<div id="ad"> <iframe src="ad.html" border="0" scrolling="no" allowtransparency="true" width="100%" height="100%" style="border:0;"> </iframe> </div> 

और यहाँ सीएसएस है:

 /* default height */ #ad { height:60px; } @media only screen and (height:90px) { /* 90 pixels high */ #ad { height:90px; } } @media only screen and (height:125px) { /* 125 pixels high */ #ad { height:125px; } } 

एक कार्यशील उदाहरण देखने के लिए मेरे उत्तरदायी बैनर की CSS फ़ाइल खोलें।

छापों और क्लिकों की ट्रैकिंग (ट्रैकिंग)

HTML5 बैनर की एक और बड़ी विशेषता यह है कि उन्हें Google Analytics में ट्रैक किया जा सकता है - एक नियमित वेबसाइट की तरह। वास्तव में, हमें एक सामान्य विज्ञापन सेवा प्रणाली की तुलना में बहुत अधिक डेटा मिलता है। आप मज़बूती से न केवल बैनर डिस्प्ले (बैनर छाप ट्रैकिंग) की संख्या को ट्रैक कर सकते हैं, बल्कि रेफ़रर्स, ब्राउज़र, स्क्रीन रिज़ॉल्यूशन, मोबाइल डिवाइस, लोकप्रिय देश / शहर और भी बहुत कुछ देख सकते हैं!

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

मेटा टैग में बैनर का आकार संग्रहीत करना

उत्तरदायी बैनर किसी भी आकार के सेट का समर्थन करने के लिए बनाया जा सकता है, लेकिन समर्थित ऊंचाई मूल्यों की तलाश में सीएसएस को कंघी नहीं करने के लिए, मैं उन्हें मेटा टैग में लिखने का सुझाव देता हूं। एक उदाहरण देखें:

 <meta name="displayheight" content="31, 60, 90, 125, 250, 400, 600" /> 

यह अच्छा अभ्यास है क्योंकि मेटा टैग मशीन पठनीय है। कुछ मामलों में, आपके ब्राउज़र को सही ढंग से प्रदर्शित करने के लिए, आपको वैकल्पिक आकारों का पता लगाने की आवश्यकता हो सकती है।

उपर्युक्त का सारांश प्रस्तुत करना

चर चौड़ाई के साथ अनुकूली लेआउट बैनर विज्ञापनों की आवश्यकता है, और मुझे विश्वास है कि HTML5 इसके लिए भी उपयुक्त है। थोड़ी सीएसएस ट्रिक का उपयोग करके, हम एक ऐसा बैनर बना सकते हैं जो अकेले ही वर्तमान में सभी सामान्य स्वरूपों को स्वीकार करने में सक्षम है। मेरे बैनर का एक उदाहरण डाउनलोड करें और ऐसा कुछ लिखने का प्रयास करें। उत्तरदायी बैनर के परीक्षण के लिए अपने आवेदन में अपनी रचना का परीक्षण करना न भूलें। यदि आप अपने ब्लॉग या वेबसाइट पर एक अनुकूली बैनर रखना चाहते हैं, तो बस नीचे दिए गए कोड को कॉपी करें (बस उस आकार को सेट करें जिसकी आपको आवश्यकता है):

 <div id="ad" style="width:100%;height:90px;" > <iframe src="http://matthewjamestaylor.com/responsive-ads/ad.html" border="0" scrolling="no" allowtransparency="true" width="100%" height="100%" style="border:0;"> </iframe> </div> 

यदि आपके कोई सुझाव या बग फिक्स हैं तो मुझसे संपर्क करें । मेरे पास IE में सब कुछ परीक्षण करने का अवसर नहीं था ... मेरा एक बेटा है जो केवल 11 दिन का है और एक 20 महीने की बेटी है, इसलिए मेरे पास ज्यादा खाली समय नहीं है ... अविश्वसनीय है, लेकिन मैं अभी भी इस लेख को समाप्त करने में कामयाब रहा!

---

एक अनुवादक की विनम्र राय

विकास के विभिन्न क्षेत्रों में HTML5 (HTML5 + CSS3 + जावास्क्रिप्ट बंडलों) के कार्यान्वयन के बारे में कुछ महत्वपूर्ण हैं: बैनर, गेम उद्योग और इतने पर। और मैं इस बात से सहमत नहीं हो सकता कि आज प्रदर्शन (CSS3 संक्रमण, जावास्क्रिप्ट), पर्याप्त शक्तिशाली डिजाइन उपकरण (एडोब फ्लैश बनाम एडोब एज) की कमी या नई तकनीकों, तकनीकों और दृष्टिकोणों के अध्ययन और विकास की आवश्यकता से संबंधित पर्याप्त समस्याएं हैं। लेकिन मेरे लिए व्यक्तिगत रूप से, यह स्पष्ट है कि ये सभी समस्याएं गंभीर नहीं हैं, इसलिए, आईटी में सब कुछ और सब कुछ के विकास की गति को देखते हुए, यह केवल थोड़ा इंतजार करने के लिए बनी हुई है।

PS HTML5 में, सैंडबॉक्स विशेषता को iframe टैग के लिए जोड़ा गया है , जो आपको फ़्रेम की सामग्री पर प्रतिबंध लगाने की अनुमति देता है। शायद यह तथ्य व्यामोह की लहर को आसानी से बाहर निकालने में मदद करेगा जो कभी-कभी आईफ्रेम को कवर करता है। सच है, विभिन्न ब्राउज़रों में समर्थन अभी भी कमजोर है (आप यहां देख सकते हैं )।

UPD: ध्वनि की थोड़ी आलोचना।