چگونه با HTML خبرنامه ایمیلی بنویسیم؟

خبرنامه‌های ایمیل HTML از سال ۲۰۰۶ که این مطلب منتشر شد تا به حال مسیر زیادی را طی کرده‌اند. ایمیل HTML هنوز برای ناشران و خوانندگان یک مدیوم ارتباطی فوق العاده موفق است. با استفاده از این روش ناشران می‌توانند باز، فوروارد و کلیک شدن در ایمیل‌ها را ردیابی کنند و میزان علاقه‌ی کاربران به محصولات و عناوین مختلف را بررسی نمایند. در این حالت خواننده‌ها اطلاعات را به صورت یک صفحه‌ی اینترنتی، با ظاهری جذاب‌تر و به شکلی که مطالعه و گشت و گذار در آن‌ها ساده‌تر از متن معمولی است مشاهده می‌کنند.

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

اصول اساسی ایمیل HTML

بزرگترین مشکلی که بر سر راه نوشتن ایمیل HTML وجود دارد این است که نرم‌افزارهای مختلف و زیادی برای خواندن ایمیل وجود دارد، از ابزارهای دسکتاپ مثل Eudora، Outlook، AOL، Thunderbird و Lotus Notes گرفته تا سرویس‌های مبتنی بر وب نظیر Yahoo!، Hotmail و Google و اپلیکیشن‌هایی که برای تلفن‌های هوشمند و تبلت‌ها توسعه داده شده است. نرم‌افزاری که برای رندر کردن HTML در هر یک از این ابزارها وجود دارد مشخص می‌کند که کدام کد HTML و CSS باید کار کند و کدامیک نباید کار کند.

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

چه بخواهید ایمیل HTML را به صورت دستی بنویسید (روش انتخابی من) یا این که از قالب‌های موجود استفاده کنید،  دو مفهوم اساسی وجود دارد که در هنگام ساخت ایمیل‌های HTML باید آن‌ها را به یاد داشته باشید:

1. برای کنترل چیدمان طراحی و نمایش بعضی از عناصر از جداول HTML استفاده کنید. اگر برای طراحی صفحات وب به استفاده از CSS محض عادت کرده‌اید، باید بدانید که این روش در محیط ایمیل جواب نمی‌دهد.
2. برای کنترل نمایش عناصر دیگری که در ایمیلتان قرار دارد، مثل رنگ پس‌زمینه و فونت‌ها، از CSS درون خطی (inline) استفاده کنید.

سریع‌ترین و ساده‌ترین روش برای مشاهده‌ی نحوه‌ی تعامل جداول HTML و CSS درون خطی در یک ایمیل HTML این است که چند قالب آماده از Campaign Monitor یا MailChimp دانلود کنید. زمانی که یکی از این قالب‌ها را باز کردید، متوجه چیزهایی خواهید شد که در ادامه با جزئیات در مورد آن صحبت می‌کنیم:

• استفاده از استایل‌های CSS در زیر برچسب body قرار دارد و نه بین برچسب head.
• از کدهای کوتاه شده‌ی CSS مثل font: 12px/16px Arial, Helvetica استفاده نشده، در عوض باید هر بخش را به صورت جداگانه بنویسید. یعنی font-family، font-size و line-height را از یکدیگر جدا کنید.
• برخلاف جداول HTML که بخش اعظمی از چیدمان کار را به عهده دارند، از برچسب‌های span و div به ندرت استفاده شده است.
• استفاده از استایل‌های CSS خیلی ساده است و از هیچ فایل CSS-ای استفاده نشده است.

در سایت Code HTML Email هم ایمیل‌های HTML واقعی‌ای قرار داده شده که می‌توانید آن‌ها را دانلود و مطالعه کنید.

مرحله ۱: استفاده از جداول HTML برای چیدمان صفحه

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

پس چیزهایی که در مورد نمونه‌های استاندارد و نشانه گذاری‌های بهینه می‌دانید را کنار بگذارید؛ چرا که قرار است کمی دستمانمان را کثیف کنیم!

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

یک چیدمان تک-ستونه معمولا از موارد زیر تشکیل می‌شود:

1. هدری که شامل یک لوگو و لینک‌های رهیابی وبسایت والد است تا ضمن القای حس آشنایی، برند سازی را هم پیاده کند
2. لینک‌های درون-ایمیلی به داستان‌هایی که در انتهای ایمیل آمده است
3. فوتری در پایین ایمیل که اغلب شامل لینک‌هایی مشابه بخش رهیابی بالا و دستورالعمل‌های مربوط به لغو اشتراک است

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

