ایمیل HTML در جیمِیل (Gmail): دوازده نکته ای که باید بدانید
ما در بخش آموزش ایمیل مارکتینگ یا بازاریابی ایمیلی گویا آی تی به کرّات به بیان نکات و اصول مهم این نوع مهم، تاثیرگذار و مقرون به صرفه از بازاریابی پرداخته ایم. در مطالب مشابهی که از این به بعد شاهد آنها خواهید بود وارد مسائل جزئی تری خواهیم شد و به زیرساخت ها و حتی مباحث کدنویسی ایمیل اشاره خواهیم کرد. در مطلب حاضر، به ۱۱ نکته در رابطه با جیمِیل اشاره می کنیم که در هنگام طراحی ایمیل حتماً باید آنها را مد نظر قرار دهید.
-
جیمیل چندین برنامه مدیریت ایمیل دارد
اگرچه جیمیل بیشتر به واسطه سرویس وب میل و اپ موبایلی خود به همین نام شناخته می شود، اما در واقع نسخه ها و مظاهر متعددی دارد که از آن جمله می توان به اپ اینباکس، G Suite برای کسب و کارها و همچنین نسخه مشکل آفرین (شماره ۲ را ببینید) اندروید آن اشاره کرد که به منظور دسترسی به ایمیل از طریق POP یا Imap طراحی شده است.
-
اپ جیمیل برای حساب های غیر گوگلی (Gmail app for non-google accounts یا GANGA) از تصاویر پس زمینه پشتیبانی نمی کند
اپ اندروید جیمیل که به صورت پیش فرض روی بسیاری از گوشی های اندروید نصب شده است قابلیت دسترسی به حساب های ایمیل غیر گوگل با استفاده از POP و IMAP را نیز دارد. در عین حال، ایمیل هایی که از این طریق باز می شوند فاقد استایل تعبیه شده یا embedded هستند (<style>) و امکان نمایش تصاویر پس زمینه را ندارند.
-
جیمیل فقط ۱۰۲ کیلوبایت از پیام شما را نمایش می دهد
اگر حجم ایمیل شما از ۱۰۲ کیلوبایت بیشتر شود، جیمیل ۱۰۲ کیلوبایت ابتدای آن را به همراه این پیام نشان می دهد:
[Message clipped] View entire message
هنگامی که کاربر برای مشاهده کل پیام روی لینک این متن کلیک می کند، ایمیل در یک پنجره جدید به نمایش در می آید.
اگر به حجم ۱۰۲ کیلوبایت نزدیک شده اید با حذف فضاها و آیتم های غیرضروری می توانید حجم ایمیل خود را کاهش دهید.
پیشنهاد ما این است که از تصاویر و فایلهای تعبیه شده (تصاویر و فایل هایی که مستقیماً با ایمیل ارسال می شوند) استفاده نکنید. بهتر است که منبع تصاویر شما جای دیگری باشد و به فایل های خود نیز لینک بدهید.
-
جیمیل فقط در <head> از <style> پشتیبانی می کند
جیمیل از استایل های تعبیه شده (<style>) پشتیبانی می کند، اما این پشتیبانی فقط به محدوده <head> ایمیل محدود می شود. همانطور که قبلاً نیز به آن اشاره شد، اپ اندروید جیمیل برای ایمیل های سایر سرویس دهنده ها اصلاً از <style> پشتیبانی نمی کند.
-
اگر بلاک <style> ایمیل شما با مشکلی مواجه شود، جیمیل آن را حذف می کند
جیمیل در تجزیه استایل های تعبیه شده به شدت بدقلق است و چنانچه حتی با یک خطا مواجه شود کل بلاک را حذف می کند.
جیمیل با یک اعلان (declaration) @ در یک اعلان @ دیگر سر سازگاری ندارد. یک راه برای دور زدن این مشکل این است که از چندین بلاک استایل استفاده کنید و استایلی که با جیمیل مشکلی ندارد را در بلاک بالایی قرار بدهید:
@media only screen and (max-width:320px) { @viewport { width:320px; } }
به علاوه اگر بلاک استایل شما از مرز ۸۱۹۲ کاراکتر عبور کند، جیمیل آن را حذف خواهد کرد. اگر تعداد کاراکتر بلاک استایل شما از ۸۱۹۲ عدد بیشتر است، آن را به دو بخش تقسیم کنید، چرا که جیمیل فقط آخرین بلاکی را حذف می کند که از آستانه ۸۱۹۲ کاراکتر تجاوز کرده است (محدودیت ۸۱۹۲ کاراکتری بر اساس مجموع بلاک های استایل شما محاسبه می شود).
-
جیمیل متن پیش عنوان را در کنار عنوان ایمیل نمایش می دهد
در جیمیل هم به مانند بسیاری از ایمیل خوان های مدرن، بخشی از متن بدنه ایمیل (متن پیش عنوان یا preheader) به طور خودکار بعد از عنوان به نمایش در می آید.
-
جیمیل از گزینشگرهای خصوصیات (attribute selector) و بیشتر شبه کلاس ها (pseudo-classes) پشتیبانی نمی کند
گزینشگرهای خصوصیات، مانند موردی که در زیر آمده است، امکان انعطاف پذیری بیشتری را در انتخاب عناصر در CSS فراهم می کنند. اگرچه از این گزینشگرها در نرم افزارهای مدیریت ایمیل مدرن مانند ایمیل iOS و Apple Mail پشتیبانی می شود، جیمیل از آنها پشتیبانی نمی کند.
div[class=”content”]{ color: red }
علاوه بر این، جیمیل از شبه کلاس ها، مانند :checked و :active هم پشتیبانی نمی کند و تنها در برنامه ایمیل مبتنی بر وب خود از :hover پشتیبانی می کند. در نتیجه، پشتیبانی از ایمیل های تعاملی در جیمیل بسیار محدود یا به کلی ناموجود است.
-
جیمیل روی تصاویر بزرگ بدون لینک یک آیکن دانلود قرار می دهد
جیمیل روی تصاویر بزرگی که فاقد لینک هستند یک آیکن دانلود قرار می دهد. این برای طراحانی که ترجیح می دهند که گوگل در کارشان مداخله نکند خوشایند نخواهد بود.
ساده ترین راهکار این است که تصاویری که از ۳۰۰×۱۵۰ بزرگتر هستند را لینک کنید.
-
جیمیل امکان تعیین مقادیر منفی را برای حاشیه (margin) از طریق CSS نمی دهد
بیشتر برنامه های مدیریت ایمیل مانند Outlook.com و Yahoo! Mail امکان تعیین ارقام منفی برای حاشیه را در اختیار طراح قرار نمی دهند و جیمیل هم از این جمع مستثنی نیست.
-
جیمیل به طور خودکار شماره های تلفن و آدرس های اینترنتی را لینک می کند
هر دو نسخه دسکتاپ و موبایل جیمیل شماره های تلفن را به لینک تبدیل می کنند. این لینک در نسخه دسکتاپ، کنسول چت متنی/صوتی جدید گوگل را باز می کند که در ستون سمت راست رابط کاربری جیمیل به نمایش در می آید.
برای جلوگیری از فعال شدن این ویژگی، از یک کد HTML غیر قابل شناسایی توسط جیمیل در شماره تلفن خود استفاده کنید؛ مثلاً « “& # 173; » (فاصله ها را بردارید)
۲۱۲&# 173;-389-۳۹۳۴
در مثال بالا کد مذکور قبل از هر خط فاصله قرار گرفته است.
به علاوه، اگر آدرس اینترنتی یا نشانی ایمیلی داشته باشید که لینک نداشته باشد، جیمیل به طور خودکار آن را لینک می کند. به عنوان مثال، name@test.com به کد زیر تبدیل خواهد شد:
<a href=“mailto:name@test.com”> name@test.com</a>
برای جلوگیری از تبدیل آدرس به لینک می توانید از یکی از این دو راهکار استفاده کنید:
۱- یک کد HTML اضافه کنید که توسط جیمیل قابل شناسایی نباشد، مثلاً:
بنابراین، name@test.com را به name@test&# 173;.com تبدیل می کنید و www.mydomain.com نیز به www.mydomain&# 173;.com تبدیل می شود. http://www.mydomain.com را به http://www.mydomain&# 173;.com تبدیل کنید (تمامی فاصله ها را بردارید).
۲- آدرس یا نشانی را با # لینک کنید، اما فرمت آن را با بقیه متن خود یکسان کنید. مثلاً:
<a href=’#’ style=“color:#000; text-decoration:none”> test@test.com</a>
-
جیمیل از HTML5 DOCTYPE استفاده می کند
فارغ از DOCTYPE تعیین شده در ایمیل، ایمیل شما در جیمیل با استفاده از HTML5 DOCTYPE رِندِر خواهد شد. این می تواند ظاهر نهایی ایمیل شما را نسبت به آنچه که در مرورگر قابل مشاهده است تغییر بدهد.
-
DOCTYPE جیمیل می تواند باعث ایجاد فضاهای اضافی در زیر تصاویر شود
برای رفع این مشکل می توانید از یکی از راهکارهای زیر استفاده کنید (این روشها در هاتمِیل و یاهو بتا نیز کار می کنند):
۱- استایل display:block را به تصویر اضافه کنید:
<img src=“test.jpg” style=“display:block”>
۲- استایل align absbottom را به تصویر اضافه کنید
<img src=“test.jpg” align=“absbottom”>
۳- استایل align texttop را به تصویر اضافه کنید
<img src=“test.jpg” align=” texttop ”>
۴- line-height را در تگ TD مربوطه برابر با ۱۰px قرار دهید:
<td style=“line-height:10px”>
۵- font-size را در تگ TD مربوطه برابر با ۶px یا کمتر قرار دهید:
<td style=“font-size:6px”>
آیا نکته خاص دیگری به ذهن شما می رسد؟ نظر شما درباره این دست از مطالب در بخش آموزش ایمیل مارکتینگ چیست؟ لطفا ایده ها و نظرات خود را در بخش دیدگاه ها با ما در میان بگذارید.