تحديث: يقدم Gmail دعمًا للتصميم سريع الاستجابة وتصميم الخط المحسن + CSS لإمكانية الوصول
نشرت: 2016-09-30في الساعات الأولى من صباح يوم 30 سبتمبر ، بدأ Gmail في طرح التغييرات لدعم ما كان عالم البريد الإلكتروني يطالب به لفترة طويلة: الأنماط المضمنة والتصميم سريع الاستجابة.
عن ماذا نتحدث؟
لم يدعم Gmail من الناحية التاريخية الفئات أو المعرفات في <head> للبريد الإلكتروني ، مما أجبر مصممي البريد الإلكتروني على استخدام CSS المضمنة لتصميم رسائل البريد الإلكتروني الخاصة بهم. الآن ، ستدعم Gmail CSS المضمنة مع الفئات والمعرفات ، مما يلغي الحاجة إلى CSS المضمنة في Gmail. هذا يعني أيضًا أن Gmail ستدعم أخيرًا استعلامات الوسائط - والبريد الإلكتروني المتجاوب.
فقط متابعة الأخبار؟ تابع تحديثاتنا في Live Ticker بينما نراقب النشر ، أو اقرأ ملخصًا لجميع التغييرات المتوقعة وما تعنيه للمسوقين عبر البريد الإلكتروني أدناه.
شريط تحديث Gmail الحي
إليك طريقة العرض الحالية لعملاء البريد الإلكتروني في Gmail التي تم تحديثها:
عميل Gmail | طرح التحديث |
بريد الويب على سطح المكتب |  |
بريد الويب للجوال |  |
تطبيق Gmail Android (حساب Gmail) | |
تطبيق Gmail Android (حساب Gmailified) | |
تطبيق Gmail Android (حساب POP / IMAP) | |
تطبيق Gmail iOS | |
Inbox by Gmail (بريد الويب) | |
Inbox by Gmail (iOS) | |
Inbox by Gmail (Android) | |
G Suite Basic (Google Apps for Work سابقًا) | |
الإصدار المجاني من تطبيقات Google (قديم) | |
7 نوفمبر ، الساعة 11:30 صباحًا بتوقيت شرق الولايات المتحدة
يتضمن التحديث الرئيسي لتطبيق Gmail iOS تحديث العرض لدعم استعلامات <style> والوسائط! تدعم الآن جميع تطبيقات Gmail للجوال البريد الإلكتروني المتجاوب. نرى أيضًا جميع حسابات G Suite مع تحديث العرض أيضًا.
12 أكتوبر ، 9:00 صباحًا بتوقيت شرق الولايات المتحدة
لقد بدأنا في رؤية حسابات G Suite خارج الولايات المتحدة (والتي تتضمن Litmus Previews) تحصل على تحديث العرض. سنقوم بتحديث مخطط الطرح عندما نرى أن جميع حساباتنا لديها التحديث.
4 أكتوبر ، الساعة 9:30 صباحًا بتوقيت شرق الولايات المتحدة
لقد أصدرنا مخطط طرح كامل أعلاه. يرجى ملاحظة أن Gmail أعاد تسمية أسماء خطط الحساب الخاصة به.
بالنسبة لحسابات G Suite Basic (Google Apps for Work سابقًا) ، يبدو أنه من المحتمل أن التحديثات قد تم طرحها فقط في حسابات الولايات المتحدة. بالنسبة لمستخدمي Litmus ، يرجى ملاحظة أن معاينات البريد الإلكتروني الأساسية في G Suite (لا تزال تسمى تطبيقات Google حاليًا) تستخدم حسابات في المملكة المتحدة ، والتي لم يتم تحديثها حاليًا.
4 أكتوبر ، 4:00 صباحًا بتوقيت شرق الولايات المتحدة
يبدو الآن أن إطلاق دعم استعلامات الوسائط قد اكتمل عبر تطبيقات Gmail و Inbox by Gmail على Android. بينما لاحظ بعض الأشخاص تغييرات في دعم الاستعلام عن الوسائط على تطبيقات iOS الخاصة بهم ، فإن الدعم ليس متسقًا عبر جميع الحسابات حتى الآن.
30 سبتمبر ، 8:00 صباحًا بتوقيت شرق الولايات المتحدة
تم طرح التغييرات على تطبيق Gmail على Android أيضًا. يتم اختيار الفئات والمعرفات في رأس البريد الإلكتروني. نرى أيضًا دعم الاستعلام عن الوسائط لبعض حسابات تطبيقات Android Gmail ، لكن الدعم ليس متسقًا عبر جميع الحسابات التي اختبرناها. قد يتم طرح الدعم تدريجيًا عبر المناطق.
يتم الآن طرح التحديثات أيضًا في Inbox by Gmail ، مع دعم المعرفات والفئات في رأس البريد الإلكتروني.
30 سبتمبر ، 5:30 صباحًا بتوقيت شرق الولايات المتحدة
يبدو أن Gmail يقوم بطرح التحديثات على محرك العرض الخاص به تدريجيًا. يدعم عملاء الويب Gmail الفئات والمعرفات في <head> عبر جميع المتصفحات (Chrome و Safari و Firefox) ويتم الإشارة إلى كليهما بشكل صحيح في HTML.
نرى أيضًا دعم الاستعلامات الإعلامية عبر عملاء الويب لـ Gmail:
ومع ذلك ، حتى الآن ، لا يدعم Inbox by Gmail أو تطبيق Gmail علامات النمط الموجودة في عنوان البريد الإلكتروني أو استعلامات الوسائط.
29 سبتمبر ، الساعة 11:55 مساءً بتوقيت شرق الولايات المتحدة
انه يحدث! بدأ Gmail في طرح التغييرات على آلة العرض الخاصة به. ترقبوا التحديثات بينما نراقب النشر.
شارك الخبر →
ما تعنيه هذه التغييرات لمحترفي البريد الإلكتروني
في 31 أغسطس 2016 ، أعلن Gmail أنهم سيبدأون في دعم عرض خاصية CSS: لا شيء ؛ ودعم استعلامات <style> والوسائط.
هذا مجرد جزء واحد من جهد شامل لتوسيع دعم CSS في Gmail ولمنح مصممي البريد الإلكتروني مزيدًا من التحكم في كيفية عرض رسائلهم.
- بيرس فولوتشي ، مدير المنتجات في Google
هذه أخبار ضخمة لمجتمع البريد الإلكتروني ، وسيكون لها آثار كبيرة على تصميم البريد الإلكتروني وتطويره.
يدعم GMAIL البريد الإلكتروني المتجاوب و <النمط>
لم يدعم Gmail من الناحية التاريخية الفئات أو المعرفات في <head> للبريد الإلكتروني ، مما أجبر مصممي البريد الإلكتروني على استخدام CSS المضمنة لتصميم رسائل البريد الإلكتروني الخاصة بهم. الآن ، ستدعم Gmail CSS المضمنة مع الفئات والمعرفات ، مما يلغي الحاجة إلى CSS المضمنة في Gmail. هذا يعني أيضًا أن Gmail ستدعم أخيرًا استعلامات الوسائط - والبريد الإلكتروني المتجاوب.
بمعنى آخر ، سيتم عرض الشفرة التالية الآن بشكل صحيح في Gmail:
<html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>يمكنك عرض قائمة كاملة من CSS المدعومة في الجزء السفلي من هذا المنشور ، أو في وثائق Gmail الرسمية. فيما يلي قائمة كاملة بدعم الاستعلام عن الوسائط القادم:
الأنواع المدعومة
- الكل
- شاشة
الاستعلامات المدعومة
- العرض الأدنى
- أقصى عرض
- أدنى عرض للجهاز
- أقصى عرض للجهاز
- اتجاه
- دقيقة
- الدقة القصوى
الكلمات الرئيسية المدعومة
- و
- فقط
ماذا يعني هذا للبريد الإلكتروني
تشير هذه التحديثات إلى نقطة تحول رئيسية في تطوير البريد الإلكتروني وسير العمل ، مما يسمح للمصممين والمسوقين بإنشاء المزيد من حملات البريد الإلكتروني التي يمكن الوصول إليها دون الحاجة إلى تضمين CSS.
تأثير السوق: ستصبح الاستعلامات الإعلامية هي المعيار قريبًا
تعتمد العديد من رسائل البريد الإلكتروني على استعلامات الوسائط لضبط المحتوى والتصميم لإنشاء تجربة أكثر قابلية للاستخدام عبر مجموعة كبيرة من أحجام الشاشات. ومع ذلك ، لا تعمل الاستعلامات الإعلامية في كل مكان. جاء النقص الأكثر بروزًا وإحباطًا في الدعم تاريخيًا من Gmail ، المشهور بتجريد الكود من <head> إلى جانب أي أنماط واستعلامات وسائط واردة بداخله.
بفضل دعم Gmail للاستعلامات الإعلامية ، سيدعم أكثر من 75٪ من عملاء البريد الإلكتروني التصميم سريع الاستجابة . نأمل أن يصبح هذا هو المعيار مع عملاء البريد الإلكتروني الآخرين مثل Windows Phone الذي يحذو حذوه.
تقليل الحاجة إلى هياكل التخطيط المبتكرة مثل Fab Four
لمكافحة نقص دعم Gmail للاستعلامات الإعلامية في الولايات المتحدة ، بدا خبراء البريد الإلكتروني مرتفعًا ومنخفضًا كحل بديل. أحد هذه الحلول هو تقنية Fab Four ، والتي تتضمن وظيفة CSS calc () وخصائص العرض الثلاثة و min-width و max-width.
مصممي البريد الإلكتروني ، حان الوقت لتوديع هياكل التخطيط المعقدة هذه. لكن ، ضع في اعتبارك أنك ما زلت بحاجة إلى جداول لـ Outlook. (لم نقم بإنشاء معيار بريد إلكتروني…. حتى الآن).
ومع ذلك ، لا يزال التطوير الهجين / الإسفنجي يحتل مكانه في تطوير البريد الإلكتروني كهيكل أساسي للعملاء الذين يعانون من مشاكل مثل Outlook.
قل وداعًا لتضمين CSS
تعمل الأنماط "المضمّنة" على نقل CSS وإرشادات التنسيق المرتبطة بها من قالب النمط في <head> من بريدك الإلكتروني إلى <body> في HTML. تاريخيًا ، إذا لم يتم نقل الأنماط مضمنة ، فلن يتم عرض النمط في نص رسالتك الإلكترونية في Gmail.
مع هذه التحديثات ، لن يكون تضمين CSS ضروريًا بعد الآن. يمكن لمصممي البريد الإلكتروني الآن استخدام الأنماط المضمنة الموضوعة في <head> لمستندات HTML. سيتم دعم CSS المضمنة في جميع عملاء البريد الإلكتروني الرئيسيين.
سوف تصبح رسائل البريد الإلكتروني أكثر سهولة
تعد إمكانية الوصول إلى البريد الإلكتروني ضرورية لنجاح الحملة. إذا لم يتمكن المشترك من قراءة بريدك الإلكتروني والتفاعل معه ، فلا توجد طريقة أمامه لاتخاذ إجراء.
مع دعم CSS المضمن ، يمكن لمصممي البريد الإلكتروني فصل التصميم عن المحتوى واستخدام الترميز الدلالي الذي يمكن الوصول إليه لرسائل البريد الإلكتروني الخاصة بهم.
في حين أن النص الكبير والأزرار سهلة اللمس تساعد في تحسين إمكانية الوصول ، فإن إعداد HTML لاستخدامه مع قارئ الشاشة. مع وضع ذلك في الاعتبار ، تأكد من التوازن الصحي للنصوص والصور في تصميمك ، وقم بتخصيص المحتوى المكتوب في بريدك الإلكتروني لإيصال الرسالة الرئيسية.
بفضل الدعم الإضافي لإعدادات قارئ الشاشة المستندة إلى CSS مثل الملعب ونطاق الملعب وعلامات الترقيم ومعدل الكلام ، سهّل Gmail على المسوقين جعل رسائل البريد الإلكتروني الخاصة بهم أكثر سهولة.
سيزداد دعم الطباعة
تغيير رئيسي آخر يأتي مع هذه التحديثات هو دعم إضافي لخصائص خط CSS. على سبيل المثال ، سيبدأ Gmail في دعم سمات مثل عدد الأعمدة وفجوة الأعمدة ، مما يسمح بإنشاء أعمدة نصية بدون جداول. بالإضافة إلى ذلك ، فإن تجانب الخطوط وأغطية الخطوط المتغيرة ستتيح تصميم خط إضافي. ومع ذلك ، لا يبدو أنه سيتم دعم خطوط الويب في الإصدار القادم.
دعم إضافي للخلفية قادم
يقدم Gmail دعمًا إضافيًا لخصائص الخلفية في CSS مثل مقطع الخلفية وموضع الخلفية والأهم من ذلك ، حجم الخلفية. مع دعم حجم الخلفية ، يمكن أن تحتوي رسائل البريد الإلكتروني على صور خلفية قابلة للتطوير وسريعة الاستجابة.
اختبر رسائل البريد الإلكتروني الخاصة بك في GMAIL
كيف ستؤثر هذه التغييرات على بريدك الإلكتروني؟ استخدم Litmus لمعاينة بريدك الإلكتروني على الفور في Gmail - وأكثر من 70 عميل بريد إلكتروني آخر. لاحظ أن هذه التغييرات لم يتم تفعيلها بعد ، ولكنها ستنعكس في Litmus Instant Previews بمجرد أن يقوم Gmail بنشرها مباشرة.
جرب Litmus مجانًا →
التوثيق الرسمي
للمرة الأولى على الإطلاق ، نشر عميل بريد إلكتروني رئيسي وثائق دعم CSS و HTML الرسمية. هذه صناعة رئيسية أولاً. شكرًا Gmail!
سيتم دعم خصائص CSS التالية في Gmail و Inbox by Gmail:
- السمت
- معرفتي
- وضع مزيج الخلفية
- مقطع الخلفية
- لون الخلفية
- الصورة الخلفية
- أصل الخلفية
- خلفية الموقف
- تكرار الخلفية
- حجم الخلفية
- الحدود
- الحد السفلي
- لون الحد السفلي
- نصف قطر أسفل يسار الحد
- نصف قطر أسفل يمين الحد
- نمط الحد السفلي
- عرض أسفل الحد
- انهيار الحدود
- لون الحدود
- يسار الحد
- لون الحدود اليسرى
- نمط يسار الحد
- عرض يسار الحد
- نصف قطر الحد
- يمين الحدود
- لون يمين الحدود
- نمط يمين الحدود
- عرض يمين الحد
- تباعد الحدود
- نمط الحدود
- أعلى الحد
- لون أعلى الحدود
- نصف قطر أعلى يسار الحد
- نصف قطر أعلى يمين الحد
- أعلى الحدود
- عرض أعلى الحد
- عرض الحدود
- تحجيم الصندوق
- كسر بعد
- كسر من قبل
- اقتحام الداخل
- جانب التسمية التوضيحية
- صافي
- اللون
- عدد الأعمدة
- ملء العمود
- فجوة العمود
- عمود القاعدة
- لون قاعدة العمود
- نمط قاعدة العمود
- عرض قاعدة العمود
- امتداد العمود
- عرض العمود
- الأعمدة
- اتجاه
- عرض
- ارتفاع
- خلايا فارغة
- تطفو
- الخط
- خط العائلة
- إعدادات الخط
- تقنين الخطوط
- حجم الخط
- ضبط حجم الخط
- امتداد الخط
- نوع الخط
- توليف الخط
- متغير الخط
- بدائل الخط
- أحرف متغيرة الخط
- الخط البديل شرق آسيا
- وصلات الخط المتغير
- متغير الخط الرقمي
- وزن الخط
- ارتفاع
- اتجاه الصورة
- دقة الصورة
- عزل
- تباعد الحروف
- ارتفاع خط
- نمط قائمة
- قائمة على غرار الموقف
- قائمة على غرار نوع
- هامش
- الهامش السفلي
- الهامش الأيسر
- الهامش الأيمن
- الهامش العلوي
- اقصى ارتفاع
- أقصى عرض
- أدنى ارتفاع
- العرض الأدنى
- وضع المزج
- الكائن المناسب
- موضع الكائن
- العتامة
- الخطوط العريضة
- لون المخطط التفصيلي
- نمط المخطط التفصيلي
- عرض المخطط التفصيلي
- تجاوز
- حشوة
- أسفل الحشو
- المساحة المتروكة لليسار
- المساحة المتروكة لليمين
- أعلى الحشو
- وقفة
- وقفة بعد
- وقفة قبل
- ملعب كورة قدم
- مجموعة الملعب
- يقتبس
- ثراء
- تحدث
- الكلام-رأس
- نطق الأرقام
- نطق علامات الترقيم
- تقييم الخطاب
- ضغط عصبى
- الجدول التخطيط
- محاذاة النص
- دمج النص في الكتابة
- زخرفة النص
- زخرفة النص اللون
- خط زخرفة النص
- زخرفة النص تخطي
- زخرفة النص
- التركيز على النص
- لون تركيز النص
- أسلوب التأكيد على النص
- المسافة البادئة النص
- اتجاه النص
- تجاوز النص
- تحويل النص
- وضع تسطير النص
- أحادي ثنائي الاتجاه
- محاذاة عمودية
- عائلة الصوت
- العرض
- تباعد الكلمات
- وضع الكتابة
احصل على أحدث توصيل مباشر إلى صندوق الوارد الخاص بك
سنبقيك على اطلاع بأي تغييرات إضافية في طرح Gmail وكيف ستؤثر عليك. اشترك في النشرة الإخبارية الأسبوعية لدينا واحصل على أحدث محتوى لمحترفي تصميم البريد الإلكتروني يتم تسليمه مباشرة إلى صندوق الوارد الخاص بك. كل اسبوع.