عرض الإعلان باستخدام HTML5 - كيفية إنشاء إعلانات متجاوبة

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

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

على وجه التحديد ، يوفر HTML5 للمسوقين الرقميين القدرة على:

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

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

لماذا يجب علي إنشاء إعلانات عرض HTML5؟

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

خذ على سبيل المثال ما يحدث في المملكة المتحدة. في عام 2020 ، أنفق المعلنون في المملكة المتحدة 6.79 مليار جنيه إسترليني على الإعلانات الآلية ، وفقًا لتقرير eMarketer. يمثل الإنفاق على الإعلانات المصوّرة الآلية الآن 92٪ من إجمالي الإنفاق على الإعلانات المصوّرة الرقمية في المملكة المتحدة - على الرغم من تأثير جائحة Covid-19. ويتوقع أن تصل هذه النسبة إلى 94.5٪ بحلول عام 2022 وتمثل 9.01 مليار جنيه إسترليني! يجب أن يكون إنتاج إعلانات أفضل - عبر HTML5 - لتحقيق أقصى استفادة من هذا النمو أولوية.

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

لقد مضى وقت طويل على استخدام الإعلانات للجوّال و HTML5 هي طريقة إنشاء اللافتات التي تحتاجها.

ما هي الصفقة مع HTML5؟

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

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

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

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

هناك طريقتان لإنشاء لافتات HTML5

بشكل أساسي ، هناك طريقتان مختلفتان يمكنك من خلالهما إنشاء إعلانات البانر عبر الإنترنت اليوم.

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

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

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

إنشاء إعلانات مصورة مستجيبة بتنسيق HTML5

يعد إنشاء إعلانات بانر مستجيبة بتنسيق HTML5 أمرًا بسيطًا نسبيًا. ومع ذلك ، مثل جميع اللافتات الرقمية ، هناك قواعد وأفضل الممارسات التي يجب اتباعها. عند إنشاء إعلانات عرض HTML5 ، يجدر التفكير في:

تحقق من أحجام إعلانات HTML5 الخاصة بك

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

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

الصور وتصميم البانر و HTML5

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

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

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

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

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

التحجيم وتعيين الإصدارات والترجمة

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

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

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

لافتات وسائط غنية

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

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

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

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

إعلانات عرض الفيديو و HTML5

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

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

يعد إنتاج إعلانات الفيديو المصوَّرة أمرًا سهلاً

بعض النصائح المهمة عند استخدام الفيديو هي التأكد دائمًا من أن شعارك مرئي في شعار فيديو HTML5. ابدأ برسالتك الرئيسية وتأكد من تكرار الفيديو. حاول أيضًا أن يكون لديك حد أقصى من 1-3 مراحل في الفيديو أيضًا: اجذب انتباه المشاهدين ، وقم بتعميق المشاركة ، وانتهي دائمًا بـ CTA. قم دائمًا بتعيين مقاطع الفيديو الخاصة بك على "صامت" وتمكين التسميات التوضيحية (إذا لزم الأمر).

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

علاوة على ذلك ، يشاهد الناس لافتات الفيديو بأعداد متزايدة على هواتفهم المحمولة. لذا فإن التأكد من أن لديك إعلان عرض فيديو HTML5 سريع الاستجابة وجاهز للجوال يعد أمرًا لا يحتاج إلى تفكير.

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

إنشاء إعلانات بانر مستجيبة لـ HTML5 للجوال

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

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

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

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

تصميمات ديناميكية

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

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

إضفاء الطابع الشخصي على الإعلانات الصورية المتجاوبة

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

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

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

نصيحة أخيرة: سيسهل منشئ الإعلانات الجيد مثل Creative Studio أو نظام أساسي للإدارة الإبداعية إعداد الفلاتر وخيارات الفرز عند معالجة موجز البيانات.

الخطوات التالية: بناء أفضل إعلانات البانر سريعة الاستجابة على الإطلاق!

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

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

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

إذا كنت مهتمًا بمعرفة كيف يمكن لمنصة مثل Bannerflow أن تساعد في إنتاج إعلانات رائعة ، فتواصل معنا.