تفاوتی که در سرویس‌های مختلف ایمیلی (ESPs) وجود دارد، باعث شده طراحی ایمیلی که روی سرویس‌های مختلف ایمیلی به درستی نمایش داده شود، به یک چالش همیشگی برای دیجیتال مارکترها تبدیل شود. در مورد طراحی ایمیل زیاد نوشته‌ایم. در این یادداشت می‌خواهیم مروری بر ۱۰ نکته‌ی کنکوری و فنی مهم داشته باشم که با رعایت آنها، بخش زیادی از مشکلات شما پیش‌بینی می‌شود و می‌توانید به راه‌حل‌های خوبی برسید.
۱. مخاطبین‌تان را بهتر بشناسید
بهترین راه برای شناخت مخاطبین، آنالیز گزارش کمپین‌های قبلی است. اکثر سرویس‌های ایمیل مارکتینگ گزارش‌های خوبی از کمپین‌های ارسالی به شما می‌دهند. بر اساس این گزارش‌ها می‌توانید بفهمید که چه کاربرانی ایمیل‌های شما را باز می‌کنند و کلیک می‌کنند، از چه سرویس‌های ایمیلی استفاده می‌کنند، روی چه دستگاه‌هایی ایمیل‌ها را باز می‌کنند و اطلاعاتی دیگر.
تحلیل این اطلاعات به شما کمک می‌کند کمپین‌هایی متناسب با کاربران با اهمیت اجرا کنید.
۲. از طراحی یک ستونی در ایمیل استفاده کنید
یک راه‌حل خوب و آسان برای اینکه مطمئن شوید ایمیل شما روی سرویس‌دهنده‌های مختلف ایمیل (Email Service Providers) به درستی نمایش داده می‌شود این است که ایمیل را به صورت تک‌ستونی طراحی کنید.
به دو نمونه‌ی زیر نگاه کنید. بررسی ایمیل تک‌ستونی راحت‌تر انجام می‌شود و کاربر با آن راحت‌تر است. طراحی دو ستونی در برخی مواقع ممکن است باعث پیچیده شدن طراحی و سردرگمی بیننده شود، علاوه بر اینکه مشکلات نمایش آن روی ESPهای مختلف نیز بیشتر است.
البته قانون مشخصی در این مورد وجود ندارد. واقعیت این است که خیلی از طراحان ایمیل علاقه‌ی زیادی به طراحی پیچیده‌تر و استفاده از گریدبندی دو-ستونی و سه-ستونی دارند. این کار فی‌فنسه ایرادی ندارد، به این شرط که حواس‌تان را خیلی جمع کنید و کار بیشتری انجام دهید تا نمایش بهینه‌ی ایمیل روی دستگاه‌های مختلف و سرویس‌های مختلف ایمیل تضمین شود.
۳. از table برای صفحه‌بندی کدهای HTML استفاده کنید
این پیشنهاد احتمالا باعث عصبانیت طراحان UI می‌شود! در طراحی وب سال‌هاست که استفاده از Table کنار گذاشته شده و طراحان از Div استفاده می‌کنند. خبر بد (و عجیب!) این است که همه‌ی ESPها از div پشتیبانی نمی‌کنند، به همین دلیل شما مجبورید برگردید سراغ table قدیمی و باستانی و با آن کنار بیایید. بله؛ می‌دانم! زندگی سخت است!
۴. از عرض ۶۰۰px استفاده کنید
مثل طراحی یک-ستونی و دو-ستونی و سه-ستونی، در مورد استفاده از عرض ۶۰۰ پیکسل برای ایمیل‌ها نیز قانون مشخصی وجود ندارد. بسیاری از کمپین‌های ایمیلی با عرض ۶۰۰px اجرا می‌شوند و این سایز، به عنوان پیش‌فرض در خیلی از سرویس‌های ایمیل مارکتینگ در نظر گرفته می‌شود. با انتخاب عرض ۶۰۰ پیکسل برای ایمیل‌ها، ایمیل شما در اکثر سرویس‌های ایمیلی (جیمیل و یاهو و هات‌میل و اوت‌لوک و…) به درستی نمایش داده می‌شود.
اگر دلیل قانع‌کننده‌ای دارید که عرض ایمیل را بزرگ‌تر کنید، به این شرط که حواس‌تان به نسخه‌های موبایلی باشد، می‌توانید این ریسک را بپذیرید.
۵. سایز لوگو را دو برابر کنید
پیشنهاد می‌کنیم برای اینکه تصاویر ایمیل، به‌ویژه عکس لوگو که معمولا در بالای ایمیل قرار می‌دهید، نمایش زیبایی در دستگاه‌های با کیفیت رتینا داشته باشند، عرض عکس را دوبرابر کنید و بعد عکس را با همان سایز کوچک‌تر در داخل ایمیل قرار دهید. به این ترتیب رزولوشن بالاتری برای دستگاه‌های Retina خواهید داشت. البته خیلی حواس‌تان به اندازه‌ی فایل عکس‌ها باشد. چون خیلی از ایمیل‌ها روی گوشی موبایل باز می‌شوند و خیلی از افراد از اینترنت‌های کم‌سرعت‌تری روی سیم‌کارت‌شان استفاده می‌کنند، بزرگ شدن حجم ایمیل می‌تواند یک نقطه‌ی منفی بزرگ باشد.
۶. از CSS به صورت inline استفاده کنید
پیشنهاد اکید می‌کنیم که از فایل‌های CSS خارجی برای استایل‌بندی فایل‌های HTML ایمیل استفاده نکنید، به این دلیل که خیلی از سرویس‌های ایمیلی (من‌جمله آقایان بزرگوار: جیمیل و یاهومیل) ارجاع به فایل‌های CSS خارجی را یک مشکل امنیتی شناسایی می‌کنند و مانع از نمایش ایمیل می‌شوند!
به همین دلیل، تنها گزینه‌ی قابل استفاده، استفاده از inline CSS است.
۷. از ALT text استفاده کنید
کار خوبی است اگر برای تمام تصاویری که در داخل ایمیل استفاده می‌کنید، ALT text تعریف کنید. به این ترتیب اگر به هر دلیلی تصاویر داخل ایمیل لود نشوند (من‌جمله به دلیل محدودیتی که برخی کاربران و سرویس‌دهنده‌های ایمیلی برای نمایش اتوماتیک تصاویر تعریف می‌کنند)، ایمیل شما خیلی بی‌معنا نمی‌شود.
۸. از فونت‌های استاندارد استفاده کنید
سرویس‌های بزرگ ایمیل (من‌جمله جیمیل و یاهو) از فونت‌های استاندارد مشخصی استفاده می‌کنند و با توجه به محدودیتی که در بند ۶ این یادداشت به آن اشاره کردیم، اجازه‌ی ارجاع به فونت‌های سفارشی را به شما نمی‌دهند. البته شما به صورت تگ‌های Inline می‌توانید به فونت‌های دیگری ارجاع دهید، ولی باید مطمئن شوید که این فونت‌ها روی سیستم کاربران نصب است.
در طراحی ایمیل‌های انگلیسی دست‌مان کمی باز است، چون فونت‌های زیادی به صورت پیش‌فرض روی سیستم‌عامل‌ها وجود دارد، ولی وقتی پای طراحی ایمیل‌های فارسی به میان می‌آید، دست‌مان کمی بسته می‌شود.
طبیعتا امکان استفاده از فونت‌های زیبایی مانند Iran Sans و Iran Yekan و Vazir و Samim وجود ندارد، به این دلیل ساده که این فونت‌ها روی سیستم اکثر کاربران وجود ندارند، ولی معمولا کاربران فارسی‌زبان فونت‌های سری B یا سری IR فارسی را روی سیستم‌هایشان دارند. مثلا می‌توانید از فونت B Nazanin استفاده کنید، با این ریسک که شاید روی ۱۰ الی ۲۰ درصد کلاینت‌ها به درستی این فونت نمایش داده نشود.
اگر خیلی می‌خواهید مته به خشخاش نگذارید، پیشنهاد می‌کنیم از فونت Tahoma در اندازه‌های کوچک (زیر ۱۴ پیکسل) برای متن اصلی ایمیل استفاده کنید.
۹. از Media queries استفاده کنید
استفاده از Media queries به شما این امکان را می‌دهد که متناسب با نوع صفحه‌نمایش کاربران، شیوه‌های نمایشی مختلفی را برای ایمیل در نظر بگیرید. اینش یوه، یکی از بهترین راهکارهای برای طراحی ایمیل‌های ریسپانسیو است تا نمایش بهینه‌ای از ایمیل روی دستگاه‌های موبایلی داشته باشید.
۱۰. تست کنید
سه راه برای اینکه مطمئن شوید ایمیل‌هایی که با تلاش فراوان طراحی کرده‌اید، به خوبی کار می‌کنند، وجود دارد:
تست کنید. تست کنید. تست کنید!
البته راهکار چهارمی هم وجود دارد که می‌گوید «باز هم تست کنید»!
ایمیلی که طراحی کرده‌اید را به صورت آزمایشی روی ایمیل‌های جیمیل و یاهو و اوت‌لوک برای خودتان بفرستید. نسخه‌ای از آن را روی وب‌میل چک کنید و نسخه‌ای را روی کلاینت ویندوزی Microsoft Outlook. هم روی کامپیوتر آنها را باز کنید و هم روی گوشی موبایل و هم روی تبلت. هم با گوشی اندرویدی ایمیل را باز کنید و هم با گوشی آیفون.
خیلی از ریزه‌کاری‌ها و مشکلات مربوط به نمیش بهینه‌ی ایمیل، در تست خودش را نشان می‌دهد. این کار ممکن است در نگاه اول سخت به نظر برسد، ولی وقتی با کمی تلاش به روال مشخصی برای طراحی کمپین‌هایتان رسیدید، می‌توانید از این تجربه برای کمپین‌های بعدی استفاده کنید و کارتان راحت‌تر می‌شود.
فراموش نکنید که اگر ایمیل شما به خوبی دیده نشود، بخش زیادی از تلاش شما برای تولید محتوا و طراحی ایمیل از بین می‌رود.