उत्तरदायी डिजाइन: अब यह स्क्रीन आकार के बारे में नहीं है

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

दो साल के उत्तरदायी डिजाइन के उत्थान के बाद, जब किसी भी डिजाइनर और डेवलपर ने इस ट्रेन पर छलांग लगाई, तो विभिन्न प्रस्तावों पर एक प्रदर्शन परीक्षण ने अनुकूली सिद्धांत के मूल सिद्धांतों को हिला दिया।

गाय ने साबित कर दिया कि लगभग सभी संवेदनशील साइट अधिक वजन वाली हैं।

"हमने इसकी छवि में इंटरनेट बनाया ... भारी," जेसन ग्रिग्सबी।

लेकिन, इससे भी महत्वपूर्ण बात, मोबाइल उपयोगकर्ताओं, जैसे डेस्कटॉप उपयोगकर्ता, किलोबाइट भीड़ के अधीन थे।

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

सौभाग्य से, वेब समुदाय में हमेशा ऐसे लोग होते हैं जो सींग द्वारा बैल को पकड़ लेते हैं और स्थिति को उल्टा कर देते हैं।

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

“यदि आपकी साइट का वजन 15 एमबी है, तो यह एचटीएमएल 5 नहीं है। यह बकवास है, ”क्रिश्चियन हेइल्मन।

कोई अपराध नहीं है, लेकिन वेब पर प्रदर्शन परंपरागत रूप से उन चीजों की कीमत पर हासिल किया गया है जो डेवलपर्स के शब्दजाल द्वारा सर्वोत्तम रूप से वर्णित हैं। GZIP-ing, uglifying, minification, DNS लुकअप, फाइल कॉन्टेनेशन जैसे शब्द ... इन सभी अस्पष्ट शब्दों ने डिजाइनरों को तस्वीर से बाहर कर दिया।

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

"अच्छा प्रदर्शन अच्छा डिजाइन है," ब्रैड फ्रॉस्ट।

वास्तव में हल्के साइट बनाने के लिए, उत्पादकता के साथ परेशान न करें, इसके बजाय, उत्पादकता को डिजाइन तत्वों में से एक माना जाना चाहिए ।

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

“उत्पादकता सम्मान है। अपने उपयोगकर्ताओं का सम्मान करें और वे फिर से वापस आ जाएंगे। ”- ब्रैड फ्रॉस्ट

ऐसा क्यों हो रहा है

उछाल दर

एक अध्ययन है जिसके अनुसार 57% उपयोगकर्ता आपकी साइट छोड़ देंगे यदि यह तीन सेकंड से अधिक समय तक लोड होता है ।

Google, पृष्ठ गति और एसईओ

2010 के वसंत में, Google ने साइटों की रैंकिंग करते समय गति पर विचार करना शुरू किया। औसत लोडिंग गति वाले साइटों की स्थिति पर इसका बड़ा प्रभाव नहीं पड़ता है, लेकिन यदि पृष्ठ एक निश्चित समय के लिए लोड नहीं करता है, तो खोज एल्गोरिथ्म ऐसी साइट पर दंड लागू करता है।

यह एक बार फिर साबित करता है कि जब उपयोगकर्ता अनुभव की बात आती है, तो गति पर ध्यान देना होगा।

गति विचार

लोग अक्सर मोबाइल कॉन्सेप्ट के बजाय अमूर्त अवधारणा के बारे में बात करते हैं। प्रसिद्ध Google सिद्धांत के अनुसार, मोबाइल उपयोगकर्ताओं को तीन प्रकारों में विभाजित किया जाता है:

• दोहराए जाने वाले अब : जो लोग अपने फोन का उपयोग निरंतर, दोहराए जाने वाले परिवर्तनों (खेल के परिणाम, फेसबुक फीड अपडेट, स्टॉक मार्केट डायनामिक्स) के बीच में करते हैं।
• ऊब अब : जो उपयोगकर्ता किसी घटना की प्रतीक्षा करते समय फोन करते हैं।
• तत्काल (अब तत्काल)

सच की तरह लगता है, है ना?

वास्तव में, इसका वास्तविकता से कोई लेना-देना नहीं है। कोई "मोबाइल संदर्भ" नहीं है। लोग अपने फोन का उपयोग सड़क पर चलते समय, घर पर आराम करते समय, या ट्रेन से यात्रा करते समय करेंगे। वे एक ही समय में सब कुछ करते हैं!

