Arabic (العربية/عربي) translation by Ayman Amar (you can also view the original English article)
في هذا الشرح سوف أريك كيفية صنع رسالة إلكترونية HTML متجاوبة بسيطة التي سوف تعمل في أي عميل بريد إلكتروني، بما في ذلك جميع عملاء البريد الإلكتروني الجديدة الخاصة بالهواتف الذكية والتطبيقات. فهي تستخدم الحد الأدنى من إستعلامات الوسائط ونهج عرض سلس لضمان أقصى قدر من التوافق.
إستعلامات الوسائط: فقط نصف الحل
كان هناك وقت حين كانت إستعلامات الوسائط كافية الى حد كبير للحصول على رسائل البريد الإلكتروني تعمل على تطبيقات البريد الخاصة بال IOS وال Android، كلاهما يدعم إستعلامات الوسائط.
منذ ذلك الحين، كان هناك انتشار لتطبيقات البريد أنشأت لكل من منصات ال IOS و ال Android، بدرجات متفاوتة من الدعم لطرق تطوير رسالة إلكترونية متجاوبة.
الأكثر ملاجظة هو اخر تحديث لتطبيق ال Gmail على ال Android، التي هو أكثر شعبية بضعفين من تطبيق البريد الإفتراضي لمستخدمي ال Android (والتي تضم الآن 11% من إجمالي الفتح). إلا أنه لم تدعم استعلامات الوسائط مطلقا، ولاتزال كذلك، على أي حال فهو يقوم تصغير مقاس رسائلك الإلكترونية بضغط حجم الجدول الخارجي لتتناسب مع المنطقة القابلة للعرض من الشاشة. فإنه من الصعب السيطرة عليها و، عندما تعتمد رسالتك الإلكترونية بأكملها على استعلامات الوسائط للظهور بشكل صحيح على الهاتف المحول، يولد بعض النتائج الغير سارة للغاية.
لماذا العائم هو الأسود الجديد
الأخبار الجيدة هي أنه يمكنك تصميم وبناء رسالة إلكترونية التي سوف تبدو ممتازة في أي تطبيق بريد، بما في ذلك تلك التي لا تدعم إستعلامات الوسائط. يمكنك القيام بذلك باستخدام تخطيط عائم.
هناك، مع ذلك، بعض التسويات في التصميم التي يجب على القيام بها. تلك تخطيطات العمود المتساوية الجميلة التي تتكدس في عمود واحد لاتعمل بشكل جيد باستخدام هذه الطريقة. إذا كان يمكنك أن تتعلم كيف تعيش بدونها، هناك بعض تصاميم الوظيفية للغاية التي يمكن أن تعمل بشكل جيد جداً.
هنا ما سوف ننشئه اليوم:
الشروع في العمل
حسنا، دعونا نبدأ مع لوحتنا القماشية الفارغة.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
<title>A Simple Responsive HTML Email</title> |
6 |
<style type="text/css"> |
7 |
body {margin: 0; padding: 0; min-width: 100%!important;} |
8 |
.content {width: 100%; max-width: 600px;} |
9 |
</style>
|
10 |
</head>
|
11 |
<body yahoo bgcolor="#f6f8f1"> |
12 |
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0"> |
13 |
<tr>
|
14 |
<td>
|
15 |
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> |
16 |
<tr>
|
17 |
<td>
|
18 |
Hello! |
19 |
</td>
|
20 |
</tr>
|
21 |
</table>
|
22 |
</td>
|
23 |
</tr>
|
24 |
</table>
|
25 |
</body>
|
26 |
</html>
|
ما نحن بصدد إنشائه هنا هو صفحتنا البسيطة مع header خاص بها، doctype جدول حاوي مع تطبيق لون خلفية (لكل من الجسم وجدول مجمع كبير، منذ تصميم علامة الجسم غير مدعوم بالكامل). لمزيد من المعلومات حول هذا الإعداد الأساسي، راجع إنشاء قالب بريد إلكتروني HTML من الصفر.
قمت بعد ذلك بإضافة جدول محتوانا الرئيسي إلى المركز مع كلاس 'content'.
انتبه
ملاحظة: سوف تلاحظ هذا في هذا الشرح سوف أضع CSS في رأس مستندنا. عموما أضع الأنماط في الرأس عندما سوف أعيد استخدامهم، والحفاظ على واحدة من الأنماط المضمنة.
هام: كلما قمت باستخدام قواعد CSS في رأس المستند الخاص بك، يجب استخدام أداة لجعلها كلها في خط في نهاية العملية. إذا كنت تستخدم خدمة مثل MailChimp أو Campaign Monitor، سوف يقترحون بشكل تلقائي لتضمين الأنماط لأجلك عندما تقوم باستيراد تصميمك. يجب القيام بذلك لأن بعض العملاء، مثل Gmail، سيتجاهل أو يجرد محتويات علامة <style> الخاصة بك، أو يتجاهلهم. يمكنك أيضا استخدام أداة مثل Premailer لتضمين CSS الخاص بك. إذا كنت تستخدم Premailer أو أداة مشابهة، تذكر أن تأخذ استعلامات الوسائط الخاصة بك قبل المعالجة (حيث نريدها أن تبقى على حالها)، ثم إعادة إدراجهم في النهاية. MailChimp وCampaign Monitor تلقائياً تتم بهذا لأجلك.
إخفاء أنماط الهاتف من Yahoo!
ستلاحظ أن علامة body تحتوي على سمة إضافية. بريد Yahoo يحب تفسير استعلامات الوسائط الخاصة بك مثل الإنجيل، و لمنع حدوث ذلك، تحتاج إلى استخدام محددات السمات. أجد أن أسهل طريقة للقيام بذلك (كما اقترح عن طريق Email on Acid) هو ببساطة يضيف سمة اعتباطيا للعلامة body. يمكنني استخدام 'yahoo' المقترح ولكن يمكن أن يكون أي شيء تريد:
1 |
<body yahoo> |
يمكنك ثم استهداف كلاسات معينة باستخدام محدد السمة لأجل علامة الجسم في CSS.
1 |
body[yahoo] .class {} |
اثنين من الحيل لإتقان أسلوب التعويم
كما ترون، يتم تعيين جدول 'المحتوى' لدينا كي يكون 100 ٪ على نطاق واسع حيث سيتم تعويمه وتناوله العرض الكامل لشاشات الهاتف الذكي والكمبيوتر اللوحي. سنقوم أيضا بتعيين أقصى العرض لـ 600px لتجنب تناول البريد الإلكتروني كامل الشاشة على أجهزة أكبر.
هناك الآن اثنين من الأشياء الصعبة قليلاً التي نحن بحاجة إليها للمعالجة لضمان أن يعرض كل شيء كما هو مخطط له عبر جميع عملاء البريد الإلكتروني. هذه الإصلاحات اثنين بفضل درس Tina Ye الممتاز في هذا الأسلوب الذي يتوفر في مدونة FogCreek.
1-التغلب على نقص دعم الحد الأقصى للعرض
لسوء الحظ، max-width لا يدعمه جميع عملاء البريد الإلكتروني. من أجل الحصول على بريدنا الإلكتروني للعرض بشكل صحيح في Outlook و Lotus Notes 8 & 8.5، نحن بحاجة إلى التفاف كل جدول في بعض التعليمات البرمجية الشرطية التي تقوم بإنشاء جدول مع تعيين عرض لمسك كل شيء بداخله. يستهدف IE (الذي هو محرك التصيير المستخدم من قبل برنامج Lotus Notes) و Microsoft Outlook.
سوف نقوم بالتفاف جدولنا في بعض التعليمات البرمجية الشرطية:
1 |
<!--[if (gte mso 9)|(IE)]>
|
2 |
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
|
3 |
<tr>
|
4 |
<td>
|
5 |
<![endif]-->
|
6 |
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> |
7 |
<tr>
|
8 |
<td>
|
9 |
Hello! |
10 |
</td>
|
11 |
</tr>
|
12 |
</table>
|
13 |
<!--[if (gte mso 9)|(IE)]>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
<![endif]-->
|
2. إصلاح بريد Apple
بغرابة، بريد Apple (عادة عميل البريد إلكتروني تقدمي للغاية) لا يدعم خاصية max-width بشكل صحيح أيضا. إنه يدعم إستعلامات الوسائط بالرغم من ذلك، حتى نتمكن من إضافة أحد الذي يقول أنه لتعيين العرض على جدول كلاس 'content' الخاص بنا، ما دام يمكن لمنفذ العرض عرض 600px كله.
1 |
<style type="text/css"> |
2 |
@media only screen and (min-device-width: 601px) { |
3 |
.content {width: 600px !important;} |
4 |
}
|
5 |
</style>
|
إنشاء رأس الصفحة
والآن سنقوم بإضافة الصف الأول من جدولنا – الرأس. أضف النمط التالي الى الصف الذي قمنا بإنشائه بالفعل:
1 |
<td class="header" bgcolor="#c7d8a7"> |
2 |
Hello! |
3 |
</td>
|
وبعد ذلك في CSS الخاص بك، أضف الحشو للرأس:
1 |
.header {padding: 40px 30px 20px 30px;} |
إضافة الصف المتجاوب الأول
الان سوف نقوم بإنشاء الصف المتجاوب الأول حتما الخاص بنا. الطريقة التي نفعل بها هذا هي بإنشاء جدولان ذلك 'float' بجانب بعضها البعض باستخدام خاصية 'align' لـ HTML.
العمود الأيسر
استبدل صغيرنا "Hello!" الترحيب بما يلي:
1 |
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> |
2 |
<tr>
|
3 |
<td height="70" style="padding: 0 20px 20px 0;"> |
4 |
<img src="images/icon.gif" width="70" height="70" border="0" alt="" / > |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
ننشئ جدول 70px لدينا، وأيضا نضف بعض الحشو الذي سيكون بمثابة هامشنا بين العمودين. الحشو في الأسفل سوف يضيف مجال تنفس عمودي عندما يتكدس العمودان في الهاتف.
العمود الأيمن
سوف نقوم بإنشاء العمود الأيمن مرة أخرى بحشو الجدول للأيمن. هذا الجدول سوف يكون 445px عرض، الذي سوف يترك لنا 25px إضافية في جهة اليد اليمنى. هذا مهم جدا لأن Outlook سوف يقوم بتكويم جداويلك تلقائيا إذا لم تكن هناك على الأقل 25px إضافية على أي صف معين.
طالما قمت بالسماح على الأقل 25px لمجال التنفس، الجداول الخاصة بك سوف تتصرف كما هو متوقع.
توقف! نصيحة بديلة لخداع Outlook
للتغلب على هذه الميزة، يمكنك أيضا استخدام كود شرطي لخداع Outlook في التفكير بأنك قد أغلقت خانة وفتحت واحدة جديدة. بعد إغلاق علامة جدولك الأول، وقبل فتح علامة الجدول الخاص بك ثانية، ببساطة أضف:
1 |
<!--[if mso]>
|
2 |
</td><td>
|
3 |
<![endif]-->
|
استمر..
على العرض، الجدول على الجهة اليمنى، سوف نستخدم نفس المقاربة التي استخدمناها على جدولنا الحاوي، الذي يتضمن إنشاء كلاس وإضافة الكود المجمع الشرطي أيضا. نريد هذا الجدول أن يكون 100% عريض على الهاتف،
1 |
<!--[if (gte mso 9)|(IE)]>
|
2 |
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
|
3 |
<tr>
|
4 |
<td>
|
5 |
<![endif]-->
|
6 |
<table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> |
7 |
<tr>
|
8 |
<td height="70"> |
9 |
</td>
|
10 |
</tr>
|
11 |
</table>
|
12 |
<!--[if (gte mso 9)|(IE)]>
|
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
<![endif]-->
|
هنا يمكنك أن ترى أنني أنشئت كلاس يسمى 'col425' لهذا الجدول، لدينا العمود 425px العريض. لدي الجدول المجمع في الكود الشرطي الذي سوف ترفق بها في جدول 425px العريض. ثم نضيف الكلاس الخاص بنا لاستعلام الوسائط الذي قمنا بإنشائه لأجل بريد Apple أيضا.
1 |
.col425 {width: 425px!important;} |
الآن داخل خانتنا سنقوم بإضافة العنوان المصمم.
1 |
<table width="100%" border="0" cellspacing="0" cellpadding="0"> |
2 |
<tr>
|
3 |
<td class="subhead" style="padding: 0 0 0 3px;"> |
4 |
CREATING |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td class="h1" style="padding: 5px 0 0 0;"> |
9 |
Responsive Email Magic |
10 |
</td>
|
11 |
</tr>
|
12 |
</table>
|
لقد قمت بإضافة الكلاسات لكل خانة لأجل التصميم، فضلا عن بعض الأنماط التي سوف أستخدم لأنواع النص الأخرى في وقت لاحق:
1 |
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} |
2 |
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;} |
3 |
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;} |
اكتمل الآن hear الخاص بنا، ويمكنك أن ترى أدناه كيف سوف يتجمع العمودين على الهاتف المحمول. (لمعاينة هذا أثناء العمل، سوف تحتاج إلى تعليق مؤقت خارج الحد الأدنى لعرض الجهاز استعلامات الوسائط، نظراً لأنها هي تفرض عرض ثابت على سطح المكتب).
إنشاء صف النص في عمود واحد
لإنشاء صف نص في عمود مفرد، ببساطة نضيف صف جديد إلى جدول 'content' الخاص بنا. سنقوم بإضافة كلاس 'innerpadding' لهذه الصفوف مع بعض قيم الحشو قابلة لإعادة الاستخدام. سنقوم أيضا بإضافة كلاس من 'borderbottom' لتطبيق حدود لكل صف.
1 |
<tr>
|
2 |
<td class="innerpadding borderbottom"> |
3 |
<table width="100%" border="0" cellspacing="0" cellpadding="0"> |
4 |
<tr>
|
5 |
<td class="h2"> |
6 |
Welcome to our responsive email! |
7 |
</td>
|
8 |
</tr>
|
9 |
<tr>
|
10 |
<td class="bodycopy"> |
11 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
12 |
</td>
|
13 |
</tr>
|
14 |
</table>
|
15 |
</td>
|
16 |
</tr>
|
CSS الخاص بنا لهذا الجزء:
1 |
.innerpadding {padding: 30px 30px 30px 30px;} |
2 |
.borderbottom {border-bottom: 1px solid #f2eeed;} |
3 |
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} |
4 |
.bodycopy {font-size: 16px; line-height: 22px;} |
إنشاء مقالة العمود المزدوج
الان سوف نقوم بإنشاء صف متجاوب تماما مثل الـ hearder الخاص بنا، لكن مع بعض التغيرات الطفيفة في الأبعادحتى نتمكن من الحصول على صورة أكبر.
1 |
<tr>
|
2 |
<td class="innerpadding borderbottom"> |
3 |
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0"> |
4 |
<tr>
|
5 |
<td height="115" style="padding: 0 20px 20px 0;"> |
6 |
<img src="images/article1.png" width="115" height="115" border="0" alt="" /> |
7 |
</td>
|
8 |
</tr>
|
9 |
</table>
|
10 |
<!--[if (gte mso 9)|(IE)]>
|
11 |
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
|
12 |
<tr>
|
13 |
<td>
|
14 |
<![endif]-->
|
15 |
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;"> |
16 |
<tr>
|
17 |
<td>
|
18 |
<table width="100%" border="0" cellspacing="0" cellpadding="0"> |
19 |
<tr>
|
20 |
<td class="bodycopy"> |
21 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
22 |
</td>
|
23 |
</tr>
|
24 |
<tr>
|
25 |
<td style="padding: 20px 0 0 0;"> |
26 |
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0"> |
27 |
<tr>
|
28 |
<td class="button" height="45"> |
29 |
<a href="#">Claim yours!</a> |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
36 |
</td>
|
37 |
</tr>
|
38 |
</table>
|
39 |
<!--[if (gte mso 9)|(IE)]>
|
40 |
</td>
|
41 |
</tr>
|
42 |
</table>
|
43 |
<![endif]-->
|
44 |
</td>
|
45 |
</tr>
|
قمنا بإضافة زر هنا مع الكلاس 'buttonwrapper'. إنه يحتوي على خانة محشوة مع تعيين لون خلفية، وبعد ذلك رابط نص بالداخل. أنا أفضل استخدام هذه الطريقة لأنها تسمح لك بالحصول على أزرار بعرض عائم وهو أمر مفيد جدا عند إنشاء قالب قابل لإعادة الإستخدام، حيث عرض أي زر سيكون مختلف كل مرة يستخدم فيها. إذا كان لديك عرض ثابت للأزرار الخاصة بك قد تفضل استخدام Bulletproof Button Generator في أكثر من Campaign Monitor.
أنماطنا لأجل الزر:
1 |
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;} |
2 |
.button a {color: #ffffff; text-decoration: none;} |
طالما لدينا العرض المحدد لهذا الكلاس الجديد 'col380'، سنقوم بإضافة حجمنا إلى قائمة الأنماط للعناية ببريد Apple. تبدو الآن مثل هذه:
1 |
@media only screen and (min-device-width: 601px) { |
2 |
.content {width: 600px !important;} |
3 |
.col425 {width: 425px!important;} |
4 |
.col380 {width: 380px!important;} |
5 |
}
|
إنشاء صورة العمود المفرد
هذا صف بسيط جداً؛ سوف نقوم ببساطة بتعيين صورة لتكون 100 ٪ من عرض البريد الإلكتروني وتأكد من تعيين ارتفاعها لتكون تلقائيا تستخدم CSS.
1 |
<tr>
|
2 |
<td class="innerpadding borderbottom"> |
3 |
<img src="images/wide.png" width="100%" border="0" alt="" /> |
4 |
</td>
|
5 |
</tr>
|
في CSS الخاص بنا:
1 |
img {height: auto;} |
إنشاء صف النص النهائي العادي
أخيراً سنقوم بإضافة صف من النص دون الحدود في الجزء السفلي:
1 |
<tr>
|
2 |
<td class="innerpadding borderbottom"> |
3 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
4 |
</td>
|
5 |
</tr>
|
إنشاء تذييل الصفحة
لإنشاء تذييل الصفحة، سنقوم بإضافة صف جديد مع جدول بالداخل. سيتضمن أحد الصفوف جدول آخر لرموز التواص الإجتماعي الخاصة بنا.
1 |
<tr>
|
2 |
<td class="footer" bgcolor="#44525f"> |
3 |
<table width="100%" border="0" cellspacing="0" cellpadding="0"> |
4 |
<tr>
|
5 |
<td align="center" class="footercopy"> |
6 |
&reg; Someone, somewhere 2013<br/> |
7 |
<a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td align="center" style="padding: 20px 0 0 0;"> |
12 |
<table border="0" cellspacing="0" cellpadding="0"> |
13 |
<tr>
|
14 |
<td width="37" style="text-align: center; padding: 0 10px 0 10px;"> |
15 |
<a href="http://www.facebook.com/"> |
16 |
<img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> |
17 |
</a>
|
18 |
</td>
|
19 |
<td width="37" style="text-align: center; padding: 0 10px 0 10px;"> |
20 |
<a href="http://www.twitter.com/"> |
21 |
<img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> |
22 |
</a>
|
23 |
</td>
|
24 |
</tr>
|
25 |
</table>
|
26 |
</td>
|
27 |
</tr>
|
28 |
</table>
|
29 |
</td>
|
30 |
</tr>
|
سنقوم بإضافة الأنماط المطلوبة لأجل تذييل الصفحة الخاصة بنا إلى CSS:
1 |
.footer {padding: 20px 30px 15px 30px;} |
2 |
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} |
3 |
.footercopy a {color: #ffffff; text-decoration: underline;} |
تحسين الأزرار لأجل الهاتف
على الهاتف المحمول، انها مثالية إذا كان الزر كله رابط، ليس فقط النص، لأنه أصعب بكثير توجيه نص رابط صغير بإصبعك. لأنه ليس من الممكن أن تجعله يعمل على جميع عملاء سطح المكتب (الحشو غير مدعوم بشكل كامل على علامات <a>)، إنه شيء الذي أضفته إلى نسخة الهاتف المحمول باستخدام استعلامات الوسائط.
سيكون علينا تجريد اللون من <td> إلى الذي يطبق حاليا، وبعد ذلك قم بتطبيقه مرة أخرى على علامة <a> جنبا إلى جنب مع الكثير من الحشو.
سوف أستخدم كل من max-width و max-device-width في استعلام الوسائط هذا في محاولة لتجنب خطأ في Outlook.com على IE9.
1 |
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) { |
2 |
body[yahoo] .buttonwrapper {background-color: transparent!important;} |
3 |
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} |
4 |
}
|
الآن عند النقر فوق أي مكان على الزر الملون في الهاتف المحمول، إنه رابط!
المزيد من التحسينات مع استعلامات الوسائط
إذا كنت ترغب في ذلك، يمكنك الآن البدء في إجراء تحسينات على التخطيط الخاص بك عن طريق تطبيق أسماء الكلاس على العناصر التي ترغب في السيطرة عليها، ومن ثم إنشاء قواعد جديدة داخل استعلام الوسائط الذي أنشأناه للتو أعلاه.
على سبيل مثال، سنقوم بتحويل رابط إلغاء الاشتراك الخاص بنا إلى زر، بإضافة كلاس إلى رابط:
1 |
<a href="#" class="unsubscribe"> |
2 |
<font color="#ffffff">Unsubscribe</font> |
3 |
</a>
|
4 |
<span class="hide">from this newsletter instantly</span> |
وإضافة CSS التالية إلى استعلام الوسائط:
1 |
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} |
1 |
body[yahoo] .hide {display: none!important;} |
يمكن أيضا استهداف الكلاسات .innerpadding و.header و.footer للحد من كمية الحشو على العملاء التي تدعم استعلامات الوسائط.
اختبار وانطلاق!
أخيراً، كما هو الحال دائماً، تأكد من التحقق من صحة (استخدام المصادقة W3C – ينبغي أن تحصل فقط على خطأ واحد للسمة الاحتكارية 'yahoo' في العلامة body) واختبار جيد باستخدام أجهزة حية وخدمة ويب للمعاينة مثل Litmus أو Email on Acid.
تمتع بإنشاء رسائل بريد الكتروني مستجيبة التي تبدو عظيمة في كل عملاء البريد الإلكتروني!
لتأخد ما تعلمته إلى المستوى التالي،
By