ایمیل‌های تبلیغاتی هم از چنین قواعدی پیروی می‌کنند، با این تفاوت که محتوا و لینک‌های آن‌ها بسیار کمتر است. آن‌ها معمولاً یک یا دو پیام دارند، و گاهی اوقات از یک تصویر بزرگ به همراه یک متن توضیحی استفاده می‌کنند و لینک‌ها را زیر این عکس می‌آورند.

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

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

من از این روش برای ساختن ایمیل‌های HTML استفاده می‌کنم:

• در چیدمان دو-ستونه، برای هر بخش یعنی هدر، دو ستون محتوای مرکزی و فوتر یک جدول بسازید که در مجموع سه جدول می‌شود. این جداول را درون یک جدول دیگر قرار دهید. برای جیدمان تک-ستونه هم از همین روش استفاده کنید، ولی برای جدول محتوا یک ستون در نظر بگیرید. این روش خصوصاً اگر در طراحی ایمیل از تصاویری استفاده کرده باشید که در سلول‌های مختلف جدول شکسته شده باشند مفید است. در غیر این صورت، یک جدول مجزا که سطور آن با برچسب td ساخته شده باشد برای هدر (اگر طراحی مشتمل بر دو ستون است، با colspan=2)، محتوا و فوتر در همه‌ی نرم‌افزارهای ایمیلی به جز Lotus Notes باید به درستی به نمایش در آید.
• برای کنترل نمایش جدول از ویژگی‌های برچسب table و td استفاده کنید. برای مثال، مقدار border=”۰”، valign=”top”، align=”left” (یا به دلخواه شما center)، cellpadding=”۰”، cellspacing=”۰” و به همین صورت. این روش در وهله‌ی اول به کلاینت‌های قدیمی‌تر ایمیلی کمک می‌کند تا ایمیل‌ها را به روش نسبتاً قابل قبول‌تری به نمایش بگذارند.
• حتی اگر طراحی ایمیل شما مرز (Border) نداشته باشد، بهتر است مقدار آن را به صورت border=”۱” تعریف کنید تا راحت‌تر بتوانید مشکلات مربوط به ترازبندی برچسب‌های tr و td را پیدا نمایید. بعد از این که کار طراحی به طور کامل به پایان رسید، می‌توانید آن را به border=”۰” تبدیل کنید.

اگرچه این روش ممکن است برای مطلق‌گرایانی که همیشه از جدیدترین استاندارها استفاده می‌کنند مطلوب نباشد، اما در حال حاضر تنها روش موجود برای انجام این کار است. منتهی این حقیقت که ما برای چیدمان صفحه از جداول استفاده می‌کنیم به معنای این نیست که باید به طور کامل به روش‌های سنتی پایبند باشیم. مثلاً صرف نظر از این که Lotus Notes چقدر در نمایش ایمیل‌های HTML ضعیف عمل می‌کند، هرگز نباید از برچسب font استفاده نمایید. و با وجود این که موتور پردازش HTML نرم‌افزار Outlook 2007 بی‌نقص نیست، ولی جدول‌های HTML پایه را به خوبی نشان می‌دهد.

البته هشدارهایی هم وجود دارد، اما فعلا بگذارید در بخش بعدی نگاهی به قسمت استایل متن بیندازیم.

مرحله ۲: افزودن استایل‌های CSS

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

ابتدا، مطابق مثال زیر برای ذخیره سازی اطلاعات استایل خود از استایل‌های درون خطی استفاده کنید:

<p style=”color: red;”></p>

این قضیه شامل برچسب‌های table، td، p، a و نظایر آن هم می‌شود.

از اعلان CSS style در برچسب head فایل HTML پرهیز کنید. در عوض، اعلان style را درست زیر برچسب body قرار دهید. البته Google Mail در ایمیل به دنبال اعلان style گشته و (خوشبختانه) آن را حذف می‌کند. علاوه بر این، برای ارجاع دادن یک صفحه‌ی استایل خارجی خودتان را با استفاده از عنصر link به زحمت نیندازید. Google Mail، Hotmail و دیگر نرم‌افزارهای ایمیلی این ارجاعات خارجی به صفحه‌ی استایل را نادیده گرفته، آن را تغییر داده یا حذف می‌کنند.

