كيفية تصميم رسائل البريد الإلكتروني لمنهج الجوال الأول

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

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

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

تصميم البريد الإلكتروني لجميع الأجهزة ، ما هي خياراتي؟

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

• تصميم قابل للتطوير
• تصميم انسيابي
• الرسم المتجاوب

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

تصميم قابل للتطوير

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

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

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

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

تصميم انسيابي

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

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

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

مثال على استعلام وسائط للأجهزة المحمولة:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

بريد إلكتروني متجاوب

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

فيما يلي مثال على استعلام وسائط لتخطيط سريع الاستجابة:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

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

قبل إنشاء تصميمات معقدة باستخدام استعلامات وسائط متعددة ، من المهم التحدث عن بعض المفاضلات. لا تعمل استعلامات الوسائط في جميع عملاء البريد الإلكتروني. في الواقع ، الدعم محدود للغاية. وفقًا لقائمة دعم استعلام الوسائط Litmus ، يدعمها تطبيق Android Outlook.com والعميل الأصلي Android 4.x و iOS (iPhone / iPad) حاليًا. يمكن الاستفادة منها إلى أقصى حد ممكن إذا كان غالبية المشاهدين من مستخدمي أجهزة الجوّال والأجهزة اللوحية.

اعتبارات التصميم الأخرى

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

فيما يلي بعض الموارد الرائعة لمزيد من القراءة:

• CSS خاص بالجوال
• مستقبل البريد الإلكتروني
• iPhone و Android رسائل البريد الإلكتروني

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