मानक साइट आकार: वैशिष्ट्ये, आवश्यकता आणि शिफारसी

विकसनशील वेबसाईटची तंत्रज्ञानाची प्रक्रिया बहुविध प्रक्रिया आहे. पण तरीही हे सर्व अवस्था दोन मुख्य भागांमध्ये विभागले जाऊ शकते - फंक्शनल आणि बाहेरील शेल. किंवा, अनुक्रमे वेबमास्टर्स, बॅकएंड आणि फ्रन्ट-एंड मध्ये नेहमीप्रमाणेच आहे. जे लोक वेब डेव्हलपमेंट स्टुडिओमधून त्यांची वेबसाइट्स ऑर्डर करतात त्यांना सहसा समजते की ही कार्यक्षमतेवर लक्ष केंद्रित करणे महत्त्वाचे आहे आणि हे योग्य निर्णय असेल. पण हे बर्याच बाबतीत अत्यंत खरे आहे, सामान्यत: बीटा स्टेजवर स्टार्टअप प्रोजेक्टसाठी. अन्य बाबतीत, ग्राफिक डिझाइन आणि यूजर इंटरफेसला फक्त वेब डेव्हलपमेंट मानदंडांची पूर्तता करावी लागते आणि सोयीस्कर व्हायला हवे.

इंटरफेस डिझायनर किंवा डिझायनरचे चेहर्यावर पहिले कोनस्टोन, साइट लेआउटची रूंदी आहे. अखेर, त्यासाठी इंटरफेस काढणे आवश्यक आहे. बर्याच अगदी सहजतेने दोन पध्दती आहेत - प्रत्येक लोकप्रिय स्क्रीन रिझोल्यूशनसाठी स्वतंत्र लेआउट तयार करण्यासाठी किंवा सर्व मॅपिंगसाठी साइटची एक आवृत्ती तयार करण्यासाठी. आणि दोन्ही पर्याय चुकीचे असतील, परंतु सर्वकाही ऑर्डरमध्ये असेल.

रुनेटसाठी साइटच्या मानक रूंदी पिक्सेल्समध्ये आहे

अनुकूली मांडणीच्या विकासाआधी, एक वस्तुमान प्रसंग एक हजार पिक्सेल्सच्या रुंदी असलेल्या साइटचे विकास होते. साइटला कोणत्याही स्क्रीनवर ठेवण्यासाठी - हे आकृती एका साध्या कारणाने निवडण्यात आली. आणि याचे स्वत: चे तर्क आहे, परंतु आपण असे समजू या की त्या व्यक्तीकडे डेस्कटॉपवरील किमान एक एचडी मॉनिटर आहे. या प्रकरणात, आपला लेआउट स्क्रीनच्या मधोमध असलेल्या एका लहान पट्टीसारखा वाटेल, जेथे सर्व काही एक ढिगाऱ्यामागे बांधलेले असेल आणि बाजुला एक अतिशय मोकळी जागा आहे आता आपण असे समजू या की एका व्यक्तीने आपल्या वेबसाइटवर टॅब्लेटवरून एका 800 पिक्सेल रुंदीच्या स्क्रीनवर वेबसाइटवर आला आणि सेटिंग्जमध्ये "संकेतस्थळाची पूर्ण आवृत्ती दर्शवा." या प्रकरणात, आपली साइट देखील अयोग्य प्रकारे प्रदर्शित केली जाईल कारण ती केवळ स्क्रीनवर बसत नाही.

या विचारांवरून, आपण असा निष्कर्ष काढू शकतो की लेआउटची निश्चित चौकट आम्हाला व्यवस्थित जुळत नाही आणि दुसरी पद्धत शोधणे आवश्यक आहे. प्रत्येक स्क्रीन रूंदीसाठी स्वतंत्र लेआउटची कल्पना विश्लेषित करू.

सर्व प्रसंगांसाठी लेआउट्स

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

म्हणूनच, विविध स्क्रीनवरील आवृत्त्यांचे भरपूर प्रमाणात असणे आवश्यक आहे, त्या एकल पृष्ठांच्या वेबसाइटशिवाय, ज्याचा हेतू एक उत्पादन विकणे आणि आवश्यक ते तसेच करावे तसेच, जर आपल्याकडे यापैकी एखादी जमीन आणि बहुस्तरीय साइट नसेल तर पुढे वाद घालणे फायदेशीर आहे.

