في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء بريد إلكتروني HTML مستجيب بسيط يعمل في كل عميل بريد إلكتروني ، بما في ذلك جميع عملاء وتطبيقات البريد الإلكتروني الجديد. ويستخدم أقل استعلامات الوسائط ونهج عرض السائل لضمان أقصى قدر من التوافق. قوالب البريد الإلكتروني المستجيبة الشائعة على سوق Envato إذا كنت تبحث عن حل مهني جاهز ، فعليك الحصول على أحد نماذج البريد الإلكتروني الأكثر رواجًا في سوق Envato. لدينا مئات من الخيارات المتجاوبة من أقل من 5 دولارات ، مع سهولة تخصيص الميزات لتبدأ. قوالب البريد الإلكتروني الأكثر استجابةً للبيع على Envato Market ألا تبحث عما تبحث عنه؟ لا توجد مشكلة ، هذا البرنامج التعليمي سوف يعلمك كيفية بناء الخاصة بك. استعلامات الوسائط: فقط نصف الحل كان هناك وقت كانت فيه استعلامات الوسائط كافية بالقدر الكافي للحصول على رسائل البريد الإلكتروني المتجاوبة التي تعمل في تطبيقات بريد iOS و Android ، وكلاهما يدعم استعلامات الوسائط. ومنذ ذلك الحين ، كان هناك انتشار لتطبيقات البريد التي تم إنشاؤها لمنصتي iOS و Android ، وبدرجات متفاوتة من الدعم لطرق تطوير البريد الإلكتروني المتجاوبة.. أبرز شيء هو آخر تحديث لتطبيق Gmail لنظام Android ، وهو ضعف شعبية تطبيق البريد الافتراضي لمستخدمي Android (والذي يضم الآن 11٪ من إجمالي عمليات الفتح). لم تدعم استعلامات الوسائط مطلقًا ، ولا تزال غير قادرة على قياس رسائل البريد الإلكتروني من خلال ضغط حجم الجدول الخارجي لتلائم المساحة القابلة للعرض على الشاشة. من الصعب السيطرة عليها ، وعندما يعتمد البريد الإلكتروني بأكمله على استعلامات الوسائط ليتم عرضها بشكل صحيح على الهاتف المحمول ، يولد بعض النتائج غير السارة. لماذا Fluid Is the New Black والخبر السار هو أنه يمكنك تصميم وبناء بريد إلكتروني سيبدو ممتازًا في كل تطبيق بريد ، بما في ذلك تلك التطبيقات التي لا تدعم استعلامات الوسائط. يمكنك القيام بذلك عن طريق استخدام تخطيط السائل. ومع ذلك ، هناك بعض التنازلات التصميمية التي يتعين عليك القيام بها. تحميل برنامج سكراتش 2 للصف الاول الاعدادى الترم الثانىهذه التنسيقات ذات الأعمدة المتساوية الجميلة التي تتكدس إلى عمود واحد لا تعمل بشكل جيد باستخدام هذه الطريقة. إذا كنت تستطيع تعلم العيش بدونها ، فهناك بعض التصاميم الوظيفية التي يمكن أن تعمل بشكل جيد للغاية. في ما يلي بعض الأمور التي سننشئها اليوم: البدء ، حسنًا ، دعنا نبدأ باستخدام لوحة الألوان الفارغة. جواب بريد إلكتروني HTML مستجيب بسيط {margin: 0؛ الحشو: 0؛ min-width: 100٪! important؛} . المحتوى {العرض: 100٪؛ max-width: 600px؛} مرحبًا! ما نقوم بإنشائه هنا هو صفحتنا الأساسية مع عنوانها ورأسها وجدول الحاوية مع تطبيق لون الخلفية (لكل من الجسم وجدول مغلف كبير ، بما أن تصميم هيئة النص غير مدعوم بالكامل). لمزيد من المعلومات حول هذا الإعداد الأساسي ، راجع إنشاء قالب بريد HTML الإلكتروني من Scratch. أنا & apos؛ ve ثم أضفنا جدول المحتويات الرئيسي إلى المركز بفئة من & apos؛ content & apos؛. ملاحظة الاهتمام: ستلاحظ أنه في هذا البرنامج التعليمي سوف أقوم بوضع CSS في رأس مستندنا. أضع الأنماط بشكل عام في الرأس عندما سأعيد استخدامها ، وأحتفظ بأنماط لمرة واحدة مضمنة. هام: عندما تستخدم قواعد CSS في رأس المستند ، يجب عليك استخدام أداة لجعلها مضمنة في نهاية العملية. إذا كنت تستخدم خدمة مثل MailChimp أو Campaign Monitor ، فستعرض تلقائيًا تقديم الأنماط المضمنة لك عند استيراد تصميمك. يجب عليك القيام بذلك لأن بعض العملاء ، مثل Gmail ، سوف يتجاهلون محتويات علامتك أو يزيلونها ، أو يتجاهلونها. تحميل برنامج سكراتش 2 للصف الاول الاعدادىيقوم MailChimp و Campaign Monitor بالعناية تلقائيًا من أجلك. إخفاء أنماط الجوال من Yahoo! ستلاحظ أن علامة body بها سمة إضافية. يحب Yahoo Mail تفسير استعلامات الوسائط الخاصة بك كإنجيل ، لذا لمنع ذلك ، تحتاج إلى استخدام محددات السمة. أجد أن أسهل طريقة للقيام بذلك (كما هو مقترح بالبريد الإلكتروني على حمض) هي ببساطة إضافة سمة عشوائية إلى علامة النص الأساسي. يمكنني استخدام & المقترح & ياهو & apos؛ ولكن يمكن أن يكون أي شيء تحبه: يمكنك عندئذٍ استهداف فئات معينة باستخدام محدد السمة لعلامة النص الأساسي في CSS. class {} اثنان من الخدع لإتقان طريقة السوائل كما ترون ، نحن & apos؛ content & apos؛ تم تعيين الجدول ليكون 100 ٪ واسعة بحيث يكون السائل ويأخذ العرض الكامل لشاشات الهاتف الذكي والكمبيوتر اللوحي. كما سنقوم بتعيين عرض أقصى يبلغ 600 بكسل لتفادي ظهور البريد الإلكتروني للشاشة بأكملها على أجهزة أكبر. هناك الآن شيئان خادعان بعض الشيء نحتاج إلى معالجتهما لضمان عرض كل شيء كما هو مخطط عبر جميع برامج البريد الإلكتروني. هذه الإصلاحات اثنين بفضل تينا يي & apos؛ s البرنامج التعليمي الممتاز في هذا الأسلوب الذي يتوفر في مدونة FogCreek. التغلب على نقص دعم Max-Width للأسف ، لا يدعم كل عملاء البريد الإلكتروني الحد الأقصى للعرض. لكي يتم عرض بريدنا الإلكتروني بشكل صحيح في Outlook و Lotus Notes 8 & 8. 5 ، ونحن بحاجة إلى التفاف كل جدول في بعض التعليمات البرمجية الشرطية التي تخلق جدولا مع عرض مجموعة لعقد كل شيء فيها. ويستهدف IE (وهو محرك التقديم الذي يستخدمه Lotus Notes) و Microsoft Outlook. سنقوم بلف جدولنا في بعض الشفرات الشرطية: مرحبًا! 2. تنزيل برنامج scratch للصف الاول الاعدادى ترم ثانىإصلاح لـ Apple Mail بشكل غريب ، لا تدعم Apple Mail (عادةً عميل بريد إلكتروني تقدمي للغاية) خاصية max-width إما. إنه يدعم استعلامات الوسائط على الرغم من ذلك ، حتى نتمكن من إضافة طلب يخبره بضبط عرض على محتوى & apos؛ & apos؛ جدول الفئات ، طالما أن إطار العرض يمكنه عرض 600 بكسل بالكامل. media screen only and (min-device-width: 601px) { . تنزيل برنامج سكراتش للصف الاول الاعدادىنريد أن يكون هذا الجدول عريضًا بنسبة 100٪ على الجوّال ، حيث سيظهر أسفل الجدول على اليسار. style = 'width: 100٪؛ max-width: 425px؛'> يمكنك هنا ملاحظة أنني قمت بإنشاء فئة تسمى & apos؛ col425 & apos؛ في هذا الجدول ، لدينا عمود واسع بحجم 425 بكسل. لقد قمت بملء الجدول في الشفرة الشرطية التي سيتم إرفاقها في جدول واسع بعرض 425 بكسل. ثم نضيف فصلنا إلى استعلامات الوسائط التي أنشأناها لـ Apple Mail أيضًا. col425 {width: 425px! important؛} الآن داخل زنزانتنا & lt؛ add the styled heading. إنشاء بريد إلكتروني مستجيب لقد أضفت Magic I & apos؛ بعض الصفوف إلى كل خلية من أجل التصميم ، بالإضافة إلى بعض الأنماط التي سأستخدمها لأنواع أخرى من النص فيما بعد: . العنوان الفرعي {font-size: 15px؛ اللون: #ffffff؛ عائلة الخط: sans-serif؛ تباعد الأحرف: 10px؛} . h1 {font-size: 33px؛ خط الطول: 38px؛ font-weight: bold؛} . bodycopy {لون: # 153643؛ font-family: sans-serif؛} اكتمل رأسنا الآن ، ويمكنك أن ترى أدناه كيفية تكديس العمودين على الجوّال. (لمعاينة هذا أثناء العمل ، ستحتاج إلى التعليق مؤقتًا على استعلامات الوسائط ذات الحد الأدنى من الأجهزة ، نظرًا لأنها تفرض عرضًا ثابتًا على سطح المكتب). إنشاء صف نص عمود واحد لإنشاء صف نصي عمود واحد ، نقوم ببساطة بإضافة صف جديد إلى & apos؛. سنقوم بإضافة & apos؛ innerpadding & apos؛ صنف إلى هذه الصفوف مع بعض قيم الحشو القابلة لإعادة الاستخدام. نحن أيضا سوف تضيف فئة من & apos؛ borderbottom & apos؛ لتطبيق حد على كل صف. مرحبًا بك في البريد الإلكتروني المتجاوب! Lorem ipsum dolor sit amet، consectetur adipiscing elit. تنزيل برنامج سكراتش للصف الاول الاعدادىفي tempus adipiscing felis، sit amet blandit ipsum volutpat sed. Morbi porttitor، eget accumsan dictum، nisi libero ultricies ipsum، in posuere mauris neque at erat. innerpadding {padding: 30px 30px 30px 30px؛} . borderbottom {border-bottom: 1px solid # f2eeed؛} . h2 {padding: 0 0 15px 0؛ حجم الخط: 24 بكسل ؛ خط الطول: 28 بكسل ؛ font-weight: bold؛} . bodycopy {font-size: 16px؛ line-height: 22px؛} إنشاء مقال العمود المزدوج الآن سنقوم بإنشاء صف متجاوب تمامًا مثل رأس الصفحة ، ولكن بأبعاد مختلفة قليلاً بحيث يمكننا الحصول على صورة أكبر. Lorem ipsum dolor sit amet، consectetur adipiscing elit. في tempus adipiscing felis، sit amet blandit ipsum volutpat sed. Morbi porttitor، eget accumsan dictum، nisi libero ultricies ipsum، in posuere mauris neque at erat. المطالبة بك! لقد أضفنا زرًا هنا مع الفئة & apos؛ buttonwrapper & apos؛. أنه يحتوي على خلية مبطن مع مجموعة لون الخلفية ، ثم رابط نصي داخل. أفضل استخدام هذه الطريقة لأنها تسمح لك باستخدام أزرار عرض مرنة مفيدة جدًا عند إنشاء قالب قابل لإعادة الاستخدام ، حيث يختلف عرض كل زر في كل مرة يتم استخدامها. إذا كان لديك عرض ثابت لأزرارك ، فقد تفضل استخدام 'زر زر' المضاد للرصاص في 'مراقبة الحملة'. زر {text-align: center؛ حجم الخط: 18 بكسل ؛ عائلة الخط: sans-serif؛ font-weight: bold؛ الحشو: 0 30 بكسل × 30 بكسل ؛} . الزر {color: #ffffff؛ زخرفة النص: لا شيء ؛} بالإضافة إلى عرضنا المحدد للفئة الجديدة & apos؛ col380 & apos؛ ، سنضيف حجمنا إلى قائمة الأنماط الخاصة بنا لرعاية بريد Apple. يبدو الآن مثل هذا:media screen only و (min-device-width: 601px) { . تحميل برنامج سكراتش 2 للصف الاول الاعدادى الترم الثانىcol380 {width: 380px! important؛}} إنشاء صورة العمود الواحد هذا صف بسيط جدًا؛ سنقوم ببساطة بتعيين صورة لتكون 100٪ من عرض البريد الإلكتروني وتأكد من ضبط ارتفاعها تلقائيًا باستخدام CSS. في CSS: img {height: auto؛} إنشاء السطر النهائي للنص العادي أخيرًا سنقوم بإضافة صف من النص بدون الحدود في الأسفل: Lor Lor Lor Lor Lor Lor Lor Lor sit،، ad ad ad ad ad ad ad ad ad ad ad am am am am am am am am am am am am am am am am am am am am am. في tempus adipiscing felis، sit amet blandit ipsum volutpat sed. Morbi porttitor، eget accumsan dictum، nisi libero ultricies ipsum، in posuere mauris neque at erat. إنشاء التذييل لإنشاء التذييل ، سنقوم بإضافة صف جديد مع جدول بداخله. سيحتوي أحد الصفوف على جدول آخر لرموز وسائل الإعلام الاجتماعية الخاصة بنا. وأمبير؛ سهل حصوي؛ شخص ما ، في مكان ما 2013 إلغاء الاشتراك من هذه النشرة على الفور سوف نقوم بإضافة الأنماط المطلوبة لتذييلنا إلى CSS: . footercopy {font-family: sans-serif؛ حجم الخط: 14 بكسل اللون: #ffffff؛} . footercopy a {color: #ffffff؛ زخرفة النص: تسطير ؛} تحسين أزرار للجوّال على الجوال ، تكون مثالية إذا كان الزر بالكامل عبارة عن رابط ، وليس النص فقط ، نظرًا لأنه من الصعب جدًا استهداف رابط نصي صغير بإصبعك. نظرًا لأنه من غير الممكن أن يكون هذا العمل على جميع برامج سطح المكتب (لا يتم دعم المساحة بالكامل على العلامات) ، فهذا شيء أقوم بإضافته إلى إصدار الجوال باستخدام استعلامات الوسائط. يجب علينا تجريد اللون من الذي يتم تطبيقه حاليًا ، ثم تطبيقه مرة أخرى على العلامة بالإضافة إلى الكثير من الحشو. تحميل برنامج سكراتش للصف الاول الاعدادى 2017على سبيل المثال ، سنقوم بتبديل رابط إلغاء الاشتراك الخاص بنا إلى زر ، وذلك بإضافة فئة إلى الارتباط: إلغاء الاشتراك من هذه النشرة على الفور وإضافة CSS التالي إلى استعلام الوسائط: body . تنزيل اقوى برنامج لاستعادة الملفات المحذوفة.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2019
Categories |