۱۳ نکته مهم برای طراحی بهترین ایمیل های HTML

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

 

از چه پیشرفت هایی صحبت می کنیم؟

بزرگترین پیشرفت، شکل گیری پروژه استاندارد ایمیل (Email Standard Project) است. در این پروژه گروه های مختلف درگیر در مبحث ایمیل با هم همکاری می کنند تا با کمک توسعه دهنده ها و طراحان، روش نمایش ایمیل ها توسط برنامه ها و سیستم های مختلف استانداردسازی و هماهنگ شود. این به آن معنی است که ما به سمت ایجاد یک استاندارد هماهنگ برای نمایش HTML و CSS در ایمیل حرکت می کنیم و دردسرهای مربوط به تهیه ایمیل های HTML زیبا را باید به خاطره ها بسپاریم. یکی دیگر از پیشرفت های مهم در این عرصه، ارائه سرویس هایی است که امکان تست کمپین های ایمیل مارکتینگ در برنامه های دسکتاپ، موبایل و همچنین برنامه های مبتنی بر وب را فراهم می کنند. به خاطر داشته باشید که آزمودن یا همان تست کردن ایمیل ها برای کسب اطمینان از اینکه در همه محیط ها و رابط های کاربری به درستی به نمایش در می آیند ضروری است. بسیاری از این سرویس ها حتی امکان بررسی احتمال شناسایی هر ایمیل به عنوان اسپم را نیز مهیا می کنند که برای هر کمپین ایمیل مارکتینگی لازم و کارساز است. مورد دیگری که در دسترس طراحان و بازاریاب ها قرار گرفته، قالب های استاندارد و جذاب HTML است. از این طریق، حتی بدون اینکه از کدنویسی سررشته ای داشته باشید می توانید به راحتی ایمیل های جالب و جذابی را تهیه کنید.

استفاده از قالب به جای کدنویسی

حتی اگر دانش خوبی در رابطه با HTML دارید، باز هم شروع کار با یک قالب آماده می تواند کار شما را تا حد زیادی آسانتر کند. این قالب ها به نحوی آماده شده اند که فقط کافی است که لوگوی مورد نظر را به آنها اضافه کنید، متن را ویرایش کرده و تصاویر موجود را با تصاویر مد نظر خودتان جایگزین کنید. حتی بسیاری از سرویس دهنده های ایمیل مارکتینگ هم امکان ویرایش مستقیم کد قالب های آماده خود را در اختیار کاربران شان قرار می دهند. اگر مایلید که شکل و ظاهر ایمیل های شما خاص تر باشد و ترجیح می دهید که خودتان کدهای HTML و CSS را ویرایش کنید، لازم و ضروری است که به نکاتی که در ادامه این مطلب از مجموعه مقالات آموزش ایمیل مارکتینگ مجله گویا آی تی به آنها اشاره می کنیم توجه کنید:

 

1. از طراحی واکنشگرا یا ابعاد بزرگ استفاده کنید

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

 

2. عرض ایمیل را در مرز ۶۰۰ پیکسل یا کمتر حفظ کنید

این مورد تقریباً به یک استاندارد برای طراحی قالب تبدیل شده است، اما قبلاً به این دلیل توصیه می شد که با محدود کردن نیاز به اسکرول به دو طرف در بخش نمایش ایمیل برخی از برنامه های ایمیل خوان، مانند Outlook و Thunderbird، نمایش ایمیل را تسهیل می کند.

 

3. به جای <div> از <table> و <td> استفاده کنید

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

 

4. کاهش حجم فایل ها

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

 

5. فقط از فایل های PNG، JPEG و GIF استفاده کنید

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

 

6. به استفاده از ویدیو در ایمیل فکر کنید

به کمک HTML5 می توانید یک فایل ویدیویی را در ایمیل خود قرار بدهید که در برخی از برنامه های مدیریت ایمیل قابل اجرا خواهد بود.

 

7. همیشه از display: block برای تصاویر استفاده کنید

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

 

8. هرگز از حاشیه استفاده نکنید

هاتمیل و سایت Outlook، پشتیبانی از حاشیه (Margin) در همه مولفه های HTML را متوقف کرده اند. اگر چه استفاده از قابلیت padding دقیقاً مثل حاشیه عمل نمی کند، اما برای نیل به منظور مورد نظر می توانید از آن در td ها استفاده کنید.

 

9. از فونت های web-safe استفاده کنید

برخی از برنامه های ایمیل خوان از همه فونت ها پشتیبانی نمی کنند، بنابراین در مبحث فونت ها از فونت های به اصطلاح web-safe  و رایج استفاده کنید.

 

10. ALT text اهمیت دارد

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

 

11. از تصویر به عنوان دکمه استفاده نکنید

استفاده از HTML و CSS برای دکمه ها باعث می شود که دکمه های فراخوان به عمل شما در همه جا و در همه برنامه های مدیریت ایمیل به درستی به نمایش در بیایند.

 

12. از استایل های درون خطی (inline styles) استفاده کنید

این استایل ها بر استایل های لایه های بیرونی تقدم پیدا می کنند و علاوه بر این، برنامه های ایمیل خوان مرورگر محور، مانند جیمیل و هاتمیل که تگ های DOCTYPE، BODY و HEAD را حذف می کنند را دور می زنند.

 

13. یک pre-header یا متن پیش نمایش اضافه کنید

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

 

14. قانون طلایی: امتحان کنید و به اجرای تست روی ایمیل های خود ادامه بدهید

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

چک لیست نهایی تست ایمیل ها

حال که از باید و نبایدهای ایمیل های HTML اطلاع پیدا کردید، پیش از فشردن دکمه ارسال باید آخرین بررسی را نیز انجام بدهید:

1. آیا آدرس فرستنده قابل مشاهده است؟
2. آیا یک لینک به نسخه اینترنتی ایمیل در بالای آن وجود دارد؟
3. آیا از عنوان مناسبی استفاده کرده اید؟
4. آیا متن را برای پیداکردن غلط های املایی احتمالی بررسی کرده اید؟
5. آیا یک لینک لغو اشتراک در انتهای ایمیل وجود دارد و آیا این لینک به درستی کار می کند؟
6. آیا طراحی شما کاملاً واکنشگرا است؟
7. آیا همه لینک های ایمیل به درستی کار کرده و کاربر را به صفحات فرود مربوطه هدایت می کنند؟
8. آیا برای همه تصاویر از alt text یا متن جایگزین استفاده کرده اید؟
9. آیا برای اطمینان از نمایش درست ایمیل خود در برنامه ها و پلتفرم های مختلف، آن را تست کرده اید؟
10. آیا ایمیل شما عاری از ویژگی های رایج ایمیل های اسپم است؟

 

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