الدليل النهائي لاستخدام القصاصات في تصميم البريد الإلكتروني

بين العشرات من عملاء البريد الإلكتروني ، ومراوغات العرض التي لا حصر لها على ما يبدو ، وتغيير دعم HTML و CSS ، فإن حملات البريد الإلكتروني الترميزية معقدة. لسوء الحظ بالنسبة لمصممي البريد الإلكتروني ، فإن هذا التعقيد يعني أن تصميم البريد الإلكتروني أصبح أكثر استهلاكا للوقت ، لذلك أنشأنا الدليل النهائي لاستخدام المقتطفات في تصميم البريد الإلكتروني.

في مؤتمر تصميم البريد الإلكتروني ، صاغ دان ديني من Code School المشكلة تمامًا:

التحدي الأكبر في إنشاء رسائل البريد الإلكتروني ليس Gmail ... حان الوقت.

عندما يتعلق الأمر بتصميم البريد الإلكتروني ، فإن الوقت جوهري ووضع سير عمل التطوير في مكانه أمر بالغ الأهمية. من أجل مواكبة المتطلبات المتغيرة بسرعة لتصميم البريد الإلكتروني ، من المهم بشكل متزايد جعل سير العمل الخاص بك فعالاً قدر الإمكان.

إذن ، ما الذي يمكنك فعله لتحسين سير عملك؟ كلمة واحدة: المقتطفات .

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

ما هي المقتطفات؟

المقتطفات هي وحدات بريد إلكتروني لرمز قابل لإعادة الاستخدام يمكنك استخدامه في قالب بريد إلكتروني أو نظام تصميم بريد إلكتروني أوسع. إنها مثالية للعناصر التي يتم استخدامها بشكل شائع عبر تصميمات البريد الإلكتروني ، مثل نوع المستند ، والأزرار المضادة للرصاص ، والروابط. بدلاً من الاضطرار إلى إعادة كتابة الكود في كل مرة يتم فيها استخدام أحد هذه العناصر ، يمكنك استخدام قصاصة. يؤدي استخدام المقتطفات إلى أتمتة عملية الترميز الخاصة بك وتسريع وقت التطوير بشكل كبير.

كيفية استخدام المقتطفات

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

دريمويفر

في Dreamweaver ، يمكنك إضافة أو تحرير المقتطفات من خلال زيارة: Windows → Snippets → New / Edit. يمكنك حتى حفظ المقتطفات الخاصة بك في مجموعات (على سبيل المثال ، المقتطفات المتعلقة بالجدول ، والمقتطفات المتعلقة بالصور ، وما إلى ذلك) لسهولة البحث.

أثناء ترميز بريدك الإلكتروني ، استخدم المقتطفات عن طريق النقر المزدوج على عنوان المقتطف ، أو النقر فوق إدراج ، أو استخدام اختصار لوحة المفاتيح.

عباد الشمس باني

ضمن مشروع Builder ، انقر على أيقونة Snippets في أعلى يمين المحرر.

يمكنك إنشاء وتحرير مقتطفات جديدة داخل تلك الواجهة ، وتشغيل المقتطفات داخل شفرتك عبر اختصارات لوحة المفاتيح. يمكنك أيضًا إضافة نقاط تعديل داخل المقتطف باستخدام {braces} . بمجرد تشغيل المقتطف ، يمكنك الانتقال تلقائيًا إلى نقاط التحرير المحددة مسبقًا في المقتطف من أجل التخصيص السريع والسهل.

نص سامي

لعرض المقتطفات الموجودة أو إضافة مقتطفات جديدة في Sublime Text ، قم بزيارة: Tools → Snippets / New Snippet. يتم حفظ كل قصاصة في ملف .sublime-snippet الخاص به.

أضف مقتطفات إلى التعليمات البرمجية الخاصة بك من خلال مشغلات اختصارات لوحة المفاتيح. على سبيل المثال ، في الشفرة أدناه ، يتم تشغيل المقتطف عند كتابة "مرحبًا" داخل الشفرة. يمكنك أيضًا إضافة نقاط تحرير داخل المقتطف باستخدام علامات الدولار بترتيب تسلسلي ( 1 دولار ، 2 دولار ، إلخ).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

ذرة

قم بعرض مقتطفات أو تحريرها أو إضافتها في Atom من خلال زيارة: Atom → Open Your Snippets. يتم حفظ كل قصاصة كملف snippets.cson الخاص بها.

على غرار Sublime Text ، تعمل المقتطفات في Atom عبر مشغل اختصار لوحة المفاتيح. يمكنك أيضًا إضافة نقاط تحرير داخل المقتطف باستخدام علامات الدولار بترتيب تسلسلي ( 1 دولار ، 2 دولار ، إلخ).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

كودا

