كيفية استخدام مؤسسة إطار عمل رسائل البريد الإلكتروني لإنشاء تصميمات بريد إلكتروني سريعة الاستجابة

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

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

ما هي أطر البريد الإلكتروني (وكيف يمكن أن تساعدك في إنشاء رسائل بريد إلكتروني أفضل)

لا تزال الأطر تتطلب منك القيام ببعض الترميز ، لكن العملية بسيطة للغاية بالنسبة لرسائل البريد الإلكتروني.

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

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

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

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

مقدمة لمؤسسة إطار عمل رسائل البريد الإلكتروني

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

يعد اختيار إطار العمل أمرًا بسيطًا إلى حد ما (حتى إذا لم يكن لديك أي خبرة في الترميز) ، ويمكنك الاختيار بين نسختين - أحدهما يعتمد على أوراق الأنماط المتتالية (CSS) والآخر على Sass. وبطبيعة الحال، فإن النسخة ساس تمكنك من توفير المزيد من الوقت من خلال القضاء على الحاجة إلى تكرار ستلينغس CSS، لكنه يتطلب بعض الألفة مع Node.js.

أخيرًا ، يوفر لك Foundation for Email الكثير من "الأنماط" مثل الأزرار والقوائم لجعل عملك أكثر بساطة. لتوفير المزيد من الوقت ، يمكنك حتى استخدام قالب بدلاً من تصميم تخطيط من البداية.

دلائل الميزات:

• يستخدم شبكة سريعة الاستجابة لإنشاء حملات بريد إلكتروني حديثة.
• يقدم إما إصدار CSS أو Sass من إطار العمل.
• يتيح لك الاستفادة من الأنماط لإضافة عناصر مشتركة إلى رسائلك الإلكترونية بسرعة.
• يستخدم التخطيطات لتبسيط عملية إنشاء البريد الإلكتروني بشكل أكبر.

السعر: مجاني | معلومات اكثر

كيفية استخدام الأساس لرسائل البريد الإلكتروني لإنشاء تصميمات حديثة (في 4 خطوات)

كما ذكرنا ، هناك نسختان من Foundation for Emails. بالنسبة لهذا القسم ، سنستخدم تباين CSS لأنه يتطلب عملاً أقل للإعداد. بالإضافة إلى ذلك ، يجب أن تبدو النتائج النهائية متشابهة - كل ما يتغير هو كيفية الوصول إلى هناك.

إذا كنت تريد مشاهدة إصدار Sass قيد التشغيل أو معرفة المزيد حول كيفية استخدامه ، فيمكنك البدء بهذا البرنامج التعليمي الرائع.

الخطوة # 1: قم بتنزيل Foundation for Email Files

بادئ ذي بدء ، توجه إلى صفحة Foundation for Email Getting Started ، وانقر فوق الزر Download Starter Kit تحت العنوان الفرعي CSS Version :

بمجرد حصولك على الملف ، قم بفك ضغطه واستخراج محتوياته في مجلد جديد. في هذه المرحلة ، يجب أن يحتوي مجلدك على ملف index.html ومجلدين فرعيين - أحدهما لـ CSS والآخر لقوالبك.

في الوقت الحالي ، قم بتشغيل محرر النصوص المفضل لديك وافتح ملف index.html به. يجب أن يكون خاليًا جدًا ، لكننا سنصلح ذلك بعد قليل.

الخطوة رقم 2: تعرف على نظام الشبكة

تستند مؤسسة استجابة البريد الإلكتروني إلى نظام الشبكة المرن. إذا كنت تقوم بتجميع بريد إلكتروني من البداية ، فستحتاج إلى إنشاء شبكتك الخاصة لتقسيم أقسام بريدك الإلكتروني. للقيام بذلك ، سنستخدم ثلاثة مكونات مختلفة: الحاويات والصفوف والأعمدة.

فتح ملف index.html ومؤسسة الخاصة بك في غضون محرر النص الخاص بك، وانزل الى هيئة الفرع:

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