در جدول کلی شما – جدولی که در بر گیرنده‌ی جداول هدر، محتوا و فوتر است – عرض جدول را به مقدار ۹۸% در نظر بگیرید. چون سرویس Yahoo! برای نمایش صحیح ایمیل‌ها از هر دو طرف به ۱% نیاز دارد. اگر حاشیه‌های کناری صفحه در طراحی ایمیل شما مهم است، برای جلوگیری از به وجود آمدن مشکل، عرض را به صورت ۹۵% یا حتی ۹۰% در نظر بگیرید. البته، جداول داخل جدول کلی همه باید ۱۰۰% باشند.

استایل عمومی فونت را درون آن برچسب td که از همه بیشتر به محتوا نزدیک است قرار دهید. بله، این کار باعث می‌شود اعلان استایل در سلول‌های td مختلف تکرار شود. تعریف استایل فونت را در صورت لزوم درون برچسب‌های عنوان (مثل h1, h2)، p یا a قرار دهید.

برای شناور کردن جعبه‌های کوچک محتوا و وصل کردن آن‌ها به سمت راست یا جپ سلول‌های td جدول، در حد کم می‌توانید از برچسب‌های div استفاده کنید. حداقل در یک مورد یعنی Google Mail به نظر می‌رسد که اعلان شناورسازی‌های CSS نادیده گرفته می‌شود (اگرچه Yahoo! و Hotmail مشکلی با این روش ندارند). گاهی اوقات به جای این که فقط به اعلان شناورسازی تکیه کنید، بهتر است چیدمان جدولی پیچیده‌تری بسازید. یا، با توجه به این که احتمال به هم ریختن ایمیل خیلی زیاد است، توصیه می‌کنیم از یک طراح بخواهید تا محتوای شناور مورد نظر شما را درون ستون باریک کناری قرار دهد.

اگرچه برچسب‌های div ظاهراً چندان کاربردی ندارند، اما به نظر می‌رسد که span همیشه راه حل بهتری باشد، چون این برچسب یک عنصر درون خطی است. در برخی موارد، از برچسب‌ّهای span برای مصارفی جز رنگ‌دار کردن یا تغییر اندازه‌ی متن هم می‌توان استفاده نمود. به کمک این برچسب می‌توان موقعیت متن را هم تغییر داد.

به یاد داشته باشید که بعضی از سرویس‌های ایمیلی برای واضح‌تر کردن و بهبود امکان خوانش کدها در نرم‌افزارهای ایمیلی، تعاریف استایل‌ها را می‌شکنند. یعنی مثلاً ممکن است استایل کوتاه شده‌ی style=”margin: 10px 5px 10px 0;” مطابق آن چه قبلاً گفته شد به اعلان‌های طولانی‌تر تبدیل شود. هر ایمیل را آزمایش کنید و ببینید که چه بلایی در کدها می‌آید. با کدهای کوتاه CSS شروع کنید، چون در بدترین حالت در همه‌ی نرم‌افزارهای ایمیلی به خوبی کار می‌کنند.

اگر قالب‌های ایمیلی را از Campaign Monitor و MailChimp دانلود و مطالعه کرده باشید، می‌بینید که آن‌ها طوری با جدول اصلی برخورد می‌کنند که گویی این جدول همان برچسب html body است. تیم Campaign Monitor به این جدول تحت عنوان BodyImposter اشاره می‌کند که یک راه فوق العاده برای در نظر گرفتن قاب یا جدول در بر گیرنده است. از منظر CSS، اگر سرویس‌هایی مثل Google Mail برچسب body را غیر فعال نکنند یا آن را نادیده نگیرند، جدول اصلی عملکردی مشابه html body خواهد داشت.

مرحله ۳: رسیدن به بهترین حالت

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

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

اولین ابزارهای آزمایشی فایرفاکس و Internet Explorer هستند. اگر ایمیل شما در هر دو مرورگر مذکور به درستی به نمایش در می‌آید، احتمالاً در سرویس‌هایی مثل Outlook، Yahoo!، Google Mail و غیره هم مشکلی نخواهید داشت. اگر ممکن است پیشنهاد می‌کنم ایمیل خود را در Internet Explorer 6 امتحان کنید، با این کار می‌توانید بفهمید که ایمیل‌تان در Outlook 2003 به چه شکلی خواهد بود (برای کسب اطلاعات بیشتر در مورد نحوه‌ی اجرای Internet Explorer 6 به لیست منابع موجود در انتهای این مطلب مراجعه کنید). در انتها برای این که ببینید ایمیل‌تان در آیفون یا آیپدهای قدیمی به چه صورت است، می‌توانید آن را در مرورگر Safari آزمایش نمایید.