फोन जहां भी जाते हैं लोग उनका अनुसरण करते हैं। इसलिए, लोग उनका उपयोग हर जगह बिल्कुल करते हैं।

"मोबाइल संदर्भ एक महत्वपूर्ण बात है, लेकिन पहले आपको यह समझने की आवश्यकता है कि यह क्या है," टिम कडलेक।

ल्यूक व्रॉब्ल्वस्की कुछ दिलचस्प आंकड़े देते हैं :

लोग मोबाइल उपकरणों का उपयोग कहां करते हैं?

• घर पर 84%
• दिन के दौरान खाली समय में 80%
• लाइनों में और प्रतीक्षा प्रक्रिया में 76%
• खरीदारी की प्रक्रिया में 69%
• काम पर 64%
• टीवी कार्यक्रम देखते समय 62% (वैकल्पिक अध्ययन 84% का आंकड़ा देते हैं)
• काम की तैयारी में 47%

नई संभावित स्थितियों के उद्भव, नए बाजारों के विकास और लोगों में नई आदतों के उद्भव के साथ, मोबाइल संदर्भ अनिवार्य रूप से बदल जाएगा। यह मानना ​​सुरक्षित है कि जब तक लोग मोबाइल उपकरणों का उपयोग करते हैं, तब तक मोबाइल संदर्भ की अवधारणा प्रासंगिक रहेगी।

और यह हमें इंटरनेट की गति पर करीब से नज़र डालता है। उपयोगकर्ताओं को एक भारी वेबसाइट देने और कोई समस्या न होने का केवल एक ही तरीका है: यदि उपयोगकर्ता इसे तेज इंटरनेट के माध्यम से घर पर रहते हुए मैकबुक प्रो पर खोलता है।

हालांकि, अन्य स्थितियों के लिए प्रदान करना आवश्यक है, जिनमें से कई शानदार हैं। लोग साइटों को देखने के लिए हर दिन बाजार में आने के लिए अनंत उपकरणों का उपयोग करते हैं।

“आप नहीं जान सकते कि वे आपकी साइट को किन उपकरणों से देखेंगे। यह वही है जो उपयोगकर्ता तय करते हैं। ”- करेन मैकग्रेन

यहां तक ​​कि उन देशों में जहां कुछ साल पहले कई स्मार्टफोन नहीं थे, अब उनकी संख्या उन्मत्त गति से बढ़ रही है।

"यदि आपकी सामग्री, सामग्री, जानकारी, उत्पाद, सेवाएं मोबाइल वातावरण में उपलब्ध नहीं हैं, तो इन लोगों के लिए वे बिल्कुल भी मौजूद नहीं हैं" - करेन मैकग्रेन।

एक और भी महत्वपूर्ण बिंदु वे स्थान हैं जहां से लोग आपकी साइट पर आएंगे। तो आपको किसी भी इंटरनेट स्पीड पर विचार करने की आवश्यकता होगी। ऐसा नहीं है कि कुछ उपयोगकर्ता दूरस्थ क्षेत्रों में रहते हैं, जहां कवरेज की गुणवत्ता खराब है। लोग काम से साइट पर जाएंगे, जहां घर से 100 एमबी / एस चैनल है, जहां 3 जी और 4 जी के माध्यम से 2 से 30 एमबी / एस तक की गति उपलब्ध है, और इसी तरह।

सीधे बात करते हुए, उत्तरदायी डिजाइन अब स्क्रीन के आकार के बारे में एक कहानी नहीं है , लेकिन विभिन्न परिदृश्यों, जिनके समाधान के लिए लचीला और "से" होना चाहिए।

और कैसे?

अच्छी बात है आपने पूछा।

हमने ऊपर कहा कि प्रदर्शन को एक स्वचालित साइट के रूप में लॉन्च किए जाने वाले स्वचालित कार्यों के सेट के रूप में नहीं माना जाना चाहिए। ऐसी समस्याओं को दूर करने के तरीके हैं और यहां तक ​​कि उन्हें प्रतिस्पर्धी लाभों में बदल देते हैं।

क्या बचना है?

