عندما لا تتكيف مع صور الويب الخاصة بك [فيديو]

نشرت: 2020-12-22

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

إذا كانت الصورة تعمل مع جميع أحجام الشاشات ، فهذا رائع. قم بتحميل ملف واحد (مصدر واحد للصورة) وأنت على ما يرام.

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

هكذا قال Buddy Scalera ، مدير أول لاستراتيجية المحتوى في شركة الأدوية. في حديثه عن مؤتمر المحتوى الذكي ، إنشاء وتنفيذ استراتيجية محتوى مرئي تتناسب مع الحجم ، أخبرنا Buddy أنه من أجل الحصول على مصدر واحد ... إلا عندما لا يكون كذلك. وهو يدافع عما يسميه هو وآخرون "COPE في الغالب" (COPE-M) ، خاصة عندما يتعلق الأمر بالصور.

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

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

وهنا يأتي دور M في COPE-M. يقول Buddy: "على الرغم من أن إعداد المحتوى لإعادة الاستخدام متعدد القنوات يعد هدفًا جيدًا ، إلا أنه ليس كل مقاييس المحتوى فعالة في نموذج COPE".

يقولBuddyScalera: إن الإنشاء مرة واحدة والنشر في كل مكان (COPE) غالبًا ما يكون طريقة خاطئة لاستخدام الصور. #intelcontent انقر للتغريد

في هذا المقال ، ألخص نصيحة Buddy من حديثه عن المحكمة الجنائية الدولية. جميع الصور في هذا المنشور مأخوذة من شرائحه ، وجميع الاقتباسات ، ما لم يُذكر خلاف ذلك ، تأتي من حديثه ومن محادثاتي اللاحقة معه.

المحتوى ذو الصلة المنتقى باليد:
11 طريقة للسيطرة على المشهد الاجتماعي بمحتوى قاتل

لماذا يصعب COPE مع بعض الصور

يُسقط Buddy ما يسميه "قنبلة الحقيقة" بشأن الصور: فهي ليست مثل النصوص.

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

ليس الأمر كذلك مع الصور. لا يمكن فصلهم عن مظهرهم. مع الصور ، لا يناسب الحجم الواحد الجميع دائمًا.

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

لتصميم الويب سريع الاستجابة ، لا يناسب الحجم الواحد الكل عند التعامل مع الصور ، كما يقولjphornor. #intelcontent انقر للتغريد

كيف تفكر في الصور متعددة المصادر

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

قم بتحميل صور متعددة وأخبر النظام في أي نقطة توقف لاستخدام كل واحدة. BuddyScalera #intelcontent انقر للتغريد

نقاط توقف متعددة المصادر للصور

نقطة التوقف هي النقطة التي يتوقف عندها النظام عن سحب صورة واحدة وسحب أخرى بدلاً من ذلك - صورة أكبر أو أصغر ، اعتمادًا على دقة الجهاز. يوضح هذا الرسم التوضيحي ثلاث نقاط توقف محتملة: 320 بكسل للهاتف الخلوي ، و 720 بكسل للكمبيوتر اللوحي أو الهاتف الكبير ، و 1،024 بكسل لجهاز الكمبيوتر المحمول.

يتم تحديد نقاط التوقف وفقًا لعرض الجهاز لأن لدينا إمكانية التمرير الرأسي اللانهائي ولكن العرض محدود.

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

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

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

متصفح-مقياس-مثال

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

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

بالنسبة إلى # العناصر المرئية بالغة الأهمية لسرد علامتك التجارية ، استخدم اتجاهًا فنيًا سريع الاستجابة ، كما يقولBuddyScalera. انقر للتغريد

استجابة الاتجاه

نظرًا لأن Buddy يغير عرض الصورة من 800 إلى 400 إلى 200 بكسل ، فإنه يغير أيضًا تكوين الصورة: هذا ليس COPE. هذا تخطيط للصور. تُظهر الصورة التي يبلغ عرضها 800 بكسل ، الفتيات والكلب جنبًا إلى جنب فيما يسميه لقطة أفقية بثلاثة أبعاد. تجلب الصورة التي يبلغ عرضها 400 بكسل الفتيات أكثر تماسكًا وتضع الكلب في المقدمة للحصول على لقطة عمودية بعرض 2. تلتقط اللقطة التي يبلغ عرضها 200 بكسل جميع الأشكال الثلاثة في ترتيب عمود الطوطم.

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

لتجربة هذا السلوك في متصفحك الخاص ، قم بزيارة صفحة مثال Buddy على جهاز يمكّنك من تغيير عرض النافذة.

على الرغم من أن هذا المنشور ليس برنامجًا تعليميًا حول كيفية كتابة هذا النوع من التعليمات البرمجية ، فقد تجد أنه من المفيد معرفة شكل هذا الرمز:

رمز نقطة التوقف مثال

الشيء الرئيسي الذي يجب ملاحظته (انظر بين علامات "picture") هو أن Buddy حدد ثلاث صور مصدر:

  • GirlsDog_200w.jpg
  • GirlsDog_400w.jpg
  • GirlsDog_800w.jpg

يتم تعيين كل ملف JPG إلى نقطة توقف:

  • أقصى عرض: 499 بكسل
  • أقصى عرض: 799 بكسل
  • العرض الأدنى: 800 بكسل

كم عدد نقاط التوقف التي يجب أن تنشئها؟ كيف تحدد الحد الأقصى والحد الأدنى للعرض؟ لا توجد قوانين. في مقال ممتاز يشير إليه Buddy ، يقول Jason Grigsby ، "إن تحديد نقاط توقف الصورة هو شيء سيواجهه الجميع ، وبصراحة ، ليس لدي إجابات جيدة لك."

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

تجدر الإشارة إلى أن بعض أنظمة إدارة الأصول الرقمية (DAM) يمكنها إنشاء مخرجات متعددة لصورة واحدة بأحجام ونسب مختلفة. لن يكرر ما فعله Buddy مع صور منفصلة ، ولكن يجب عليك استكشاف ما يقدمه نظام البرنامج الخاص بك.

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

اسأل ما يحتاجه جمهورك ولماذا. جرب العديد من الصور ونقاط التوقف. كرر. BuddyScalera انقر للتغريد

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

المحتوى ذو الصلة المنتقى باليد:
كيفية صياغة المحتوى المرئي لجمهور الهاتف المحمول

متى تعدد المصادر لصورك

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

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

قالBuddyScalera إن الصور الرئيسية متعددة المصادر على صفحات التحويل الخاصة بك. #intelcontent انقر للتغريد

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

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

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

المحتوى ذو الصلة المنتقى باليد:
هل المحتوى الخاص بك جاهز للاستحواذ على الهاتف المحمول؟

استنتاج

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

ماذا عن فريقك؟ هل تنشئ أحيانًا نسخًا متعددة من صورك المهمة لتلائم مجموعة من أحجام الشاشة؟ ما الذي تعلمته من اختبار صورك عبر أجهزة متعددة؟ واسمحوا لنا أن نعرف في تعليق.

هذا مقتطف من حديث Buddy:

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

صورة الغلاف بواسطة جوزيف كالينوفسكي / معهد تسويق المحتوى