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

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

اولا : ما هو التصميم المتجاوب ؟

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

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

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

مقاسات سلسة – Fluid grids : 

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

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

مثال :

لو كان نموذج التصميم الخاص بك بمقاس 960 بكسيل ، واذا افترضنا ان مقاس العنصر المستهدف هنا حوالي 300 بكسيل ؛ واذا قمنا هنا بعملية قسمة 300 / 960 * 100 فسوف نحصل على 31.25 % وهي النسبة التي يمكننا تطبيقها على العنصر المستهدف في تصميمك.

واليكم رسم توضيحي لهذه العملية الحسابية:

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

ولكن هناك حل سحري لتفادي مثل هذا الأمر وهو …..

امكانية استدعاء الوسائط في CSS3 – او كما تسمى ( Media Queries) 

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

فمثلا اذا اردنا تنسيق شكل التصميم بالنسبة لشاشة جوال بعرض 480 بكسيل فيمكن ان يكون شكل الكود هكذا ….

 بإستخدام عدد من هذه الاوامر ، سنحصل على العديد من المقاسات الأخرى ؛ مثل :

• 320 بكسيل
• 480 بكسيل
• 600 بكسيل
• 768 بكسيل
• 900 بكسيل
• 1200 بكسيل

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