सामग्री
- अज्ञात डिझाईन
- रचना करण्यासाठी व्यावहारिक दृष्टीकोन
- अज्ञेयवादी लेआउट होत
- क्रमिकपणे कोडिंग
- मार्क-अप मध्ये डायव्हिंग
असे दिसते की आजकाल प्रत्येकजण प्रतिसाद देणार्‍या वेब डिझाइनबद्दल बोलत आहे आणि चांगल्या कारणास्तव; जसे की वेब-सक्षम केलेल्या डिव्हाइसची संख्या वाढत आहे - प्रत्येक भिन्न क्षमता आणि वैशिष्ट्यांसह - निश्चित-रूंदी वेबसाइट तयार करणे यापुढे समझदार नाही.
सत्य आहे, ते कधीच नव्हते. तरीही आत्तापर्यंत अनुभवांचे डिझाइन करण्याचा उत्तम सराव मानला जात असे ज्याने अनेक गृहितक केले, मग ते स्क्रीन रिझोल्यूशन, बँडविड्थ किंवा इनपुट पद्धतीच्या आसपास असतील. आपण कधीही मित्राच्या छोट्या स्क्रीन नेटबुकवर पाहण्यासाठी (आणि होय, मी येथे वेदनादायक अनुभवावरून लिहित आहे) केवळ 960 पीएक्स-वाईड वेबसाइट डिझाइन केली असल्यास, आपणास समजेल की हा विशेषतः हुशार दृष्टीकोन का नाही. आता, स्मार्टफोन आणि टॅब्लेट मिक्समध्ये फेकल्यामुळे हे स्पष्ट झाले आहे की आमच्या पारंपारिक पद्धती यापुढे हेतूसाठी फिट नाहीत.
कृतज्ञतापूर्वक, सीएसएस मीडिया क्वेरींचे आगमन आणि वेब स्वतःच एक माध्यम आहे याची वाढती पोचपावती म्हणजे आम्ही व्यासपीठाचे खरे स्वरूप स्वीकारू लागलो आहोत, हे मान्य करून की त्याची सार्वभौमिकता ही एक शक्ती आहे, एक कमकुवतपणा नाही.
पुढील पाच दिवसांमध्ये, मी हे तंत्रज्ञानाच्या तंत्रज्ञानाद्वारे मार्गदर्शन करेनः प्रतिसाद वेब डिझाइन. एथन मार्कोटे द्वारा विकसित, हे आपल्यास भेटणार्‍या कोणत्याही वातावरणास अनुकूलपणे अनुकूलित करणार्‍या साइट तयार करण्यात मदत करण्यासाठी फ्लुईड लेआउट, लवचिक प्रतिमा आणि मीडिया क्वेरी एकत्र करते.
एक साधा मीडिया गॅलरी कशी तयार करावी हे दर्शवून मी हा दृष्टिकोन दर्शवित आहे. माझ्या उदाहरणांमध्ये, मी युनायटेड स्टेट्समध्ये घेतलेल्या अलीकडील रोड ट्रिपचे दस्तऐवजीकरण करण्यासाठी मी एक छोटी वेबसाइट तयार करीत आहे, परंतु आपल्या स्वत: च्या गरजा भागविण्यासाठी कोड आणि डिझाइन सानुकूलितपणे मोकळ्या मनाने वाटत आहे.
अज्ञात डिझाईन
या ट्यूटोरियलमध्ये बहुतेक प्रतिसाद डिझाइनच्या विकासाच्या पैलूभोवती केंद्रित केले जातील. परंतु आम्ही कोणत्याही कोडमध्ये खोदण्यापूर्वी विचार करूया की आपण एखादी वेबसाइट कशी डिझाइन करू शकू ज्यामध्ये बहुधा असंख्य लेआउट असू शकतात.
आता मी भाग्यवान आहे की मी इंटरफेस डिझाइन करू शकतो आणि फ्रंटएंड कोड विकसित करा जो त्यांना वास्तविक बनवितो. हे अर्थातच एक अद्वितीय कौशल्य नाही - आपण स्वत: साठी काम केल्यास आपण कदाचित तेच आहात. परंतु फ्लुईड डिझाइन तयार करताना सामग्री कशाशी जुळवून घेता येईल आणि रीफ्लो करू शकते हे समजून घेणे फायदेशीर आहे.
मी अशा मोठ्या संघाचा भाग म्हणून काम करतो जेथे माझी भूमिका अधिक विशिष्ट आहे. अशा वातावरणात व्हिज्युअल डिझायनर केवळ वायरफ्रेम्सचे आकर्षक, आकर्षक (साइन-ऑफ, पिक्सेल-परफेक्ट) कॉम्प्समध्ये भाषांतर करण्यावर लक्ष केंद्रित करू शकते. हे लेआउट दुबळे आणि कार्यक्षम मार्कअप आणि सीएसएस मध्ये भाषांतरित करुन विकसकांना स्वतंत्रपणे स्थित असामान्य नाही.
तथापि, डिझाइन वेगवेगळ्या वातावरणाशी कसे जुळतील हे मूल्यांकन करणे सुरू केल्यावर असे रेखीय आणि विभक्त वर्कफ्लो पटकन तुटतात. जितके नवीन साधन किंवा तंत्रज्ञान आहे तितके आपण कार्य करण्याच्या अधिक सहयोगी आणि चपळ मार्गांवर देखील विचार केला पाहिजे. प्रतिसाद देणार्‍या वेबसाइट्सची रचना करताना आढळणार्‍या बर्‍याच अवघड समस्यांचे निराकरण फक्त संभाषण, प्रयोग आणि पुनरावृत्तीद्वारे केले जाऊ शकते.
रचना करण्यासाठी व्यावहारिक दृष्टीकोन
हे असे म्हणण्याचे नाही की डिझाइनर कोणत्याही विशिष्ट डिव्हाइसच्या मर्यादेबाहेर कसे डिझाइन कार्य करू शकतात याबद्दल विचार करण्याची संधी नाही.
क्लीयरलफ्ट येथे, आम्ही डेस्कटॉपच्या दृष्टीकोनातून व्हिज्युअल डिझाइन सुरू करतो. आम्ही बहुतेक सामग्रीच्या मूळ तुकड्यांच्या आसपास आरंभिक अन्वेषणांचा आधार घेणार्‍या, आभासी डिझाइन भाषा आणि व्हिज्युअल सौंदर्यात्मक परिभाषा देऊन प्रारंभ करतो. उदाहरणार्थ, आम्ही एखाद्या फूड साइटची रचना करत असल्यास, आम्ही एक कृती पृष्ठासह प्रारंभ करू; बातमी साइटसाठी, एक कथा पृष्ठ.
हे केवळ साइटवरील एक महत्त्वाचे पृष्ठ नाही, परंतु त्यात कदाचित आमच्यासाठी टाइपोग्राफिक पॅलेट तयार करण्यासाठी पुरेशी संरचित सामग्री देखील आहे. आम्ही या लेआउटला कसे अनुकूल करू शकतो याबद्दल विचार करू - जरी या टप्प्यावर ते फक्त आपल्या मनात नसले तरीही.
डिझाईनवर ताण ठेवण्याचा एक उपयुक्त मार्ग म्हणजे असे पृष्ठ घेणे आणि त्यास अरुंद (~ 320px रुंद) स्क्रीनसाठी अनुकूल करणे. आपणास हे लक्षात येईल की या रूंदीवर कार्य करण्यासाठी डिझाइनच्या काही बाबींचा पुनर्विचार करणे आवश्यक आहे. येथे काही उदाहरणे दिली आहेत:
- टाइपोग्राफी: मोठी शीर्षके विस्तृत लेआउटवर चांगले काम करू शकतात परंतु छोट्या पडद्यावर ते बरेच अनुलंब स्थान घेऊ शकतात आणि म्हणून अतिरिक्त स्क्रोलिंग आवश्यक आहे. रेषांची लांबी जसजशी बदलत जाईल तसतसे तुम्ही लाईन हाइट्स आणि इतर टायपोग्राफिक उपचारांचा देखील विचार केला पाहिजे.
- दुवे: आपले डिझाइन टचस्क्रीन डिव्हाइसवर कसे कार्य करेल? आमच्याकडे अद्याप हे शोधण्याचा सोपा मार्ग नसला तरीही (म्हणजे आमच्या डिझाइनच्या सर्व बाबींमध्ये आपण विचार केला पाहिजे), एक संकुचित स्क्रीन डिझाइन केल्यामुळे दुवे आणि इतर परस्पर घटकांसाठी लक्ष्यित क्षेत्राबद्दल विचार करण्याची संधी मिळू शकते. . आयओएस मार्गदर्शकतत्त्वे अशी शिफारस करतात की हे कमीतकमी 44 पिक्सेल / बिंदू चौरस असले पाहिजेत जे लक्ष्य ठेवण्यासाठी एक चांगली व्यक्ती आहे.
- नॅव्हिगेशनः कोणत्याही प्रतिसाद देणार्‍या डिझाइनचा हा कदाचित सर्वात विचित्र घटक असेल, खासकरून जर आपल्या साइटमध्ये बरेच विभाग आणि खोल वर्गीकरण असेल. ब्रॅड फ्रॉस्टने सध्या विचारात घेतलेल्या नेव्हिगेशनसाठी काही भिन्न पध्दतींचा सारांश लिहिला आहे.
- अनावश्यक सामग्री: काही सामग्री आवश्यक नाही? इतर सामग्री केवळ विशिष्ट परिस्थितींमध्येच दर्शविली जाण्याची आवश्यकता आहे? वापरकर्ता कोणत्या डिव्हाइसचा वापर करीत आहे यावर आधारित सामग्री लपवण्याचा मी सल्ला देत नाही, परंतु सशर्त लोडिंग (जसे की आम्ही या आठवड्यात नंतर पाहूया) यासारखी तंत्रे आवश्यक असताना केवळ पूरक सामग्री लोड करणार्‍या छोट्या पृष्ठांवर सेवा देण्यास मदत करू शकतात.
दोन विरोधाभासी लेआउट्स डिझाइन केल्यामुळे संभाव्य गोटांचे लवकर इस्त्री करताना डिझाइनमध्ये रुपांतर होईल ही कल्पना मजबूत करते. हे काम दुप्पट झाल्यासारखे वाटत असले तरी लक्षात ठेवा की आम्ही प्रत्येक पृष्ठ पिक्सेल-परिपूर्ण अचूकतेसाठी डिझाइन करीत नाही. त्याऐवजी, आम्ही एक स्केलेबल डिझाइन भाषा तयार करण्यावर लक्ष केंद्रित करीत आहोत - ती कोडमध्ये लागू केल्यापासून विकसित होईल आणि ती वैयक्तिक मॉड्यूल्स आणि घटकांच्या आसपास आधारित आहे.
अज्ञेयवादी लेआउट होत
आश्चर्याची बाब म्हणजे, ज्या प्रिंटसारख्या वेबवर ऐतिहासिकदृष्ट्या उपचार केला गेला अशा उद्योगासाठी, निश्चित-रुंदीच्या लेआउट्सने आम्ही उत्पादन करत असलेल्या बर्‍याच वस्तूंचा नाश केला आहे. जशी आपण परिस्थितीशी जुळवण्यायोग्य माध्यमाची रचना करण्यास सुरवात करता तसतसे नवीन दृष्टिकोन मानले जात आहेत ज्यामुळे आम्हाला माध्यमांचे द्रवरूप स्वरूप ओळखताना समस्या सोडविण्यास आणि कल्पनांना संप्रेषण करण्याची परवानगी मिळते. येथे माझ्या आवडीतील काही आहेत:
- पृष्ठ वर्णन आकृत्या: वायरफ्रेम्स बहुतेक वेळा लेआउट सूचित करतात (आणि अशा प्रकारे विशिष्ट प्रकारचे डिव्हाइस गृहित धरतात), पृष्ठ वर्णन रेखाचित्र ही कल्पना काढून टाकते आणि त्याऐवजी प्राधान्याच्या दृष्टीने दस्तऐवजात व्यवस्था केलेल्या स्वतंत्र घटकांचे वर्णन करते.
- शैली फरशा: ग्राहकांशी डिझाइन कल्पना संप्रेषण करताना, आम्ही स्वतःला ‘वेबसाइट्सची पेंटिंग्ज’ सादर करताना आढळू शकतो. जर आपण सावधगिरी बाळगली नाही तर क्लायंट संकल्पना पाहण्यास योग्य विचारतील जे इतर उपकरणांवर डिझाइन कसे दिसेल हे दर्शवितात. हे एकाधिक डिव्हाइसेससाठी एकाधिक पृष्ठे तयार करण्याच्या परिस्थितीत आम्हाला भाग पाडू शकते. सामन्था वॉरेनने या समस्येचा विचार केला आहे आणि स्टाईल टाइल्ससह या. हे मूड बोर्ड (परंतु कमी अस्पष्ट) आणि पूर्णपणे जाणवलेले कॉम्प्स (परंतु कमी तंतोतंत) दरम्यान कुठेतरी बसतात आणि आम्हाला टाइपोग्राफी, बटणाच्या शैली आणि मास्टहेड उपचारांमध्ये संवाद साधण्यास मदत करतात. आमच्या ग्राहकांशी अधिक परिपक्व चर्चेस ते प्रोत्साहित करतात.
- गतिमान डिझाइन गेम: सहयोगी डिझाइन कार्यशाळांमध्ये हा व्यायाम खरोखर चांगल्या प्रकारे कार्य करू शकतो. या व्यायामामध्ये प्रत्येकजण पोस्टवर लिहितो - ते एका विशिष्ट पृष्ठावर दिसणार्‍या घटकांची नोंद घेते. नंतर ते महत्त्वपूर्णतेनुसार भिंतीवर चिकटलेले असतात, जणू ते एखाद्या मोबाईल फोनवर रेषात्मक दिसत आहेत. परिणामी चर्चा काही आश्चर्यकारक निष्कर्ष व्युत्पन्न करू शकते. उदाहरणार्थ, आपल्या लक्षात येईल की नेव्हिगेशन हा पृष्ठातील सर्वात महत्वाचा घटक नाही. हे पृष्ठावरील शीर्षस्थानी स्किप दुवा तळटीपच्या नेव्हिगेशनशी जोडेल त्या डिझाइनपर्यंत जाऊ शकते.
आम्ही आधीपासूनच अर्थातच वापरत असलेल्या साधनांसाठी अजूनही जागा आहे, परंतु वेबसाइट विस्तृत रूपाने डिझाइन करताना आम्हाला हे लक्षात ठेवले पाहिजे की लेआउट यापुढे ज्ञात नाही.
क्रमिकपणे कोडिंग
कृतज्ञतापूर्वक, आम्ही परिश्रम घेत आहोत त्याप्रमाणे आपण ज्या उदाहरणावरून कार्य करीत आहोत त्या व्हिज्युअल डिझाइनबद्दल काळजी करण्याची आपल्याला गरज नाही! त्याऐवजी, आम्ही आमच्या प्रतिसादास संपूर्ण उत्तरदायी वेबसाइटमध्ये कोडिंगवर लक्ष केंद्रित करू शकतो.
आम्ही प्रारंभ करण्यापूर्वी आणखी एक गोष्ट. आम्ही ज्या माध्यमात कार्य करीत आहोत त्या स्थापनेचे तत्त्व लक्षात ठेवणे महत्वाचे आहे: सार्वभौमत्व. म्हणजे केवळ आजच्या वेब-सक्षम डिव्हाइससाठी तयार करणे नव्हे तर काल आणि उद्याच्या सुसंगततेची खात्री करणे. जॉन अ‍ॅलसॉपॅपने पुढील 6 अब्ज पोस्टमध्ये हे तत्व का महत्त्वाचे आहे याचे वर्णन केले.
"पुढील सहा अब्ज हे ग्रामीण भारत, आफ्रिका, चीनमधील मुले आहेत ज्यात वीज आणि नेटवर्क्सचा प्रवेश अधून मधून होऊ शकतो. हे सुमात्रामधील दशकात जुन्या विंटल बॉक्समध्ये आहे. शेकडो वेगवेगळ्या भाषा बोलणारे लोक, डझनभर भिन्न लेखन प्रणाली. हे असे लोक आहेत जे आपल्या कुटुंबातील पहिलेच लोक वाचू व लिहू शकले आहेत. जगातील हे 20 टक्के लोक वाचू किंवा लिहू शकत नाहीत.’
आमच्या व्यवसायातील विविध फॅशन (अधिक चांगल्या शब्दासाठी) शोधून आपण वेबबद्दलचे आमच्या ज्ञानानुसार शोधू शकतो: वेब मानके, प्रवेशयोग्यता, विवादास्पद जावास्क्रिप्ट ... सर्व एकाच थीमचे रूप आहेत: प्रगतीशील वर्धितता. उत्तरदायी वेब डिझाइनबद्दलही हेच आहे. तयार करण्यासाठी एक खरोखर प्रतिसाद देणारी वेबसाइट ही अशी साइट तयार करणे आहे जी केवळ मागास अनुकूल नसून भविष्यातील अनुकूल देखील असेल.
मार्क-अप मध्ये डायव्हिंग
ठीक आहे, प्रस्तावनेचे पुरेसे आहे, मजकूर संपादक उघडण्याची वेळ आली आहे.आमच्या डिझायनरने आम्हाला डेस्कटॉप-ओरिएंटेड डिझाइन प्रदान केले आहे आणि हे संकुचित व्ह्यूपोर्टमध्ये कसे दिसू शकते याची उदाहरणे देण्यास पुरेसा दयाळू आहे.
हे स्वतंत्रपणे कोडिंग करण्याचा मोह असू शकेल, परंतु मी एक वेगळा दृष्टीकोन सुचवणार आहे. स्वतंत्र पृष्ठे - किंवा नमुने ठेवून - जे एका पृष्ठावरील डिझाइन बनवते, आम्ही एक नमुना पोर्टफोलिओ तयार करू शकतो. हे आम्हाला कोणत्याही पृष्ठ लेआउटच्या मर्यादेत बाहेरील घटक विकसित करण्यास अनुमती देते आणि कोणत्याही आक्षेपार्ह चाचणीसाठी नंतर संदर्भित करण्यासाठी काहीतरी देईल. चला काही भिन्न डिव्हाइसमध्ये प्रारंभिक मार्कअप पाहू:
आमचा चिन्हांकित-नमुना पोर्टफोलिओ पहा
बरं, मला शिक्षा होईल - आमच्याकडे आधीपासूनच एक प्रतिसाद देणारी वेबसाइट आहे! आमची सामग्री प्रत्येक डिव्हाइसच्या मर्यादेशी जुळवून घेत आहे, फॅन्सी नवीन आयपॅड असो वा टाकून दिलेला फीचर फोन. हे अगदी लिंक्स सारख्या मजकूर-केवळ ब्राउझरमध्ये कार्य करते.
सार्वभौमत्वाच्या मूलभूत तत्त्वांचे आभार, वेब आहे डीफॉल्टनुसार प्रतिसाद. ते छान आहे, परंतु याचा अर्थ असा आहे की आतापासून आम्ही कोडमध्ये काहीही करतो या मूळ अनुकूलतेसाठी तडजोड करू शकते.
उद्या: आम्ही काळजीपूर्वक पाऊल टाकू आणि प्रतिसाद देण्याच्या डिझाइनचा पहिला भाग लागू करू: टायपोग्राफी आणि फ्लुईड ग्रिड्स.
