Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

إنشاء رسالة إلكترونية HTML متجاوبة بسيطة

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Ayman Amar (you can also view the original English article)

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

إستعلامات الوسائط: فقط نصف الحل

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

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

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

لماذا العائم هو الأسود الجديد

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

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

هنا ما سوف ننشئه اليوم:

Final-Product-Both

الشروع في العمل

حسنا، دعونا نبدأ مع لوحتنا القماشية الفارغة.

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

قمت بعد ذلك بإضافة جدول محتوانا الرئيسي إلى المركز مع كلاس 'content'.

انتبه

ملاحظة: سوف تلاحظ هذا في هذا الشرح سوف أضع CSS في رأس مستندنا. عموما أضع الأنماط في الرأس عندما سوف أعيد استخدامهم، والحفاظ على واحدة من الأنماط المضمنة.

هام: كلما قمت باستخدام قواعد CSS في رأس المستند الخاص بك، يجب استخدام أداة لجعلها كلها في خط في نهاية العملية. إذا كنت تستخدم خدمة مثل MailChimp أو Campaign Monitor، سوف يقترحون بشكل تلقائي لتضمين الأنماط لأجلك عندما تقوم باستيراد تصميمك. يجب القيام بذلك لأن بعض العملاء، مثل Gmail، سيتجاهل أو يجرد محتويات علامة <style> الخاصة بك، أو يتجاهلهم. يمكنك أيضا استخدام أداة مثل Premailer لتضمين CSS الخاص بك. إذا كنت تستخدم Premailer أو أداة مشابهة، تذكر أن تأخذ استعلامات الوسائط الخاصة بك قبل المعالجة (حيث نريدها أن تبقى على حالها)، ثم إعادة إدراجهم في النهاية. MailChimp وCampaign Monitor تلقائياً تتم بهذا لأجلك.

إخفاء أنماط الهاتف من Yahoo!

ستلاحظ أن علامة body تحتوي على سمة إضافية. بريد Yahoo يحب تفسير استعلامات الوسائط الخاصة بك مثل الإنجيل، و لمنع حدوث ذلك، تحتاج إلى استخدام محددات السمات. أجد أن أسهل طريقة للقيام بذلك (كما اقترح عن طريق Email on Acid) هو ببساطة يضيف سمة اعتباطيا للعلامة body. يمكنني استخدام 'yahoo' المقترح ولكن يمكن أن يكون أي شيء تريد:

يمكنك ثم استهداف كلاسات معينة باستخدام محدد السمة لأجل علامة الجسم في CSS.

اثنين من الحيل لإتقان أسلوب التعويم

كما ترون، يتم تعيين جدول 'المحتوى' لدينا كي يكون 100 ٪ على نطاق واسع حيث سيتم تعويمه وتناوله العرض الكامل لشاشات الهاتف الذكي والكمبيوتر اللوحي. سنقوم أيضا بتعيين أقصى العرض لـ 600px لتجنب تناول البريد الإلكتروني كامل الشاشة على أجهزة أكبر.

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

1-التغلب على نقص دعم الحد الأقصى للعرض

لسوء الحظ، max-width لا يدعمه جميع عملاء البريد الإلكتروني. من أجل الحصول على بريدنا الإلكتروني للعرض بشكل صحيح في Outlook و Lotus Notes 8 & 8.5، نحن بحاجة إلى التفاف كل جدول في بعض التعليمات البرمجية الشرطية التي تقوم بإنشاء جدول مع تعيين عرض لمسك كل شيء بداخله. يستهدف IE (الذي هو محرك التصيير المستخدم من قبل برنامج Lotus Notes) و Microsoft Outlook.

سوف نقوم  بالتفاف جدولنا في بعض التعليمات البرمجية الشرطية:

2. إصلاح بريد Apple

بغرابة، بريد Apple (عادة عميل البريد إلكتروني تقدمي للغاية) لا يدعم خاصية max-width بشكل صحيح أيضا. إنه يدعم إستعلامات الوسائط بالرغم من ذلك، حتى نتمكن من إضافة أحد الذي يقول أنه لتعيين العرض على جدول كلاس 'content' الخاص بنا، ما دام يمكن لمنفذ العرض عرض 600px كله.

إنشاء رأس الصفحة

والآن سنقوم بإضافة الصف الأول من جدولنا – الرأس. أضف النمط التالي الى الصف الذي قمنا بإنشائه بالفعل:

وبعد ذلك في CSS الخاص بك، أضف الحشو للرأس:

