البريد الإلكتروني المستجيب 101 سؤال وجواب عبر الويب: أساسيات HTML و CSS

مع استمرار فتح الهاتف المحمول في الارتفاع (لقد زاد بنسبة تزيد عن 500٪ في السنوات الأربع الماضية!) ، كذلك الحديث عن استراتيجيات البريد الإلكتروني للجوال مثل التصميم سريع الاستجابة. في ندوة البريد الإلكتروني المتجاوبة 101: HTML و CSS Basics ، ألقينا نظرة على مشهد البريد الإلكتروني للجوال ، وأسس إنشاء رسائل بريد إلكتروني سريعة الاستجابة ، ولماذا تعتبر هذه التقنيات ضرورية لتحسين تجربة المشترك. قمنا أيضًا بتغطية دعم عميل البريد الإلكتروني وشرحنا كيفية كتابة رمز بريد إلكتروني متجاوب من البداية.

لم تتمكن من القيام بذلك؟ لا تقلق. سجلنا كل شيء! بالإضافة إلى ذلك ، قمنا حتى بإتاحة الشرائح.

احصل على الشرائح + تسجيل →

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

ابدأ بالتصميم سريع الاستجابة

هل تعتقد أن الارتفاع في عمليات فتح الهاتف المحمول قد وصل إلى درجة التشبع أم تعتقد أنه سيستمر في الزيادة؟

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

ما الفرق بين التصميم المرن والتكيف والمتجاوب؟

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

• قابل للتحجيم أم مائع أم مستجيب؟ فهم نهج البريد الإلكتروني للجوال
• ثابت مقابل السائل مقابل التكيف مقابل الاستجابة
• أي تخطيط؟ ثابت أم سائل أم متكيف أم متجاوب؟
• سائل

ما النهج الذي يحتوي على أفضل دعم لعميل البريد الإلكتروني - مرن أم متكيف أم متجاوب؟

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

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

ما هو الاستعلام عن الوسائط؟

استعلام الوسائط (media) هو عبارة شرطية تقوم بتشغيل مجموعة من CSS لمجموعة معينة من القواعد. يمكنك معرفة المزيد حول استعلامات الوسائط والبريد الإلكتروني باستخدام الموارد التالية:

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

هل هناك أي بيانات عن تأثير التصميم سريع الاستجابة على رسائل البريد الإلكتروني؟

تتحدى! قمنا مؤخرًا بإعداد تقرير مع MailChimp حول تأثير التصميم سريع الاستجابة واختبار البريد الإلكتروني على النقرات. وجدنا أن التصميم سريع الاستجابة يؤدي إلى زيادة بنسبة 15٪ في النقرات لمستخدمي الأجهزة المحمولة.

مع الدعم المختلط والعديد من الحلول البديلة ، يبدو التحرك نحو التصميم سريع الاستجابة أمرًا مربكًا. كيف أبدأ؟

مع هذا الدعم المحدود من عملاء البريد الإلكتروني الحاليين ، قد يكون من الصعب تنفيذ تصميم البريد الإلكتروني سريع الاستجابة. توصيتنا الأولى هي تثقيف نفسك قدر الإمكان حول تصميم البريد الإلكتروني سريع الاستجابة قبل الغوص فيه. نوصي بمراجعة الموارد الموجودة في MailChimp و Campaign Monitor و Litmus للمساعدة في إرشادك.

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

إذا كنت مرتاحًا للغوص في الكود ، فتحقق من Litmus Builder ، محرر كود مصمم خصيصًا لتصميم البريد الإلكتروني. حاول تنفيذ تقنيات البريد الإلكتروني سريعة الاستجابة كبداية - ستوفر تجربة رائعة للمستخدمين الذين يفتحون بريدهم الإلكتروني في عملاء يدعمون التصميم سريع الاستجابة (أجهزة Apple بشكل أساسي).

تأكد أيضًا من معاينة رسائل البريد الإلكتروني قبل إرسالها! يمكنك إرسال رسائل بريد إلكتروني إلى نفسك باستخدام PutsMail أو الاطلاع على شكل بريدك الإلكتروني في أكثر من 40 عميل بريد إلكتروني مختلفًا باستخدام Litmus.

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

هل توصي بأي أطر سريعة الاستجابة؟

نعم! نوصي بالتحقق من حبر إطار العمل المتجاوب الخاص بـ ZURB (تنبيه: يتطلب إطار العمل هذا حلاً بديلاً لتقديمه بشكل صحيح في Outlook 2007-2013). إذا كنت تحب Sass ، فقد صنع Faust Gertz نسخة Sass من Ink ولدى Alex Ilhan إطار بريد إلكتروني Sass يسمى Zenith. بالإضافة إلى ذلك ، لدى Dan Denney من Code School سير عمل رائع للبريد الإلكتروني يسمى Emayll ولدى Brian Graves مجموعة مذهلة من أنماط البريد الإلكتروني المستجيبة.

التحسين الأمثل للعملاء الذين لا يدعمون استفسارات الوسائط

إذا كان العميل لا يدعم التصميم سريع الاستجابة ، فما الذي سيعرض في ذلك العميل؟

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

أفضل شيء تفعله هو معاينة بريدك الإلكتروني دائمًا قبل إرساله. يمكنك إرسال رسائل بريد إلكتروني إلى نفسك باستخدام PutsMail أو الاطلاع على شكل بريدك الإلكتروني في أكثر من 40 عميل بريد إلكتروني مختلفًا باستخدام Litmus.

ما هي أفضل طريقة للتعامل مع التصميم سريع الاستجابة للعملاء الذين لا يدعمونه ، مثل تطبيق Gmail لنظام Android؟ ما نوع "النسخ الاحتياطي" الذي يجب أن يكون لدينا؟

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

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