يُشار إلى المقتطفات في Coda باسم "المقاطع". لإضافة مقطع أو تعديله ، تفضل بزيارة: الشريط الجانبي ← المقاطع. يمكن حفظ المقاطع في مجموعات ، وتعمل على مشغل اختصارات لوحة المفاتيح. يمكنك أيضًا إضافة نقاط تحرير داخل المقتطف عن طريق تحديد نقاط مواضع مخصصة في واجهة المستخدم.

مكتبة مقتطفات

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

على الرغم من وجود المزيد ، فقد قمنا بتجميع قائمة شاملة ببعض المقتطفات المفضلة لدينا لاستخدامها في تطوير البريد الإلكتروني. لا تتردد في إضافتها إلى مكتبة المقتطفات الخاصة بك!

دوكتايب

يخبر نموذج المستند عميل البريد الإلكتروني بتقديم بريد إلكتروني في وضع المعايير أو المراوغات. هناك نوعان من نماذج الدكتوراة الموصى بها لاستخدامها في البريد الإلكتروني. الأول هو نوع مستند HTML5:

HTML5

 <!doctype html>

XHTML

والثاني هو نوع مستند XHTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

يقوم Campaign Monitor بتفكيك أنواع عقيدة HTML الجيدة للاستخدام ، وهناك نقاش رائع حولها على Litmus Community أيضًا. إذا لم تحدد نوعًا من المستندات لبريدك الإلكتروني ، فسيقوم عملاء البريد الإلكتروني بعرض البريد الإلكتروني في "وضع المراوغات" مما قد يؤدي إلى حدوث مشكلات في العرض.

علامة متغيرة

إذا كنت تقوم بترميز بريدك الإلكتروني ليكون مستجيبًا ، فهناك العديد من العلامات الوصفية الرئيسية التي يجب عليك تضمينها.

UTF-8

تحدد العلامة الوصفية الأولى الموصى بها ترميز الأحرف إلى utf-8 ، وهو الترميز النموذجي للبريد الإلكتروني. يمكن تغيير هذا إذا لزم الأمر.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

منفذ العرض

تحدد العلامة الوصفية الثانية الموصى بها استجابة البريد الإلكتروني.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

هاتف ويندوز

العلامة الوصفية الثالثة الموصى بها هي على وجه التحديد لجعل البريد الإلكتروني مستجيبًا على Windows Phone.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

الجداول

تستخدم رسائل البريد الإلكتروني بتنسيق HTML الجداول لتنظيم المحتوى. يمكن أن تكون الجداول مملة جدًا للتشفير يدويًا ، لذلك قمنا بتطوير مقتطفات أساسية لتخطيطات الجدول البسيطة.

الجدول 1 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

الجدول 2 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

الجدول 3 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

الجدول 2 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

الجدول 2 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

الجدول 3 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

الجدول 3 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

أزرار مضادة للرصاص

يعد إنشاء الأزرار في البريد الإلكتروني أمرًا صعبًا للغاية بفضل المراوغات في عرض Outlook. هناك أربعة أنواع موصى بها من الأزرار المضادة للرصاص ، والتي يتم عرضها بغض النظر عما إذا كانت الصور موجودة أم لا.

زر VML

تم تطوير أول طريقة للأزرار المضادة للرصاص بواسطة Stig Morten Myre من Campaign Monitor وهي طريقة زر تعتمد على VML:

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

كما أنشأت Campaign Monitor أيضًا أزرارًا. cm ، وهي أداة بسيطة لإنشاء رمز زر VML أعلاه.

زر قائم على الحشو

الطريقة الثانية هي نهج نص مباشر باستخدام زر قائم على الحشو:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

الجانب السلبي الرئيسي لهذا الزر هو أنه ليس قابلاً للنقر بنسبة 100٪.

الزر المستند إلى الحدود

تتضمن طريقة الزر الثالث المضاد للرصاص إنشاء حد حول الرابط لإنشاء مساحة كبيرة قابلة للنقر:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

يتمثل الجانب السلبي الرئيسي لهذه الطريقة في أن Outlook 2007-2013 لا يحترم عرض الحدود على علامات الارتباط ، لذلك يتسبب في بعض التخفيض في الحشو الاصطناعي للزر.

المساحة المتروكة + الزر المستند إلى الحدود

تتضمن الطريقة الأخيرة مزيجًا من أزرار الحشو والحد:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

يتم استخدام هذا الاختراق لتجنب مشاكل عرض الحشو في Outlook.

الصور

هناك العديد من العوامل الرئيسية التي يجب مراعاتها عند استخدام الصور في البريد الإلكتروني. على سبيل المثال ، يجب تحديد الارتفاع والعرض في سمات HTML حتى يتم عرض الصور بشكل صحيح في Outlook. كما أن استخدام نص ALT مهم للغاية ليس فقط لأغراض الوصول ، ولكن نظرًا لأن 43٪ من المستخدمين يشاهدون البريد الإلكتروني مع إيقاف تشغيل الصور. أخيرًا ، لمنع الحشو الزائد والفجوات حول الصور ، يجب عليك تعيينها للعرض: block ؛.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