إضافة الصف المتجاوب الأول

الان سوف نقوم بإنشاء الصف المتجاوب الأول حتما الخاص بنا. الطريقة التي نفعل بها هذا هي بإنشاء جدولان ذلك 'float' بجانب بعضها البعض باستخدام خاصية 'align' لـ  HTML.

العمود الأيسر

استبدل صغيرنا "Hello!" الترحيب بما يلي:

ننشئ جدول 70px لدينا، وأيضا نضف بعض الحشو الذي سيكون بمثابة هامشنا بين العمودين. الحشو في الأسفل سوف يضيف مجال تنفس عمودي عندما يتكدس العمودان في الهاتف.

العمود الأيمن

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

Responsive-AlignedTables

طالما قمت بالسماح على الأقل 25px لمجال التنفس، الجداول الخاصة بك سوف تتصرف كما هو متوقع.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
اسمح على الأقل 25px من مجال التنفس لمنع Outlook من تكديس الجداول الخاصة بك

توقف! نصيحة بديلة لخداع Outlook

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


استمر..

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

هنا يمكنك أن ترى أنني أنشئت كلاس يسمى 'col425' لهذا الجدول، لدينا العمود 425px العريض. لدي الجدول المجمع في الكود الشرطي الذي سوف ترفق بها في جدول 425px العريض. ثم نضيف الكلاس الخاص بنا لاستعلام الوسائط الذي قمنا بإنشائه لأجل بريد Apple أيضا.

الآن داخل خانتنا سنقوم بإضافة العنوان المصمم.

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

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

01-header

إنشاء صف النص في عمود واحد

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

CSS الخاص بنا لهذا الجزء:

إنشاء مقالة العمود المزدوج

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

قمنا بإضافة زر هنا مع الكلاس 'buttonwrapper'. إنه يحتوي على خانة محشوة مع تعيين لون خلفية، وبعد ذلك رابط نص بالداخل. أنا أفضل استخدام هذه الطريقة لأنها تسمح لك بالحصول على أزرار بعرض عائم وهو أمر مفيد جدا عند إنشاء قالب قابل لإعادة الإستخدام، حيث عرض أي زر سيكون مختلف كل مرة يستخدم فيها. إذا كان لديك عرض ثابت للأزرار الخاصة بك قد تفضل استخدام Bulletproof Button Generator في أكثر من Campaign Monitor.

أنماطنا لأجل الزر:

طالما لدينا العرض المحدد لهذا الكلاس الجديد 'col380'، سنقوم بإضافة حجمنا إلى قائمة الأنماط للعناية ببريد Apple. تبدو الآن مثل هذه:

Email-TwoCol

إنشاء صورة العمود المفرد

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

في CSS الخاص بنا:

إنشاء صف النص النهائي العادي

أخيراً سنقوم بإضافة صف من النص دون الحدود في الجزء السفلي:

إنشاء تذييل الصفحة

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

سنقوم بإضافة الأنماط المطلوبة لأجل تذييل الصفحة الخاصة بنا إلى CSS:

تحسين الأزرار لأجل الهاتف

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

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

سوف أستخدم كل من max-width و max-device-width في استعلام الوسائط هذا في محاولة لتجنب خطأ في Outlook.com على IE9.

الآن عند النقر فوق أي مكان على الزر الملون في الهاتف المحمول، إنه رابط!

المزيد من التحسينات مع استعلامات الوسائط

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

على سبيل مثال، سنقوم بتحويل رابط إلغاء الاشتراك الخاص بنا إلى زر، بإضافة كلاس إلى رابط:

وإضافة CSS التالية إلى استعلام الوسائط:

Email-Footer-MQs

يمكن أيضا استهداف الكلاسات .innerpadding و.header و.footer للحد من كمية الحشو على العملاء التي تدعم استعلامات الوسائط.


اختبار وانطلاق!

أخيراً، كما هو الحال دائماً، تأكد من التحقق من صحة (استخدام المصادقة W3C – ينبغي أن تحصل فقط على خطأ واحد للسمة الاحتكارية 'yahoo' في العلامة body) واختبار جيد باستخدام أجهزة حية وخدمة ويب للمعاينة مثل Litmus أو Email on Acid.

تمتع بإنشاء رسائل بريد الكتروني مستجيبة التي تبدو عظيمة في كل عملاء البريد الإلكتروني!

لتأخد ما تعلمته إلى المستوى التالي، 

Advertisement
Advertisement
Advertisement
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.