رسائل بريد إلكتروني متجاوبة بدون ألم أو معاناة. رسائل البريد الإلكتروني المستجيبة

فيما يلي بعض النصائح لإنشاء رسالة استجابة مثالية.

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

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

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

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

يكيف المحرر الحرف وفقًا للخوارزمية الخاصة به ؛ لا يمكن تغيير الخوارزمية.

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

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

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

كيفية تجميع رسالة في المحرر المدمج

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

الخطوة 1. مخطط أو نموذج أولي للحرف

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

الخطوة 2. تخطيط الخطاب في المحرر

أضف العدد المطلوب من الأعمدة بناءً على مخطط أو نموذج أولي جاهز

اسحب العناصر الضرورية إلى نص الرسالة

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

تخصيص محتوى العناصر: الحشو والتباعد والمحاذاة والأسلوب

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

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

لا تنس تخصيص الأزرار وإضافة روابط تنقل إليها.

الخطوة الثالثة. التحقق من الاستجابة في المحرر المدمج

عندما يكون البريد الإلكتروني جاهزًا ، تحقق من كيفية ظهوره على الأجهزة المختلفة.

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

الخطوة 4. التحقق من قابلية التكيف على خدمات الطرف الثالث

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

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

الخدمة مدفوعة ، اشتراك شهري في Litmus يبدأ من 79 دولارًا ، بالبريد الإلكتروني على Acid - من 45 دولارًا. إذا كنت ترسل خطابًا واحدًا مرة واحدة في الشهر ، فقد يكون ذلك مكلفًا. كحل أخير ، جرب Browser Shots ، إنه قديم وغير مريح ، ولكنه مجاني. تذكر أن هذه الخدمات ليست مضمونة بنسبة 100٪. حتى لو كان كل شيء على ما يرام في Litmus ، فهذا ليس سببًا لبدء القائمة البريدية على الفور. أرسل الرسالة إلى بريدك الشخصي وافتحها هناك.

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

كيفية تقييم نتيجة العمل - المصمم الخاص بك أو مصمم التخطيط

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

أولئك الذين يستعينون بمصادر خارجية للتخطيط لا يحتاجون إلى شراء حساب ، اطلب من مصمم التخطيط لقطات شاشة من Litmus. إذا كان محترفًا ، فإنه يتحقق من الرسائل الموجودة في مثل هذه الخدمات ، ولا يمثل إرسال لقطة شاشة مشكلة بالنسبة له.عند التحقق ، ألق نظرة فاحصة على عملاء البريد ، ومعظمهم من القوائم المنبثقة هنا. تأكد من التحقق من كيفية فتح بريد إلكتروني في Outlook و Gmail و Yandex و Mail.ru - فهذه هي أشهر عملاء البريد الإلكتروني في روسيا.

لا تضيع الوقت في إصلاح التخطيط إذا تم عرضه بشكل غير صحيح على iPhone الثالث ، في الإصدار السابع من Internet Explorer أو في عميل البريد The Bat. نعم ، سيكون هناك دائمًا أولئك الذين يستخدمون iPhone الثالث ، لكنهم أقلية. هل يستحق إعادة التصميم بنسبة 1-2٪ من القاعدة الإجمالية؟ يعتمد على كمية و "نوعية" القاعدة.

نأمل أن تكون قد قمت بتقسيمها وتعرف كل شيء عن المشتركين في قناتك. إذا كان 1-2٪ من 10000 شخص ، فإن الأمر يستحق العناء. إذا كنت تعمل في b2b وكانت نسبة 1-2٪ من الشركات الإدارية وأصحاب الأعمال وعملاء كبار الشخصيات الآخرين ، فسيتعين عليك تكييف الرسائل من أجلهم.

تأكد من عرض الحرف بشكل مناسب في Outlook و Gmail و Yandex و Mail.ru - هذا يكفي.

مذكرة المسوق

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

زائد

