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

15. طرح بهینه‌ی ایمیل رو انتخاب کنید.

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

تک ستونی (one-column)

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

هرم معکوس (Inverted pyramid)

چارچوب هرمی معکوس باعث میشه تمرکز و کلیک‌ها در مناطقی که قصد دارید مخاطب‌های شما باشن رو آسون‌تر کنه. با قرار دادن محتوای گسترده‌تر خود (معمولاً Header یا بنر) در بالا و محتوای کم‌تر در پایین (CTA شما)، چشم بینندگان به طور خودکار به مکانی میره که به طور مستقیم با تغییر‌های شما مرتبطه.

زیگ زاگ (Zig-zag)

این یکی دیگه از طرح‌بندی‌های جالبه که در حین Scroll کردن پیام، چشم بیننده‌ها رو از یک طرف صفحه به سمت دیگه می‌بره. اگه محصولاتتون رو به نمایش بذارید و سپس اون‌ها رو با توضیحات و CTA که به صفحه‌ی محصول شما منتهی میشه دنبال کنید، میتونه یک چیدمان بسیار جذاب به نظر برسه.

اما یک هشدار کوچیک در مورد این رویکرد وجود داره که ما اون رو اغلب توصیه نمی‌کنیم. اگه هر عنصر در پیام شما یک بلوک جداگانه هست (مثل تصویر یا توضیحات محصول) و ابتدا از چپ به راست و سپس از راست به چپ (در فارسی برعکس) چیده میشه، ترتیب نمایش این عناصر در دستگاه تلفن همراه ممکنه ایده آل نباشه.

عرض ایمیل (Email width)

اگر می‌خواید مطمئن بشید که ایمیل‌هاتون در اکثر دستگاه‌های خوب به نظر میرسه، باید عرض قالب ایمیلتون رو ۶۰۰ پیکسل (حداکثر ۶۴۰ پیکسل) نگه دارید.

ممکنه در ابتدا غیر منطقی به نظر برسه، به خصوص اینکه صفحه نمایش ما این روزها بزرگتر شده، اما به خاطر داشته باشید که همه‌ی سرویس گیرنده‌های ا‌یمیل یکسان کار نمی‌کنن. بسیاری از صندوق‌های پستی، پیام شما رو در قاب‌هایی نشون میدن که توسط بخش‌ها و tab‌های اضافی احاطه شده. مثل سرویس گیرنده‌ی وب Gmail ما:

طول ایمیل (Email Length)

هیچ دستورالعمل روشنی برای میزان طول ایمیل‌ها وجود نداره. بعضی از بازاریاب‌ها ترجیح میدن قالب‌های ایمیلشون رو طوری طراحی کنن که کوتاه و شیرین باشه و مستقیماً به وب سایتشون منتهی بشه. بعضی دیگه ترجیح میدن تا اون‌جا که ممکنه اطلاعات بیشتری رو منتقل کنن و اجازه بدن ایمیل حرف بزنه.

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

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

فاصله گذاری و Padding

قالب ایمیل شما از بلوک‌ها و بخش‌های مختلفی تشکیل شده. بیشتر اوقات، تصویر header، چند بلوک متن، چند تصویر و CTA و یک Footer رو خواهید داشت. همه‌ی این عناصر باید در کنار هم قرار بگیرن، اما همچنین باید مقداری "فضای سفید" بینشون وجود داشته باشه. منظور من فضای خالیه.

فضای خالی (یا فضای منفی) خوندن و کلیک کردن از طریق ایمیل شما رو بسیار ساده‌تر و شهودی می‌کنه و به این ترتیب، روی نرخ تبدیل شما تأثیر میذاره.

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

در قالب‌های ایمیل، ما تمایل داریم که 20-30 پیکسل رو به سمت چپ و راست هر بخش که دارای یک بلوک متنیه اضافه کنیم تا زمانی که ایمیل در یک دستگاه تلفن همراه مشاهده می‌شه، متن به لبه‌ی صفحه نمایش نچسبه. (اما مشکلی برای بلوک‌های تصویر نیست، بنابراین گاهی اوقات از Padding چپ و راست در اون‌جا صرف‌نظر می‌کنیم.)

برای لایه‌های بالا و پایین، ما معمولا از 10 تا 20 پیکسل بین هر عنصر یا بخش استفاده می‌کنیم. این به ما کمک می‌کنه تا مقداری «فضای سفید» بدیم و ایمیل‌هامون رو خواناتر می‌کنه.

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