बड़ी संख्या में भारी अनुकूली साइटों के अस्तित्व के लिए गाइ पोडज़र्न ने तीन मुख्य कारणों की पहचान की:

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

सक्रिय दृष्टिकोण

इस बात की जानकारी है कि साइटें हमेशा प्रदर्शन की अपेक्षाओं को पूरा करने में सक्षम क्यों नहीं होती हैं। अधिकांश विशेषज्ञों का कहना है कि "आपको शुरू से ही अनुकूल होना होगा।"

हम नीचे जिन तकनीकों पर चर्चा करते हैं, वे सभी नई नहीं हैं। यहां एक दिलचस्प बात यह है कि वे किस तरह से गठबंधन करते हैं और एक-दूसरे को जोड़ते हैं, खामियों को दूर करते हैं और एक-दूसरे की खूबियों पर जोर देते हैं।

प्रगतिशील सुधार

इस तकनीक का अर्थ वेब पर साइट का उपयोग करके एक अनुभव प्रदान करना है, जो केवल सबसे महत्वपूर्ण द्वारा सीमित है।

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

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

मोबाइल पहला विकास

2009 में, ल्यूक व्रॉब्लेव्स्की ने तीन कारणों से मोबाइल फर्स्ट नामक एक विकास दृष्टिकोण का प्रस्ताव रखा:

• मोबाइल बाजार निरंतर गति से बढ़ रहा है।
• मोबाइल वातावरण आपको फ़ोकस करता है (आपको बहुत अधिक स्क्रीन स्पेस के कारण होने वाली अव्यवस्था से छुटकारा दिलाता है)।
• मोबाइल वातावरण आपकी क्षमताओं का विस्तार करता है (जीपीएस, जियोलोकेशन, मल्टी-टच जेस्चर, एक्सेलेरोमीटर, कैमरा जैसी तकनीकों के लिए धन्यवाद)।

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

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

निष्कर्ष

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

RESS: उत्तरदायी वेब डिज़ाइन + सर्वर साइड घटक

कई लोगों के अनुसार, उत्तरदायी डिजाइन में एक बड़ी खामी है - यह पूरी तरह से स्क्रीन की चौड़ाई निर्धारित करने पर निर्भर करता है।

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

इस समस्या को हल करने के लिए, RESS बनाया गया था। मोबाइल फर्स्ट की तरह, RESS शब्द को ल्यूक व्रॉब्ल्वस्की ने 2011 में गढ़ा था। यह डिवाइस के प्रकार, उसके मूल्यांकन और संबंधित उपयोगकर्ता अनुभव प्रदान करने पर आधारित है। इस कार्य को पूरा करने के लिए, WURFL , DeviceAtlas और लाइटर वाले जैसे भारी उपकरण हैं, जैसे ब्राउज़र जेम , जो उपयोगकर्ता एजेंट लाइन को पढ़ता है और इस जानकारी के आधार पर कार्य करता है।

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

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

सशर्त डाउनलोड

“मोबाइल उपयोगकर्ता हमारे मेनू, खुलने का समय और फोन वितरण देखना चाहते हैं। डेस्कटॉप उपयोगकर्ता स्वयं एक 1 एमबी तस्वीर देखना चाहते हैं, जिसमें कोई व्यक्ति सलाद में हँसता है, "- मैट" विल्टो "मार्किस ।

कुछ बिंदुओं पर विचार करें:

1) मोबाइल यूजर्स डेस्कटॉप यूजर्स जितना ही कंटेंट चाहते हैं।

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

2) मोबाइल वातावरण आपको केंद्रित बनाता है। कुछ प्रतिबंध हैं (जैसे कनेक्शन गति या स्क्रीन आकार) जिसे डिजाइनरों को समान रूप से अच्छी तरह से समान सामग्री प्रदान करने के लिए स्वीकार करने की आवश्यकता है।

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

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

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

आलसी लोडिंग

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

एक प्रदर्शन बजट निर्धारित करना

टिम कैडलेक का तर्क है कि अधिकतम पृष्ठ भार सेट करना और इस मीट्रिक को नियंत्रित करना पृष्ठ लोड समय को कम करने का मुख्य तरीका है। "लक्ष्य निर्धारित करें और उनके लिए प्रयास करें।" यदि आपके बजट से पहले ही आप पार कर चुके हैं, तो चुनने के लिए स्टीव सौडर्स के पास तीन विकल्प हैं:

