مقاس واحد يناسب البعض: دليل لحلول صور تصميم الويب المتجاوبة

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

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

في البحث عن صور الويب المستجيبة

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

تحتوي العلامة <img> على سمة المصدر فقط التي ترتبط مباشرة بالصورة نفسها. ليس لديها طريقة لتحديد النوع الصحيح للصورة المطلوبة دون أي إضافات.

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

إذن ، ما هو موقع الويب الذي يجب القيام به؟

حلول تحجيم الصور المستجيبة الخلفية

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

الصور التكيفية

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

سينشا تاتش

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

 <img src="http://src.sencha.io/http://example.com/images/kitty_cat.jpg" alt="My Kitty Cat">

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

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

حلول الواجهة الأمامية

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

تم تقديم عنصر <picture> والموافقة عليه في مواصفات HTML5 بواسطة W3C. لا يتوفر حاليًا على نطاق واسع في جميع المتصفحات ولكنه لن يمر وقت طويل قبل أن يصبح متاحًا في الأصل. حتى ذلك الحين ، نعتمد على JavaScript polyfills للعنصر. تعد Polyfills أيضًا حلاً رائعًا للمتصفحات القديمة التي تفتقر إلى العنصر.

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

بيكتوريفيل

Picturefill هي مكتبة متعددة التعبئة لعنصر <picture> . إنها واحدة من المكتبات الأكثر شيوعًا بين الحلول الأمامية لمشكلات تحجيم الصور وتغيير حجمها. هناك نسختان. يحاكي Picturefill v1 عنصر <picture> باستخدام span بينما يستخدم Picturefill v2 عنصر <picture> بين المتصفحات التي تقدمه بالفعل ويوفر متعدد التعبئة للمتصفحات القديمة (على سبيل المثال ، لـ IE> = IE9). لديها بعض القيود والحلول ، وعلى الأخص لنظام Android 2.3 - والذي يعد بالمناسبة مثالاً على المكان الذي تأتي فيه السمة img srcset للإنقاذ. يوجد أدناه نموذج ترميز لاستخدام Picturefill v2:

 <picture> <source media="(min-width: 768px)"> <source media="(max-width: 767px)"> <img alt="My Kitty Cat"> </picture>

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

Imager.js

Imager.js هي مكتبة أنشأها فريق BBC News لإنجاز صور متجاوبة بنهج مختلف عن ذلك الذي تستخدمه Picturefill. بينما يحاول Picturefill إحضار عنصر <picture> إلى متصفحات غير مدعومة ، يركز Imager.js على تنزيل الصور المناسبة فقط مع الانتباه أيضًا لسرعات الشبكة. كما أنه يشتمل على تحميل بطيء دون الاعتماد على مكتبات الطرف الثالث. يعمل عن طريق استخدام عناصر نائبة واستبدالها بعناصر <img> . يوضح نموذج التعليمات البرمجية أدناه هذا السلوك:

 <div> <div class="image-load" data-src="http://example.com/images/kitty_{width}.jpg" data-alt="My Kitty Cat"></div> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

سيبدو HTML الذي يتم عرضه بالشكل التالي:

 <div> <img src="http://example.com/images/kitty_480.jpg" data-src="http://example.com/images/kitty_{width}.jpg" alt="My Kitty Cat" class="image-replace"> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

يعد دعم المتصفح أفضل بكثير من دعم Picturefill على حساب كونه حلاً أكثر واقعية من حل التفكير المتقدم.

خلط المصدر

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

بعض مكتبات JavaScript البارزة الأخرى هي:

• HiSRC - ملحق jQuery للصور سريعة الاستجابة. قد يكون الاعتماد على jQuery مشكلة.
• Mobify.js - مكتبة عامة للمحتوى سريع الاستجابة ، بما في ذلك الصور وأوراق الأنماط وحتى JavaScript. إنه "يلتقط" DOM ​​قبل تحميل المورد. Mobify مكتبة شاملة قوية ، ولكن قد تكون مبالغة إذا كان الهدف هو مجرد صور سريعة الاستجابة.

ملخص

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

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

• هل المتصفحات القديمة مشكلة؟ إذا لم يكن الأمر كذلك ، ففكر في استخدام نهج أكثر حداثة (على سبيل المثال: Picturefill ، سمة srcset )
• هل وقت الاستجابة حرج؟ إذا لم يكن الأمر كذلك ، فابحث عن حل جهة خارجية أو حل خلفي.
• هل من المفترض أن تكون الحلول داخلية؟ من الواضح أن حلول الطرف الثالث سيتم استبعادها.
• هل هناك الكثير من الصور الموجودة بالفعل على أحد المواقع التي تحاول الانتقال إلى الصور المتجاوبة؟ هل هناك مخاوف بشأن التحقق من الصحة أو العلامات الدلالية (أو بالأحرى العلامات غير الدلالية)؟ سيتطلب ذلك حلاً خلفيًا لتوجيه طلبات الصور إلى شيء مثل الصور التكيفية.
• هل يمثل اتجاه الفن مشكلة (خاصة بالنسبة للصور الكبيرة التي تحتوي على الكثير من المعلومات)؟ ستكون مكتبة مثل Picturefill حلاً أفضل لمثل هذا السيناريو. أيضًا ، ستعمل أي من الحلول الخلفية أيضًا.
• هل هناك قلق بشأن نقص جافا سكريبت؟ سيكون أي من حلول الواجهة الأمامية غير وارد ، مما يترك خيارات الجهة الخلفية أو الطرف الثالث التي تعتمد على استنشاق UA.
• هل هناك أولوية لأوقات استجابة الأجهزة المحمولة على أوقات استجابة سطح المكتب؟ قد تكون مكتبة مثل Source Shuffling أكثر ملاءمة.
• هل هناك حاجة لتوفير سلوك متجاوب مع كل جانب من جوانب الموقع ، وليس الصور فقط؟ Mobify.js قد يعمل بشكل أفضل.
• هل تم تحقيق العالم المثالي؟ استخدم display:none نهج!