بعد از این که ایمیل شما در هر دو مرورگر بدون مشکل به نمایش در آمد، برای ارسال ایمیل به چند حساب کاربری آزمایشی نیاز دارید. در این روش بهتر است سرویس‌های Yahoo!، Hotmail و Google Mail را در نظر داشته باشید.

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

در ادامه چند مورد از متداول‌ترین کدهایی که برای انجام این آزمایش مورد نیاز است را برای شما می‌آوریم:

• گاهی اوقات لازم است مقدار عرض را از مقدار درصدی به ثابت تبدیل کنید. با این وجود این روش ایده‌آل نیست، چون خوانندگان امکان تغییر اندازه‌ی پنجره‌های ایمیل را دارند و معمولاً هم این کار را انجام می‌دهند. بعضی مواقع استفاده از مقادیر ثابت تنها روش موجود برای نمایش صحیح یک صفحه در کلاینت‌های گوناگون ایمیلی است.
• اگر در طراحی ایمیل در فاصله‌ی ستون‌ها ایرادی وجود دارد، ابتدا ویژگی cellpadding و cellspacing جداول HTML را امتحان کنید. اگر کار نکرد، ویژگی‌های margin و padding زبان CSS را اعمال نمایید. فاصله گذاری HTML در نرم‌افزارهای ایمیلی قدیمی‌تر بهتر کار می‌کند.
• در صورتی که یک سلول td درست در زیر یک برچسب img بسته شود، احتمال جابجایی تصویر وجود دارد. این مسئله در HTML قدمت زیادی دارد. اگر برچسب </td> را (در همان خط) درست بعد از img قرار دهید، مشکل اعصاب خورد کن و مبهم فاصله‌ی ۱ پیکسلی حل می‌شود.

به علاوه، بهتر است توصیه‌های زیر را هم در نظر داشته باشید:

• از جاوا اسکریپت پرهیز کنید. اکثر نرم‌افزارهای ایمیلی در هر صورت آن را غیر فعال می‌کنند.
• اگر تصویری به صورت قطعه قطعه در سلول‌های مختلف جدول پخش شده است، ایمیل خود را با چندین اکانت مختلف تست کنید. گاهی اوقات خروجی در Outlook عالی است، اما شاید در Hotmail یا بعضی از سرویس‌های دیگر چند پیکسل جابجایی داشته باشد. همچنین در نظر بگیرید که اگر تصویر را در یک جدول HTML جدید که همه‌ی سطرها و ستون‌ها را می‌پوشاند به تصویر پس‌زمینه تبدیل کنید، بخش‌هایی از تصویر زمینه‌ی شما به نمایش در می‌آید و اثری مشابه همان قطعه قطعه شدن عکس خواهد داشت. اما در این روش به رغم استفاده کردن از کد کمتر، نتیجه‌ی بهتری به دست می‌آید. به یاد داشته باشید که Outlook 2007 تصاویر پس‌زمینه را نشان نمی‌دهد، پس حتماً کد ایمیل‌تان را با نرم‌افزار ایمیل مورد نظر خود آزمایش کنید.
• برای تصاویر پس‌زمینه، به جای استفاده از CSS از ویژگی background جدول استفاده کنید. این روش برای نمایش یکسان در نرم‌افزارهای ایمیلی مختلف ایستایی بیشتری نسبت راهکارهای دیگر دارد.
• تصاویر ایمیل را روی یک وب سرور، ترجیحاً در پوشه‌ای مجزا از تصاویر وبسایت (برای مثال در پوشه‌ای به نام /images/email)، ذخیره کنید، و آن‌ها را حذف نکنید. بعضی از کاربران ایمیل‌ها را هفته‌ها یا حتی ماه‌ها بعد باز می‌کنند، پس نباید سریع آن‌ها را حذف نمود.
• حتماً در همه‌ی تصاویر خود از ویژگی‌های alt، height و width استفاده کنید. استفاده از این ویژگی‌ها نتیجه‌ی کار را در Google Mail بهبود بخشیده و حتی اگر یک خواننده نمایش تصاویر را غیر فعال کرده باشد، چیدمان ایمیل شما را حفظ می‌کند. البته Outlook 2007 ویژگی alt را شناسایی نمی‌کند.
• برای برچسب‌های a از ویژگی target=”_blank” استفاده کنید تا افرادی که ایمیل شما را از روی سرویس‌های وب می‌خوانند، وقتی روی یک لینک کلیک می‌کنند صفحه‌ی مورد نظر شما در زبانه‌ی جدیدی باز شود و روی صفحه‌ی فعلی بارگذاری نشود.
• از تصاویر ۱x1 پیکسلی می‌توان برای ایجاد فاصله در چیدمان ایمیل استفاده کرد، اما اسپمرها معمولاً از این روش برای تشخیص این که ایمیل‌شان خوانده شده یا نه استفاده می‌کنند. بنابراین اگر شما هم از این روش استفاده نمایید، احتمال این که ایمیل‌تان به عنوان اسپم شناخته شود افزایش می‌یابد.
• به طور مشابه، بهتر است از به کارگیری تصاویر بزرگ در نیمه‌ی بالایی ایمیل اجتناب کنید. این هم یکی از روش‌های مرسوم اسپمرهاست و ممکن است باعث شود که ایمیل شما هم به عنوان اسپم شناخته شود.

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

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

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