सर्वाधिक लोकप्रिय साइट आकार

दोन कमाल दरम्यान एक तडजोड तीन किंवा चार स्क्रीन आकारांसाठी मांडणी रेखाटत आहे . त्यापैकी एक म्हणजे मोबाईल उपकरणांसाठी मॉकअप असणे आवश्यक आहे. उर्वरित एक लहान, मध्यम आणि मोठ्या डेस्कटॉप स्क्रीनसाठी रुपांतर करावे. साइटची रुंदी कशी निवडता येईल? मे 2017 साठी HotLog सेवेच्या आकडेवारी खाली आहेत, जे आम्हाला डिव्हाइस स्क्रीनच्या विविध रिझोल्यूशनच्या लोकप्रियतेचे वितरण तसेच या निर्देशक बदलाची गतीशीलता दर्शविते.

सारणीतून, आपण वापरण्यास इच्छुक असलेल्या साइटचा आकार कसा निर्धारित करावा ते जाणून घेऊ शकता. याव्यतिरिक्त, आम्ही असा निष्कर्ष काढू शकतो की सर्वात सामान्य स्वरूप आज 1366 स्क्रीन 768 अंकांनी आहे. अशी स्क्रीन बजेट लॅपटॉपमध्ये स्थापित केली जातात, म्हणून त्यांची लोकप्रियता नैसर्गिक आहे पुढील सर्वात लोकप्रिय पूर्ण एचडी मॉनिटर आहे, जे व्हिडिओ क्लिप, गेमचे सुवर्ण मानक आहे आणि त्यामुळे साइट मांडणी तयार करण्यासाठी. आणखी टेबलामध्ये, आम्ही 640 अंकांवर मोबाईल डिव्हायसेस 360 चे रिझोल्यूशन पाहतो, तसेच त्याच्या नंतर डेस्कटॉप आणि मोबाइल स्क्रीनसाठी विविध पर्याय देखील दिसेल.

मांडणी डिझाइन करा

म्हणून, आकडेवारीचे विश्लेषण केल्यानंतर, आम्ही निष्कर्ष काढू शकतो की साइटच्या कमाल रुंदीमध्ये 4 विविधता आहेत:

1. 1366 पिक्सेलच्या रुंदीसह लॅपटॉपसाठी आवृत्ती
2. पूर्ण एचडी आवृत्ती
3. लहान डेस्कटॉप मॉनिटरवर प्रदर्शित करण्यासाठी 800 पिक्सेल-व्यापी मांडणी.
4. साइटची मोबाइल आवृत्ती रुंदीमधील 360 पिक्सेल आहे.

समजा, साइटसाठी निर्मीत स्रोताचा आकार कसा वापरावा हे आम्ही ठरवले. पण असा प्रकल्प अद्याप महाग होईल. तर आता अधिक पर्याय विचारात घ्या, एक निश्चित चौकट न वापरता.

लेआउट लवचिक बनविणे

एक पर्यायी दृष्टीकोन आहे, जेव्हा आपल्याला केवळ कमीत कमी स्क्रीन आकारात समायोजित करण्याची आवश्यकता असते आणि साइटचा आकार टक्केवारीने निश्चित केला जाईल या प्रकरणात, मेनू, बटणे आणि लोगो यासारख्या इंटरफेस घटक मूळ मूल्यांमध्ये सेट केले जाऊ शकतात, ज्यामुळे पिक्सेलमध्ये स्क्रीन रूंदीच्या किमान आकारावर लक्ष केंद्रित केले जाते. कंटेंटसह ब्लॉक, पडद्यावरील क्षेत्राच्या रुंदीच्या विशिष्ट टक्केवारीनुसार ताणून जाईल. हा दृष्टिकोन आपल्याला या साइट्सचा आकार समजून घेण्यास थांबवतो कारण डिझाइनरसाठी एक मर्यादा आणि प्रतिभावान अशा या छान मारण्यासाठी

सोनेरी प्रमाण काय आहे आणि वेब पृष्ठांच्या लेआउटमध्ये ते कसे लागू करायचे?

