ईमेल विपणन और लैंडिंग पृष्ठों में उत्तरदायी डिजाइन के लिए स्वामी का अध्ययन

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

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

ईमेल विपणन में उत्तरदायी डिजाइन

ईमेल मार्केटिंग उत्पाद ऑफ़र या उन नए पोस्ट की घोषणा करने के तरीकों में से एक है जो हमारे ब्लॉग पर बनाए गए हैं इस प्रकार एक गहरे तरीके से संकीर्ण हमारे सभी अनुयायियों के साथ।

कि ये न्यूज़लेटर्स उत्तरदायी हैं इसका मतलब है कि उन्हें एक मोबाइल से पूरी तरह से देखा जा सकता है, एक टैबलेट या एक कंप्यूटर। इसलिए हमें आवश्यक उपकरण रखने का प्रयास करना होगा ताकि सभी दृश्य तत्व समाचार पत्र को आसानी से पढ़ सकें।

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

में CSS "Media Queries" के साथ वेब डिज़ाइन का उपयोग किया जाता है प्रारूप के अनुसार वेबसाइट डिजाइन करने के लिए। 360px तक एक मोबाइल के लिए होगा, और 360px से 650px तक हम उन सभी उपयोगकर्ताओं के लिए संशोधन कर सकते हैं जो हमारी वेबसाइट को टैबलेट से देखते हैं।

हमारे ईमेल विपणन समाचार पत्र के लिए कुछ सिद्धांत हैं:

• एक साफ दृश्य पदानुक्रम: पैरा प्रारूप में पाठ छोड़ने के लिए H2 में एक शीर्षक।
• दो अलग-अलग स्रोत: शीर्षक के लिए एक और पाठ के लिए एक हमारे समाचार पत्र को बेहतर पठनीय बनाता है।
• El शीर्षक, पाठ और अन्य तत्वों को अलग करने के लिए रंग का उपयोग: हम धीरे-धीरे गहरे भूरे रंग से एक लाइटर पर जा सकते हैं।
• Un CTA (कॉल टू एक्शन) स्पष्ट और अलग: यदि हमारी कंपनी का लोगो लाल रंग में है, तो CTA इस रंग में हो सकता है जबकि बाकी पूरक रंग में।

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

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

में डेस्कटॉप संस्करण उन सिद्धांतों को बनाए रखता है, यहां तक ​​कि ग्रंथों में अधिक स्थान छोड़ने और प्रत्येक तरफ एक बड़ा मार्जिन छोड़ने पर:

लैंडिंग पृष्ठ पर उत्तरदायी डिज़ाइन

L उत्तरदायी सिद्धांतों में समान सिद्धांतों का उपयोग किया जा सकता है एक लैंडिंग पृष्ठ पर। टेम्पलेट को ठीक से चुनने और डिज़ाइन में कुछ नियमों का पालन करने के लिए दुनिया में हर समय लेना बेहद महत्वपूर्ण है:

• दृश्य सादगी: हम सीटीए पर ध्यान केंद्रित करने के लिए रिक्त स्थान रखने के बारे में बात कर रहे हैं।
• सुंदर और आकर्षक चित्र पाठक, संकल्प को भुलाए बिना और कि वे संपूर्ण दिखते हैं।
• रंग का महत्व और हम फिर से जोर देते हैं।

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

यह एक ऐसा काम है जो थकाऊ हो सकता है, लेकिन यह महत्वपूर्ण है कि हम प्रत्येक परिवर्तन का परीक्षण करने के लिए समय निकालें। साइड मार्जिन का उपयोग और, जहाँ तक संभव हो, CTAs या एक्शन बटन में नियमों को याद न करने का प्रयास करें:

• कि पाठ और बटन मार्जिन के संबंध में दूरी प्रगतिशील है तीनों प्रारूपों में। न तो यह छोटा है और न ही बड़ा है और यह समान ऊंचाई पर है।
• La CTA बटन आकार में अनुपात बाकी तत्वों के साथ जहां यह स्थित है, प्रदान किया जाना है।

इसका स्पष्ट उदाहरण है आपके लैंडिंग पृष्ठ पर Shopify द्वारा किया गया कार्य डेस्कटॉप पर और जिसमें आप मोबाइल संस्करण में देख सकते हैं। रंग, सफेद रिक्त स्थान और उन पाठों के उपयोग पर ध्यान दें जिनके उपयुक्त आकार और टाइपोग्राफी हैं:

युक्तियों की एक श्रृंखला आपके व्यवसाय या ऑनलाइन स्टोर के लिए एक बेहतर लैंडिंग पृष्ठ और उन न्यूज़लेटर्स को अपडेट प्राप्त करने के लिए इतना महत्वपूर्ण और आपके उपयोगकर्ताओं के लिए प्रोमो।