كيفية تصميم البريد الإلكتروني المستجيب HTML
على مدى السنوات القليلة الماضية ، أدى ارتفاع معدل استخدام الجوال إلى ظهور تطور ، أو ربما ثورة ، في الطريقة التي نتناول بها تقديم المحتوى إلى المستخدمين عبر الإنترنت. ويتمثل الهدف النهائي في وجود شبكة سائلة ومتنقلة ومجهولة عن الأجهزة ، وقد ظهرت مدرسة فكرية واحدة كوسيلة مفضلة على نطاق واسع لهذه الغاية: التصميم المتجاوب. ومع ذلك ، في حين أن روح العصر المستجيب قد جمع البخار ، فقد صارع تصميم وتطوير البريد الإلكتروني للحفاظ على وتيرة.
يرجع ذلك جزئياً إلى حقيقة أن رسائل HTML الإلكترونية هي وسيط معروف للمطورين. جعلت تقنية عميل البريد الإلكتروني القديم ونقص المعايير العديد من قواعد القانون الحديث والدلالية عديمة الفائدة. ولكن البريد الإلكتروني لا يزال قناة تسويقية مهمة لا يمكن إغفالها: خلال فترة ستة أشهر في عام 2012 ، أفادت Litmus بزيادة 80٪ في فتح البريد الإلكتروني على أجهزة الجوال. في العام نفسه ، كشفت كامبين مونيتور أنه للمرة الأولى ، تجاوز معدل فتح البريد الإلكتروني للهواتف المحمولة بالفعل سطح المكتب والبريد الإلكتروني.
من الواضح أنه من المهم إجراء تحليل سليم لجمهورك قبل اتخاذ قرار الاستثمار في تحسين الجوّال. ولكن تصميم البريد الإلكتروني المتجاوب بشكل جيد يمكن أن يضمن تجربة مستخدم ممتازة لكل من مستخدمي أجهزة الكمبيوتر المكتبية والمحمول - ومع انتشار 4G واسع الانتشار ، فإن الاتجاه نحو الهاتف المتحرك لا يمكن تحييده ، فلماذا لا يكون ذلك دليلاً على المستقبل؟
ربط مربع ، حفرة مستديرة
إذا كان لديك أي سوء حظ من فتح بريد إلكتروني ذي عرض ثابت على جهاز محمول ، فستفهم الحاجة إلى تصميم بريد إلكتروني سريع الاستجابة. يمكن أن تظهر تنسيقات الشاشة ، والأعمدة المتعددة ، وتصغيرها بحيث يتم تقليل أحجام الخطوط إلى درجة عدم الشرعية. قد يقوم المستخدمون بالتكبير ولكنهم في حاجة دائمة ومثيرة للاندفاع للتمرير أفقيًا من اليسار إلى اليمين والعودة مرة أخرى لقراءة المحتوى. تظهر الروابط صغيرة ومزدحمة ، دون أي اعتبار لأصابع الدهون على شاشات تعمل باللمس. وتصبح التصميمات المنخفضة التباين في مناطق العرض الصغيرة ، والتي تكون باهتة لتوفير الطاقة ، غير قابلة للقراءة في كثير من الأحيان. من الواضح أن تحسين الجوّال مهم ، لكن ما هي أفضل طريقة لذلك؟
أفضل ممارسة المحمول
قبل كتابة سطر واحد من التعليمات البرمجية ، يمكن أن يؤدي النظر في ميزات التصميم إلى تحسين تجربة المستخدم بشكل كبير بالنسبة لهؤلاء المستخدمين على الجوّال ، على الرغم من أنه يمكن القول إن هذه تنازلات موصى بها بغض النظر عن حجم الشاشة.
- محتوى واضح وموجز: تعني الشاشات الصغيرة أنه من المهم الآن أكثر من أي وقت مضى إشراك المستخدم بأكبر قدر ممكن من الكفاءة.
- تخطيط العمود الواحد: البساطة هي المفتاح. لن تتحلل التخطيطات التي لا يزيد عرضها عن 640 بكسل بأمان. يضمن العمود الواحد عدم فقد أي محتوى تمامًا خارج إطار العرض عند التكبير.
- سطر موضوع جذاب: وهو أحد أكثر الأسلحة فاعلية في تسويق البريد الإلكتروني في صندوق البريد الوارد المكتظ. يبقيه قصيرة ولاذع.
- دعوة كبيرة للعمل (CTA): لا تعاقب أصابع السمنة! توصي إرشادات واجهة المستخدم لنظام التشغيل iOS من Apple بالحصول على الحد الأدنى من "الهدف" القابل للتطبيق على 44 × 44 نقطة.
- أحجام الخط السخي: تأكد من سهولة قراءة رسالتك.
- العنوان المسبق: منطقة رئيسية أخرى عندما يتعلق الأمر بالرؤية في البريد الوارد. حاول تجنب عرض نص "عرض في المتصفح".
- النص المحاذاة إلى اليسار: هناك عدد من الأسباب لمحاذاة عناصر مهمة على الجانب الأيمن من منطقة المحتوى. (تشير أبحاث تتبع العين إلى أن المستخدمين الغربيين يركزون معظم اهتمامهم على الجانب الأيسر من محتوى البريد الإلكتروني. وهذا لا يثير الدهشة لأننا نقرأ النص من اليسار إلى اليمين. بعض أنظمة التشغيل ، لا سيما أندرويد ، لن تقوم بتوسيع المحتوى لملاءمته على الشاشة ، وبالتالي عرض النصف الأيسر فقط من رسالة بريد إلكتروني ، من وجهة نظر مريحة ، سيجد غالبية المستخدمين أنه من الأسهل التفاعل مع العناصر الموجودة في الجزء السفلي الأيسر / الأوسط من الشاشة المحمولة باليد.)
- التسلسل الهرمي العمودي: تضعف خاصية العرض المتناقضة أكثر من أي وقت مضى على فكرة "الطية". يجب وضع عبارات تحث المستخدم على اتخاذ إجراء (CTA) كبيرة بالقرب من القمة قدر الإمكان ؛ إذا لم يتم رؤيتها على الفور ، فربما لن يتم استخدامها.
- استخدم الصور بعناية: لا تفترض أن الصور سيتم مشاهدتها. سيعرض تطبيق البريد الإلكتروني الأصلي الخاص بجهاز iPhone الصور بشكل افتراضي ولكن العديد من العملاء لن يقوموا بذلك.
يمكن أن تعمل هذه النصائح على تحسين تجربة المستخدم لعملاء الجوال ، ولكن يمكنك ، على الأرجح ، تحسينها بشكل أكبر. بفضل زيادة دعم CSS3 بين عملاء البريد الإلكتروني المحمول ، أصبح تصميم البريد الإلكتروني سريع الاستجابة ممكنًا الآن.
ابدء
كما ذكرت سابقاً ، تعاني رسائل البريد الإلكتروني الخاصة بـ HTML من افتقار شديد للمعايير - إلى غير المطلعين ، فإن الكثير مما يلي سوف يكون رحلة في الزمن إلى الأيام الأولى لتطوير الويب. يجب أن يتم ترتيب التخطيطات باستخدام الجداول نظرًا لمحركات عرض HTML القديمة الخاصة ببعض برامج البريد الإلكتروني ، ويجب تطبيق CSS في السطر. سيتجاهل العديد من عملاء البريد الإلكتروني تمامًا أي إعلانات نمط يتم إجراؤها في
قسم من الوثيقة.هناك بعض boilerplates البريد الإلكتروني رائعة المتاحة ، أوصي Sean Powell's ممتازة HTML Email Boilerplate كنقطة انطلاق ، ولكن من أجل التظاهر ، دعنا نبدأ من الصفر.
لأولئك منكم الذين يحبون المتابعة مع الرمز ، يمكنك ذلك قم بتنزيل قالب لهذه المقالة من هنا.
DOCTYPE
سيقوم كل من Hotmail و Gmail بإدراج XHTML 1.0 Strict ductype تلقائيًا. لذلك ، لا يُعد استخدامها فكرة سيئة ، ولكن من المهم إجراء اختبار شامل لرسائلك الإلكترونية بدون استخدام نوع من أنواع الدعاية ، نظرًا لأن العديد من عملاء البريد الإلكتروني سيزيلونها تمامًا.
أجرى البريد الإلكتروني على Acid بحثًا موسعًا حول موضوعات البريد الإلكتروني هنا.
تساؤلات الإعلام
يمكننا الآن إدراج علامة وصفية لإطار العرض للتأكد من عرض بريدنا الإلكتروني بشكل صحيح على أجهزة الجوال. من الجيد أيضًا تحديد نوع المحتوى وعلامة العنوان أيضًا. سيتم تجاهل العديد من عملاء البريد الإلكتروني هذا ، ولكنها فكرة جيدة إذا كنت تخطط لتقديم رابط إلى "إصدار متصفح" من بريدك الإلكتروني.
نظرًا لأنه من المرجح أن يتم تجاهل نوع المحتوى ، فمن المستحسن تشفير جميع الأحرف الخاصة داخل بريدك الإلكتروني بصفتك كيانات HTML.
علاوةً على ذلك ، سنقوم بتضمين بعض عمليات إعادة ضبط الأنماط المعقولة لضمان إرسال بريدنا الإلكتروني إلى الكيفية التي نريدها من خلالها عبر الأنظمة الأساسية.
Email subject or title لاحظ أن العلامة الوصفية لإطار العرض لها الآثار السلبية لبلاك بيري.
الآن يمكننا إدخال استعلاماتنا الإعلامية ؛ كم يعتمد على مستوى الخصوصية الذي ترغب في توصيله لكل جهاز. في هذا المثال ، سنستخدم واحدًا فقط - مما يجعل الافتراض المنطقي بأن معظم الأجهزة التي لا يزيد حجمها على 600 بيكسل هي حديثة ومتنقلة وشاشة تعمل باللمس وستستفيد من التصميم المحسّن للجوّال. علاوة على ذلك ، سنفترض أنه من خلال اتباع التقنيات الشائعة لأفضل الممارسات على الجوال ، المشار إليها سابقًا ، لن يواجه مستخدمو الجوّال على الأجهزة الأكبر حجمًا الذين يتلقون تخطيط سطح المكتب أي مشكلات رئيسية في قابلية الاستخدام.
نحن نستخدم الاستعلامات الإعلامية بالطريقة نفسها التي نستخدمها عند إنشاء موقع ويب ؛ إذا كان حجم إطار العرض ضمن القيود المحددة في استعلام الوسائط ، فطبّق هذا النمط.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}في المثال أعلاه ، فإننا نخبر بعض العناصر بفئة "إخفاء" لعرضها: لا شيء على شاشات أضيق من 600 بكسل. تضمن الخاصية الهامة أنه يتم تجاوز أي نمط مضمّن. هذا هو المبدأ الأساسي لتصميم البريد الإلكتروني المتجاوب: إبطال التصريحات النمطية المضمنة في نص مستند HTML باستخدام إعلانات أسلوب مهمة تم إجراؤها في
القسم ، واستهداف هذه الأنماط لتجاوز أحجام شاشات محددة باستخدام استعلامات الوسائط. الاستثناء الواضح هو تطبيق gmail الذي سيتجاهل أي إعلانات نمط في الجزء. ومع ذلك ، يجب أن يضمن التوفيق بواجهة اليسار للمحتوى تجربة مستخدم مرضية لمشجعي Gmail في قائمتك البريدية. من الواضح أن هذا ليس حلا مثاليا ، ولكن في الوقت الحالي ، فإن تصميم البريد الإلكتروني المتجاوب يُنظر إليه على أنه تنازلات بقدر ما هو متعلق بالتقنيات المتطورة.تجدر الإشارة إلى أننا نستهدف عناصر HTML الخاصة بنا باستخدام محددات سمة CSS للتغلب على جعل quirk من ياهو! بريد.
لذلك يمكننا أن نرى أن استعلامات الوسائط هي أداة مفيدة لعرض المحتوى بشكل انتقائي ، ولكن يمكننا أيضًا استخدامها للتلاعب بالميزات الأخرى في تخطيطنا. ربما الأهم من ذلك ، يمكننا تقييد عرض عمود البريد الإلكتروني الخاص بنا - المفتاح لتجربة متنقلة رائعة.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}لقد ذكرنا الآن في استعلامات الوسائط لدينا أن جميع الجداول ذات فئة "content_block" يجب أن تصل إلى 92٪ على الأجهزة ذات حجم شاشة يصل إلى 600 بكسل. الآن كل ما علينا فعله هو تحديد سمة مضمنة في العرض (600 بكسل) لأي جدول مع فئة content_block ولدينا حاوية عرض ثابتة ثم يتم قياسها بشكل متناسب على الشاشات تحت حجم معين. شريطة أن يتم تحديد جميع سمات العرض للعناصر الفرعية لهذه الحاوية كنسب مئوية ، فهذا هو نموذج البريد الإلكتروني الأساسي المتجاوب.
كن حذرًا عند تعطيل تعديل حجم النص التلقائي لنموذج webkit على علامة النص الأساسي ، كقاعدة عامة ، حاول إبقاء حجم الخط أعلى 12 بكسل كحد أدنى.
وصفت
عادةً ما تكون العبارات التي تحث المستخدم على اتخاذ إجراء (CTA) هي الجزء الأكثر أهمية في البريد الإلكتروني للتسويق. يجب أن تكون ملفتة للنظر ، في وضع جيد ، وقبل كل شيء ، قابلة للاستخدام. تختلف معايير CTA الرائعة بناءً على ما إذا كان سيتم تحديدها من خلال مؤشر أو إصبع. هذه هي وظيفة قوية من البريد الإلكتروني المتجاوب. لتزويد المستخدمين على أجهزة الشاشة التي تعمل باللمس الأصغر بأزرار متوافقة مع الأصابع لا تتأثر بحواجز الصور.
للأسف ، لا يمكن عرض هذه الأزرار عالميًا نظرًا لأنها تعتمد على خصائص padding غير معتمدة في بعض برامج البريد الإلكتروني لسطح المكتب.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}ستعمل إعلانات التعريف أعلاه على تحويل العلامات بفئة "زر" ، مثل الفئة "زر" ، إلى أزرار كبيرة وجذابة وملونة تمتد بعرض منطقة المحتوى ، طالما أن عرض شاشة الجهاز ليس أكبر من 600 بكسل. يجب ألا يكون دعم CSS3 مشكلة حيث يمكننا افتراض أن تكنولوجيا الهاتف المحمول التي نستهدفها حديثة بشكل معقول.