هذا هو مستقبل تصميم البريد الإلكتروني

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

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

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

التسويق عبر البريد الإلكتروني في 2020 استعد لمستقبل التسويق عبر البريد الإلكتروني مع رؤى 20 خبيرًا رائدًا ، بالإضافة إلى نتائج استطلاع من آلاف المسوقين والمستهلكين. التحميل الان

لا يجب أن يكون تصميم البريد الإلكتروني مقيدًا

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

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

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

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

منذ فترة ، أرسلت شركة التجزئة البريطانية B&Q رسالة بريد إلكتروني أشعلت فيها النيران في الصناعة.

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

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

الأمر الأكثر إثارة للإعجاب هو أن كل شيء يعود بشكل جميل لعملاء البريد الإلكتروني الذين لا يدعمون هذه التقنيات الأكثر تقدمًا.

ألوان مجنونة وحرب النجوم

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

أحد الأمثلة المفضلة لدينا هو بريدهم الإلكتروني الذي طرح السؤال ، "ما لون هذا البريد الإلكتروني؟".

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

مثال رائع آخر من Action Rocket هو الملخص المستوحى من Star Wars والذي استفاد من خاصية منظور webkit التجريبية ، جنبًا إلى جنب مع تحويلات CSS ، لإعادة إنشاء الزحف الافتتاحي الأيقوني لفيلم الخيال العلمي المفضل لدى الجميع.

الرسوم البيانية في البريد الإلكتروني؟

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

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

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

فيديو HTML5 والجولات التفاعلية

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

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

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

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

ألذ قوائم البريد الإلكتروني

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

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

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

مسابقات المجتمع: أحدث ما توصلت إليه بالفعل

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

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

هل تجرب شيئًا جديدًا؟

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

جرب Litmus مجانًا →