• نهج الترميز الهجين
• Hybrid Coding Redux-Raising the Bar
• الدروس المستفادة في تصميم البريد الإلكتروني سريع الاستجابة

أسئلة التعليمات البرمجية

هل يمكنك وضع استعلامات الوسائط في مستند CSS منفصل والارتباط بهذا المستند في الرأس؟

لا يوصى باستخدام أوراق الأنماط المرتبطة (علامة <link>) لرسائل البريد الإلكتروني بسبب دعم عميل البريد الإلكتروني المحدود. يجب تضمين جميع الأنماط في <head> للبريد الإلكتروني.

ما هي نقاط الفصل الأكثر شيوعًا لتصميم البريد الإلكتروني سريع الاستجابة؟ كم عدد نقاط التوقف المثالية؟

مع حدوث معظم عمليات الفتح على أجهزة iPhone ، من المهم أن تبدأ رسائل البريد الإلكتروني في تنفيذ نقاط التوقف بحد أدنى 414 بكسل ، وهو عرض iPhone 6 Plus الجديد.

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

هل تنصح باستخدام الجداول أو divs؟

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

هل يمكنك تغيير سمات المحاذاة = "يسارًا" أو سمات محاذاة = "يمين" داخل جدول باستخدام استعلامات الوسائط؟ أم أنها فقط لتغييرات في الأسلوب؟

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

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

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

هل يجب أن تكون الأنماط مضمنة لجعلها تعمل مع العديد من عملاء البريد الإلكتروني؟

نعم فعلا. يقوم العديد من عملاء البريد الإلكتروني بإزالة أي أنماط CSS في <head> لرسائل البريد الإلكتروني ، ولا سيما Gmail ، مما يجعل أنماط CSS المضمنة ضرورة لرسائل البريد الإلكتروني.

هل من الأفضل استخدام البكسل أو البريد الإلكتروني لحجم الخط في رسائل البريد الإلكتروني؟

من الأفضل استخدام وحدات البكسل لتحديد أحجام الخطوط في رسائل البريد الإلكتروني ، لأن العديد من عملاء البريد الإلكتروني لا يدعمون رسائل البريد الإلكتروني.

هل من الممكن استبدال الصور باستخدام استعلامات الوسائط؟

من الممكن استبدال صور الخلفية باستخدام استعلامات الوسائط ، ولكن ليس الصور المضمنة ( <img>).

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

بالنسبة لشبكية العين ، تريد عادةً أن تجعل الصورة ضعف حجم عرضها النهائي. على سبيل المثال ، يجب أن تكون الصورة 100 × 100 في الواقع 200 × 200 ، ولكن يتم تصغيرها إلى 100 × 100 باستخدام سمات HTML أو نمط CSS. عادةً ، يجب استخدام هذه التقنية فقط مع الصور الأصغر التي يجب أن تكون حادة - وليس الصور الكبيرة مثل الصور. هناك نقاشات رائعة حول Litmus Community حول التصميم لشبكية العين:

• تصميم لشبكية العين
• الصور التي تحتوي على عبارات نصية تحث المستخدم على اتخاذ إجراء وعرض شبكية العين

يعرض: لا شيء ؛ أو العرض: كتلة ؛ العمل في البريد الإلكتروني المستجيب؟

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

هل هناك أي عميل بريد إلكتروني مكافئ لـ "فحص عنصر" في متصفح الويب؟ سيكون من المفيد استكشاف أخطاء تصميماتي سريعة الاستجابة وإصلاحها.

لا يوجد ما يعادل "فحص العنصر" في متصفح الويب. ومع ذلك ، فإن ميزة الاختبار التفاعلي في Litmus مفيدة للغاية. أيضًا ، لدى Litmus Builder وظيفة اختبار وإعادة اختبار بنقرة واحدة لتكرار البريد الإلكتروني بسرعة كبيرة.

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

هل الحشو مدعوم عالميًا عبر عملاء البريد الإلكتروني؟

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

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

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

يحتوي ActionRocket على منشور رائع حول تقنية متقدمة لجداول التراص العكسي.

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

ما هو Litmus Builder؟

Litmus Builder هو محرر الأكواد الأول في العالم المصمم لمصممي البريد الإلكتروني من قبل مصممي البريد الإلكتروني. يمكنك إنشاء رسائل البريد الإلكتروني وتعديلها ومشاركتها مجانًا تمامًا.

هل تم بناء Emmet مباشرة في Litmus Builder؟

إنها! يجعل تكامل Emmet الخاص بنا البرمجة المختصرة أمرًا سهلاً.

أين يمكننا العثور على قوالب بريد إلكتروني سريعة الاستجابة داخل Litmus Builder؟

يحتوي Litmus Builder على معرض يضم أكثر من 20 قالب بريد إلكتروني في قسم القوالب. جميع القوالب مجانية تمامًا للاستخدام. تحقق من وثائق المساعدة الكاملة الخاصة بنا لـ Litmus Builder.

جرب القوالب المستجيبة المجانية والمختبرة مسبقًا

يتيح لك البريد الإلكتروني المتجاوب تحسين تصميماتك لجمهور متنقل بشكل متزايد. قم بتبسيط عملية تصميم بريدك الإلكتروني مع مجموعة من القوالب المجانية التي تم اختبارها مسبقًا على Litmus Community.

تقديم قوالب مجتمع Litmus ابدأ حملتك التالية باستخدام أحد قوالب Litmus المختبرة مسبقًا. قم بالوصول إلى القوالب →