طرح ها، قالب ها و نمونه ها برای سال 2023
انتشار: اسفند 26، 1401
بروزرسانی: 03 تیر 1404

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

}

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

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

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

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

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

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

[embed]https://www.youtube.com/watch?v=pp5-47e55XE[/embed]

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

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

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

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

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

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

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

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

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

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

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

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

[embed]https://www.youtube.com/watch?v=ihdjstpC29c[/embed]

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

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

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

منبع تصویر

3. توت

منبع تصویر

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

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

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

منبع تصویر

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

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

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

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

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

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

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

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

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

[embed]https://www.youtube.com/watch?v=l86IKd3kzlk[/embed]

2. CampaignMonitor

}

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

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

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

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

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

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

بدن {

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

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

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

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

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

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

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

1. خبرنامه TOMS

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

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



منبع

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

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

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

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

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

الگوی ایمیل پاسخگو از پیش نمایش Constant Contact
قالب های CampaignMonitor اغلب رایگان هستند، بنابراین اگر حداقل بودجه دارید انتخاب خوبی است.

3. کمیک

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع تصویر

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

منبع تصویر

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

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

1. HubSpot

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

منبع تصویر

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

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

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

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

[embed]https://www.youtube.com/watch?v=GSZ16Pwn4n8[/embed]

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

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

4. تماس دائمی

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

منبع تصویر

نویسنده: تیم تحریریه نیل پتل