الروابط

رابط أساسي

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

 <a href="#">{style}</a>

قم بإزالة Blue Links على iOS

هناك عدة استراتيجيات لإزالة الروابط الزرقاء على نظام iOS ، ولكن إليك مقتطف بسيط يستخدم إعلان CSS واحدًا للقيام بذلك:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

نص العنوان المخفي / معاينة النص

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

ها هو المقتطف:

 <div> {preheader text} </div>

تساؤلات الإعلام

تعد الاستعلامات عن الوسائط أحد مكونات أوراق الأنماط المتتالية (CSS) ، واللغة المستخدمة في تصميم مواقع الويب وحملات البريد الإلكتروني. باستخدام استعلامات الوسائط ، يمكنك ضبط تصميمات البريد الإلكتروني بحيث تكون أكثر قابلية للاستخدام عبر صناديق البريد الوارد للجوال وسطح المكتب والبريد الإلكتروني.

فيما يلي قائمة بجميع استعلامات الوسائط المهمة التي ستحتاج إليها عند تصميم رسائل البريد الإلكتروني:

استعلام الوسائط الأساسية

 @media screen and ({declaration}) { {content} }

استعلام وسائط العرض الأقصى

 @media screen and (max-width: {width}) { {content} }

استعلام وسائط العرض الأدنى

 @media screen and (min-width: {width}) { {content} }

iPad 1 & 2 + iPad Mini Media Query

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

استعلام وسائط iPad 3 و 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

استعلام وسائط iPhone 2G / 3G / 3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4 / 4S / 5 / iPhone 6 (عرض التكبير / التصغير) استعلام الوسائط

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

HTC ONE + SAMSUNG GALAXY S4 / S5 Media Query

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (العرض القياسي) + iPhone 6 Plus (عرض التكبير) Media Query

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (العرض القياسي) Media Query

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

التعليقات الشرطية في Outlook

مع وجود عدد كبير من مشكلات العرض التي تأتي مع الحاجة إلى دعم Outlook ، يكون من المفيد أحيانًا استهداف Outlook بأنماط محددة. يمكن استهداف Outlook باستخدام تعليقات mso الشرطية لمحتوى HTML أو CSS.

عرض Microsoft Word

 <!--[if mso]> {content} <![endif]-->

توقعات 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

المزيد من التعليقات الشرطية في Outlook:

• برنامج Outlook 2000
• توقعات 2000-2002
• توقعات 2000-2003
• توقعات 2000-2007
• برنامج Outlook 2000-2010
• برنامج Outlook 2002
• توقعات 2002-2013
• برنامج Outlook 2003
• برنامج Outlook 2003-2013
• برنامج Outlook 2007-2013
• برنامج Outlook 2010
• Outlook 2010-2013
• برنامج Outlook 2013

WebKit

من أفضل الطرق لتحسين بريدك الإلكتروني بشكل تدريجي هو استهداف محركات عرض WebKit. ما يقرب من 47٪ من عمليات فتح البريد الإلكتروني يتم فتحها في صناديق البريد الوارد المدعومة من WebKit.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

بريد جوجل

لا يدعم Gmail الفئات أو المعرفات في <head> لرسائل البريد الإلكتروني ، ولهذا السبب يجب تضمين CSS في البريد الإلكتروني. ومع ذلك ، اكتشف Justin Khoo من FreshInbox اختراقًا جديدًا يقرأ فيه Gmail CSS في رسائل البريد الإلكتروني.

إذا كنت تستخدم السمة lang أو title كمحدد سمة تكون قيمته في قائمة قيم مفصولة بمسافات بيضاء ، أحدها مطابق تمامًا ، فسيقرأ Gmail هذا CSS. هذا كلام ممتع ، لذا إليك مقتطف لمساعدتك:

 * [lang~="{name}"] { {style} }

ياهو

قدم Yahoo Mail مؤخرًا استعلام الوسائط الفريد الخاص به ، مما يسمح لنا بسهولة استهداف أنماط معينة لبريد الويب.

 @media yahoo { {style} }

ذكري المظهر

نشر James White مؤخرًا على Litmus Community اختراقًا لتوسيط رسائل البريد الإلكتروني على Android 4.4.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

المقتطفات في المجتمع

هل تريد المزيد من المقتطفات؟ هل لديك بعض الأشياء المفضلة التي ترغب في مشاركتها؟ بمساعدة خبراء البريد الإلكتروني في كل مكان ، لدينا بالفعل عشرات المقتطفات المفيدة ، مثل الشفرة لإزالة الروابط الزرقاء على أجهزة iOS ، في مجتمع Litmus.

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

تحقق من مقتطفات في المجتمع →