ما هو Responsive Web Design وما أهميته ؟

الصورة الرمزية لـ عبد الله نجاوي

قد يكون الحديث عن “Responsive Web Design” أو التصميم المتجاوب في 2019 أمر غير ذي معنى , حيث أن التصميم المتجاوب أصبح من الأمور المسلم بها , أي أن الأمر لم يعد حتى يستحق أن تفكر هل تستخدم تصميم متجاوب أم لا , إذن لماذا هذا التوجه نحو هذا النوع من التصميم في غاية الأهمية , خصوصا عندما يتعلق الأمر بتصميم المواقع.

التصميم المتجاوب

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

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

إطار عمل Bootstrap

قد تجد الأن الكثير من أطر العمل المخصصة لبناء واجهات المواقع , فهناك العديد من الخيارات الجيدة , لكن قبل ظهور أغلبية أطر العمل المخصصة لهذا الغرض كان إطار العمل Bootstrap هو الأبرز والأفضل ومازال حتى الآن , وقد كان في بدايات انطلاقة يحمل إسم “Twitter Bootstrap” وهو مشروع كان يعمل عليه مهندسين داخل شركة تويتر قبل أن يتم فتح مصدره ويصبح متاج للجميع سنة 2011 ثم بعدها أصبح إسمه “Bootstrap” فقط .

أهميته هو أنه يوفر لك الكثير من العناصر الجاهزة التي يكفي أن تقوم باستدعائه داخل الموقع باستخدام الكلاسات المناسبة “Class” , وطبعا لا يجب أن تقلق في ما يتعلق بالتصميم المتجاوب حيث أنه يقوم بالتعامل مع هذا الأمر , طبعا يمكنك التحكم في الجزئيات والتفاصيل الصغيرة , لكن إن لم ترد ذلك فلا تقلق ويمكنك فقط التركيز على الجوانب المتعلقة بالتصميم وبناء واجهة الموقع باستخدامه.

المقاربة بسيطة في التصميم المتجاوب وهي إستخدام خاصية ال “CSS media queries” وهي تمكن المطور من تغيير طريقة توزيع عناصر الصفحة حسب أبعاد الشاشة , طبعا في Bootstrap هناك طريقة أخرى ربما يجدها البعض أسهل وهي إستخدام نظام ال Grid يمكنك التعرف عليه من خلال هذا الشرح المخصص في تصميم المواقع.

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

إنطلاق إطار العمل “بوتستراب” من داخل شركة تويتر كان له أثر ربما غير مباشر على شركات التقنية الكبرى الأخرى للدخول إلى مجال البرمجيات المفتوحة المصدر , ومثال على هذا شركات مثل فيسبوك و جوجل وغيرها , حيث أطلقوا العديد من أطر العمل مثل React و Angular صحيح قد تكون لها إستخدامات مختلفة لكنها في النهاية تدخل في نفس التوجه الذي يدفع الشركات الكبيرة إلى المساهمة في تطوير حلول تسهل على المطورين بناء المواقع , بل وفي حلول أخرى مثل بناء التطبيقات وغيرها .