كيفية ضمان الخبرات المرئية المثلى عبر الأجهزة

تم التحديث في 22 أغسطس 2022

افتح أفضل صفحة تحويل على موقع الويب الخاص بك على ثلاثة أجهزة - الجوال والكمبيوتر اللوحي وسطح المكتب.

حقا ، افعلها. سوف انتظر.

هل يعرض المحتوى الخاص بك بالشكل الذي توقعته؟

سيجد العديد من المسوقين أنه لا يوجد. تجربة المستخدم واتساق الرسائل غير مرضيين. في بعض الأحيان ، يكون الأمر فظيعًا تمامًا.

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

وقد يكون هذا هو الخطأ.

ابتهج ، زميل تسويق المحتوى. أنا هنا للمساعدة في إجراء تعديل طفيف - COPE-M.

افهم سبب أهمية COPE-M

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

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

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

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

يمكن أن يؤدي اعتماد نهج COPE-M لاستراتيجية نشر المحتوى إلى زيادة تجربة المستخدم وزيادة الاتساق وتحسين محرك البحث (SEO) الخاص بك مع المحتوى المحدث.

الصور ليست بالضرورة أفضل أصدقاء لـ COPE

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

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

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

اختر الصور لمصادر متعددة

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

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

تلميح: قم بتضييق تحديد صفحتك بحيث تقتصر على تلك التي تحصل على حركة مرور كبيرة من الأجهزة المحمولة.

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

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

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

تصميم لشاشات متعددة

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

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

يوضح هذا الرسم التوضيحي ثلاث نقاط توقف محتملة: 320 بكسل للهاتف الخلوي ، و 720 بكسل للجهاز اللوحي أو الهاتف الكبير ، و 1،024 بكسل لجهاز الكمبيوتر المحمول:

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

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

إليك كيفية عمل ذلك مع المثال الأصلي. هذه المرة ، التقطت صورًا مختلفة لكل حجم - بعرض 800 و 400 و 200 بكسل. عند النشر ، تكون وجوههم بنفس الحجم تقريبًا في كل منها.

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

هذا النهج ليس COPE. إنه ليس في الغالب جزء من COPE-M. لقد أنشأت عملًا أكثر بثلاث مرات لنفسي. لهذا السبب يجب أن تقصر هذا العمل الذي يستغرق وقتًا طويلاً على محتوى التحويل الأساسي فقط.

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

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

بين علامتي "picture" ، حددت صور المصدر الثلاثة ، والتي تم تسميتها بناءً على عرض الصورة:

• jpg
• jpg
• jpg

الآن ، سيتم تشغيل كل صورة عندما تصل إلى نقطة التوقف الخاصة بها:

• 499 بكسل (كحد أقصى) للهواتف الذكية
• 799 بكسل (كحد أقصى) للأجهزة اللوحية
• 800 بكسل (كحد أدنى) لسطح المكتب

اجعل COPE-M يعمل لصالح علامتك التجارية

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

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

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

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