16. از طراحی ایمیل واکنش‌گرا (responsive) استفاده کنید‌.

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

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

بهترین شیوه‌های طراحی ایمیل موبایل

چندین روش خوب وجود داره که باید زمان طراحی ایمیل‌هاتون برای دستگاه‌های تلفن همراه در نظر داشته باشید:

مطمئن بشید نوشته‌ی شما خواناست، حتی زمانی که شخصی پیام شما رو در حال حرکت می‌خونه. فاصله‌ی خطوط و اندازه‌ی فونت رو به 14-16 پیکسل برای متن معمولی و 22 پیکسل برای تیترها تنظیم کنید.
زمان استفاده از انگشت شست، مطمئن بشید که linkها و CTAهای شما به راحتی قابل کلیک هستن. در بیشتر موارد، دکمه‌ها تقریباً باید 44 در px 44(حداقل 29 در px 44) باشن.
بین CTA‌ها فضای سفید قرار بدید تا کلیک کردن آسون‌تر بشه. 10-20 پیکسل فضای اضافی در اطراف مناطق قابل کلیک اضافه کنید و از قرار دادن چندین لینک متنی در کنارهم خودداری کنید.
مطمئن بشید که صفحه‌ی فرود شما برای دستگاه‌های تلفن همراه هم بهینه شده. فرستادن افراد به صفحه‌ای که در دستگاه اون‌ها ظاهر خوبی نداره باعث از دست دادن منابع می‌شه و می‌تونه باعث ناامیدی زیادی بشه. همچنین، استفاده از deep link رو در ایمیل‌های خود در نظر بگیرید.
همیشه قبل از ارسال، الگوی ایمیل‌تون رو در دستگاه‌های مختلف آزمایش و بررسی کنید. همونطور که اشاره کردیم و ارزش تکرار رو داره، طرحی که روی دسکتاپ خوب به نظر میرسه ممکنه در دستگاه تلفن همراه بد به نظر بیاد (زمانی که محتوای شما تغییر اندازه داده یا روی هم چیده شده.)
بخش‌هایی رو که قابل مشاهده نیستن یا ارزشی به تجربه‌ی گیرندگان تلفن همراه شما نمیده پنهان کنید.
اگر پیام شما طولانیه، CTAاصلی رو در ایمیل تکرار کنید تا در زمان پیمایش گیرندگان صرفه‌جویی بشه.

17. از Dark Mode غافل نشید.

حتی اگه شخصاً از Dark Mode استفاده نمی‌کنید، نمی‌تونید اون رو در فرایند طراحی ایمیل نادیده بگیرید. مطالعات مختلف نشون داده که 80 درصد از کاربرها در صورت در دسترس بودن Dark Mode، اون را فعال می‌کنن. بنابراین Dark Mode در ایمیل چه کاری انجام میده؟ به زبان ساده، پالت رنگ رو در ایمیل شما تغییر میده، بنابراین به جای دیدن فونت‌های تیره در پس زمینه‌ی روشن، فونت‌های روشن رو در پس زمینه‌ی تیره خواهید دید.

در حالی که بعضی از کاربرها زیبایی‌شناسیِ Dark Mode رو ترجیح می‌دن، دو مزیت اصلی استفاده از Dark Mode عبارتند از:

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

در اینجا چند نکته به شما کمک می‌کنه مطمئن بشید که ایمیل‌هاتون در Dark Mode ظاهر خوبی دارن:

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

یک درخشش سفید به اطراف تصاویر و آیکون‌های سیاه خود اضافه کنید. در غیر این صورت، ممکنه با template شما ترکیب بشن و مورد توجه قرار نگیرن.

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

در زیر دو تصویر وجود داره که یک ایمیل (از Hustle) رو در Dark Mode و light Mode در یک دستگاه تلفن همراه نشون میده. همونطور که متوجه خواهید شد، تصویر header اون‌ها دارای پس‌زمینه‌ی شفاف و درخششی ظریف در اطرافش هست تا لوگوی تیره مورد توجه قرار گیرد.

امیدواریم این سری محتوا به شما کمک کرده باشه. منتظر نظرات شما هستم.

سبز باشید و برقرار 😊

چطور با 17 نکته‌ی کلیدی در ایمیل مارکتینگ بدرخشیم؟ - قسمت چهارم