• किसी मौजूदा फ़ंक्शन या आइटम का अनुकूलन करें
• किसी मौजूदा फ़ंक्शन या आइटम को हटाएं
• एक नया फ़ंक्शन या आइटम जोड़ने से बचें

यह बहुत मौलिक लगता है, लेकिन यह दृष्टिकोण आपको इस बात पर ध्यान केंद्रित करने की अनुमति देता है कि प्रत्येक नया फ़ंक्शन साइट के समग्र प्रदर्शन को कैसे प्रभावित करता है।

इसके अलावा, कई तरीके हैं जो अधिक तकनीकी और कम वैचारिक स्तर पर काम करते हैं।

इमेजिंग तकनीक

वेबसाइटें लगभग 60% छवियों से बनी हैं। और यदि आप मोबाइल उपयोगकर्ताओं को अज्ञात कनेक्शन स्पीड डेस्कटॉप-आकार की छवियों के साथ दिखाते हैं, तो डाउनलोड गति के साथ समस्याओं के लिए अपनी साइट को डूम करें।

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

उत्तरदायी छवियां

दुनिया भर के डिजाइनर और डेवलपर्स HTML विनिर्देशन में उत्तरदायी छवियों को शामिल करने के लिए संघर्ष कर रहे हैं। मैट 'विल्टो' मारकिस इस विचार के सबसे प्रमुख प्रस्तावकों में से एक है। लड़ाई अभी तक नहीं जीती गई है , लेकिन जावास्क्रिप्ट-आधारित समाधान उभरे हैं जो वांछित परिणाम प्राप्त करने में मदद करते हैं।

फिलामेंट ग्रुप के स्कॉट जेहल ने एक प्लगइन लिखा , जो समुदाय द्वारा प्रस्तावित मार्कअप की नकल करता है और महान काम करता है: यह पिक्चरफिल है ।

छवि संपीड़न

फ़ोटोशॉप में छवियों को संपीड़ित करते समय डच डिजाइनर डान जॉबिस ने एक बहुत ही अजीब घटना की खोज की। वह क्रियाओं के निम्नलिखित अनुक्रम को अंजाम देने में सफल रहा: उसने छवि को लिया, उसके आकार (200%) को दोगुना कर दिया, उसे उसकी मूल गुणवत्ता के 25% या उससे कम पर संकुचित कर दिया, फिर ब्राउज़र में छवि के आकार को उसके मूल आकार (100%) में पुनर्स्थापित कर दिया। नतीजतन, छवि न केवल हल्की हो गई, बल्कि पिक्सेल घनत्व के दोहराव के कारण शुरुआत में HiDPI स्क्रीन के लिए भी अनुकूलित किया गया था।

यहां एकमात्र समस्या यह है कि ब्राउज़र के लिए अपने मूल आकार में दो बार छवि को प्रस्तुत करना मुश्किल हो सकता है (खासकर यदि आपको बड़ी संख्या में मीडिया सामग्री वाली साइटों के मामले में, ऐसा सैकड़ों बार करने की आवश्यकता है)। इस समाधान की अनुकूलता को सत्यापित करने के लिए, आपको परीक्षण के लिए समय निकालने की आवश्यकता है।

वेक्टर बनाम बिटमैप

एक उत्कृष्ट पसंद एसवीजी छवियां हैं। , . fallback Modernizr.

, . ( Chris Coyier ), « » :

• IE6, PNG.
• ,

HiDPI

( Dave Bushell ) HiDPI- . , , , iPhone, iPad , , , .

« , ? , », – .

आगे क्या है?

Google – WebP . , , PNG.

JavaScript-, WebP . Google, , WebP .

. , , .

CSS,

media query, / .

जावास्क्रिप्ट

HTML5, async defer. « », RequireJS , .

,

.

, .

HTTP-

, , , :

• CSS- CSS Preprocessors, .
• JS , , ( Typekit , FOUT « »).
• PNG-, . CSS «» .
• URL ( , ), HTTP-.

CSS-, . GZIP-/ .

निष्कर्ष

.

, , , .

, - . , , , , , .

[en]…

• 20 jQuery .
• 20 , , WordPress .
• 50 - .
• 3 0 jQuery .
• ?
• 20 CSS3 .

PS .

PPS UX . .