طرح‌ها، قالب‌ها و نمونه‌ها برای سال 2023

از

ایمیل‌های پاسخگو نیز در دسترس‌تر هستند، زیرا به مشترکین اجازه می‌دهند در دستگاه دلخواه خود مطالعه کنند.

قبل از زدن «زمان‌بندی» حتما ایمیل‌های خود را آزمایش کنید. فقط زمانی طرح‌ها را نهایی کنید که ببینید در رزولوشن‌های مختلف صفحه چگونه به نظر می‌رسند. بسیاری از مردم فقط برای سهولت از طریق تلفن همراه به ایمیل ها دسترسی دارند.

با توجه به اینکه بیش از نیمی از ساکنان ایالات متحده به پیام های بازاریابی ایمیلی در تلفن های خود نگاه می کنند، باید ایمیل های خود را برای چندین صفحه از جمله موبایل و تبلت بهینه کنید.

حالا تصور کنید که همان چیدمان دسکتاپ برای موبایل هم اعمال شود. برای دیدن هر یک از عکس ها یا متن ها باید روی گوشیم زوم کنم. به جای انجام این کار، اشتراک را لغو می کنم.

قالب‌های ایمیل واکنش‌گرا باعث صرفه‌جویی در زمان شما در طراحی ایمیلی می‌شود که می‌توانست از یک انتخاب انتخاب شود. به عنوان مثال، ابزار بازاریابی ایمیل HubSpot شامل بیش از 60 قالب فقط برای ایمیل های پاسخگو است.

منبع تصویر

قالب های ایمیل پاسخگو

منبع تصویر

HubSpot چند قالب ایمیل پاسخگو رایگان ارائه می دهد. اگر مشتری HubSpot یا کاربر رایگان هستید، می توانید خودتان آنها را دانلود و امتحان کنید.

نمونه تلفن همراه ایمیل پاسخگوتر

منبع تصویر

با طراحی ریسپانسیو، نسخه موبایلی ناوبری درهم و برهم ندارد و تصویر به خوبی با صفحه نمایش مطابقت دارد. CTA ها نیز برای دید بهتر جابجا شده اند.

برای نشان دادن، در اینجا این است که چگونه یک ایمیل تبلیغاتی که دریافت کردم در دسکتاپ به نظر می رسید.

مثال دسکتاپ ایمیل پاسخگوی براق تر

نمونه طراحی ایمیل پاسخگو از TOMS

استفاده از سرویسی مانند Constant Contact مفید است، زیرا ابزارهای خاص به شما اجازه می دهند مانند مثال بالا ثبات را حفظ کنید. می توانید بگویید که ماهیت پاسخگو بودن ایمیل هیچ یک از عناصر طراحی را به خطر نمی اندازد.

در نهایت، از آزمایش کردن نترسید. می‌توانید A/B طرح‌های واکنش‌گرای مختلف را آزمایش کنید تا زمانی که طرح‌بندی را پیدا کنید که بیشترین طنین‌اندازی را داشته باشد.

این ایمیل دارای تصاویر عالی، نمادهای قابل خرید است و به خوبی قالب بندی شده است. وقتی ایمیل را روی موبایل باز می‌کنم، این همان چیزی است که با آن استقبال می‌کنم.

بیایید نگاهی به کد زیر بیاندازیم.

ویدئوی زیر نحوه طراحی ایمیل با یک الگو را به شما آموزش می دهد. در ویدیو، کاربر در Klaviyo است، اما مفاهیم بدون توجه به نرم افزاری که استفاده می کنید صادق هستند.

در حالی که این رویکرد می تواند به شما در ایجاد عناصر خاصی از پاسخ ایمیل خود کمک کند، توصیه می کنیم در صورت امکان از یک الگو استفاده کنید.

