ربما تكون قد قضيت ساعات في تصميم توقيع البريد الإلكتروني المثالي - اخترت الألوان، واخترت الخطوط، وربما أضفت توقيع الخط العربي من أجل تلك اللمسة الشخصية. ثم تضغط على إرسال، فيبدو كل شيء... معطلاً. الشعار مضغوط، واللافتة مقطوعة، والصور تستغرق وقتاً طويلاً في التحميل.
الأبعاد مهمة. ليس بسبب بعض مبادئ التصميم المجردة، ولكن لأن توقيعك ينتقل عبر العشرات من عملاء البريد الإلكتروني، ولكل منهم مراوغاته الخاصة. ما يبدو حادًا في Gmail قد يتعطل في Outlook. ما يتم تحميله على الفور على سطح المكتب قد يتعطل على الهاتف المحمول.
دعنا نصلح ذلك.
جدول المحتويات
تحسين أحجام صور توقيع البريد الإلكتروني
إن الحصول على أحجام الصور الصحيحة لا يتعلق باتباع القواعد، بل يتعلق بفهم ما يحدث عندما يفتح شخص ما بريدك الإلكتروني.
أهمية الحجم في توقيعات البريد الإلكتروني
إليك ما يفوت معظم الناس: عملاء البريد الإلكتروني لا يعرضون توقيعك فقط. بل يغيرون حجمه ويضغطونه وأحياناً يرفضونه تماماً.
صورة رأس بحجم 2 ميغابايت؟ سيقوم Outlook بحذفها. شعار 50 × 50 بكسل؟ غير قابل للقراءة على شاشات شبكية العين. شعار بعرض 800 بكسل؟ ستُقطع إلى النصف على الهاتف المحمول.
كل عميل بريد إلكتروني لديه حدود. يضع Gmail حدوداً قصوى للصور بإجمالي 10 ميغابايت، ولكن حظاً سعيداً في تحميل ذلك على اتصال 4G. يتعامل بريد Apple Mail مع الملفات الكبيرة بشكل أفضل، لكنه يضغطها بقوة. أما Outlook - وهو أسوأ المخالفين - في بعض الأحيان يظهر فقط علامة X حمراء.
يؤثر الحجم على ثلاثة أشياء: إمكانية التسليم، ووقت التحميل، ومدى احترافيتك. إذا أخطأت في أي منها، سيصبح توقيعك عائقاً.
تأثير حجم الملف على تحميل البريد الإلكتروني
ترسل 50 رسالة بريد إلكتروني يومياً. كل منها يحتوي على توقيع 500 كيلوبايت. هذا 25 ميغابايت من النطاق الترددي - فقط للتوقيعات. اضربها في كل شخص في شركتك.
يلاحظ المستلمون بطء التحميل. فهم لا يفكرون "ملف كبير" - بل يفكرون "رسائل البريد الإلكتروني لهذا الشخص بطيئة". ثم يبدأون في تجاهلها.
المكان المناسب؟ أقل من 50 كيلوبايت لكامل التوقيع. أقل من 20 كيلوبايت أفضل.
الصور الثقيلة تفعل شيئًا أسوأ من بطء التحميل - فهي تؤدي إلى تشغيل فلاتر الرسائل غير المرغوب فيها. ينظر مزودو خدمات البريد الإلكتروني إلى حجم الرسالة. رسالة بريد إلكتروني نصية بحجم 5 كيلوبايت مع توقيع 1 ميغابايت؟ مشبوه. مباشرة إلى مجلد الرسائل غير المرغوب فيها.
حجم الملف يزحف بسرعة. قد يكون شعار PNG بحجم 300x100 بكسل 80 كيلوبايت. أضف لافتة، وأيقونات اجتماعية، وربما صورة رئيسية، وفجأة يصبح لديك 200 كيلوبايت. هذا قبل الضغط.
كيف يؤثر الحجم على إدراك العلامة التجارية
يعمل توقيعك على الطيار الآلي. كل رسالة بريد إلكتروني، كل رد، كل إعادة توجيه - إنه يمثلك.
شعار منقط يخبر الناس أنك لا تهتم بالتفاصيل. لافتة كبيرة الحجم تصرخ "لا أعرف ماذا أفعل." الصور التي لا يتم تحميلها؟ تبدو غير احترافي.
اتساق العلامة التجارية يعيش في الأبعاد. يجب أن يكون شعارك مميزاً ولكن ليس طاغياً. يجب أن تكون اللافتات مكمّلة وليست مهيمنة. يجب أن يكون حجم كل شيء مناسباً عبر الأجهزة.
فكر في آخر توقيع أثار إعجابك. ربما يكون نظيفاً وصغيراً ومقروءاً. لا شيء يقاتل من أجل جذب الانتباه. هذا هو الحجم المتعمد في العمل.
أبعاد الشعار الموصى بها
الشعارات صعبة. صغيرة جداً، ولن يراها أحد. كبيرة جداً، وتهيمن على كل شيء آخر.
أحجام الشعار المثالية
ابدأ بـ 300 × 100 بكسل كحد أقصى. هذا هو العرض بالارتفاع. معظم الشعارات تناسب هذه المساحة بشكل مريح.
شعارات أفقية؟ تعمل 300 × 80 بكسل. شعارات مربعة؟ جرب 100x100 بكسل. الشعارات العمودية صعبة - 80x120 بكسل على الأكثر، وإلا ستدفع كل شيء للأسفل.
يجب أن تكون أبعاد الملف الفعلية ضعف ما يتم عرضه: 600 × 200 بكسل محفوظة، معروضة في 300 × 100 بكسل. هذا يعالج شاشات شبكية العين دون جعل الملفات ضخمة.
لماذا هذه الأرقام؟ يعرض عملاء البريد الإلكتروني التوقيعات في عمود ضيق - عادةً بعرض 500-600 بكسل. يجب أن يشغل شعارك نصف ذلك كحد أقصى. اترك مساحة للنص ومعلومات الاتصال والعناصر الأخرى.
اتجاهات الشعارات المختلفة تحتاج إلى أساليب مختلفة. الشعارات العريضة تتناسب بشكل أفضل. الشعارات الطويلة تحتاج إلى قيود على الارتفاع وإلا ستهيمن على شاشات الجوال.
تحجيم الشعارات دون فقدان الجودة
لا تمدد الشعار أبداً. أبداً. إذا كان ملفك المصدر 400 × 200 بكسل، لا تعرضه بمقاس 300 × 150 بكسل - تتغير النسب.
استخدم نسبة العرض إلى الارتفاع الأصلية. الشعار 2:1 يظل 2:1 سواء كان 300 × 150 بكسل أو 200 × 100 بكسل. سيحافظ عملاء البريد الإلكتروني على ذلك إذا قمت بتعيين العرض أو الارتفاع، وليس كليهما.
العمل من ملفات متجهة عندما يكون ذلك ممكناً. التصدير بحجم عرض 2x. شعار يظهر بعرض 250 بكسل؟ قم بتصدير PNG بعرض 500 بكسل. يمنحك هذا صورًا جاهزة لشبكية العين بدون أحجام ملفات ضخمة.
اختبر بأحجام مختلفة قبل الالتزام. ما يبدو جيدًا عند 300 بكسل قد يفقد التفاصيل عند 150 بكسل. تختفي التفاصيل الدقيقة أولاً - الخطوط الرفيعة والنصوص الصغيرة والأشكال المعقدة.
اختيار تنسيقات ملفات الشعارات
PNG بشفافية - هذا هو الوضع الافتراضي. تتعامل PNG 24 بت مع الألوان بشكل جيد، والشفافية بشكل مثالي، وتضغط بشكل معقول.
JPEG للصور أو التدرجات المعقدة. لكن الشعارات التي تحتوي على نصوص؟ تفوز PNG. تُنشئ ملفات JPEG قطعاً أثرية حول الحواف الحادة. ويصبح النص غير واضح.
SVG مغرية - ملفات صغيرة الحجم وقابلة للتطوير بلا حدود. لكن عملاء البريد الإلكتروني يحظرونها. لا يعرض Outlook SVG على الإطلاق. يحذفها Gmail. التزم ب PNG.
بالنسبة لحجم الملف، قم بتشغيل ملفات PNG من خلال الضغط. أدوات مثل TinyPNG أو ImageOptim تقطع 60-70% بدون فقدان جودة واضح. شعار 80 كيلوبايت يصبح 25 كيلوبايت. نفس المظهر، تحميل أسرع.
احفظ بعمق اللون المناسب. معظم الشعارات لا تحتاج إلى ملايين الألوان. غالباً ما تبدو PNG-8 ذات 256 لوناً مطابقة لـ PNG-24 ولكن بنصف الحجم.
- قل وداعاً للخربشات الفوضوية
- احصل على توقيع أنيق وواثق في أيام
الشعار الأمثل وأحجام العناصر
اللافتات هي مساحة ترويجية في توقيعك. إذا استخدمتها بشكل خاطئ، فستكون عبارة عن رسائل غير مرغوب فيها. استخدمها بشكل صحيح، وستجذب النقرات.
أبعاد اللافتة للحصول على معدلات نقر أفضل
شعار قياسي: 600 × 100 بكسل كحد أقصى. هذا هو العرض الذي يخصصه معظم عملاء البريد الإلكتروني قبل التفاف المحتوى أو قطعه.
تعمل اللافتات الضيقة بشكل أفضل - 600 × 70 بكسل أو 600 × 80 بكسل. فهي لا تطغى على التوقيع. يمكن للمستلمين رؤية معلومات الاتصال الخاصة بك دون التمرير عبر لوحة الإعلانات.
الهاتف المحمول يغير كل شيء. تلك الـ 600 بكسل؟ تصبح 320-375 بكسل على شاشات الهاتف. صمم لهذا العرض أولاً. يجب أن يكون النص قابلاً للقراءة عند 320 بكسل. يجب أن تكون العبارات التي تحث المستخدم على اتخاذ إجراء قابلة للنقر.
موضع اللافتة مهم بقدر أهمية الحجم. يعمل الجزء السفلي من التوقيع بشكل أفضل - معلومات الاتصال أولاً، والترويج ثانياً. يتنافس الموضع العلوي مع اسمك وعنوانك.
تحتاج المناطق القابلة للنقر إلى مساحة. يجب أن تكون مساحة الزر في شعارك 44 × 44 بكسل على الأقل - الحد الأدنى المستهدف للمس من Apple. أصغر من ذلك، وسيفقده الناس على الهاتف المحمول.
إنشاء لافتات ضمن قيود البريد الإلكتروني
تجريد عملاء البريد الإلكتروني من الرموز البرمجية الفاخرة. لا تأثيرات تحويم، ولا رسوم متحركة، ولا تخطيطات معقدة. شعارك مجرد صورة ورابط.
اجعل النص كبيرًا - الحد الأدنى لحجم الخط 14 بكسل، و16 بكسل أكثر أمانًا. يصبح النص الصغير غير قابل للقراءة عند تصغير حجمه.
التباين مهم في البريد الإلكتروني أكثر من المواقع الإلكترونية. يختفي النص الفاتح على الخلفيات الفاتحة في أجزاء المعاينة. يضمن التباين العالي سهولة القراءة عبر عملاء البريد الإلكتروني.
التزم بالألوان الآمنة للويب. عملاء البريد الإلكتروني يعرضون الألوان بشكل مختلف. هذا اللون الأزرق المخضر المثالي للعلامة التجارية؟ قد يبدو أزرق في Outlook، وأخضر في بريد Apple Mail. اختبرها عبر العملاء.
تضرب حدود حجم الملف اللافتات بشدة. يجب ألا يتجاوز حجم اللافتة 600 × 100 بكسل 30 كيلوبايت. استخدم الألوان الصلبة بدلاً من التدرجات حيثما أمكن. اضغط بقوة. كل كيلوبايت مهم.
الجوانب الفنية لقرار توقيع البريد الإلكتروني
تحدد الدقة ما إذا كان توقيعك يبدو حاداً أو ضبابياً. إذا أخطأت، فحتى الأبعاد المثالية لن تنقذك.
تأثير دقة الصورة
يتم عرض توقيعات البريد الإلكتروني بدقة 72 نقطة في البوصة (نقطة في البوصة) - دقة الشاشة القياسية. تستخدم الطباعة 300 نقطة في البوصة، ولكن هذا غير ذي صلة هنا.
ما يهم: أبعاد البكسل وكيفية عرضها على الشاشات المختلفة.
تعرض شاشات شبكية العين ضعف البكسل. شعار 300 بكسل على شاشة عادية يصبح 600 بكسل منطقي على شبكية العين. إذا كانت الصورة المصدر 300 بكسل فقط، ستبدو ضبابية.
الحل: إنشاء الصور بحجم 2x، وعرضها بحجم 1x. يجب حفظ الشعار الذي يُعرض بحجم 200 × 80 بكسل بحجم 400 × 160 بكسل. يعمل HTML أو CSS على تصغير حجمه، مما يمنحك عرضًا واضحًا لشبكية العين.
يعالج معظم عملاء البريد الإلكتروني هذا الأمر تلقائياً إذا قمت بتعيين أبعاد العرض بشكل صحيح. البعض لا يفعل ذلك. اختبرها على الأجهزة الفعلية - أجهزة ماكنتوش، وأجهزة آيفون، وأجهزة ويندوز عالية الدقة.
أفضل تنسيقات ملفات الصور
PNG لأي شيء يحتوي على شفافية أو نص. الشعارات، والأيقونات، والأزرار - تتعامل معها PNG بدون أي تشويهات.
JPEG للصور الفوتوغرافية فقط. صورة رأس، صورة منتج - JPEG تضغط هذه الصور بشكل أفضل من PNG. لكن حافظ على الجودة عند 80-85%. أقل، والوجوه تبدو غريبة.
يعمل GIF للرسومات البسيطة ويدعم الرسوم المتحركة، ولكن صور GIF المتحركة في التوقيعات؟ تشتت الانتباه وغالباً ما يتم حظرها. التزم بالصور الثابتة.
يوفر WebP ضغطًا أفضل، لكن دعم عميل البريد الإلكتروني متقطع. يتجاهل Outlook WebP تماماً. أما Gmail فيتعامل معه. لا يستحق المخاطرة إلا إذا كنت تستهدف مستخدمي Gmail فقط.
لا تستخدم أبدًا BMP أو TIFF أو التنسيقات الغريبة الأخرى. فهي إما كبيرة جداً أو غير مدعومة.
تقليل حجم الملف دون فقدان الجودة
الضغط غير قابل للتفاوض. تكون الصادرات الأصلية دائماً أكبر من اللازم.
بالنسبة إلى PNG: استخدم أدوات مثل TinyPNG أو ImageOptim أو Squoosh. فهي تعمل على تحسين بنية الملف بدون تغيير البكسل. شعار 100 كيلوبايت يصبح 30 كيلوبايت بدون أي فرق مرئي.
بالنسبة إلى JPEG: التصدير بجودة 80-85%. والفرق بين 100% و80% غير مرئي لمعظم الناس ولكنه يقلل حجم الملف إلى النصف.
تقليل لوحة الألوان لملفات PNG. إذا كان شعارك يستخدم 10 ألوان، لماذا تحفظه بملايين الألوان؟ PNG-8 مع لوحة ألوان محدودة أصغر بشكل كبير.
اقتصاص المساحة غير المستخدمة. هذا الشعار 800 × 200 بكسل مع وجود مساحة بيضاء على كلا الجانبين؟ قم بقصه إلى 600 × 150 بكسل. بكسل أقل = ملف أصغر.
إزالة البيانات الوصفية. تحتوي ملفات الصور على بيانات EXIF وملفات تعريف الألوان ومعلومات أخرى لا تحتاج إليها. جردها كلها. أدوات مثل ImageOptim تقوم بذلك تلقائياً.
"أنشأت Ge-Sign توقيع بريدي الإلكتروني الجديد، ويبدو احترافيًا أثناء تحميله على الفور."
كيفن ف.، سمسار عقارات
اختبار توقيعات البريد الإلكتروني وتكييفها
توقيعك يعمل في عميل البريد الإلكتروني الخاص بك. عظيم. ولكن ماذا عن عشرات العملاء الآخرين الذين يستخدمهم المستلمون لديك؟
أهمية اختبار توقيعات البريد الإلكتروني
Outlook Web مقابل Outlook Desktop مقابل Outlook Mobile - ثلاثة محركات عرض مختلفة، وثلاث نتائج مختلفة.
Gmail على Chrome، وGmail على Safari، وتطبيق Gmail على iOS - كلها مختلفة قليلاً.
بريد آبل، بريد آبل، ثندربيرد، بريد ياهو، بريد بروتون - لكل منها مزاياها.
الاختبار ليس اختياريًا. أرسل رسائل بريد إلكتروني اختبارية إلى حسابات على منصات مختلفة. تحقق من سطح المكتب والجوال. ابحث عن:
- تحميل الصور بشكل صحيح
- أبعاد ثابتة ثابتة
- لا توجد مسافات أو فجوات غريبة
- الروابط التي تعمل
- يبقى النص قابلاً للقراءة
الأعطال الشائعة: الصور ممتدة في Outlook، واللافتات مقطوعة في بريد Apple Mail للجوال، ومشكلات التباعد في تطبيق Gmail.
استخدم أدوات اختبار مثل Litmus أو Email on Acid إذا كنت ترسل توقيعات على مستوى الشركة. فهي تعرض معاينات عبر عشرات العملاء في وقت واحد.
يعمل الاختبار اليدوي أيضاً - فقط يستغرق وقتاً طويلاً. أنشئ حسابات مجانية على مزودي الخدمة الرئيسيين. أرسل لنفسك رسائل بريد إلكتروني تجريبية. تحقق من هاتفك.
تكييف التواقيع للأجهزة المحمولة
يتم فتح أكثر من 50% من رسائل البريد الإلكتروني على الهاتف المحمول. يجب أن يعمل توقيعك هناك أولاً.
يبلغ عرض شاشات الهاتف المحمول 320-428 بكسل. تلك اللافتة 600 بكسل؟ يتم تصغيرها لتتناسب. يصبح النص صغيرًا. الصور تفقد التفاصيل.
صمم بعقلية الجوّال أولاً:
- حافظ على عرض التوقيع الإجمالي أقل من 500 بكسل
- استخدام أحجام خط أكبر (16 بكسل كحد أدنى)
- اجعل العناصر القابلة للنقر 44 × 44 بكسل على الأقل
- رص العناصر عمودياً عند الإمكان
- اختبار على الهواتف الفعلية، وليس فقط تغيير حجم المتصفح
يجب أن يكون حجم الصور متناسباً. اضبط الحد الأقصى للعرض على 100% في HTML. يتيح ذلك لعملاء البريد الإلكتروني تقليص حجم الصور لتناسب الشاشات دون كسر التخطيط.
ضع في اعتبارك سرعات بيانات الهاتف المحمول. هذا التوقيع الذي تبلغ سعته 200 كيلوبايت؟ يستغرق ثوانٍ للتحميل على الاتصالات البطيئة. يقوم المستلمون بالتمرير قبل أن يظهر.
تقوم بعض الشركات بإنشاء توقيعات منفصلة للهاتف المحمول - أبسط وأصغر وأسرع. يضاعف العمل، لكنه يضمن تجربة رائعة على الهاتف المحمول.
تجنب مشاكل العرض
يكسر عملاء البريد الإلكتروني التوقيعات بطرق يمكن التنبؤ بها. إليك الأخطاء التي تحدث وكيفية الوقاية منها:
الجداول، وليس الأقسام. البريد الإلكتروني HTML عالق في 2005. استخدم تخطيطات الجدول للهيكل. غالبًا ما تفشل تخطيطات الأقسام و CSS الحديثة.
الأنماط المضمنة فقط. يتم تجريد أوراق الأنماط الخارجية. يتم تجاهل العلامات. ضع الأنماط مباشرة على العناصر: <td style="padding: 10px;">.
عناوين URL الصور المطلقة. رابط الصور المستضافة على الخادم، وليس الملفات المرفقة. قد لا يتم عرض الصور المرفقة في الردود أو إعادة التوجيه.
نص بديل لكل شيء. عندما لا يتم تحميل الصور (محظورة من قبل العميل أو بطء الاتصال)، يظهر النص البديل. يجعل التوقيعات قابلة للقراءة بدون صور.
لا توجد صور خلفية. يتجاهلها Outlook. استخدم الألوان الصلبة أو الصور العادية بدلاً من ذلك.
اختبار تنسيق الرابط الاختبار. يقوم بعض العملاء بتنسيق عناوين URL تلقائيًا، مما يؤدي إلى كسر الروابط النصية المصممة. تحقق دائمًا من ظهور النص المرتبط بشكل صحيح.
تجنب الخطوط الغريبة. خطوط الويب لا تعمل. التزم بخطوط النظام: Arial، هيلفيتيكا، جورجيا، Times. يتم عرضها في كل مكان.
راقب ارتفاع الخط والمسافات بين الخطوط. ما يبدو جيدًا في المحرر الخاص بك قد يتم عرضه بفجوات إضافية في Outlook. استخدم قيم بكسل محددة للتباعد.
توقيع بريدك الإلكتروني ليس ثابتاً - إنه رمز يتنقل عبر منطقة معادية. كل عميل يفسره بشكل مختلف. تمنحك الأبعاد وأحجام الملفات المناسبة أفضل فرصة لتبدو احترافية في كل مكان.
ابدأ بهذه المواصفات:
- الشعارات: 300 × 100 بكسل كحد أقصى، أقل من 20 كيلو بايت
- اللافتات: 600 × 80 بكسل كحد أقصى، أقل من 30 كيلو بايت
- إجمالي التوقيع: أقل من 50 كيلو بايت
- كل الصور: 2 ضعف كثافة البكسل لشبكية العين
اختبر في كل مكان. عدّل بناءً على ما ينكسر. توقيعك يمثلك في مئات الرسائل الإلكترونية. اجعلها ذات قيمة.
بقلم فريق تحرير Ge-Sign.