طلب أحد قراء مدونة Web Council التحدث عن تخطيط الحروف لقائمة البريد. أنا نفسي لا أفعل هذا عمليا. أتذكر أنني في وقت من الأوقات كنت أعاني من استخدام قوالب Subscribe.ru ، وأتذكر أنها كانت عملاً كئيبًا. المشكلة هي أن خدمات البريد الإلكتروني لا تعمل بشكل جيد مع تخطيط الكتلة. بل والأسوأ مع أنماط المغلق. لقد مرت سنوات عديدة ، وما زالت الأمور قائمة. الآن يتم طباعة الغالبية العظمى من رسائل المراسلات بالطريقة القديمة - باستخدام الجداول. وهذا في عام 2016 ، عندما كانت html5 و css3 وغيرها من الحلويات الحديثة تقود المواقع لفترة طويلة.

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

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

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

ثالثًا ، ليس عليك أن تهتم بعلامات الطبيب ، والرأس والجسم. بدون نوع المستند ، ستكون رسائلك هي نفسها في كل مكان ، ويكون الرأس والجسد عديم الفائدة تقريبًا ، لأن ستظل مقطوعة من قبل معظم خدمات البريد (دليل).

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

التخطيط التكيفي للرسائل

في كثير من الأحيان ، يقوم مرسلو البريد بحظر الصور بالأحرف ، وإذا لم تقم بتعيين أحجامها ، فستبدو الرسالة غير ملائمة. تأكد أيضًا من إضافة style = "display: block؛. سيؤدي هذا إلى التخلص من مشاكل المسافة البادئة غير المفهومة (على سبيل المثال ، في gmail):

ولا تستخدم بأي حال الصور أحادية البكسل كفواصل لخلايا الجدول! رسالتك مضمونة لينتهي بها الأمر في رسائل غير مرغوب فيها. إذا كنت بحاجة إلى فاصل ، فعليك استخدام صورة بأبعاد لا تقل عن 20 × 20 بكسل ، والتي في الأنماط يجب إجبارها على حجم 1 × 1 بكسل.

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

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

إذا كانت المقالة مفيدة لك ، فيرجى تقييمها ومشاركتها على الشبكات الاجتماعية:

(2 الأصوات ، المتوسط:

إدخالات ذات صلة:

تخطيط رسائل البريد الإلكتروني المستجيبة: مذكرة المسوق

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

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

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

2. ميزات تخطيط الاستجابة

3. مناهج تكييف البريد الإلكتروني

4. نموذج البريد الإلكتروني المتجاوب الأساسي

5. تقنيات التكيف المتنقلة

6. أدوات تخطيط HTML

7. تلخيص الدورة

8. التسويق عبر البريد الإلكتروني المستجيب: الاختبار النهائي

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

إنشاء رسالة بريدية

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

30 قالب بريد إلكتروني سريع الاستجابة مجانًا

لجذب الانتباه ، يجب تقديم المعلومات في "غلاف" جميل ، مع الروابط الصحيحة والصور الجذابة. الانطباع الأول للحرف هو الغلاف الخارجي ، والحشو ثانوي.

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

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

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

تخطيط حروف html

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

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

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

على ماذا تحصل؟

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

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

المادة المحدثة 06/20/2018

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

دعنا نلقي نظرة على أمثلة حول كيفية تحقيق عرض جيد للحرف في مجموعة متنوعة من عملاء ISP والبريد الإلكتروني.

كيف يبدو قالب البريد الإلكتروني المتجاوب العام:

لإصلاح مشكلة القياس التلقائي لرسائل البريد الإلكتروني في iOS 10 و iOS 11 ، أضفنا:

مثال على خطأ مقياس تلقائي

الاختراق التالي:

Webkit-text-size-Adjust: لا شيء ؛ ضبط حجم النص: لا شيء ؛

يمنع أجهزة iOS من تغيير محتوى الرسالة لسهولة قراءتها. هذا عادة ما يتعارض مع التصميم ويمكن أن يكسر التخطيط:

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

…

نظرًا للدعم المحدود لخصائص النمط ، مثل max-width ، بواسطة عملاء البريد Outlook 2007-2016 ، بالإضافة إلى عملاء البريد مثل IE Outlook 2003 و Lotus Mail ، من الضروري إنشاء هيكل جدول إضافي في التعليقات الشرطية التي سيحد من عرض الرسالة في برامج البريد هذه:

ويتبع ذلك جدول المحتوى الرئيسي بعرض 100٪ وحد أقصى للعرض يبلغ 600 بكسل.

أشياء يجب تذكرها عند القيام بتخطيط البريد الإلكتروني:

استخدم أبسط هيكل ممكن للجدول. لا يقوم Outlook دائمًا بإعادة إنتاج الجداول المعقدة بشكل صحيح.
حاول تجنب الجمع بين الخلايا (colspan ، rowspan). استخدم الجداول المتداخلة بدلاً من ذلك.
يجب التخلص من سمات حشوة الخلية وتباعد الخلايا والحدود في الجدول.
تأكد من تحديد المحاذاة بشكل صريح داخل الخلايا ، أفقيًا ورأسيًا (محاذاة ، قيمة) ، حيث قد تختلف القيم الافتراضية. هذا يؤثر سلبًا على عرض الحرف.
في Outlook (2007/2010) ، قد تظهر فواصل الصفحات التي تظهر كمسافة تقسم جدول أو صورة. تحدث إذا تجاوز ارتفاع الجدول 1800 بكسل. للتخلص من هذه المشكلة ، أغلق جميع الجداول (بما في ذلك الجدول الرئيسي) وأعد فتحها بحيث لا يتجاوز ارتفاع كل جدول 1800 بكسل.
يجب أن يكون الرمز سهل القراءة. غالبًا ما يؤدي العدد الكبير من الجداول إلى صعوبة التنقل في البنية.
يجب أن تكون حشوة العناصر المتداخلة موجودة ، ولكن في نفس الوقت لا ينبغي إساءة استخدامها ، وكذلك التفاف الخط وتمديد الكتلة في الارتفاع. يجب أن تناسب الكتلة المنطقية بشكل مثالي الشاشة بالكامل.
استخدم التعليقات للإشارة إلى وجهة الكتلة وبدايتها / نهايتها.
يجب ألا يتجاوز حجم كود html للحرف 100 كيلوبايت ، وإلا سيتم اقتطاعه في بعض واجهات الويب وعملاء البريد الإلكتروني ، على وجه الخصوص ، في Gmail. بعد تخطيط الحرف وتكوينه ، تحقق من حجم ملف html الناتج. لتقليل حجم الحرف ، يمكنك استبعاد كل علامات التبويب وفواصل الأسطر وجميع التعليقات (باستثناء الشرطية).
استخدم استعلامات الوسائط بعناية وكن على دراية بهؤلاء المشتركين الذين لا يقبلهم عملاء البريد الإلكتروني.

العناصر الرئيسية للرسالة

المسافة الفارغة

تعمل المنصات بشكل مختلف مع الحشو الرأسي والأفقي.

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

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

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

نص

هناك أيضًا عدد من الخصائص المميزة في تصميم النص. استخدم العلامات التي ليس لها نمط محدد بشكل افتراضي - span. يجب التخلص من استخدام p و h1 - h6 وما إلى ذلك.

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

اللون (اللون)... يجب تحديد اللون لكل عنصر نص ، بينما ، كما ذكرنا سابقًا ، يجب تحديده في شكل رمز سداسي عشري ، على سبيل المثال # 4676a9.
حجم الخط... يشار عادة إلى الحجم بالبكسل أو نقطة. يفضل استخدام الخيار الأول.
محرف (عائلة الخط)... يجب استخدام الخطوط القياسية فقط في الحروف. عادةً ما تكون الخطوط القياسية عبارة عن خطوط مثبتة مسبقًا في نظام التشغيل Windows XP. هناك نوعان من عائلات الخطوط - serif و sans-serif. الأكثر استخدامًا: Courier، Georgia، Times، Times New Roman، Arial، Verdana، Tahoma، Trebuchet MS.

نص بسيط

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

الروابط

يتشابه نمط الروابط مع نمط النص العادي ؛ وبناءً عليه ، يتم استخدام علامة "a" وتظهر السمة href. وأيضًا بالنسبة للروابط المكتوبة بالأحرف ، يجب تحديد السمة الهدف بالقيمة _blank لفتحها في نافذة جديدة.

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

نص بسيط

الصور والخلفية

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

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

في معظم عملاء البريد الإلكتروني وفي بعض واجهات الويب (outlook.com ، وفي بعض الحالات yahoo وفي بعض الحالات gmail) لا يتم تحميل الصور افتراضيًا ، لذلك تحتاج إلى تقديم عرض مقبول بدون صور ، لهذا استخدم نصًا بديلًا (بديل) ، على غرار تصميم الحروف ، وألوان الخلفية ، وما إلى ذلك.

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

عند إدراج الصور في بريد إلكتروني سريع الاستجابة ، ليس من الممكن دائمًا تحديد العرض والارتفاع بالبكسل ، وأحيانًا يتعين عليك تحديده بالنسبة المئوية: غالبًا ما يكون عرض التصميمات 100٪. ستقوم معظم واجهات الويب وعملاء البريد الإلكتروني بتمديد هذه الصورة إلى 100٪ من عرض الكتلة الأصلية ، ولكن Outlook 2007-2016 سيعرض الصورة بمقياس 1: 1. لذلك ، يجب أن يتطابق عرض هذه الصورة مع العرض المعروض.

صور الخلفية

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

يمكن التحايل على هذا القيد باستخدام VML. لاستخدامه المريح ، يمكنك استخدام.

شبكة المنتج

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

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

نظرًا لأن Outlook 2007-2016 لا يدعم الكتل العائمة ، فقد تم إنشاء بنية إضافية خصيصًا لها في التعليقات الشرطية:

كتلة 1

Block2

رمز مرفق بين:

سيتم تجاهلها من قبل جميع عملاء البريد الإلكتروني باستثناء Outlook 2007-2016 وعملاء البريد الإلكتروني الشبيه بـ IE.

وسيكون لكل كتلة الهيكل التالي:

حاجز

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

القالب 2

كتلة 1

عناصر وتقنيات أخرى

مقدمة غير مرئية

تعرض جميع واجهات الويب تقريبًا أيضًا النص الأول بجوار سطر الموضوع:

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

للقيام بذلك ، أضف رمزًا بالهيكل التالي إلى بداية جسم html للحرف:

4 أشكال مختلفة من عطلات مايو من Localway. إنها خطيئة أن تبقى في المنزل خلال عطلة مايو.

يمكن أن يؤثر استخدام الرأس المسبق غير المرئي سلبًا على قابلية التسليم ، لذا استخدم هذه التقنية بعناية وراقب إمكانية التسليم بعناية من خلال مدير مكتب البريد.

فيديو في رسائل البريد الإلكتروني

بدأ عميل البريد القياسي Mail مرة أخرى في تشغيل html5-video ، مع ذلك - رابط مباشر لمقطع فيديو youtube ، تم وضعه على الصورة.

مع هذا التنفيذ ، سيتم عرض الفيديو على طبقة في واجهات الويب Mail.ru (حوالي 55٪) و Gmail (حوالي 14٪). في الوقت نفسه ، على معظم الأجهزة المحمولة ، سيتم فتح الفيديو في تطبيق Youtube ، دون فتح متصفح.

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

اختبارات

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

لتسريع عملية الاختبار ، يمكنك استخدام خدمتَي Litmus و EmailOnAcid ، لكن هذا لا يلغي الحاجة إلى التحقق يدويًا من عرض كل حرف على حدة.

ذكرت المقالة بعض الخدمات والموارد والأدوات التي ستكون بلا شك مفيدة لمصمم الخطابات وليس فقط. فيما يلي قائمة صغيرة بالموارد المفيدة.

الأدوات والخدمات:
أزرار البريد الإلكتروني هي منشئ الأزرار باستخدام VML.
- إدراج صور الخلفية في رسائل البريد الإلكتروني باستخدام VML.
عباد الشمس - اختبار عرض الحروف.
Email On Acid هو بديل لـ Litmus: اختبار عرض رسائل البريد الإلكتروني.

مواد مفيدة:
Blog Litmus هي الشركة الرائدة في سوق اختبار البريد الإلكتروني. حالات مثيرة للاهتمام وآخر الأخبار من عالم التسويق عبر البريد الإلكتروني وتخطيط البريد الإلكتروني.
Blog Email On Acid - حالات مثيرة للاهتمام وآخر الأخبار من عالم التسويق عبر البريد الإلكتروني وتخطيط البريد الإلكتروني.
- أول مدونة عن التسويق عبر البريد الإلكتروني ، تتحدث عن كيفية جعل رسائل البريد الإلكتروني فعالة.
مدونة Tod - حالات مثيرة للاهتمام ومواد مفيدة حول التخطيط والتطوير.

ترجمة

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

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

تقوم نسبة كبيرة من جمهور مختلف شركات التسويق عبر البريد الإلكتروني بمشاهدة رسائل البريد الإلكتروني على الأجهزة المحمولة. وجدت دراسة أجريت في 2011 Campaign Monitor أن ما يقرب من 20٪ من فتحات البريد الإلكتروني حدثت على الهواتف الذكية والأجهزة اللوحية ، ارتفاعًا من 4٪ فقط في عام 2009. ما يقرب من 90٪ من هذه الاكتشافات تم إجراؤها على أجهزة iOS. الآن الأرقام أعلى من ذلك.

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

تقنيات التصميم

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

على سبيل المثال ، إليك الشكل الذي قد تبدو عليه مثل هذه الرسالة في Outlook:

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

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

أشياء يجب مراعاتها عند إنشاء القوالب

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

على الأجهزة المحمولة ، تعمل القوالب أحادية العمود التي لا يزيد عرضها عن 500-600 بكسل بشكل أفضل. إنها أسهل في القراءة ، وحتى إذا كان هناك بعض العيوب فيها ، فإن جميع "المياه الضحلة" تبدو أفضل على أي حال.
وفقًا لإرشادات Apple ، يجب أن يكون الحد الأدنى لمنطقة الهدف للأزرار والروابط 44 × 44 بكسل. لا يوجد شيء "غير صالح للاستخدام" أكثر من مجموعة من الروابط الصغيرة التي يصعب الوصول إليها على شاشة صغيرة لجهاز محمول.
الحد الأدنى للخط المعروض على iPhone هو 13 بكسل. من الضروري مراعاة هذه الحقيقة عند إنشاء نص الحرف - إذا تمت كتابة النص في القالب بخط أصغر ، فسيتم تكبيره تلقائيًا ، مما قد يؤدي إلى كسر التخطيط بأكمله.
يجب أن تكون الرسالة موجزة ، ويجب وضع جميع المعلومات المهمة في أعلاها. يعد التمرير على شاشات اللمس بإصبعك أكثر صعوبة من التمرير على سطح المكتب باستخدام الماوس.
إذا أمكن ، استخدم العرض: لا شيء خاصية ؛ لإخفاء عناصر القالب الاختيارية. تعد أزرار مشاركة الشبكات الاجتماعية مناسبة على سطح المكتب ، ولكنها ليست ملائمة دائمًا للاستخدام على الهاتف الذكي.

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

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

تنضيد رسائل البريد الإلكتروني للجوال

عندما يتعلق الأمر بأنماط الهاتف المحمول ، فغالبًا ما لا يكون المقصود هو ملف نمط منفصل ، ولكن استعلامات الوسائط. هكذا يبدون:

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

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

لذلك ، غالبًا ما يتم استخدام max-device-width: 480 بكسل (هذا هو أيضًا عرض عرض أجهزة iPhone السابقة في الوضع الأفقي) ، ولكن يمكنك توسيع الوصف ليشمل أحجام الشاشة الأخرى:

شاشة الوسائط @ و (عرض الجهاز: 480 بكسل) و (ارتفاع الجهاز: 360 بكسل) ، الشاشة و (عرض الجهاز: 360 بكسل) و (ارتفاع الجهاز: 480 بكسل) ، الشاشة و (عرض الجهاز: 320 بكسل) و (الجهاز -ارتفاع: 240 بكسل) (...)
دعنا نعود إلى قالب البريد الإلكتروني للجوال الذي تمت مناقشته أعلاه. هكذا تبدو في Apple Mail:

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

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

شاشةmedia only و (max-device-width: 480px) (/ * أنماط CSS الخاصة بالجوال تذهب هنا * / table (width: 325px! important؛) img (width: 325px! important؛) p (display: none! الأهمية؛))
بعد ذلك ، سنلقي نظرة على تقنيات أكثر تعقيدًا لتكييف رسائل البريد الإلكتروني المحمولة مع الأجهزة المحمولة.

قم بإنشاء تخطيطات أعمدة متجاوبة من اثنين إلى واحد

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

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

القاعدة الذهبية لتخطيط البريد الإلكتروني هي: "حيثما أمكن ، استخدم HTML بدلاً من CSS." يمكن أن تختلف درجة دعم عملاء البريد الإلكتروني المختلفين لـ CSS بشكل كبير ، لكنهم جميعًا يعملون بنفس الطريقة مع HTML. على سبيل المثال ، تعتبر السمات مثل align = "left" و cellpadding = "10" أدوات أكثر موثوقية من نظيراتها في CSS float: left؛ والحشو: 10 بكسل ؛ ... هذه هي السمات التي سيتم استخدامها عند إنشاء أحرف بتنسيق "عمودين إلى عمود واحد".

هذه هي الطريقة التي قد تبدو بها رسالة مماثلة في Outlook 2007:

يستخدم المثال أعلاه جدول حاوية بعرض 640 بكسل يحتوي على جدولين بحجم 320 بكسل يشكلان أعمدة. تحتوي هذه الأعمدة على وسادة خلوية = "20" - يتم ذلك حتى لا يتشبث المحتوى بالحدود.

عند الترميز للويب ، عادةً ما يستخدمون float: left؛ لمحاذاة الأعمدة. ومع ذلك ، يمكن استخدام align = "left" بدلاً من ذلك. نظرًا لأن عرض جدول الحاوية يساوي أو أكبر من العرض المدمج للجدولين المتداخلين ، فإن استخدام HTML يعمل بشكل جيد. يوجد أدناه رمز مبسط لنمط مماثل من عمودين:

العمود الأيسر المحتوى

العمود الأيمن المحتوى

تبدو النتيجة كما يلي:

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

والنتيجة هي نموذج سريع الاستجابة يتكون من عمودين على سطح المكتب وعمود واحد على الهاتف المحمول (في تطبيق البريد الافتراضي لـ iPhone وعميل بريد Android).

إضافة "الكشف التدريجي" (كما في ويكيبيديا)

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

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

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

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

سيتم تنفيذ الإجراءات الرئيسية باستخدام فئات mobilehide و mobileshow و article. مع العرض: لا شيء ؛ سيتم إخفاء زر توسيع / إخفاء المحتوى على سطح المكتب:

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

شاشةmedia only و (max-device-width: 480px) (a، a (display: block! important؛ color: #fff! important؛ background-color: #aaa؛ border-radius: 20px؛ padding: 0 8px؛ زخرفة النص: لا شيء ؛ وزن الخط: غامق ؛ عائلة الخطوط: "Helvetica Neue" ، Helvetica ، sans-serif ؛ حجم الخط: 11 بكسل ؛ الموضع: مطلق ؛ أعلى: 25 بكسل ؛ يمين: 10 بكسل ؛ محاذاة النص: الوسط ؛ العرض: 40 بكسل؛) div (العرض: لا شيء؛) a.mobileshow: hover (visibility: hidden؛) .mobileshow: hover + .article، .article: hover (display: inline! important؛))
نتيجة لذلك ، سيتم عرض أزرار لطي المحتوى وتوسيعه على iPhone. يحتوي جيثب على جميع ملفات

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

تحضير

بادئ ذي بدء ، دعنا نحدد الميزات الرئيسية لرسائل البريد الإلكتروني المستجيبة:

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

يبدأ

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

دوكتايب

يقوم Hotmail و Gmail بفرض نوع المستند في كود XHTML 1.0.

استعلامات منفذ العرض والوسائط

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

يُنصح أيضًا بتحديد علامة عنوان نوع المحتوى. سيتجاهل العديد من عملاء البريد الإلكتروني هذا ، ولكن لا تنس "إصدار المتصفح" للرسالة. يمكنك أيضًا إضافة بعض CSS لتعيين بعض خيارات العرض بنفسك.

موضوع البريد الإلكتروني أو العنوان
عند إضافة استعلامات الوسائط ، قم بإخفاء العناصر باستخدام فئة الإخفاء باستخدام العرض: لا شيء إذا كان عرض الشاشة أقل من 600 بكسل:

شاشةmedia only و (max-width: 600px) (جدول ، img ، td (عرض: لا شيء! مهم ؛))
هذا هو النهج القياسي عند ترميز رسائل البريد الإلكتروني المتجاوبة: استبدل CSS رأسًا بـ! هام. سيتجاهل GMail الأنماط الموجودة في الرأس. لذلك ، تحتاج إلى التأكد من عرض المحتوى بشكل صحيح في كل مكان. باستخدام استعلامات الوسائط ، يمكنك أيضًا تحديد عرض الكتلة بالمحتوى:

شاشةmedia فقط و (أقصى عرض: 600 بكسل) (الجدول (العرض: 92٪! مهم ؛))

أزرار

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

لسوء الحظ ، لا يوجد حل واحد عبر الأنظمة الأساسية للأزرار في رسائل البريد الإلكتروني. أحد الخيارات:

شاشةmedia only و (max-width: 600) (a (display: block؛ padding: 7px 8px 6px 8px؛ -webkit-border-radius: 5px؛ -moz-border-radius: 5px؛ border-radius: 5px؛ اللون: #fff! مهم ؛ الخلفية: # f46f62 ؛ محاذاة النص: المركز ؛ زخرفة النص: لا شيء! مهم ؛))
حسنًا ، الطريقة البسيطة جدًا هي الارتباط العادي. ومع ذلك ، فإن هذا يعاني من قابلية الاستخدام على الأجهزة التي تعمل باللمس:

انقر فوق لي!
قم بتنزيل المثال الموضح في المقالة.

أحرف "المطاط"

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

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

في ما يلي بعض الأمثلة الجيدة على كيفية عرض رسائل البريد الإلكتروني سريعة الاستجابة على الشاشات الكبيرة وشاشات الجوال:

استنتاج

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

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

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

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

اختيار محرر أو خدمات تخطيط مضمنة

يكيف المحرر الحرف وفقًا للخوارزمية الخاصة به ؛ لا يمكن تغيير الخوارزمية.

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

كيفية تجميع رسالة في المحرر المدمج

الخطوة 1. مخطط أو نموذج أولي للحرف

الخطوة 2. تخطيط الخطاب في المحرر

أضف العدد المطلوب من الأعمدة بناءً على مخطط أو نموذج أولي جاهز

اسحب العناصر الضرورية إلى نص الرسالة

تخصيص محتوى العناصر: الحشو والتباعد والمحاذاة والأسلوب

لا تنس تخصيص الأزرار وإضافة روابط تنقل إليها.

الخطوة الثالثة. التحقق من الاستجابة في المحرر المدمج

عندما يكون البريد الإلكتروني جاهزًا ، تحقق من كيفية ظهوره على الأجهزة المختلفة.

الخطوة 4. التحقق من قابلية التكيف على خدمات الطرف الثالث

______________________________________________________________________________________

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

تحميل ...

العنوان الأول

إخفاء العرض

موربي موطن Pellentesque ...

اقرأ أكثر ...