नवनिर्मितीचा काळ देखील, अनेक आर्किटेक्ट आणि कलाकारांनी त्यांचे निर्मिती एक आदर्श आकार आणि प्रमाणात देण्याचा प्रयत्न केला. या प्रमाणातच्या अर्थाविषयीच्या प्रश्नांची उत्तरे देण्यानंतर, ते सर्व विज्ञानांच्या राणीकडे वळले - गणित.

पुरातन काळाचा काळ असल्याने, एक प्रमाणात शोधण्यात आले आहे, ज्यास आपली दृष्टी सर्वात नैसर्गिक आणि मोहक मानते, कारण ती सर्वत्र निसर्गात आढळते. अशा गुणोत्तरांमधील सूत्राचा शोध करणारा एक प्रतिभावान प्राचीन ग्रीक वास्तुविशारद फिदीयास होता. त्याने गणना केली की समभागाचा जास्त भाग कमी संदर्भित असेल तर संपूर्णपणे मोठ्या संदर्भित केला जातो, तर हे प्रमाण सर्वोत्कृष्ट दिसेल. पण हे असे आहे जर आपण ऑब्झॅमेट विषमतेने विभाजित करू इच्छित असाल. या प्रमाणात नंतर सुवर्ण विभाग म्हटले, जे अद्याप संस्कृती जागतिक इतिहासात त्याच्या महत्त्व जास्त महत्व नाही.

वेब डिझाइनकडे परत

हे अगदी सोपे आहे - एक सोनेरी विभाग वापरून, आपण मानवीय डोळ्यांना सर्वात आनंददायक पृष्ठे तयार करू शकता. सोनेरी विभागातील सूत्राच्या व्याख्येनुसार गणना केल्यास, आपल्याला अचूक संख्या 1.618033 9 887 मिळते ... परंतु सुविधेसाठी आपण गोलाबंद मूल्य 1.62 वापरू शकतो. याचाच अर्थ असा की आपण वापरत असलेल्या साइटसाठी स्त्रोत कोडच्या आकाराचा विचार न करता आमच्या पृष्ठाचे ब्लॉक 62% आणि संपूर्ण 38% असावे. आपण या योजनेवर पाहू शकता असे एक उदाहरण:

नवीन तंत्रज्ञान वापरा

वेबसाइट डिझाइनचा आधुनिक तंत्रज्ञान आपल्याला डिझायनर आणि डिझायनरची कल्पना अचूकपणे व्यक्त करण्याची परवानगी देते, म्हणून आता आपण इंटरनेट तंत्रज्ञानाच्या पहाटेच्या तुलनेत अधिक धिटाई कल्पना लागू करू शकता. साइटचा आकार काय असावा याची गंभीरपणे लक्षात घेणे आवश्यक नाही. अवरोध अनुकूल मांडणी, सामग्री आणि फॉन्टचे डायनॅमिक लोडिंग यासारख्या वस्तूंच्या आगमनानंतर, साइटचे विकास अनेकदा अधिक आनंददायी बनले आहे अखेर, अशा तंत्रज्ञानावर कमी प्रतिबंध आहेत, तरीही ते अस्तित्वात आहेत. परंतु आपल्याला माहित आहे की, मर्यादांशिवाय कला तेथे नसते. आम्ही सुचवितो की आपण खरोखरच रचनात्मक दृष्टिकोन वापरण्यासाठी डिझाइन करा - एक सोनेरी विभाग त्याच्यासह, आपण आपल्या टेम्प्लेटमध्ये निर्दिष्ट केलेल्या साइटचे आकार प्रभावीपणे आणि कार्यप्रणालीसह प्रभावीपणे पूर्ण करू शकता.

साइट वर्कस्पेस कशी वाढवावी

एक उच्च संभाव्यता आहे की आपल्याला सर्व इंटरफेस घटकांना लहान आकाराच्या लेआउटमध्ये फिट करण्यासाठी पुरेसे स्थान मिळणार नाही. या प्रकरणात, आपण आधी कसं रचनात्मक किंवा आणखी कल्पकतेने विचार सुरुवात करावी लागेल.