• آیا آدرس فرستنده (From) به درستی نمایش می‌یابد (به عنوان یک نام، نه یک آدرس ایمیل معمولی)؟
• آیا خط موضوع درست است؟
• آیا اطلاعات تماس صحیح و از نظر دیداری واضح است؟
• آیا در بالای ایمیل متنی مشابه «این ایمیل را دریافت کردید چون…روش لغو عضویت در انتهای ایمیل توضیح داده شده است» وجود دارد؟
• آیا در ایمیل شما از خواننده خواسته شده که آدرس فرستنده را در مخاطبان خود ذخیره کند؟
• آیا در بالای ایمیل شما لینکی وجود دارد که کاربر را به نسخه‌ی وب این پیغام ارجاع دهد؟

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

مرحله ۴: راهنمایی برای Google Mail، Lotus Notes و Outlook 2007

Google Mail، Lotus Notes و Outlook 2007 چالش‌های کدنویسی مخصوص به خود را دارند. باور کنید یا نه، در Outlook 2007 پشتیبانی از CSS نسبت به نسخه‌های قبل آن کمتر شده است!

نبود پشتیبانی در Google Mail قابل اغماض است، چون این اپلیکیشن در یک مرورگر اجرا می‌شود، و نمی‌تواند محتوای نمایشی ایمیل‌ها را کنترل کند. در نتیجه، مهندسان گوگل تدابیری اندیشیده‌اند که مطمئن شوند که صرف نظر از کیفیت HTML یا CSS-ای که ایمیل با آن نوشته شده، نمایش به درستی صورت گیرد.

از این رو، Google Mail شبیه نرم‌افزارهای دهه‌ی ۱۹۹۰ کار می‌کند، زمانی که استانداردهای وب بدوی بودند. اگر بخواهید می‌توانید ببینید که رویکرد Google Mail در پردازش ایمیل‌های HTML دقیقاً چگونه است، اما انجام این کار کمی کار می‌برد.

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

ولی خبر خوب این است که اگر موارد عجیب این سه اپلیکیشن بزرگ را رعایت کنید، اگر نگوییم در همه، اما حداقل در اکثر کلاینت‌ها مشکلی از جهت نمایش نخواهید داشت.  در ادامه به ذکر چند تکنیک می‌پردازیم که ظاهراً در Google Mail و نرم‌افزارهای قدیمی‌تر کار می‌کنند:

• رنگ پس‌زمینه را در یک سلول td و با استفاده از ویژگی bgcolor مشخص کنید، نه استایل‌های CSS.
• همان طور که بالاتر گفتیم، به جای استفاده از CSS برای تعیین تصویر زمینه از ویژگی background سلول‌های td استفاده نمایید. یکی از اثرات جانبی این روش این است که تصویر پس‌زمینه را تا جایی که بخواهید می‌توانید بلند در نظر بگیرید. اگر محتوایی که در قالب ایمیل استفاده کردید از نظر اندازه تغییر می‌کند، بهتر است از یک تصویر پس‌زمینه‌ی خیلی بلند استفاده کنید تا ارتفاع ایمیل بسته به ارتفاع متن کوتاه یا بلند شود. به یاد داشته باشید که Outlook 2007 به کلی تصاویر پس‌زمینه را نادیده می‌گیرد.
• برای کنترل حاشیه‌ی داخلی سلول‌های td بهتر است از اعلان padding استفاده کنید. استایل margin در این سلول‌ها کار نمی‌کند ولی می‌تواند از padding کمک بگیرید.
• اگر اطراف یک سلول td به border نیاز دارید، به یاد داشته باشید که اگر سلول td درون div تعریف شده باشد، Google Mail به صورت پیشفرض یک مرز اطراف آن نشان می‌دهد، ولی اگر این مرز به صورت یک استایل درون برچسب td معرفی شده باشد چنین اتفاقی رخ نمی‌دهد.
• اگر می‌خواهید روی یک زمینه‌ی تیره، لینک رنگ روشن داشته باشید، فونت را درون سلول td تعریف کنید (تا به برچسب‌های p و a هم منتقل شود)، سپس استایل color: را در برچسب a اضافه نمایید.
• اگر اندازه‌ی فونت برچسب‌های p و a با هم فرق دارد، برچسب a را داخل برچسب p قرار دهید.
• گوگل از ستون سمت راست رابط کاربری Google Mail برای خودش استفاده می‌کند، بنابراین ایمیل HTML شما به پنل مرکزی منتقل می‌شود. مطمئن شوید که استایل padding در td-های محتوا از هر طرف برابر ۱۰ تنظیم شده باشد تا متن به سمت لبه چپ و راست منتقل نشود.
• در صورتی که ایمیل HTML خود را با یک حساب کاربری Google Mail آزمایش کنید، این احتمال وجود دارد که یک یا چند استایل فونت در تگ‌های td، h1، h2، p، a و نظایر آن از دست برود. همه‌ی فونت‌ها را به دقت بررسی کنید تا مطمئن شوید که Google Mail به درستی همه‌ی آن‌ها را نشان دهد.

به جز Google Mail یکی از کابوس‌های برنامه نویسان در هنگام نوشتن ایمیل‌های HTML کلاینت Lotus Notes است. بسیاری از شرکت‌های بزرگ هنوز هم به استفاده و به‌روز رسانی این برنامه ادامه می‌دهند.

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

در هنگام استفاده از کلاینت Lotus Notes ممکن است تغییراتی را در ایمیل HTML خود ببینید که تقریباً ورای باور باشد. برای مثال، نسخه‌های قدیمی Notes می‌توانند تصاویر را به فرمت‌های اختصاصی‌شان تبدیل کنند، یا این که از بخشی از کد معمولی HTML در یک ایمیل چشم پوشی و در یک ایمیل دیگر آن را به خوبی به نمایش بگذارند.

در ذیل به چند نکته اشاره می‌کنیم که در نمایش صحیح ایمیل HTML در Notes به شما کمک می‌کند:

• همان طور که قبلاً اشاره کردیم، از جدول در بر گیرنده‌ای استفاده کنید که همه‌ی جداول چیدمان داخلی (یعنی هدر، محتوا و فوتر) را شامل شود. این کار ایمیل را درون یک تکه‌ی HTML نگه می‌دارد، پس اجزای چیدمان در هنگام نمایش در Notes سردرگمی کمتری خواهند داشت.
• با تعیین عرض جدول با مقدار درصدی و/یا استفاده از cellpadding-ای که حداقل ۵ باشد، پیرامون جدول در بر گیرنده‌ی خود حاشیه ایجاد کنید.
• همان طور که قبل‌تر گفتیم، از اعلان style در تگ head ایمیل خود اجتناب کنید. این روش با استاندارهای وب سازگاری بیشتری دارد، اما Notes (هم مثل Google Mail) ممکن است استایل‌های شما را پاک کند. پس بهتر است در تگ‌هایی مثل table، td، h1، h2، p و a به استایل‌های درون خطی تکیه کنید.
• برای ذخیره سازی تصاویر در وب سرور از آدرس‌های مطلق استفاده کنید. شاید در قبال تبدیل تصاویر در Notes نتوانید کاری کنید، ولی استفاده از تصاویر از راه دور می‌تواند به شما کمک کند.
• لینک‌های داخل ایمیل که به بخشی از متن اشاره می‌کنند به ندرت در Notes جواب می‌دهند. بهترین کار این است که از این مدل لینک‌ها استفاده نکنید.
• در جداول HTML از colspan-ها پرهیز کنید. Notes – به خصوص در نسخه‌های قدیمی‌تر – فقط می‌تواند با چیدمان‌های پایه‌ای جدول کار کند.
• مطمئن شوید که عرض سلول td شما دقیق است. برخلاف مرورگرهای وب که عرض سلول‌ها را به طور پیشفرض در حداکثر قرار می‌دهند، Notes اندازه‌ی هر سلول td را مطابق عرضی که برای آن تعریف شده در نظر می‌گیرد.
• چیدمان ایمیل‌ها را معمولاً در Notes نمی‌توان به صورت مرکزی قرار داد، چون طراز آن عموماً به سمت چپ است.

