Responsive Web Design توضيح مفهوم التصميم المتجاوب

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

mobile vs desktop تحديا التقنيات

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

responsive web design احجام الشاشات

توضيح بعض المقاسات المهمة Responsive size و كيفية اختيارها

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

  • الطريقة الأولى: معرف أصغر حجم شاشة للجهاز الواحد ويمكنك اعتمادها بانها حجم شاشة الجهاز
  • الطريقة الثانية: معرف العدد الأكبر من المستخدمين لحجم الشاشة للجهاز الواحد ويمكنك اعتمادها بأنها حجم شاشة الجهاز
  • الطريقة الثالثة (وهي الطريقة المتبعة): احجام الشاشات المتفق عليها من قبل اغلب المصممين والتي تم دعمها من أداة ويب دي فلوبر المضافة للمتصفحات هي الموبايل (العرض 480) التابلت (العرض 768) ام بالنسبة لأجهزة الكومبيوتر (960 او 1024 او 1280) جميع القياسات أعلاه بوحدة قياس البيكسل
  • HTML-CSS
  • Media Queries احجام الشاشات
  • hossam

    مقال مميز

    • asaad Qassim

      شكراً لك اخي العزيز