يتطلب تطوير رسائل بريد HTML اعتماد تخطيطات دفاعية قائمة على الجداول للعرض بشكل متسق وموثوق عبر عملاء البريد في سطح المكتب والأجهزة المحمولة.
سلوكيات عملاء البريد وخصائص CSS المحظورة
الخصائص التي يجب تجنبها
| الخاصية والنطاق | عملاء البريد التي تسبب مشكلات | البديل الآمن |
|---|---|---|
خاصية width على وسم p أو div |
Microsoft Outlook | تحديد width على عناصر td |
خاصية padding على وسم p أو div |
Microsoft Outlook | تطبيق padding على خلايا td |
خاصية margin (بجميع أشكالها) |
Outlook, Hotmail | استخدام خلايا جدول للمسافات الفاصلة |
خاصية background-image |
Outlook Windows desktop | استخدام وسوم Microsoft VML |
صور data-uri المضمنة |
Webmail clients | استضافة الصور على شبكة CDN خارجية عبر HTTPS |
المحددات التي يجب تجنبها
| نوع المحدد | عملاء البريد التي تسبب مشكلات |
|---|---|
| العناصر الزائفة (::before و ::after) | Outlook, Yahoo, Gmail |
| المحددات المتجاورة والمباشرة (E + F و E > F) | Outlook, Gmail App |
| محددات السمات ([href^="https"]) | عملاء بريد الويب القديمة |
القاعدة الذهبية: قم دائما بتضمين جميع تنسيقات CSS داخل سمات style="..." مباشرة على خلايا الجدول.
الهيكل الأساسي لقالب البريد التفاعلي
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Email</title>
<style type="text/css">
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="container" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td style="color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
محتوى البريد الإلكتروني يوضع هنا.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>