كيف تتعامل مع الصور في التصميمات المتجاوبة ؟

التصميمات المتجاوبة responsive-designs ، على قدر ما تمتلكه من امكانيات جديدة تفتح لنا ابوابا كثيرة للعرض على مختلف الاجهزة ، الا ان لها مشكلة تكاد تصل بنا الى حافة هاوية …

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

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

ولكن علينا ان نبحث معا هذه المشكلة بعناية ووضوح اكثر ، ما هي المشكلة من الاساس ، وكيف نتغلب عليها وما هي انسب الحلول المطروحة لها

كيف تتعامل مع الصور في التصميمات المتجاوبة responsive-designs

1- كيف تحدد المشكلة …؟

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

2- سرعة مختلفة ..

يجب على المصمم ان يختار بعناية الصور التي يستخدمها وخاصة حينما يتعامل مع شاشات الريتينا وجوالات 3G ، فهل فكرت يوما عزيزي المصمم في ان حجم كل صورة من هذه ترتبط بعلاقة وثيقة مع سرعة الانترنت المتاحة ..؟

3- عملية اقتصاص الصورة ..

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

ما هو انسب نموذج لسير العمل مع الصور المتجاوبة ..؟

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

التوصيف…

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

خاتمة …

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

هل هذا ممكن …؟

للأسف ، هنالك شيء واحد نثق فيه في عالمنا هذا … لا وجود لعالم او نظام مثالي … لكن بالطبع هناك الكثير من الامثلة الجيدة.

مقالات ذات صلة