it-swarm.asia

البريد الإلكتروني HTML التصميم ل Gmail

أقوم بإنشاء رسالة بريد إلكتروني بتنسيق html تستخدم ورقة أنماط داخلية ، أي.

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

عند عرضها في Gmail ، يبدو أنه يتم تجاهل جميع الأنماط في ورقة الأنماط الداخلية. يبدو أن Gmail يتجاهل جميع الأنماط بخلاف القواعد المضمنة ، على سبيل المثال.

 <h2 style="color: red">Email content here</foo>

هل هذا هو خياري الوحيد لتصميم رسائل البريد الإلكتروني بتنسيق HTML عند عرضها مع Gmail؟

86
Dónal

استخدم الأنماط المضمنة لكل شيء. سيقوم هذا الموقع بتحويل الفصول الدراسية إلى أنماط مضمنة: http://premailer.dialect.ca/

62
substate

بدأ Gmail الدعم الأساسي لعلامات الأنماط في منطقة الرأس. لم تجد شيئًا رسميًا بعد ، لكن يمكنك تجربته بنفسك بسهولة.
يبدو أنه يتجاهل محددات الفئة والمعرف ولكن محددات العنصر الأساسي تعمل.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

سيؤدي إلى إنشاء علامة نمط في منطقة الرأس الخاصة به تقتصر على div التي تحتوي على نص البريد

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>
11
fuchs777

الإجابات هنا قديمة ، اعتبارًا من اليوم 30 سبتمبر 2016. Gmail حاليًا يقدم الدعم للعلامة style في head ، وكذلك استعلامات الوسائط. إذا كان Gmail هو الشاغل الوحيد لك ، فأنت آمن في استخدام فصول مثل المطور الحديث!

للرجوع إليها ، يمكنك التحقق منمستندات جوجل CSS الرسمية.

كملاحظة جانبية ، كان Gmail هو العميل الرئيسي الوحيد الذي لا يدعم style ( مرجع ، حتى يتم التحديث على أي حال). هذا يعني أنه يمكنك {تقريبًا التوقف عن وضع الأنماط في وضع آمن. ربما لا يزال بعض العملاء الأكثر غموضًا في حاجة إليهم.

11
Matthew Johnson

لاحظ أن الخدمات والأدوات لإرسال رسائل البريد الإلكتروني قد تكون قادرة على تضمين CSS الخاص بك نيابة عنك ، مما يسمح لـ CSS بعلامات <style> بالعمل في Gmail.

على سبيل المثال ، إذا كنت ترسل رسائل بريد إلكتروني باستخدام MailChimp ، فستتحول CSS من علامات <style> تلقائيًا بشكل افتراضي. باستخدام Mandrill ، يمكنك تمكين هذه الوظيفة (على الرغم من تعطيلها افتراضيًا لأسباب تتعلق بالأداء ) عن طريق تحديد المربع "أنماط CSS المضمنة في رسائل البريد الإلكتروني بتنسيق HTML" في قسم "إرسال الإعدادات الافتراضية" في علامة التبويب "الإعدادات":

Image showing how to do this in Mandrill

2
Mark Amery

وأنا أتفق مع كل من يدعم الفصول والأساليب المضمنة. ربما تكون قد تعلمت هذا الآن ، ولكن إذا كان هناك خطأ واحد في ورقة الأنماط الخاصة بك ، فسيتجاهل Gmail ذلك.

قد تعتقد أن CSS لديك مثالي ، لأنك فعلت ذلك كثيرًا ، لماذا أواجه أخطاء في CSS الخاص بي؟ قم بتشغيله عبر أداة التحقق من CSS (على سبيل المثال http://www.css-validator.org/ ) وشاهد ما يحدث. لقد قمت بذلك بعد مواجهة بعض مشكلات عرض Gmail ، ومما أدهشني أن العديد من إعلانات أنماط Microsoft Outlook المحددة ظهرت كأخطاء.

الأمر المنطقي بالنسبة لي ، لذا قمت بإزالتها من ورقة الأنماط ووضعها في كتلة كود only for Microsoft ، مثل ذلك:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

هذا مجرد مثال بسيط ، ولكن ، من يدري ، قد يكون مفيدًا بعض الوقت.

1
Shawn Spencer

كما قال آخرون ، فإن بعض برامج البريد الإلكتروني لن تقرأ أنماط css. إذا كان لديك بالفعل بريد إلكتروني على الويب مكتوب ، فيمكنك استخدام الأداة التالية من zurb لتضمين جميع أنماطك:

http://zurb.com/ink/inliner.php

يكون هذا مفيدًا جدًا عند استخدام قوالب مثل تلك المذكورة أعلاه من mailchimp أو شاشة مراقبة الحملة ، إلخ ، كما وجدت ، لن تعمل في بعض برامج البريد الإلكتروني. تترك هذه الأداة قسم الأنماط الخاص بك لبرامج البريد التي ستقوم بقراءتها وتضع كل الأنماط مضمّنة للحصول على قابلية قراءة عالمية أكبر بالتنسيق الذي تريده.

0
Chad Dupuis