أكثر من مجرد كلمات: كيفية استخدام طباعة البريد الإلكتروني التي تتحدث عن مجلدات

Serif و sans-serif هما الخطان الأكثر استخدامًا ، خاصةً لنسخ الجسم. هذا لأنها أكثر قابلية للقراءة وبالتالي يمكن الوصول إليها. تظهر بشكل جيد عند تصغيرها وبأوزان أقل.

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

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

محارف الويب

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

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

خطوط الويب الآمنة

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

فيما يلي الخطوط الآمنة للويب المدعومة بشكل أفضل عبر أجهزة Windows و Mac:

خطوط الويب

هذه محارف غير متوفرة في جميع أنظمة التشغيل.

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

هناك العديد من الأماكن المختلفة حيث يمكنك العثور على خطوط الويب ، مثل Google Fonts وهو مورد مجاني وخطوط Adobe التي تتطلب اشتراكًا.

للحصول على دليل شامل حول خطوط الويب ، تحقق من الدليل الشامل لخطوط الويب.

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

تصميم الخط

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

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

عريض

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

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

<b> العلامة الغامقة ليست دلالية ولن تؤكد على الكلمة (الكلمات) التي اخترتها لمستخدم قارئ الشاشة. لذا لترديد التجربة التي يحصل عليها المستخدمون المبصرون ، استخدم دائمًا علامة <strong>.

<p>Be <strong> bold </strong> ,<br />be <strong>brave</strong></p>

مائل

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

كما هو الحال مع الكتابة بالخط الغامق ، هناك عدة طرق لترميز النص المائل. ومع ذلك ، فهي <em> العلامة المتوافقة مع WCAG (وليست العلامة <i>) ويمكن أن تعطي برامج قراءة الشاشة إشارة إلى كيفية فهم شيء ما.

<p>I love funny English words like <em> gubbins </em> and <em>gnarly</em>.</p>

يتوسطه خط

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

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

علامة HTML <strike> غير مدعومة بواسطة Hey ولا تدعمها سوى تطبيقات Gmail جزئيًا. كما أن معالجة هذا النمط باستخدام خط CSS له دعم محدود مع بعض عملاء البريد الإلكتروني الذين يجعلون الخط رقيقًا للغاية ، ومن الصعب جدًا رؤيته.

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

أفضل طريقة لترميز خط يتوسطه خط هي استخدام علامة <strike> بتنسيق HTML ، مثل:

<p>Was<br /><span> <strike> $200 </strike> </span></p>

الأحرف الكبيرة

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

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

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

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

<p>We need to shout about this <br /><span>big win</span></p>

تباعد الأحرف

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

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

لمزيد من المعلومات حول ما يجب فعله وما لا يجب فعله فيما يتعلق بتباعد الأحرف ، راجع هذا المنشور المفيد.

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

<p style=”font-family:'Helvetica Neue',Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-transform:uppercase; letter-spacing: 2px ;”>A little letter spacing helps readability</p>

محاذاة النص

هناك زوجان من اللوائح الخارجية مع محاذاة النص.

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

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

يجب حجز النص المحاذي للوسط للعناوين أو الفقرات القصيرة التي لا تزيد عن 3 أسطر.

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

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

<p style=”font-family:Helvetica Neue,Helvetica,sans-serif; font-size:18px; line-height:28px; color:#0C4B6A; text-align:left ;”>I am left aligned</p>

اللون

الشيء الذي يجب تذكره مع اللون هو التباين.

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

للحصول على مزيد من التعمق في إنشاء وتصميم وترميز محتوى يمكن الوصول إليه للبريد الإلكتروني ، تحقق من جلسات Salesforce Trailhead التي سجلتها مع مارك روبينز ، مهندس برمجيات في Salesforce.

مقاس

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

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

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

ارتفاع خط

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

لتحقيق ذلك ، يجب أن تكون ارتفاعات السطر بين 1.5 و 2 ضعف حجم النص. على سبيل المثال ، يجب أن يكون حجم الخط 20 بكسل بارتفاع 30-40 بكسل.

نصائح لاستخدام الطباعة في تصميم البريد الإلكتروني

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

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

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

ميّز بين أنواع التواصل

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

رفع شخصية العلامة التجارية

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

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

إنشاء تسلسل هرمي

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

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

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

اسمحوا لي أن أقسمها لك بهذا المثال:

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

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

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

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

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

رطوبة

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

الخطوط المستخدمة : Helvetica neue مع Arial الاحتياطي ، وخط نظام Serif Times New Roman.

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

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

جاهز ماج

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

الخطوط المستخدمة : خطوط نظام Apple ، والعودة إلى Helvetica و Arial.

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

دعاية مغالى فيها

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

الخطوط المستخدمة : Futura و Proxima Nova (خطوط الويب) ، والعودة إلى Helvetica و Arial.

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

Tripadvisor

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

الخطوط المستخدمة : Arial.

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

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

تاتلي

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

الخطوط المستخدمة : Open Sans (خط الويب) ، والعودة إلى Helvetica و Arial.

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

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

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

<h1 style=”Helvetica Neue,Helvetica,sans-serif; font-size:50px; line-height:75px; color:#262524;”><img src=”hero.png” alt=”Image based hero messaging - there is a way!”></h1>

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

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

تتميز طباعة البريد الإلكتروني بقدرتها على التحمل

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

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

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