पॉप-अप मेनूमध्ये नेव्हिगेशन लपवून साइटवरील जागा वाढवा. हा दृष्टिकोण मोबाईल डिव्हाइसेसवरच नव्हे तर डेस्कटॉपवर देखील वापरण्यासाठी तार्किक आहे. अखेर, वापरकर्त्याला आपल्या साइटवर जे काही शब्द वापरले जात आहेत त्या सर्व वेळी पाहणे आवश्यक नाही - ते सामग्रीसाठी आले आणि वापरकर्त्याच्या इच्छांचा आदर केला पाहिजे.

मेनू लपवण्याचा एक चांगला मार्ग म्हणजे खालील लेआउट (खालील फोटो).

लाल भागाच्या वरच्या कोपर्यात , आपण एक क्रॉस पाहू शकता, ज्यावर क्लिक केल्याने मेन्यू एका छोट्या चिन्हात लपविला जाईल, जेणेकरुन वेबसाइटवरील सामग्री एकट्याने सोडली जाईल.

तथापि, आपल्याला हे करणे आवश्यक नाही, आपण नेव्हिगेशन सोडू शकता, जे नेहमी दृश्यमान असेल. परंतु आपण हे साइटवर लोकप्रिय लिंक्सची यादी नसून केवळ एक सुंदर डिझाइन घटक बनवू शकता. मजकूर दुवे व्यतिरिक्त किंवा त्यांच्या ऐवजी अंतर्ज्ञानी चिन्ह वापरा. हे आपल्या साइटला वापरकर्त्याच्या डिव्हाइसवरील स्क्रीन स्पेस चा अधिक कार्यक्षमतेने वापर करण्यास अनुमती देईल.

उत्कृष्ट साइट - अनुकूलक

साइटसाठी कोणती लेआउट निवडायची हे आपल्याला माहित नसल्यास, नंतर आपल्यासाठी सर्व काही सोपे आहे. एखाद्या डिव्हाइससाठी खराब खर्चामुळे विकासाच्या खर्चावर बचत करणे आणि प्रेक्षक गमावू नका तर एक अनुकुल डिझाइन वापरा.

अनुकूलीला एक असे डिझाइन म्हणतात ज्या वेगवेगळ्या डिव्हाइसेसवर तितकेच चांगले दिसतात. हा दृष्टिकोन आपल्या साइटला लॅपटॉपवर, कमीत कमी टॅब्लेटवर, अगदी स्मार्टफोनवर देखील समजण्यायोग्य आणि सोयीस्कर वाटेल. स्क्रीनच्या कार्यक्षेत्राच्या विस्तारास स्वयंचलित बदलामुळे हे परिणाम प्राप्त केले आहे. साइटसाठी ऍप्टिव्हिव्ह स्टाईल शीटचा वापर करून, आपण शक्य तितका सर्वोत्कृष्ट निर्णय घेता.

साइटच्या विविध आवृत्त्या उपलब्धतेवरून अनुकूली डिझाइनमध्ये काय फरक आहे

अनुकूली रचना साइटच्या मोबाइल आवृत्तीपासून वेगळे आहे कारण नंतरच्या प्रकरणात वापरकर्त्याला डेस्कटॉप कोडपासून वेगळे असलेला एक HTML- कोड प्राप्त होतो. ऑप्टिमाइझ सर्वर कार्यक्षमता, तसेच शोध इंजिन ऑप्टिमायझेशनच्या दृष्टीने हा एक दोष आहे. याव्यतिरिक्त, साइटच्या विविध आवृत्त्यांवरील आकडेवारी मोजणे अधिक कठीण होते. अनुकुल दृष्टिकोन अशा त्रुटींच्या रक्तात नाही.

वेगवेगळ्या डिव्हाइसेससाठी अनुकूलता योग्यता चक्रात टक्केवारीसह किंवा उपलब्ध जागा (डेस्कटॉपवर क्षैतिज आकाराच्या ऐवजी स्मार्टफोनवर उभ्या विमानात), किंवा वेगवेगळ्या स्क्रीनसाठी वैयक्तिक लेआउट तयार करण्याद्वारे

पाठ्यपुस्तकांमधून अनुकूली रचना आणि त्याच्या विकासाबद्दल अधिक माहिती