با استفاده از این تکنیک‌ها می‌توانید مطمئن شوید که ایمیل شما در Outlook 2007 هم که از یک موتور پردازش HTML قدیمی‌تر استفاده می‌کند، بدون مشکل نشان داده خواهد شد. مایکروسافت جزئیات مربوط به چیزهایی که در نرم‌افزار این شرکت به خوبی به نمایش در می‌آید و چه چیزهایی نه را منتشر کرده است. (برای کسب اطلاعات بیشتر در این مورد، می‌توانید به بخش منابع موجود در انتهای مطلب بروید).

Campaign Monitor یک سرویس تحویل ایمیل است که در لیست جامعی به معرفی همه‌ی عناصر CSS پشتیبانی شده در موبایل‌ها، نسخه‌های وب و کلاینت‌های ایمیلی دسکتاپ اشاره می‌کند.

مرحله ۵: کدنویسی برای موبایل‌ها و تبلت‌ها

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

راهکار انجام این کار این است که با استفاده از تعریف @media در CSS سلول‌های جدول HTML و اندازه‌ی فونت را به شکل صحیح مشخص کنید. برای نمونه، فونت‌های آیفون برای خوانایی باید حداقل ۱۳ پیکسل باشند. اما بهترین بخش ماجرا این جاست که به رغم نادیده گرفته شدن کدهای @media توسط نسخه‌ی وب و دسکتاپ ایمیل، این کدها به وسیله‌ی موبایل‌ها و تبلت‌ها خوانده شده و اجرا می‌گردند.

کد زیر نمونه‌ای از تعریف @media برای نمایش یک جدول HTML تک-ستونه برای موبایل و تبلت است:

@media only screen and (max-width: 480px) {  /* mobile-specific CSS styles go here */  table[class=email], table[class=email-content] {     clear: both;    width: 320px !important;    font-size: 13px !important;  }}

کد @media را به طور مستقیم در زیر body tag class=”email” کد table و class=”email-content” سلول‌های td خود قرار دهید. زمانی که ایمیل HTML شما با یک دستگاه (یا مرورگر وبی که به شکل افقی تغییر اندازه داده شده) با اندازه‌ی کمتر از ۴۸۰ پیکسل به نمایش گذاشته می‌شود، این کدها فعال می‌گردند.

برای سازگار سازی صفحه با موبایل‌ها و تبلت‌های کوچک، از ایمیل‌های HTML دو-ستونه استفاده کنید، و هر ستون را درون جدول خودش قرار دهید. سپس در هر جدول HTML، برای شناور کردن هر ستون جدول به سمت راست از CSS درون خطی float: right و align=”right” استفاده نمایید. بعد class=”email” را به کد table، و class=”email-content” را هم به سلول‌های td خود اضافه کنید.

با کد @media بالا، در نمایشگرهایی که عرض آن‌ها کمتر از ۴۸۰ پیکسل است، این کار باعث می‌شود تا ستون‌های چپ و راست همان مقدار عرضی را بگیرند که در ستون محتوای سمت چپ و اسلایدهای زیر ستون اصلی وجود دارد.

از این روش برای اعمال تغییراتِ طراحی ِچیدمانی که برای کار کردن در موبایل‌ها و تبلت‌ها نیاز است استفاده می‌شود.

این راهکار از راهنمای فوق العاده‌ای به نام Responsive Email Design که در سایت Campaign Monitor قرار دارد نشئت گرفته شده که جزئیات و ایده‌های بیشتری در مورد چگونگی ریسپانسیو کردن ایمیل‌های HTML برای انداره‌های مختلف صفحات نمایش ارائه می‌کند.

چکیده

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

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

برای مطالعه‌ی بیشتر

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

