يعتبر موضوع توافق تصميم الموقع مع الهواتف الذكية من المواضيع التي لاقت اهتمام كبير في الآونة الأخيرة و خصوصاً بعد تركيز جوجل على

ضرورة توافق تصميم الموقع لتحسين الترتيب في نتائج البحث ، أضف إلى ذلك قيام العديد من محركات البحث بإطلاق أدوات تفحص توافق تصميم

الموقع مع الهواتف الذكية ، من هذه المحركات نذكر جوجل و بينغ و ياندكس ، و لكن هل سمعت يوم بمفهوم التصميم السريع الاستجابة ؟ تابع معي

مقال اليوم لتتعرف على هذا المفهوم الخاص بتصميم الموقع و توافقه مع الهواتف الذكية لعلك تستغل هذه التقنية لاحقاُ في تهيئة موقعك لمحركات البحث

و تحسين الترتيب الذي يتلاقه موقعك عند البحث عنه باستخدام الهواتف الذكية .

.

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

التصميم سريع الاستجابة – أو بالانكليزية Responsive Web Design أو اختصاراً RWD – هو مفهوم تصميمي يطلق على المواقع ذات التصميم

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

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

مثل السحلية ( بالفصحى تدعى العظاءة J )، ذلك الحيوان الذي يغير لونه حسب البيئة المحيطة به .

.

متى استخدم لأول مرة ؟

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

كان قادراً على التغير بحسب نوع المتصفح المستخدم و إيقاف بعض العناصر الموجودة فيالتصميم في حال كان التصفح يتم من خلال متصفح

Internet Explorer ، شهدت بعدها هذه التقنية العديد من الإضافاتو التعديلات ليظهر مصطلح RWD لأول مرة في عام 2010 من خلال مقالة

نشرت على الإنترنت توضح أهم الشروط التي يجب توفرها في تصميم الـ RWD .

.

ما الدافع لاستخدام التصميم سريع الاستجابة ؟

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

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

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

الإنترنت من أجهزة محمولة أكثر من 50% من إجمالي الأشخاص الذين يتصفحون الإنترنت .

.

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

قبل أن نعرف كيف يعمل التصميم سريع الاستجابة يجب أن نعرف معنى مصطلح ” سرعة الاستجابة ” ، المقصود بسرعة الاستجابة هي قدرة التصميم

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

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

يعتمد التصميم سريع الاستجابة على عدة مفاهيم : المفهوم الأول هو مفهوم التصميم الرشيق أو بالإنكليزية Fluid ، الفكرة الأساسية من مفهوم التصميم

الرشيق تتركز حول استخدام نسب مئوية بدلاً من استخدام قياسات ثابتة بالبيكسل ، إذ كل الأبعاد عبارة عن نسب مئوية مقارنة بحجم شاشة الجهاز

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

تتغير بالاعتماد على حجم شاشة الجهاز المستخدم مما يضفي ديناميكية رائعة على التصميم .

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

أبعاد الصور أيضاً لتتناسب مع القياسات الجديدة للصفحة ، لتحقيق ذلك تم وضع قياسات الصور بشكل نسبي أيضاً بدل من قياس ثابت ، بذلك تضمن أن

الصور ستتغير أبعادها بما يتناسب مع حجم الصفحة و بالتالي مع حجم الشاشة .

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

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

تستخدمها الصفحة لتتلاءم مع قدرات الجهاز و تشعر المستخدم بأن الصفحة صممت خصيصاً للتوافق مع جهازه .

.

ملاحظة أخيرة

عندما تقرر العمل بالتصميم سريع الاستجابة يجب أن تعلم أن هناك ثلاث أنواع تصميم أخرى هي : التصميم ذو الأبعاد الثابتة Fixed ، التصميم

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