9 الخدع لتصميم الكمال HTML النشرة الإخبارية

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

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

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

أهداف النشرة الإخبارية

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

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

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

1. استخدام الجداول في التخطيطات الخاصة بك

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

قد تتساءل أيضا لماذا شعبة وعناصر كتلة أخرى ليست هذه فكرة جيدة. معظم عملاء البريد الإلكتروني هم بنيت لتجريد أي CSS الدخيلة يحتوى. هذا يعني أنك لن تكون قادرًا على استخدام الكثير من أي شيء باستثناء مضمنة المغلق (وحتى الدعم الكامل غير المطابقة للمواصفات). العملاء مثل Microsoft Outlook 2007 و Gmail من Google لديهم دعم ضعيف للغاية للعناصر الطافية والمواقع المباشرة.

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

2. تحديد المواقع الثابتة العرض

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

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

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

3. وحدات بكسل

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

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

4. الاحتمالات مع CSS

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

توخي الحذر بشأن أنماط الخطوط الخاصة بك حتى لا تدفع الحدود بعيدًا. إذا كنت تشعر بعدم الارتياح تجاه الأنماط المضمّنة ، فمن الممكن دائمًا استخدام علامة خط HTML على الرغم من إهمالها. إذا كنت مصممًا لـ CSS ، فلن تحتاج إلى إنهاء النظام ، ولكن قد ينتج عن أي ترميز اختصار لـ CSS تصاميم عربات التي تجرها الدواب. كمثال على font: 12px / 14px Arial، sans-serif؛ يمكن للاختزال أن يساعد في توفير مساحة كبيرة ، لكنه غير مقبول تمامًا لتصميم البريد الإلكتروني ، حتى عند استخدامه مع الأنماط المضمنة.

حتى خيارات اللون الخاص بك يجب أن تكتب منذ فترة طويلة. عرافة الألوان مثل #CCC أو # E3F يجب أن تكتب بالكامل #cccccc أو # ee33ff, على التوالي. إذا كنت تستطيع بناء ما تحتاج إليه بدون CSS ، فإنني أوصي بهذا المسار ، ولكن لا تبتعد تمامًا عن CSS في تصميمات البريد الإلكتروني لأنه على عكس الاعتقاد الشائع ، فهو مدعوم في معظم الحالات.

5. مرساة روابط أفضل الممارسات

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

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

بعض النص الارتباط

آثار التحويم هي غير مدعوم في Outlook 2007/2010 أو Gmail أو iOS أو Android. قد لا تزال ترغب في تضمين و: تحوم أسلوب لجميع العملاء الداعمين: Outlook 2000/2003 و Hotmail و Apple Mail و Yahoo! البريد ، لكنني شخصياً لا أرى فائدة كبيرة في تجربة المستخدم الجزئية ، لأن محددات المرساة غير مدعومة بشدة مجرد تقديم 2-3 ألوان الارتباط لاستخدامها في جميع أنحاء التصميم الخاص بك.

وكافتراض ، سيتوقع المستخدمون أيضًا فتح روابطك في علامة تبويب أو نافذة جديدة. من الناحية المثالية استهداف = "_ فارغة" يجب أن تكون السمة كافية لجميع المتصفحات للتعرف على هذه الوظيفة ، ويجب ألا يؤثر تضمين هذه السمة في ارتباطات الربط سلبًا على برامج البريد الإلكتروني مثل Lotus Notes أو Outlook إما.

6. اختبار في جميع العملاء الرئيسيين

تشير دراسة حديثة إلى أكثر عملاء البريد الإلكتروني شيوعًا (الذي أجرته Campaign Monitor) إلى عشرة من عملاء البريد الإلكتروني الأكثر شيوعًا في العام الماضي. قد يبدو مملا بعض الشيء ولكن المصممين يجب الدخول في العادة من خلال مراجعة الرسائل الإخبارية الخاصة بهم على جميع عملاء البريد الإلكتروني الرئيسيين, على الأقل في بعض العملاء الأكثر شيوعًا مثل Gmail أو Hotmail أو Yahoo! بريد.

هذا لا يشمل بريد الويب فقط ، ولكن يشمل أيضًا برامج التشغيل على كل من نظام التشغيل Mac OS X و Windows. أيضا وفقا لمخططهم iOS Mail و ذكري المظهر وقد صعد كلاهما إلى قائمة أفضل 10 على مدى السنوات القليلة الماضية. في الواقع ، يحتل iPhone و iPod Touch و iPad Mail المرتبة الثانية الأكثر شعبية ضمن Outlook! لسوء الحظ ، لا توجد طريقة لاختبار هذه دون امتلاك أحد الأجهزة - لذلك سيكون عليك تسوية الخيارات الأخرى.

يوجد خطأ واحد في دعم الأجهزة المحمولة في العديد من طرز iPhone و Android. سوف تقديم البريد الإلكتروني المحمول في كثير من الأحيان تغيير حجم النص داخل القالب الخاص بك. قد لا يؤثر هذا على تصميمك كثيرًا ، ولكنه قد يكون مزعجًا لبعض القراء. باستخدام CSS -webkit-text-size-adjust: لا شيء ؛, سوف ضمان حجم النص الافتراضي حتى في جميع محركات التحليل دون الحاجة لاختباره.

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

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

7. دائما تقديم وجهات النظر على شبكة الإنترنت

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

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

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

8. إضافة محتوى الصورة

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

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

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

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

9. تجنب مجلد البريد العشوائي!

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

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

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

معرض تصميم النشرة الإخبارية

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

أدرجت أدناه لقطات من النشرات الإخبارية العديدة في معرض Campaign Monitor. نأمل أن توفر لك هذه المخططات الرائعة بعض الأفكار الرائعة لتصميماتك الخاصة.

المتعة في تصميم النشرات الإخبارية المثالية!

اليقظة لرجال الأعمال