بدن {

سپس، می‌توانید در مورد برخی از طرح‌های ایمیل واکنش‌گرای مورد علاقه ما مطالعه کنید.

1. خبرنامه TOMS

در اینجا، ما برخی از بهترین روش‌ها و قالب‌های آماده و همچنین یک آموزش سریع درباره اصول ایمیل‌های پاسخگو را فهرست کرده‌ایم.

ایمیل ریسپانسیو چیست؟

برای مثال، در اینجا یکی از قالب‌های ایمیل واکنش‌گرا وجود دارد – به نوار کناری توجه کنید، جایی که می‌توانید الگو را در چندین دستگاه پیش‌نمایش کنید.

قالب ایمیل پاسخگو از پیش نمایش HubSpot

به زودی، ایمیل های پاسخگو ارسال خواهید کرد و نرخ باز کردن خود را افزایش خواهید داد.

اگرچه ایمیل‌های پاسخگو را می‌توان با استفاده از پرس‌وجوهای رسانه‌ای CSS طراحی کرد، اما برای ایجاد آن نیازی به تجربه کدنویسی ندارید. ایجاد یک ایمیل پاسخگو فقط یک کار برای کدنویسان نیست.

نمونه طراحی ایمیل پاسخگو از MET

پرس و جوهای رسانه ای یک تکنیک CSS هستند. این به شما امکان می دهد قوانین سبکی را تنظیم کنید که فقط در صورتی ظاهر شوند که شرایط خاصی درست باشد. به عنوان مثال، می توانید تعیین کنید که وقتی صفحه نمایش 600 پیکسل عرض یا کوچکتر است، از چه اندازه فونت و اندازه تصویر استفاده کنید.

اگر می‌خواهید عناصر ایمیل خود را پاسخگو کنید، باید با درخواست‌های رسانه کار کنید.

شما می توانید دستگاه های مختلف را در کنار هم ببینید تا بتوانید عناصر طراحی را به راحتی با هم مقایسه کنید. برای ایجاد بهترین تجربه برای همه مشترکین می توان ویرایش های کوچکی انجام داد.

کلیک بر روی انواع دستگاه و اطمینان از فرمت ایمیل شما یکی از مراحل نهایی در فرآیند طراحی است و فقط هنگامی که از نرم افزاری مانند HubSpot استفاده می کنید، در فرآیند ایمیل پاسخگو قدم بردارید.

متن و عکس های متناوب برای دسکتاپ منطقی است، در حالی که انباشتن مداوم عکس ها روی متن مرتبط برای موبایل، همراه با خطوط جداکننده، تضمین می کند که بیننده گیج نشود.

2. CampaignMonitor

ایمیل‌های پاسخگو از تصاویر و جداول روان استفاده می‌کنند تا در اندازه‌های مختلف صفحه نمایش انعطاف‌پذیر باشند. در نهایت، آنها محتوای طراحی شده برای تجربه بهینه هر کاربر را ارائه می دهند.

راه های زیادی وجود دارد که می توانید ایمیل های ریسپانسیو طراحی کنید.

بیایید اکنون به برخی از گزینه های قالب نگاهی بیندازیم.

1. HubSpot

Constant Contact بیش از 200 قالب ایمیل حرفه ای را ارائه می دهد که پس از ثبت نام در دسترس هستند. با نگاهی به مثال زیر، می‌بینید که این پلتفرم قالب‌های ایمیل واکنش‌گرا را ارائه می‌دهد.

الگوی ایمیل پاسخگو از پیش نمایش Constant Contact

دعوت به اقدام جدید



منبع

اگر فنی نیستید یا روش ساده‌تری می‌خواهید، از ابزار بازاریابی ایمیلی با قالب‌های واکنش‌گرای داخلی استفاده کنید. برای مثال، نرم‌افزار ایمیل رایگان HubSpot، قالب‌های کشیدن و رها کردن را ارائه می‌کند که به طور پیش‌فرض پاسخگو هستند.

نمونه های طراحی ایمیل پاسخگو

برای کسانی که سابقه کدنویسی کمتری دارند یا کسانی که به دنبال صرف زمان کمتری برای طراحی هستند، توصیه من این است که از یک الگو استفاده کنند. آنها یک راه مطمئن برای اطمینان از حرفه ای بودن ایمیل شما هستند و پاسخگو باشد

اگر دانش کدنویسی دارید، می توانید قالب های ایمیل مختلف را برای اندازه های مختلف صفحه کدنویسی کنید. همچنین می توانید از یک الگوی از پیش ساخته استفاده کنید که در تمام اندازه های صفحه کار می کند.

آیا تا به حال برایتان پیش آمده که ایمیلی را روی گوشی خود باز کنید و تصویر با کیفیت پایین، متن خیلی کوچک و دکمه فراخوان برای اقدام خراب باشد؟ اینها همه ایرادات طراحی ایمیل ثابت هستند. ایمیل های ریسپانسیو جواب می دهند.

قالب های CampaignMonitor اغلب رایگان هستند، بنابراین اگر حداقل بودجه دارید انتخاب خوبی است.

3. کمیک

من هنوز همان اطلاعات و همان عکس ها و آیکون های قابل خرید را دارم. تنها تفاوت قابل توجه در قالب ایمیل است. برای تناسب بهتر با تجربه موبایل متفاوت است.

اکنون که نگاهی به برخی از گزینه‌های قالب انداخته‌ایم، بیایید راه دیگری برای کارکرد ایمیل‌های واکنش‌گرا همراه با بهترین روش‌ها بررسی کنیم.

بهترین روش های ایمیل پاسخگو

هنگام کار با ایمیل، می توانید از پرس و جوهای رسانه ای استفاده کنید تا مشخص کنید طراحی شما در رایانه های رومیزی، تبلت ها و دستگاه های تلفن همراه چگونه باشد. برای انجام این کار، باید موارد زیر را مشخص کنید:

  • از انتخابگر “@media” استفاده کنید و “screen” را مشخص کنید. این نشان می دهد که کد روی دستگاه های دارای صفحه نمایش تأثیر می گذارد.
  • حداکثر عرض خود را بر حسب پیکسل تنظیم کنید. این اندازه صفحه نمایش را مشخص می کند که در آن کد اعمال می شود.
  • راهنماهای سبک CSS را که می خواهید آن صفحه خاص دنبال شود را مشخص کنید.

ایمیل پاسخگو ایمیلی است که برای هر دستگاهی از جمله تلفن، دسکتاپ یا تبلت بهینه شده است. آن‌ها با وضوح‌های چندگانه صفحه‌نمایش سازگار می‌شوند، که به ویژه با افزایش تقاضا برای محتوای سازگار با موبایل مفید است.

منبع تصویر

الگوهای Constant Contact دارای قابلیت ویرایش کشیدن و رها کردن، گزینه ای برای افزودن نظرسنجی، توابع تجارت الکترونیک و ابزار کتابخانه عکس هستند. همه این ویژگی‌ها می‌توانند به ایجاد ایمیل‌هایی که مشترکین می‌خواهند ببینند کمک کنند.

منبع تصویر

به عنوان مثال، با کلیک بر روی دستگاه تلفن هوشمند برای پیش نمایش، می توانید ببینید که آیا محتوای شما – از جمله اندازه فونت و وضوح تصویر – به گونه ای قالب بندی شده است که برای تلفن همراه خوشایند است یا خیر.

اندازه فونت: 30px;

صرف نظر از رویکرد شما، به نرم افزار بازاریابی ایمیلی خود نیاز دارید. در اینجا، می‌توانید یک ایمیل طراحی کنید، و سپس آن ایمیل را در چندین دستگاه پیش‌نمایش کنید. اکثر نرم افزارهای ایمیل به شما نشان می دهند که طراحی در چندین دستگاه چگونه به نظر می رسد.

وقت آن است که نمونه ها را بررسی کنیم. با این ویدیو شروع کنید، که به برخی از بهترین کمپین های بازاریابی ایمیلی می پردازد.

با ایمیل پاسخگو، تجربه کاربر و همچنین بازگشت سرمایه کمپین را می توان افزایش داد.

}

