اجعل تصميم بريدك الإلكتروني مستجيبًا للأجهزة المحمولة في 5 خطوات سهلة

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

قم بتعيين عرض الأعمدة بالنسب المئوية، وليس بالبكسل

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

استخدم شبكة السوائل

يستخدم أسلوب الشبكة المرنة النسب المئوية لعرض الأعمدة حتى تتمكن من التوسع والتقلص حسب الحاجة بناءً على حجم الشاشة. للحصول على تخطيط بسيط من عمودين، اجعل عرض العمود الأيسر 60-70% والعمود الأيمن 30-40%. على سبيل المثال:

<الجدول>

<تر>

<td width=”65%”>محتوى العمود 1 هنا</td>

<td width=”35%”>محتوى العمود 2 هنا</td>

</tr>

</الجدول>

سيسمح هذا للعمود 1 بشغل 65% من المساحة المتاحة والعمود 2 بمساحة 35% المتبقية. على شاشة سطح المكتب الكبيرة، قد يصل عرض العمود 1 إلى 650 بكسل، بينما على شاشة الهاتف المحمول الصغيرة، قد يصل عرضه إلى 200 بكسل فقط. لكن النسب النسبية ستبقى كما هي.

أضف استعلامات الوسائط لنقاط التوقف سريعة الاستجابة

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

/* للهواتف المحمولة: */

شاشة الوسائط فقط و (الحد الأقصى للعرض: 600 بكسل) {

الجدول، د {

العرض: 100%! هام؛

}

}

/* للأجهزة اللوحية: */

شاشة الوسائط فقط و (الحد الأدنى للعرض: 601 بكسل) و (الحد الأقصى للعرض: 900 بكسل) {

الجدول، د {

العرض: 80%! هام؛

}

}

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

استخدم الصور والوسائط المرنة التي يمكن تغيير حجمها

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

استخدم أحجام الصور المستجيبة

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

على سبيل المثال، بدلاً من تضمين صورة كبيرة بعرض 1000 بكسل فقط، قم أيضًا بتضمين:

• حجم متوسط ​​(حوالي 600 بكسل)
• حجم صغير للأعمدة الضيقة (حوالي 400 بكسل)
• حجم صغير لشاشات الجوال الصغيرة (حوالي 200 بكسل)

سيختار عميل البريد الإلكتروني تلقائيًا الحجم الأفضل للشاشة وعرض النطاق الترددي. لتحديد أحجام صور متعددة في بريدك الإلكتروني، استخدم السمة <img srcset>.

اجعل الوسائط متوافقة مع الأجهزة المحمولة

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

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

حجم الخط بوحدة ems وليس بكسل

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

استخدم إطار بريد إلكتروني سريع الاستجابة

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

إذا لم تكن تستخدم إطارًا، فقم بتحويل البكسل إلى ems

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

1. تحديد حجم الخط الأساسي الخاص بك بالبكسل. لنفترض أنها 16 بكسل.
2. تحويل ذلك إلى ems. 1em = 16 بكسل (الحجم الأساسي الخاص بك)، لذا 16 بكسل = 1em.
3. أي حجم تريد استخدامه، اقسمه على 16 بكسل واضربه في 1em. على سبيل المثال، لعنوان بحجم 24 بكسل، 24 بكسل/16 بكسل = 1.5em.
4. استبدل جميع أحجام البكسل في CSS بمكافئاتها em.

محاذاة المحتوى الخاص بك استجابة

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

استخدم قياسات السوائل

بدلاً من استخدام عروض بكسل ثابتة للأعمدة والصور والحاويات، استخدم النسب المئوية. سيسمح هذا للمحتوى الخاص بك بالتوسع بشكل متناسب بناءً على عرض الشاشة. على سبيل المثال، بدلاً من الصورة ذات العرض=”600px”، استخدم العرض=”50%”.

تجنب التصميم الثقيل

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

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

اختبار واختبار واختبار بعض أكثر

تحقق من كيفية عرضه على الأجهزة المحمولة

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

اختبار على عملاء البريد الإلكتروني الرئيسيين

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

تحقق من كيفية ظهور المحتوى الاحتياطي

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

مراجعة خدمة عرض البريد الإلكتروني

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

تحقق جيدًا من الروابط والعناصر التفاعلية

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

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

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

المحتوى يفيض على الهاتف المحمول

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

مشكلات عرض البريد الإلكتروني

يواجه بعض عملاء البريد الإلكتروني الأقدم مشكلات تتعلق بعرض البريد الإلكتروني المستجيب. لإصلاح هذا:

1. قم بتعيين الحد الأقصى للعرض على حاوية البريد الإلكتروني الخاص بك. نوصي بحجم 600 بكسل لمعظم رسائل البريد الإلكتروني.
2. قم بإضافة !important بعد إعلانات العرض لتجاوز بعض CSS الخاصة بعميل البريد الإلكتروني. على سبيل المثال:
3. إضافة رمز احتياطي لبرنامج Outlook 2007-2013. تحتاج هذه الإصدارات الأقدم إلى تصميم منفصل:

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

خاتمة

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