मोबाइल उपकरणों के लिए डिजाइनिंग में एक नज़र
जब पहला आईफोन जारी किया गया था तो इसने तूफान की तकनीक की दुनिया में ले लिया। तब से यह लगभग 5 साल हो गया है और स्मार्टफोन बाजार में लोकप्रियता बढ़ गई है, यहां तक कि माइक्रोसॉफ्ट ने अपने विंडोज 7 ओएस और भागीदारों के साथ प्रतियोगिता में भाग लिया है। आजकल अपने स्मार्टफोन पर बहुत सारे इंटरनेट उपयोगकर्ताओं के साथ, मोबाइल वेबसाइटों की संख्या में आक्रामक रूप से वृद्धि की उम्मीद करना सामान्य समझ है.
हालाँकि, मोबाइल वेब के लिए डिज़ाइन करना सामान्य वेब डिज़ाइन के साथ एक पूरी तरह से अलग ऑपरेशन है। हमारी वेबसाइटें विशाल स्क्रीन के लिए डिज़ाइन की गई हैं, लेकिन स्मार्टफोन की स्क्रीन का आकार उसकी तुलना में बहुत छोटा है, इस प्रकार कष्टप्रद समस्याओं को जन्म देता है. नए डिजाइन मानकों और प्रथाओं चिकनी उपयोगकर्ता अनुभव के साथ एक बेहतर मोबाइल साइट डिजाइन के लिए बहुत आवश्यक हैं.
इस गाइड में हम स्मार्टफोन के मोबाइल ब्राउज़रों के लिए एक उपयोगकर्ता-अनुकूल साइट डिज़ाइन करना चाहते हैं। मैं आपके लिए एक बेहतर मोबाइल वेबसाइट डिजाइन करने के लिए सर्वोत्तम प्रथाओं और उपयोगी डेवलपर टूल के बारे में बात करूंगा, तो चलिए कूदने के बाद इसे प्राप्त करते हैं!
योजना मजबूत उपयोगकर्ता अनुभव
जब आप एक मोबाइल वेबसाइट बनाते हैं तो यह महत्वपूर्ण होता है अपने उपयोगकर्ताओं को हर समय ध्यान में रखें, अंततः आपकी वेबसाइट डिज़ाइन की जा रही है और उपयोगकर्ताओं के आनंद के लिए बनाई गई है। यह निश्चित रूप से उपयोगकर्ताओं के लिए एक मोबाइल वेबसाइट से डेस्कटॉप वातावरण के समान व्यवहार करने की उम्मीद करना आम है, इसलिए उपयोगकर्ता अनुभव को अनुकूल बनाए रखना एक सफल मोबाइल साइट का निर्माण करते समय आपका मुख्य ध्यान होना चाहिए.
आपके उपयोगकर्ताओं के लिए विचार करने के लिए कई प्रयोज्य अवधारणाएं हैं। इन विचारों में शामिल हैं स्क्रीन का आकार, इनलाइन छवियां, हाइपरलिंक, फ़ॉन्ट आकार, तथा पेज नेविगेशन. हमने आपको बेहतर प्रयोज्य के लिए अपनी वेबसाइट बनाने के लिए मोबाइल प्रयोज्य डिजाइन के बारे में लिखा है। गाइड के अलावा, आपको हमेशा की जरूरत है नए विचारों के लिए खुद को सतर्क रखें अपनी साइट को बेहतर बनाने के लिए.
एक मजबूत उपयोगकर्ता अनुभव की योजना बनाने का मतलब यह भी है कि आपको चाहिए विचार करें कि कोई उपयोगकर्ता आपकी वेबसाइट के साथ कैसे सहभागिता करेगा. एक डेस्कटॉप पर आपकी वेबसाइट पर माउस और कीबोर्ड के साथ बातचीत की जा सकती है, लेकिन स्मार्टफोन उपयोगकर्ताओं पर होगी दोहन, flicking, तथा स्वाइप अपनी साइट के आसपास उनका रास्ता। आपको संभवतः साइट को उस तरीके से डिज़ाइन करने की आवश्यकता है जो उपयोगकर्ता कर सकते हैं इन भौतिक आंदोलनों के साथ आसानी से साइट की जानकारी का उपयोग करें.
पेज छोटे और मीठे रखें
किसी भी वेबसाइट का मांस और आलू है पृष्ठ सामग्री. आपका प्रत्येक वेब पेज उपयोगी जानकारी की महत्वपूर्ण मात्रा रखती है आपके उपयोगकर्ताओं के लिए, जैसे कि पाठ, फ़ोटो या वीडियो। आपको कुछ पृष्ठों के लिए चलने वाले समाचार लेख और ब्लॉग पोस्ट भी मिलेंगे, जो पाठ को तोड़ने में मदद कर सकते हैं, लेकिन यह तकनीक के लिए मोबाइल उपकरणों के लिए अनुशंसित नहीं है अधिक पृष्ठ लोड करने की आवश्यकता है जिसका अर्थ है कि उपयोगकर्ता की ओर अधिक प्रतीक्षा समय.
जब तक यह पूरी तरह से आवश्यक है मैं सलाह देता हूं अपने पृष्ठ की सामग्री को कम रखना. आपको यह विचार करना चाहिए कि यह किसके द्वारा मीठा लगता है फ़ॉन्ट को बड़े आकार में स्टाइल करना और शायद छवियों को एक तरफ ले जाना. पूर्ण प्रदर्शन पर आपकी सामग्री के साथ यह स्वाभाविक रूप से ध्यान आकर्षित करता है, अनुकूलन का उल्लेख नहीं करना वास्तव में पृष्ठों को स्कैन करना बहुत सरल बनाता है। यही कारण भी है कि ए एकल कॉलम लेआउट बिल को पूरी तरह से फिट करता है.
ज्यादातर मामलों में मोबाइल ब्राउजर वेब पेजों को डेस्कटॉप ब्राउजर्स के रूप में जल्दी लोड नहीं करने वाले हैं और इससे आपके पाठक नाराज हो सकते हैं, इसीलिए आपको इसकी जरूरत है सामग्री और वेबसाइट का अनुकूलन करें उच्च गति सामग्री लोड करने के लिए। आप या तो यह कर सकते हैं पूरी सामग्री रखते हुए लेख को छोटा करें, या केवल अनावश्यक छवियों को हटा दें. अपना ध्यान सुंदरता के बजाय सादगी पर रखें.
आपका मुख्य नेविगेशन आपके आगंतुकों के लिए पृष्ठों के बीच स्थानांतरित करने के लिए जीवन रक्षक है। मोबाइल डिवाइस पर, स्क्रीन लिंक स्वभाव से बहुत छोटे दिखाई देंगे, इस प्रकार टैप करना बहुत अधिक कठिन होगा। इस समस्या को हल करने के लिए एक आवश्यक tweak है अपने नेविगेशन लिंक के लिए फ़ॉन्ट और स्थान को अधिकतम करें, शायद पूरे ब्लॉक क्षेत्र को ले रहा है। वैकल्पिक रूप से आप कर सकते हैं नेविगेशन बार को वास्तविक iPhone एप्लिकेशन के टैब बार के समान डिज़ाइन करें, जैसा कि ऊपर दिखाया गया है.
बिल्डिंग मोबाइल सीएसएस शैलियाँ
अब जब हम जानते हैं कि बेहतर पठनीयता और प्रयोज्यता के लिए मोबाइल वेबसाइट को कैसे अनुकूलित किया जाए तो CSS शैलियों के बारे में बात करना अच्छा होगा। प्रत्येक सीएसएस स्टाइलशीट में फोंट, आकार, स्थिति और प्रदर्शन सेटिंग्स से संबंधित गुणों के साथ कई चयनकर्ता शामिल हैं। जब मोबाइल की बात आती है तो आपको ध्यान देना चाहिए कैसे आपके ब्लॉक जगह में आते हैं.
(छवि स्रोत: स्मैशिंग पत्रिका)
आरंभ करने के लिए एक क्षेत्र है अपनी साइट के रैपर चौड़ाई को प्रतिशत में रीसेट करें. पोजिशनिंग, लाइन हाइट, फॉन्ट साइज और डिव की चौड़ाई के लिए पिक्सल्स का इस्तेमाल करना आम बात है, लेकिन जब आप मोबाइल से निपटेंगे तो आप अपने पेज बनाना चाहेंगे। तरल पदार्थ और प्रत्येक डिवाइस के बीच संक्रमण स्वाभाविक रूप से. कंटेनर divs को 100% चौड़ाई पर सेट करने से सामग्री की अनुमति होगी किनारे पर बहने के बिना पोर्ट्रेट / लैंडस्केप मोड के बीच आसानी से भरें.
यदि आप अपने पूरे लेआउट को फिर से संरचना करने वाले लोगों में से एक हैं, तो सुनिश्चित करें कि आप सब कुछ एक के साथ मारा रीसेट. भी पैराग्राफ, हेडिंग और नेविगेशन लिंक सभी पर सेट होने चाहिए प्रदर्शन क्षेत्र; तो आपको लगता है कि रैखिक मुद्रण शैली महसूस हो रही है. अपने लेआउट से ब्लोट को हटाने के लिए मार्जिन और पैडिंग को पुनः स्थिति दें. तालिकाओं से बचें यदि संभव हो तो इन उपकरणों के बीच छोटी गाड़ी परिणाम प्रस्तुत करने के लिए करते हैं.
बड़ी छवियां भी उपकरणों के बीच एक परेशानी हैं। आपकी अधिकांश वेबसाइट छवियां 480px से अधिक प्रस्तुत करेंगी और आप उन्हें कंटेनर को तोड़ना नहीं चाहेंगे। पहला विकल्प है 100% पर उनकी चौड़ाई निर्धारित करें ताकि चित्र स्वाभाविक रूप से आकार बदल सकें. यह निश्चित रूप से संभव है अपनी वेबसाइट के लिए छवियों के विभिन्न सेट बनाएं और उन्हें ब्राउज़र एजेंट के आधार पर अलग तरीके से प्रस्तुत करें, लेकिन ईमानदारी से यह आपके पक्ष में अधिक काम करता है, इसलिए प्रयास करें तकनीक का उपयोग तभी करें जब इसकी वास्तव में आवश्यकता हो.
IPhone के लिए वेबसाइट डिजाइन करना
मोबाइल बाजार में हिस्सेदारी काफी बड़ी और विभाजित है, लेकिन Apple को अपने iDevices के साथ पाई का एक बड़ा टुकड़ा मिला है। IPhone और iPad दोनों मोबाइल इंटरनेट के लिए तैयार डिवाइस हैं, जिनमें अंतर्निहित टचस्क्रीन कार्यक्षमता है। वे एक ही डिफ़ॉल्ट वेब ब्राउज़र, सफारी और अन्य विकल्पों की एक पूरी मेजबानी की सुविधा देते हैं.
IPhone- विशिष्ट वेबसाइटों के लिए आपको स्क्रीन आकार को लक्षित करना होगा। निश्चित स्क्रीन का आकार निर्धारित है पुराने iPhone मॉडल के लिए 320px 480px तथा IPhone 4 और iPhone 4S के लिए 640px 960x द्वारा.
iPhone स्क्रीन अंतरिक्ष तक सीमित हैं। आपको होना चाहिए सामग्री का एक ब्लॉक जो आवश्यकतानुसार लंबे समय तक फैला रहता है. तत्वों को एक कॉलम में रखना आपको सिरदर्द से बचाएगा और के लिए एक तरल पदार्थ लेआउट के लिए अनुमति देते हैं “भरना” दोनों चित्र और परिदृश्य मोड. इसके लिए आपको एक और टेम्प्लेट विकसित करने की आवश्यकता होगी और यह जांचने का एक तरीका खोजना होगा कि क्या आपका विज़िटर किसी आईफ़ोन का उपयोग कर रहा है। नीचे दिए गए छोटे PHP स्निपेट को अच्छी तरह से काम करना चाहिए:
मूल रूप से तर्क हमारे वैश्विक स्तर को खींचता है $ _SERVER HTTP एजेंट के लिए चर और अगर शब्द की जाँच करता है “आई - फ़ोन” कहीं भी दिखाई देता है। यदि हाँ तो हम जानते हैं कि हमारा आगंतुक एक iPhone का उपयोग कर रहा है और वहाँ से हम थोड़ा अलग HTML या यहाँ तक कि एक नया टेम्पलेट ले सकते हैं! यह भी इस्तेमाल किया जा सकता है एक iPhone- विशिष्ट स्टाइलशीट शामिल करें, अपने पृष्ठ के शीर्षक बदलें, चित्र निकालें, या लगभग कोई भी गतिशील प्रभाव.
जब नई शैली परोसने की बात आती है तो एक आसान तरीका है। जैसा कि पहले उल्लेख किया गया है कि iPhone के लिए अधिकतम स्क्रीन आकार 960px चौड़ा है। इसलिए नए CSS3 मीडिया प्रश्नों के साथ आप अपनी साइट की मुख्य स्टाइलशीट में सीधे शैलियों को जोड़ सकते हैं केवल iPhone पर प्रदर्शित करें। नीचे एक छोटा सा उदाहरण कोड दिया गया है:
@मीडिया स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 960px) / * iPhone css * /
यह काम करता है क्योंकि CSS अब ब्राउज़िंग एजेंटों और उनके गुणों का पता लगा सकता है. मैक्स स्क्रीन की चौड़ाई उन गुणों में से एक है जिनका पता भी लगाया जा सकता है.
IPhone उपकरणों के लिए सभी-सभी-मोबाइल वेबसाइट के लिए डिज़ाइन करना बहुत मुश्किल नहीं है, उदाहरण के लिए, उदाहरण के लिए बहुत सारे उदाहरण हैं, CSS iPhone. खुद को पढ़ाई में व्यस्त रखें और डरो मत यूआई डिजाइन में नई तकनीकों के साथ प्रयोग.
मोबाइल jQuery स्क्रिप्टिंग
फ्रंट एंड वेब डेवलपर्स की अधिकांशता jQuery लाइब्रेरी से परिचित हैं। यह कोडिंग प्रभाव, एनिमेशन, ड्रॉपडाउन मेनू और अन्य इन-ब्राउज़र कार्यक्षमता की मेजबानी के लिए कुछ शानदार आशुलिपि प्रदान करता है, और यह सिर्फ jQuery मोबाइल की घोषणा के साथ और अधिक भयानक हो जाता है। यह है सीधे तकनीक में कूदने की सिफारिश नहीं की गई और अपनी वेबसाइट को हर जगह प्रभाव के साथ लोड करें, लेकिन परीक्षण उद्देश्यों के लिए उन्नत कार्यक्षमता बहुत अच्छी तरह से खेल सकती है.
jQuery मोबाइल नियमित jQuery से थोड़ा अलग है क्योंकि यह आपको एक पूर्ण वातावरण देता है। जब आप उनकी फ़ाइलों के साथ काम करते हैं, तो वे न केवल जावास्क्रिप्ट हैं, बल्कि बटन, लिंक और संक्रमण प्रभावों के लिए CSS शैलियाँ भी हैं। आप अभी भी HTML कोड में वेब पेज लिख रहे हैं, लेकिन jQuery मोबाइल टीम के पास है बहुत सारे वैकल्पिक यूआई डिज़ाइन सुविधाओं की आपूर्ति की. बहुत कुछ है जो हम इस ढांचे के साथ कर सकते हैं लेकिन तब से ढांचा अभी भी बीटा में है, चलो सरल प्रभावों से चिपके रहते हैं.
DevGrow ब्लॉग पर एक छोटा ट्यूटोरियल कुछ भयानक उदाहरण प्रदान करता है। आधिकारिक साइट आपको आज़माने के लिए डेमो भी प्रदान करती है। ध्यान दें कि हम HTML विशेषता का उपयोग कर रहे हैं, डेटा-संक्रमण पूर्व-परिभाषित मूल्यों में से किसी के साथ एनीमेशन प्रभाव जोड़ने के लिए। इनमें स्लाइड, पॉप, फ्लिप, फीका आदि शामिल हैं, इन प्रभावों का स्वाद लेने के लिए छोटे DevGrow उदाहरण देखें.
प्रभाव और बदलाव बहुत साफ-सुथरे हैं, और यह तथ्य कि आप पूरे मोबाइल इंटरफ़ेस को सख्ती से बना सकते हैं jQuery के साथ भी इस मंच के लिए एक बड़ा कदम है, लेकिन केवल बीटा में मंच के साथ मैं आपके पूरे मोबाइल साइट के निर्माण की सिफारिश नहीं करूंगा। उनके पुस्तकालय, विशेष रूप से इस तथ्य के साथ कि यह है लेखन के समय सभी प्रमुख स्मार्टफोन द्वारा समर्थित नहीं है (विशेषकर विंडोज फोन 7), लेकिन यह निश्चित रूप से समय के साथ बेहतर हो जाएगा.
अंततः मैं इस नए मोबाइल ढांचे के साथ खुद को परिचित करने की सलाह देता हूं से पहले किसी भी परियोजना पर लाइव तैनाती.
सहायक डेवलपर उपकरण
मोबाइल डेवलपर्स सिर्फ कोडिंग और डिज़ाइन संसाधनों में नहीं दिख रहे हैं। सॉफ्टवेयर टूल और IDE की भी उच्च मांग है, शक्तिशाली मोबाइल फ्रेमवर्क का उल्लेख नहीं करना। वेब विकास एक कठिन कार्य है जिसमें काफी समर्पण की आवश्यकता होती है, लेकिन अतिरिक्त साधनों का उपयोग करने से आपकी नौकरी पूरी तरह से आसान हो जाएगी.
ओपेरा मोबाइल एमुलेटर
यह देखने के लिए कि आपकी मोबाइल वेबसाइट कैसे प्रस्तुत कर रही है? यदि आपके पास इंटरनेट एक्सेस वाला स्मार्टफोन नहीं है तो यह बहुत बड़ी पीड़ा हो सकती है। या आप अपने सर्वर पर हर बार अपडेट किए जाने वाले साइट का परीक्षण करने के लिए अपने स्मार्टफोन का उपयोग करना नहीं चाहते हैं। खैर, ओपेरा मोबाइल एमुलेटर आपकी मोबाइल वेबसाइट का परीक्षण करने के लिए एक शानदार सॉफ्टवेयर है.
एमुलेटर चारों ओर समर्थन करता है 20 मोबाइल प्रोफाइल जैसे सैमसंग गैलेक्सी एस, एचटीसी डिजायर और यहां तक कि मोटोरोला Xoom जैसे टैबलेट। इसे सेट करना भी संभव है कस्टम संकल्प तथा पिक्सल घनत्व गहन परीक्षण उद्देश्यों के लिए। सबसे अच्छा, आपको बहुत अधिक कॉन्फ़िगरेशन वाले काम करने की आवश्यकता नहीं है, बस कुछ क्लिक करें और आप जाने के लिए अच्छे हैं.
डाउनलोड पूरी तरह से मुफ्त है और सॉफ्टवेयर मैक ओएस एक्स और विंडोज वातावरण दोनों में चलता है। उनके डेवलपर्स उचित वेब मानकों को बनाने और अपने मोबाइल रेंडरिंग इंजन को ट्विक करने के काम में कठिन हैं। यदि आप रास्ते में आपकी मदद करने के लिए अतिरिक्त उपकरणों की तलाश कर रहे हैं तो मैं उनके अन्य देव उपकरणों की सलाह देता हूं.
PhoneGap
ठोस मोबाइल अनुप्रयोगों के निर्माण के लिए HTML5 पर कई API विकसित नहीं हुए हैं। विशेष रूप से मोबाइल परिदृश्य में इन प्रकार की वेबसाइटों की कमी रही है, यही कारण है कि PhoneGap आला इतनी अच्छी तरह से भरता है। उनका मंच आपको आसानी से देता है 6 अलग-अलग प्लेटफार्मों पर मूल एप्लिकेशन के रूप में एचटीएमएल 5-आधारित एप्लिकेशन का निर्माण करें.
प्रक्रिया पहले आपके कोड को संपीड़ित करके और फोनगैप के आवेदन ढांचे के माध्यम से पारित करके काम करती है। वहां से आपके ऐप्स एंड्रॉइड, iOS, विंडोज फोन 7 और ब्लैकबेरी सहित मोबाइल मार्केटप्लेस के बड़े हिस्से तक पहुंच सकते हैं.
यदि आप थोड़ा उलझन में हैं तो बहुत ज्यादा झल्लाहट न करें। उनके समर्थन पृष्ठ बड़े करीने से इस प्रक्रिया को रेखांकित करते हैं और सहायक संसाधनों के लिंक प्रदान करते हैं। जिन ऐप्स को पहले ही विकसित किया जा चुका है, उन्हें एक खूबसूरत लाइब्रेरी-स्टाइल पोर्टफोलियो में संकलित किया गया है। उनके पूर्ण एप्लिकेशन संग्रह की जांच करें जिसे आप स्क्रीनशॉट के साथ उपकरणों द्वारा क्रमबद्ध कर सकते हैं.
Aptana स्टूडियो
Aptana वेबसाइट उनके विकास साधनों के बारे में जानने के लिए प्रमुख स्थान है। नवीनतम सुइट रिलीज़, Aptana 3.0.3, वेब विकास, CSS शैलियों और HTML टैग घोंसले के शिकार के लिए पूरी तरह से एकीकृत IDE, और सबसे अच्छा हिस्सा: Aptana पूरी तरह से है मुक्त डाउनलोड करने के लिए! वे सभी 3 प्रमुख ऑपरेटिंग सिस्टम (लिनक्स सहित) के लिए पैकेज पेश करते हैं जो डेवलपर्स के लिए बहुत बड़ी सुविधा है.
एप्टाना को क्या खास बनाता है कि आप कितनी जल्दी एक छोटे वेब एप्लिकेशन को विकसित कर सकते हैं और अपने डिजाइन का परीक्षण कर सकते हैं। स्टूडियो सुइट आपको अनुमति देता है जल्दी से रूबी, पीएचपी, पायथन, या बस HTML / CSS पर रूबी पर चलने वाले वेब एप्लिकेशन का विकास और परीक्षण करें, और उनके कोड हाइलाइटिंग सुविधाओं को हाल ही में सुधार दिया गया है नई HTML5 और CSS3 टैग लाइब्रेरी शामिल करें. यह Git इंटीग्रेशन, एक बिल्ट-इन टर्मिनल, कोड डिबगर, और कुछ अन्य निफ्टी फीचर्स के साथ आता है.
मोबाइल जीयूआई किट और प्रतीक
चारों ओर झूठ बोलने वाले मुफ्त के बिना वेब क्या होगा? वेब डिज़ाइनरों के लिए उपयोगकर्ता इंटरफ़ेस का महत्व बाकी सभी चीजों से ऊपर है। सिंपल GUI मुश्किल से आते हैं और केवल सबसे रचनात्मक डिजाइनर ही काम करने वाले समाधान लेकर आए हैं.
हालाँकि, वेब डिज़ाइनर का परीक्षण करने के लिए आपके लिए अभी तक कई मुफ्त गुणवत्ता वाले संसाधन उपलब्ध हैं। ये GUI किट ज्यादातर एडोब फोटोशॉप या पटाखों के लिए डिज़ाइन किए गए हैं जहाँ आप तत्वों को स्थानांतरित कर सकते हैं और उन्हें फ्लैट छवि फ़ाइलों के रूप में निर्यात कर सकते हैं.
प्रतीक एक बहुत ही उपयोगी संसाधन हैं। डिजाइनर मुफ्त सेट बना रहे हैं और उन्हें पहले से कहीं अधिक बार ऑनलाइन प्रदान कर रहे हैं। ऐसी ही एक वेबसाइट ग्लिफ़िश में फ्री और प्रो आइकॉन दोनों का प्रदर्शन है। ये डिज़ाइन मोबाइल टेम्प्लेट और ऐप डिज़ाइन पर उपयोग किए जाने वाले एकल विषय पर आधारित हैं.
वेबसाइट और एप्लिकेशन डेवलपमेंट के साथ-साथ मोबाइल डिवाइस प्रोटोटाइप टेंपलेट का हमारा संग्रह आपके लिए बहुत मददगार साबित होगा। आपको तब तक कोडिंग शुरू नहीं करनी चाहिए जब तक कि आपके पास एक मजबूत ग्राफिकल इंटरफ़ेस न हो और ये वेब किट आपको सही रास्ते पर मिलने लगें.
iOS 5 GUI किट
iPhone UI वेक्टर तत्व
iPhone ऐप आइकन किट
वायरफ्रेम मैग्नेट (DIY किट)
Android इंटरफ़ेस GUI
