Advertisement
  1. Web Design
  2. Email

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

Scroll to top

() translation by (you can also view the original English article)

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

ملاحظة قبل أن نبدأ

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

القاعدة #1: تكون شفافة

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

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

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

Try this Clear and obvious sender name subject line logo and opening contentTry this Clear and obvious sender name subject line logo and opening contentTry this Clear and obvious sender name subject line logo and opening content
حاول هذا! اسم المرسل واضحة وواضحة وسطر الموضوع، والشعار وفتح المحتوى.

القاعدة رقم 2: كن واضحا ، احتضان الاتفاقية

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

جعل الروابط الخاصة بك واضحة

يمكنك إنشاء أزرار رائعة وجميلة وقابلة للنقر ويمكن الضغط عليها لروابطك. على الجوّال ، يمكنك جعلها 100٪ من العرض بحيث يمكن النقر عليها بسهولة باستخدام إما الإبهام (بدون الحاجة إلى ذلك).

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

يوجد حوالي 50٪ من عمليات الفتح على الأجهزة التي تعمل باللمس في هذه الأيام ، لذا تجنب اللغة التي لا معنى لها ، مثل "انقر هنا". 

email-graphemail-graphemail-graph
من جوستين الأردن على litmus.com 

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

جعل فوائد النقر بشكل واضح 

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

القاعدة #3: أقول أقل

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

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

Try this Short and punchy bites with clear calls to actionTry this Short and punchy bites with clear calls to actionTry this Short and punchy bites with clear calls to action
جرب هذه  لدغات قصيرة وثاقبة ، مع دعوة واضحة للعمل. 

جعله تقرأ آليا

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

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

Try this Short punchy sentences with obvious buttons Try this Short punchy sentences with obvious buttons Try this Short punchy sentences with obvious buttons
حاول هذا! جمل قصيرة قصيرة مع أزرار واضحة.

يمكنك أن تقول أكثر – في وقت لاحق

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

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

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

كرر نداءك الرئيسي للعمل

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

Try this Prioritise your main proposition then include secondary andor lengthier content underneathTry this Prioritise your main proposition then include secondary andor lengthier content underneathTry this Prioritise your main proposition then include secondary andor lengthier content underneath
جرب هذا! حدد أولوية عرضك الرئيسي ، ثم أدرج المحتوى الثانوي و / أو الأكثر طولًا أسفله.

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

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

لا تمييع رسالتك

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

قم بإزالة كافة العناصر غير الضرورية

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

لا تعطي الكثير من الخيارات

يزيد الكثير من الخيارات من الحمل المعرفي على قرائك ، مما يجعلهم أقل احتمالا لاتخاذ قرار.

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

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

حاول الناس الانخراط تدريجيا

في بعض الأحيان ، يكون الأمر مرعباً لتلقي رسالة إلكترونية تقول على الفور: "اشترِه! اشترك! اطلب!"

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

يكون نقطة محورية

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

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

استخدام وايتسبيس حول العناصر

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

Try this A clear focal point and a structure that guides the readerTry this A clear focal point and a structure that guides the readerTry this A clear focal point and a structure that guides the reader
حاول هذا! نقطة محورية واضحة وبنية الذي يوجه القارئ.

نصائح عالمية

إذا أراد الناس أن يتركوا ، دعهم يذهبوا

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

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

كلما ازدادت التقسيمات العمودية في التصميم ، كلما ازداد انتباهها عن العين. عصا للانقسامات العمودية اثنين أو ثلاثة داخل شبكة.

الحدود الصلبة أيضا تشتيت جداً للعين، حتى تبقى هذه إلى الحد أدنى.

Try this Fewer vertical divisions make it easier on the eyeTry this Fewer vertical divisions make it easier on the eyeTry this Fewer vertical divisions make it easier on the eye
جرب هذا! تقليل الانقسامات العمودية تجعل الأمر أسهل على العين.

اعتبارات عملية

يبقيه تحت 600px على نطاق واسع

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

استخدام التعزيز التدريجي

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

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

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

يعطي التصميم الخاص بك الأنفاس

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

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

النظر في التجربة بأكملها

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

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

In the email inbox left and with images off rightIn the email inbox left and with images off rightIn the email inbox left and with images off right
في صندوق الوارد للبريد الإلكتروني (يسار) ومع إيقاف تشغيل الصور (يمينًا).

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

في المثال أدناه ، يمكنك رؤية كيف سيتم تفويت كل شيء تقريبًا في الرسالة بدون تشغيل الصور ، نظرًا لأن كل النص موجود داخل الصور ولم يتم نص النص البديل لجعله قابلاً للقراءة.

A Velocity Frequent Flyer email with images off left and images onA Velocity Frequent Flyer email with images off left and images onA Velocity Frequent Flyer email with images off left and images on
رسالة بريد إلكتروني من نوع Velocity Frequent Flyer مع إيقاف الصور (يسار) والصور على (يمين).

نمط العلامات الخاصة بك البديل

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

اختبار لعمى الألوان

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

ربط كل شيء

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

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

هناك بعض الطرق التي يمكنك اتباعها لإنشاء بريد إلكتروني متوافق مع الجوّال.

1-واحد الأعمدة، تصميم جهاز الملحد

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

EmailTypes-DeviceAgnosticEmailTypes-DeviceAgnosticEmailTypes-DeviceAgnostic

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

الجانب السلبي هو أن إصدار سطح المكتب كبير جدًا من حيث الحجم (والذي لا أراه شخصًا سلبيًا).

لتحقيق هذا التخطيط:

  1. صمم بريدك الإلكتروني بحجم 450 بكسل
  2. Headings should be at least 30px
  3. ينبغي أن تكون الهيئة نسخة على الأقل 20px

2-تصميم البريد الإلكتروني استجابة كاملة

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

EmailTypes-ResponsiveEmailTypes-ResponsiveEmailTypes-Responsive

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

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

3. تصميم البريد الإلكتروني السائل بالكامل

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

EmailTypes-FluidEmailTypes-FluidEmailTypes-Fluid

يتضمن هذا الأسلوب إنشاء تصميم السوائل، 100 ٪ على نطاق واسع، مع أقصى عرض لها حول 600px المحددة في الجدول الخارجي. تعليقات مشروطة مطلوبة (ل Outlook) فضلا عن استعلام وسائط الإعلام ("أبل البريد" الذي، فرح شديد، لا يدعم خاصية عرض ماكس).

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

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

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

زيادة تحسين تصميم البريد الإلكتروني الخاص بك

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

صور الخلفية

اعتادت الصور الخلفية أن تكون شيئًا لكومة "صلبة جدًا" ، ولكن بفضل Stig Morten Myre والأفراد في Campaign Monitor ، يوجد الآن مولد سهل للغاية لخلفية البريد الإلكتروني الذي يستهلك كل المتاعب. لم تعد هناك حاجة إلى التراجع عن إضافة صور الخلفية إلى حملاتك.

خطوط ويب

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

الرسوم المتحركة CSS3

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

استنتاج

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.