كما ترى ، يحتوي نص رسالتك الإلكترونية على جدول مُعد مسبقًا لن نتطرق إليه. بدلاً من ذلك ، سنقوم فقط بإضافة عناصر الشبكة الخاصة بنا إلى القسم حيث يقرأ <! - تنتقل شبكتك هنا -> . لنبدأ بالكود الذي تحتاج إلى استخدامه لحاوياتك:

<table class="container">
<tr>
<td></td>
</tr>
</table>

الآن ، دعنا نضيف صفًا هناك:

<table class="row"> <tr> <th></th> </tr> </table> 

أخيرًا ، يمكننا تقسيم هذا الصف إلى أعمدة:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

ضع في اعتبارك أن كل صف يتكون مما يصل إلى 12 عمودًا. يخبر الكود أعلاه عميل البريد الإلكتروني الخاص بك أنه يجب أن يعرض المحتوى الخاص بك باستخدام الأعمدة الـ 12 الكاملة على الشاشات الصغيرة مثل الأجهزة المحمولة ( small-12 ) ، ولكن لا يشغل سوى ستة على أجهزة سطح المكتب ( كبير - 6 ).

تكمن المشكلة في أنه إذا تم عرض بريدك الإلكتروني على شاشة كبيرة ، فهناك ستة أعمدة فارغة ، لذلك نحتاج إلى إضافة جدول ثانٍ لإصلاحه:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

كما ترى ، كلا العمودين متماثلان بشكل أساسي. ومع ذلك ، لديهم فئتين مختلفتين ، الأعمدة الأولى والأعمدة الأخيرة . هذه تخبر عميل البريد الإلكتروني الخاص بك وهما العمودان الأول والأخير في صفك ، وأي أعمدة بينهما لا تحتاج إلى استخدامها.

إذا كنت ستفتح ملف index.html الآن في متصفح ، فإليك ما تراه:

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

الخطوة # 3: أضف مكونات إلى رسائلك الإلكترونية

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

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

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

الآن دعنا ننتقل إلى صور الخلفية. هذه أصعب قليلاً ، لأنك تحتاج إلى استخدام فئة المجمع لجعلها تشغل عرض صفك بالكامل وتخصيص خلفية محددة لها باستخدام CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

أخيرًا وليس آخرًا ، دعنا نتحدث عن العناوين الفرعية. هذه هي أبسط مجموعة - كل ما عليك فعله هو التفاف النص داخل العلامات المطلوبة:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

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

الخطوة رقم 4: صمم بريدك الإلكتروني باستخدام CSS

تقوم بعض برامج البريد الإلكتروني (مثل Microsoft Outlook) بإزالة بعض علامات الأنماط من ملفات HTML. يتم ذلك بحيث يتم عرض رسائل البريد الإلكتروني دون أي مشاكل ، وكذلك لإزالة التهديدات الأمنية المحتملة. ومع ذلك ، فإن النتيجة هي أن رسائل البريد الإلكتروني الخاصة بك ستبدو مملة جدًا ما لم تقم بإضافة CSS مباشرة إلى HTML الخاص بك (أو مضمنة ).

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

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

يمكن أن يصبح هذا الأمر فوضويًا بعض الشيء ، لذلك نوصي بالعمل على ملفات HTML و CSS بشكل منفصل ، ثم استخدام أداة مثل Foundation Inliner لدمجها من أجلك. ما عليك سوى لصق الكود الخاص بك ، والنقر فوق الزر ، وسيتولى الأمر الباقي نيابةً عنك.

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

استنتاج

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

للتلخيص ، فيما يلي الخطوات الأربع التي تحتاجها لإنشاء رسائل بريد إلكتروني حديثة باستخدام Foundation for Emails:

1. قم بتنزيل ملفات الإطار.
2. تعرف على نظام الشبكة.
3. استخدم مكونات لرسائل البريد الإلكتروني الخاصة بك.
4. صمم بريدك الإلكتروني باستخدام CSS.

هل لديك أي أسئلة حول كيفية استخدام إطار عمل Foundation for Emails؟ اسأل بعيدا في قسم التعليقات أدناه!

الصورة المصغرة للمادة بواسطة Faberr Ink / shutterstock.com.