• Campaign Monitor: Guide to CSS Support in Email
• Campaign Monitor: Responsive Email Design
• MailChimp: Email on Mobile Devices
• MailChimp: Email Blueprints
• MailChimp: Email Marketing Field Guide

و چند مورد دیگر…

Email Standards Project

اگر می‌خواهید بدانید که هر کلاینت ایمیلی ِمختلف دقیقاً تا چه اندازه‌ای از HTML و CSS پشتیبانی می‌کند، بهترین نقطه برای آغاز Email Standards Project است. این سایت یک تست اسید هم دارد که از آن می‌توان برای مقایسه‌ی میزان پذیرش کد در نرم‌افزارهای ایمیلی مختلف استفاده کرد، و در آن چند روش هم برای کمک به بهبود پشتیبانی ایمیل از استانداردهای وب وجود دارد.

قالب‌های ایمیل HTML رایگان Campaign Monitor و MailChimp

هر دو سرویس تحویل ایمیل مذکور به صورت فعال قالب‌های خود را در طول زمان با کلاینت‌های ایمیلی مختلف آزمایش می‌کنند. با این حال، در نحوه‌ی رویکرد هر یک تفاوت‌های زیرکانه‌ای وجود دارد. مثلاً Campaign Monitor اعلان style را درون تگ head قرار می‌دهد، در حالی که MailChimp چنین کاری نمی‌کند. حتماً کد نهایی HTML خود را با کلاینت‌های گوناگونی که توسط افراد موجود در لیست ایمیل شما وجود دارد تست کنید.

راهنمای طراحی ایمیل‌های متنی ساده

این مقاله لیستی از تکنیک‌های ساده که کار اسکن ایمیل‌های متنی را ساده‌تر می‌کند ارائه داده است.

آزمایش ایمیل HTML

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

مقاله‌هایی در مورد تصاویر ایمیلی مسدود شده در Campaign Monitor

از سال ۲۰۰۴، مقاله‌ی ClickZ نشان می‌دهد که در صورت غیر فعال بودن تصاویر یا نمایش محتوا در پنل پیش نمایش، عملکرد نرم‌افزارهای ایمیلی بزرگ چگونه است. مقاله‌ی Campaign Monitor وارد جزئیات بیشتری شده و به نمونه‌های واقعی و ایده‌هایی در مورد چگونگی پردازش ایمیل در حالتی که تصاویر غیر فعال باشد اشاره می‌کند. به علاوه به نحوه‌ی طراحی ایمیل به شکلی که در پنل‌ّهای پیش نمایش ظاهر مناسبی داشته باشد هم می‌پردازد.

قابلیت‌های پردازشی HTML و CSS ورد ۲۰۰۷ در Outlook 2007

این مقاله توضیحات رسمی مایکروسافت در مورد این است که در کدهای HTML و CSS کلاینت Outlook 2007 چه مواردی پردازش می‌شود و چه مواردی پردازش نمی‌شود. این قضیه شامل لینکی به یک اعتبار سنجی است که علاوه بر ابزارهای ویرایشی مایکروسافت با Dreamweaver هم کار می‌کند.

آموزش کدنویسی و تحویل ایمیل HTML در MailChimp

شامل اطلاعات فوق العاده‌ای درباره‌ی همه‌ی جنبه‌های ایمیل HTML نظیر چگونگی عملکرد فیلترهای اسپم است.

مجموعه‌ی «اسرار ایمیل HTML»

برخی از این اطلاعات قدیمی است اما در مورد Lotus Notes نکات خوبی دارد.

CSS و ایمیل در A List Apart

این مقاله‌ی بی‌نظیر در مورد رویکرد متکی بر CSS ایمیل‌های HTML توسط وبسایت A List Apart منتشر شده است. نکته: نویسنده این مقاله را به‌روز کرده و آن را در وبلاگ Campaign Monitor در مطلبی به نام بهینه‌سازی ارائه‌ی CSS در ایمیل‌های HTML به اشتراک گذاشته است.

چگونه کدهای HTML روی قابلیت تحویل ایمیل‌ها اثر می‌گذارد

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

نظرتان در رابطه با این مقاله چیست؟ دیدگاه های خود را در این باره با گویا آی تی در میان بگذارید و تجربیات خود را حین کد نویسی در این موضوع در بخش نظرات بنویسید و این مطلب را روی شبکه های اجتماعی نشر دهید.