با ایمیل پاسخگو، تجربه کاربر و همچنین بازگشت سرمایه کمپین را می توان افزایش داد.
توجه کنید که چگونه یک طرح بندی ستونی در پیش نمایش تلفن همراه برای تناسب با مشخصات تلفن ها اتخاذ شد.
قالب‌های ایمیل واکنش‌گرا باعث صرفه‌جویی در زمان شما در طراحی ایمیلی می‌شود که می‌توانست از یک انتخاب انتخاب شود. به عنوان مثال، ابزار بازاریابی ایمیل HubSpot شامل بیش از 60 قالب فقط برای ایمیل های پاسخگو است.
Stripo بیش از 300 قالب ایمیل رایگان HTML را ارائه می دهد. شما می توانید قالب ها را بر اساس صنعت، فصل، نوع و ویژگی انتخاب کنید. به عنوان مثال، در اینجا یک الگو از بخش صنعت کسب و کار آنها آمده است.
مگر اینکه تجربه طراحی وب جامعی داشته باشید، کدنویسی چندین صفحه رسانه می تواند زمان بر و خسته کننده باشد.
وقت آن است که نمونه ها را بررسی کنیم. با این ویدیو شروع کنید، که به برخی از بهترین کمپین های بازاریابی ایمیلی می پردازد.
باز هم، با طراحی ایمیل ریسپانسیو، نام بازی در حال انباشته شدن است. همه چیز در مورد آسان کردن محتوا و ایجاد جذابیت بصری است، مهم نیست دستگاه چقدر کوچک است که شخصی در حال مشاهده محتوا است.
راه های زیادی وجود دارد که می توانید ایمیل های ریسپانسیو طراحی کنید.
ایمیل‌های پاسخگو نیز در دسترس‌تر هستند، زیرا به مشترکین اجازه می‌دهند در دستگاه دلخواه خود مطالعه کنند.
حالا تصور کنید که همان چیدمان دسکتاپ برای موبایل هم اعمال شود. برای دیدن هر یک از عکس ها یا متن ها باید روی گوشیم زوم کنم. به جای انجام این کار، اشتراک را لغو می کنم.
هنگام کار با ایمیل، می توانید از پرس و جوهای رسانه ای استفاده کنید تا مشخص کنید طراحی شما در رایانه های رومیزی، تبلت ها و دستگاه های تلفن همراه چگونه باشد. برای انجام این کار، باید موارد زیر را مشخص کنید:
از انتخابگر “@media” استفاده کنید و “screen” را مشخص کنید. این نشان می دهد که کد روی دستگاه های دارای صفحه نمایش تأثیر می گذارد.
حداکثر عرض خود را بر حسب پیکسل تنظیم کنید. این اندازه صفحه نمایش را مشخص می کند که در آن کد اعمال می شود.
راهنماهای سبک CSS را که می خواهید آن صفحه خاص دنبال شود را مشخص کنید.
بنابراین، با تمام این صحبت ها در مورد ایمیل های پاسخگو، باید برای ایجاد ایمیل های خود احساس خارش داشته باشید. در مرحله بعد، به چند نمونه و قالب ایمیل پاسخگو نگاه خواهیم کرد.
طراحی ایمیل واکنش گرا
برای کسانی که سابقه کدنویسی کمتری دارند یا کسانی که به دنبال صرف زمان کمتری برای طراحی هستند، توصیه من این است که از یک الگو استفاده کنند. آنها یک راه مطمئن برای اطمینان از حرفه ای بودن ایمیل شما هستند و پاسخگو باشد
ویدئوی زیر نحوه طراحی ایمیل با یک الگو را به شما آموزش می دهد. در ویدیو، کاربر در Klaviyo است، اما مفاهیم بدون توجه به نرم افزاری که استفاده می کنید صادق هستند.
آیا تا به حال برایتان پیش آمده که ایمیلی را روی گوشی خود باز کنید و تصویر با کیفیت پایین، متن خیلی کوچک و دکمه فراخوان برای اقدام خراب باشد؟ اینها همه ایرادات طراحی ایمیل ثابت هستند. ایمیل های ریسپانسیو جواب می دهند.
کدنویسی یک ایمیل پاسخگو
در تلفن همراه، موقعیت منو تغییر می کند. پیوندهای اقلام مختلف فروشگاه هدیه در پایین صفحه قرار دارند. این تصاویر سوغاتی های موجود را در جلو و مرکز نگه می دارد.
متن و عکس های متناوب برای دسکتاپ منطقی است، در حالی که انباشتن مداوم عکس ها روی متن مرتبط برای موبایل، همراه با خطوط جداکننده، تضمین می کند که بیننده گیج نشود.
منبع تصویر
3. توت
منبع تصویر
ایمیل های پاسخگو تجربه بهتر و قابل دسترس تری را برای مشتریان شما ایجاد می کنند. اگر تازه در حال انتقال هستید، با کاوش در قالب های ایمیل پاسخگو از پیش ساخته شده شروع کنید. اینها در زمان شما صرفه جویی می کنند و در عین حال به شما انعطاف طراحی می دهند.
ایمیل‌های پاسخگو از تصاویر و جداول روان استفاده می‌کنند تا در اندازه‌های مختلف صفحه نمایش انعطاف‌پذیر باشند. در نهایت، آنها محتوای طراحی شده برای تجربه بهینه هر کاربر را ارائه می دهند.
ایمیل پاسخگو ایمیلی است که برای هر دستگاهی از جمله تلفن، دسکتاپ یا تبلت بهینه شده است. آنها با وضوح‌های چندگانه صفحه‌نمایش سازگار می‌شوند، که به ویژه با افزایش تقاضا برای محتوای سازگار با موبایل مفید است.
منبع تصویر
کلیک بر روی انواع دستگاه و اطمینان از فرمت ایمیل شما یکی از مراحل نهایی در فرآیند طراحی است و فقط هنگامی که از نرم افزاری مانند HubSpot استفاده می کنید، در فرآیند ایمیل پاسخگو قدم بردارید.
با طراحی ریسپانسیو، نسخه موبایلی ناوبری درهم و برهم ندارد و تصویر به خوبی با صفحه نمایش مطابقت دارد. CTA ها نیز برای دید بهتر جابجا شده اند.
من هنوز همان اطلاعات و همان عکس ها و آیکون های قابل خرید را دارم. تنها تفاوت قابل توجه در قالب ایمیل است. برای تناسب بهتر با تجربه موبایل متفاوت است.
در خبرنامه TOMS، تفاوت اصلی بین نسخه دسکتاپ و نسخه تلفن همراه، چیدمان و اندازه تبلیغات نمایشی است.
بیایید نگاهی به کد زیر بیاندازیم.
به زودی، ایمیل های پاسخگو ارسال خواهید کرد و نرخ باز کردن خود را افزایش خواهید داد.
اندازه فونت: 30px;
صرف نظر از رویکرد شما، به نرم افزار بازاریابی ایمیلی خود نیاز دارید. در اینجا، می‌توانید یک ایمیل طراحی کنید، و سپس آن ایمیل را در چندین دستگاه پیش‌نمایش کنید. اکثر نرم افزارهای ایمیل به شما نشان می دهند که طراحی در چندین دستگاه چگونه به نظر می رسد.
شما می توانید دستگاه های مختلف را در کنار هم ببینید تا بتوانید عناصر طراحی را به راحتی با هم مقایسه کنید. برای ایجاد بهترین تجربه برای همه مشترکین می توان ویرایش های کوچکی انجام داد.
2. CampaignMonitor
}
یک راه ساده برای بررسی اثربخشی ایمیل خود این است که آن را به عنوان آزمایش برای خود یا تیم خود ارسال کنید – آیا این ایمیل در مقابل سایر ایمیل های بازاریابی پاسخگو در صندوق ورودی شما قرار می گیرد؟ اگر چنین است، شما آماده ارسال هستید.
شروع کار با ایمیل های پاسخگو
پرس و جوهای رسانه ای یک تکنیک CSS هستند. این به شما امکان می دهد قوانین سبکی را تنظیم کنید که فقط در صورتی ظاهر شوند که شرایط خاصی درست باشد. به عنوان مثال، می توانید تعیین کنید که وقتی صفحه نمایش 600 پیکسل عرض یا کوچکتر است، از چه اندازه فونت و اندازه تصویر استفاده کنید.
هنگامی که روی CSS یک ایمیل اعمال می شود، متن متن در اندازه 30 پیکسل برای صفحه نمایش هایی با عرض 600 پیکسل یا کوچکتر ظاهر می شود.
اگر فنی نیستید یا روش ساده‌تری می‌خواهید، از ابزار بازاریابی ایمیلی با قالب‌های واکنش‌گرای داخلی استفاده کنید. برای مثال، نرم‌افزار ایمیل رایگان HubSpot، قالب‌های کشیدن و رها کردن را ارائه می‌کند که به طور پیش‌فرض پاسخگو هستند.
نمونه های طراحی ایمیل پاسخگو
بدن {
الگوهای Constant Contact دارای قابلیت ویرایش کشیدن و رها کردن، گزینه ای برای افزودن نظرسنجی، توابع تجارت الکترونیک و ابزار کتابخانه عکس هستند. همه این ویژگی‌ها می‌توانند به ایجاد ایمیل‌هایی که مشترکین می‌خواهند ببینند کمک کنند.
یک قالب ریسپانسیو به طور خودکار با هر اندازه صفحه سازگار می شود، بنابراین چه ایمیل در تلفن هوشمند، تبلت یا رایانه باز شود، عالی به نظر می رسد و عملکرد کاملی دارد.
اگر دانش کدنویسی دارید، می توانید قالب های ایمیل مختلف را برای اندازه های مختلف صفحه کدنویسی کنید. همچنین می توانید از یک الگوی از پیش ساخته استفاده کنید که در تمام اندازه های صفحه کار می کند.
این ایمیل دارای تصاویر عالی، نمادهای قابل خرید است و به خوبی قالب بندی شده است. وقتی ایمیل را روی موبایل باز می‌کنم، این همان چیزی است که با آن استقبال می‌کنم.
HubSpot چند قالب ایمیل پاسخگو رایگان ارائه می دهد. اگر مشتری HubSpot یا کاربر رایگان هستید، می توانید خودتان آنها را دانلود و امتحان کنید.
سپس، می‌توانید در مورد برخی از طرح‌های ایمیل واکنش‌گرای مورد علاقه ما مطالعه کنید.
طراحی دقیق ایمیل ریسپانسیو شما بر اساس اهداف کمپین شما متفاوت خواهد بود. با این حال، این نکات می تواند به شما کمک کند بهترین تجربه را برای خوانندگان خود تضمین کنید.
اطمینان حاصل کنید که ایمیل ریسپانسیو شما مقیاس پذیر و انعطاف پذیر است. پیش نمایش ایمیل در دستگاه های مختلف برای اطمینان از پاسخگو بودن پیام شما.
اگر ایمیل خود را کدنویسی میکنید، به یاد داشته باشید که درخواست‌های رسانه CSS فیلدهایی را تغییر می‌دهند که به فیلدهای روان ثابت می‌شوند.
از فونتهای بزرگتر استفاده کنید که در صفحههای کوچکتر به راحتی قابل خواندن باشند.
مقیاس بندی طرح بندی های تک ستونی آسان تر است. اگر طرحبندیهای ساده برای صفحات وب شما خوب است، حتماً آنها را برای ایمیل‌های واکنش‌گرا در نظر بگیرید.
به عنوان مثال، با کلیک بر روی دستگاه تلفن هوشمند برای پیش نمایش، می توانید ببینید که آیا محتوای شما – از جمله اندازه فونت و وضوح تصویر – به گونه ای قالب بندی شده است که برای تلفن همراه خوشایند است یا خیر.
الگوهای ارائه شده توسط CampaignMonitor مشابه بسیاری از قالب های دیگر است که در آنها نتایج ایمیل پاسخگو در ابزار پیش نمایش نشان داده می شود. به عنوان مثال، در اینجا یک الگوی CampaignMonitor وجود دارد:
Constant Contact بیش از 200 قالب ایمیل حرفه ای را ارائه می دهد که پس از ثبت نام در دسترس هستند. با نگاهی به مثال زیر، می‌بینید که این پلتفرم قالب‌های ایمیل واکنش‌گرا را ارائه می‌دهد.
قالب های CampaignMonitor اغلب رایگان هستند، بنابراین اگر حداقل بودجه دارید انتخاب خوبی است.
3. کمیک
در اینجا، ما برخی از بهترین روش‌ها و قالب‌های آماده و همچنین یک آموزش سریع درباره اصول ایمیل‌های پاسخگو را فهرست کرده‌ایم.
ایمیل ریسپانسیو چیست؟
برای نشان دادن، در اینجا این است که چگونه یک ایمیل تبلیغاتی که دریافت کردم در دسکتاپ به نظر می رسید.
با توجه به اینکه بیش از نیمی از ساکنان ایالات متحده به پیام های بازاریابی ایمیلی در تلفن های خود نگاه می کنند، باید ایمیل های خود را برای چندین صفحه از جمله موبایل و تبلت بهینه کنید.
استفاده از سرویسی مانند Constant Contact مفید است، زیرا ابزارهای خاص به شما اجازه می دهند مانند مثال بالا ثبات را حفظ کنید. می توانید بگویید که ماهیت پاسخگو بودن ایمیل هیچ یک از عناصر طراحی را به خطر نمی اندازد.
در نهایت، از آزمایش کردن نترسید. می‌توانید A/B طرح‌های واکنش‌گرای مختلف را آزمایش کنید تا زمانی که طرح‌بندی را پیدا کنید که بیشترین طنین‌اندازی را داشته باشد.
اکنون که نگاهی به برخی از گزینه‌های قالب انداخته‌ایم، بیایید راه دیگری برای کارکرد ایمیل‌های واکنش‌گرا همراه با بهترین روش‌ها بررسی کنیم.
بهترین روش های ایمیل پاسخگو
برای مثال، در اینجا یکی از قالب‌های ایمیل واکنش‌گرا وجود دارد – به نوار کناری توجه کنید، جایی که می‌توانید الگو را در چندین دستگاه پیش‌نمایش کنید.
سپس، نظر دوم را دریافت کنید. از یک همکار بخواهید ایمیلی را روی دسکتاپ و تلفن خود باز کند. شما می توانید بازخورد صادقانه آنها را در مورد هر دو تجربه دریافت کنید.
یک نشانه خوب از یک قالب ایمیل پاسخگو جامد، گزینه مشاهده پیش نمایش در انواع دسکتاپ و گوشی های هوشمند است، همانطور که در حالت پیش نمایش Stripo نشان داده شده است.
منبع تصویر
قالب های ایمیل پاسخگو
منبع تصویر
2. موزه هنر متروپولیتن
بیایید اکنون به برخی از گزینه های قالب نگاهی بیندازیم.
1. HubSpot
اگر می‌خواهید عناصر ایمیل خود را پاسخگو کنید، باید با درخواست‌های رسانه کار کنید.
منبع تصویر
قبل از زدن «زمان‌بندی» حتما ایمیل‌های خود را آزمایش کنید. فقط زمانی طرح‌ها را نهایی کنید که ببینید در رزولوشن‌های مختلف صفحه چگونه به نظر می‌رسند. بسیاری از مردم فقط برای سهولت از طریق تلفن همراه به ایمیل ها دسترسی دارند.
در مورد آن فکر کنید: مشترکینی که از طراحی بهینه ایمیل تلفن همراه راضی هستند، پیام‌های بازاریابی بیشتری را باز می‌کنند زیرا می‌دانند که این ایمیل در دسترس خواهد بود و ظاهر خوبی دارد.
در حالی که این رویکرد می تواند به شما در ایجاد عناصر خاصی از پاسخ ایمیل خود کمک کند، توصیه می کنیم در صورت امکان از یک الگو استفاده کنید.
همانطور که در خبرنامه TOMS مشاهده می‌شود، طراحی ایمیل واکنش‌گرا کمک می‌کند تا محتوا را به گونه‌ای جمع کنید که از نظر بصری جذاب باشد و هضم آن آسان باشد. این مثال از MET تفاوتی ندارد.
اگرچه ایمیل‌های پاسخگو را می‌توان با استفاده از پرس‌وجوهای رسانه‌ای CSS طراحی کرد، اما برای ایجاد آن نیازی به تجربه کدنویسی ندارید. ایجاد یک ایمیل پاسخگو فقط یک کار برای کدنویسان نیست.
Stripo وب سایتی است که می توانید به سرعت از آن بازدید کنید تا الگوی متناسب با اهداف خود را پیدا کنید. اگر می خواهید ایمیل های پاسخگو را امتحان کنید یا می خواهید از طراحی الهام بگیرید، ممکن است Stripo را در نظر بگیرید.
![اکنون دانلود کنید: راهنمای مبتدیان برای بازاریابی ایمیلی [Free Ebook]](https://no-cache.hubspot.com/cta/default/53/53e8428a-29a5-4225-a6ea-bca8ef991c19.png)