در مورد آن فکر کنید: مشترکینی که از طراحی بهینه ایمیل تلفن همراه راضی هستند، پیام‌های بازاریابی بیشتری را باز می‌کنند زیرا می‌دانند که این ایمیل در دسترس خواهد بود و ظاهر خوبی دارد.

منبع تصویر

3. توت

در خبرنامه TOMS، تفاوت اصلی بین نسخه دسکتاپ و نسخه تلفن همراه، چیدمان و اندازه تبلیغات نمایشی است.

همانطور که در خبرنامه TOMS مشاهده می‌شود، طراحی ایمیل واکنش‌گرا کمک می‌کند تا محتوا را به گونه‌ای جمع کنید که از نظر بصری جذاب باشد و هضم آن آسان باشد. این مثال از MET تفاوتی ندارد.

مگر اینکه تجربه طراحی وب جامعی داشته باشید، کدنویسی چندین صفحه رسانه می تواند زمان بر و خسته کننده باشد.

منبع تصویر

2. موزه هنر متروپولیتن

ایمیل های پاسخگو تجربه بهتر و قابل دسترس تری را برای مشتریان شما ایجاد می کنند. اگر تازه در حال انتقال هستید، با کاوش در قالب های ایمیل پاسخگو از پیش ساخته شده شروع کنید. اینها در زمان شما صرفه جویی می کنند و در عین حال به شما انعطاف طراحی می دهند.

صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) {

کدنویسی یک ایمیل پاسخگو

الگوهای ارائه شده توسط CampaignMonitor مشابه بسیاری از قالب های دیگر است که در آنها نتایج ایمیل پاسخگو در ابزار پیش نمایش نشان داده می شود. به عنوان مثال، در اینجا یک الگوی CampaignMonitor وجود دارد:

الگوی ایمیل پاسخگو از پیش نمایش CampaignMonitor

یک قالب ریسپانسیو به طور خودکار با هر اندازه صفحه سازگار می شود، بنابراین چه ایمیل در تلفن هوشمند، تبلت یا رایانه باز شود، عالی به نظر می رسد و عملکرد کاملی دارد.

اکنون دانلود کنید: راهنمای مبتدیان برای بازاریابی ایمیلی [Free Ebook]

نمونه طراحی ایمیل ریسپانسیو از Mulberry

سپس، نظر دوم را دریافت کنید. از یک همکار بخواهید ایمیلی را روی دسکتاپ و تلفن خود باز کند. شما می توانید بازخورد صادقانه آنها را در مورد هر دو تجربه دریافت کنید.

Stripo وب سایتی است که می توانید به سرعت از آن بازدید کنید تا الگوی متناسب با اهداف خود را پیدا کنید. اگر می خواهید ایمیل های پاسخگو را امتحان کنید یا می خواهید از طراحی الهام بگیرید، ممکن است Stripo را در نظر بگیرید.

4. تماس دائمی

توجه کنید که چگونه یک طرح بندی ستونی در پیش نمایش تلفن همراه برای تناسب با مشخصات تلفن ها اتخاذ شد.

}

طراحی دقیق ایمیل ریسپانسیو شما بر اساس اهداف کمپین شما متفاوت خواهد بود. با این حال، این نکات می تواند به شما کمک کند بهترین تجربه را برای خوانندگان خود تضمین کنید.

  • اطمینان حاصل کنید که ایمیل ریسپانسیو شما مقیاس پذیر و انعطاف پذیر است. پیش نمایش ایمیل در دستگاه های مختلف برای اطمینان از پاسخگو بودن پیام شما.
  • اگر ایمیل خود را کدنویسی می‌کنید، به یاد داشته باشید که درخواست‌های رسانه CSS فیلدهایی را تغییر می‌دهند که به فیلدهای روان ثابت می‌شوند.
  • از فونت‌های بزرگ‌تر استفاده کنید که در صفحه‌های کوچک‌تر به راحتی قابل خواندن باشند.
  • مقیاس بندی طرح بندی های تک ستونی آسان تر است. اگر طرح‌بندی‌های ساده برای صفحات وب شما خوب است، حتماً آنها را برای ایمیل‌های واکنش‌گرا در نظر بگیرید.

یک نشانه خوب از یک قالب ایمیل پاسخگو جامد، گزینه مشاهده پیش نمایش در انواع دسکتاپ و گوشی های هوشمند است، همانطور که در حالت پیش نمایش Stripo نشان داده شده است.

یک راه ساده برای بررسی اثربخشی ایمیل خود این است که آن را به عنوان آزمایش برای خود یا تیم خود ارسال کنید – آیا این ایمیل در مقابل سایر ایمیل های بازاریابی پاسخگو در صندوق ورودی شما قرار می گیرد؟ اگر چنین است، شما آماده ارسال هستید.

شروع کار با ایمیل های پاسخگو

هنگامی که روی CSS یک ایمیل اعمال می شود، متن متن در اندازه 30 پیکسل برای صفحه نمایش هایی با عرض 600 پیکسل یا کوچکتر ظاهر می شود.

بنابراین، با تمام این صحبت ها در مورد ایمیل های پاسخگو، باید برای ایجاد ایمیل های خود احساس خارش داشته باشید. در مرحله بعد، به چند نمونه و قالب ایمیل پاسخگو نگاه خواهیم کرد.

طراحی ایمیل واکنش گرا

باز هم، با طراحی ایمیل ریسپانسیو، نام بازی در حال انباشته شدن است. همه چیز در مورد آسان کردن محتوا و ایجاد جذابیت بصری است، مهم نیست دستگاه چقدر کوچک است که شخصی در حال مشاهده محتوا است.

Stripo بیش از 300 قالب ایمیل رایگان HTML را ارائه می دهد. شما می توانید قالب ها را بر اساس صنعت، فصل، نوع و ویژگی انتخاب کنید. به عنوان مثال، در اینجا یک الگو از بخش صنعت کسب و کار آنها آمده است.

الگوی ایمیل پاسخگو از پیش نمایش Stripo الگوی ایمیل پاسخگو از پیش نمایش Stripo

در تلفن همراه، موقعیت منو تغییر می کند. پیوندهای اقلام مختلف فروشگاه هدیه در پایین صفحه قرار دارند. این تصاویر سوغاتی های موجود را در جلو و مرکز نگه می دارد.