التصميم المستجيب لمواقع الويب

عند عرض الموقع على شاشة ذات حجم كبير

عند عرض الموقع على شاشة ذات حجم صفير

مثال لصفحة ويب ذات 3 أعمدة مصممة للشاشات الكبيرة

تصميم ذو عمود واحد

التصميم المستجيب لمواقع الويب (Responsive web design)‏ هو نهج مستخدم في تصميم وتطوير مواقع الويب، حيث يكون للويب المستجيب القابلية للتغير بناء على خصائص الجهاز الذي يتم عرضه به.^[1]

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

لدى صفحة الويب المستجيبة القدرة على تغيير تخطيط الصفحة(تغيير طريقة عرض العناصر داخل الصفحة) بناء على بعض خصائص الجهاز (مثل: طول شاشة العرض أو عرضها) وغالباً ما يستخدم قياس عرض نافذة المتصفح « View Port » في بناء صفحة الويب المستجيبة.^[2]

نبذة تاريخية

1. التصميم باستخدام قياسات ثابتة « Fixed Design » وقياسات متغيرة « Relative Design »: كانت القياسات الثابتة هي الشائعة في التصميم، حيث كانت العناصر تعطى قياسات ثابتة مثل البكسل « Pixel » والنقطة « Point » وذلك لأن معظم شاشات العرض كانت بأحجام متقاربة (غالباً 1024 بكسل). مع بدايات الألفية الثالثة بدأت قياسات أخرى متغيرة في الظهور مثل النسبة المئوية والتي سيكون لها أثر في ظهور الويب المستجيب.^[2]
2. تصفح المواقع من الأجهزة المحمولة: لم يكن تطوير مواقع يمكن تصفحها عن طريق الأجهزة المحمولة موضع اهتمام لدى مطوري صفحات الويب بسبب محدودية هذه الأجهزة وصعوبة التصفح من خلالها وذلك حتى ظهور جهاز IPhone. سهلت التقنيات الجديدة التي قدمها IPhone التصفح من خلال الأجهزة المحمولة، إلا أن صفحات الويب التي صممت للشاشات الكبيرة لم تكن تتناسب مع شاشة IPhone. لذا كان الحل المقدم من شركة Apple هو تصغير الصفحات مما أدى إلى ظهور العناصر بشكل صغير وغير واضح.^[2]
3. تصميم مواقع الويب للأجهزة المحمولة: أما الحل الذي قدمه مطوري صفحات الويب فهو بناء نسختين من الموقع إحداها للشاشات الكبيرة والأخرى لجهاز IPhone.^[2]
4. ظهور أجهزة أكثر: لم تلبث شركات الأجهزة المحمولة حتى أصدرت أجهزة أخرى بأحجام مختلفة، لذا بدأ مطوري صفحات الويب بالبحث عن طريقة لبناء مواقع تعمل بشكل فعال على جميع شاشات العرض.^[2]
5. تطور خاصية استدعاء الوسائط « Media Query » في CSS3: لم تقدم التصاميم ذات القياسات المتغيرة « Relative Design » التي تتغير أحجام عناصرها بتغير حجم شاشة العرض حلاً كاملاً.^[2][3] فلو كان هناك تصميم ذو ثلاثة أعمدة حيث يحتل العامود الأول 40% من حجم الشاشة ويحتل كلاً من العامود الثاني والثالث 20% من حجمها، أما 20% المتبقية فللهوامش « margins »، فإن هذا التصميم سيعرض بشكل جيد في الشاشات الكبيرة على عكس الشاشات الصغيرة حيث تظهر هذه الأعمدة بشكل أصغر. من جهة أخرى، التصميم ذو العامود الواحد يتناسب بشكل أكبر مع الشاشات الصغيرة دون الكبيرة. هنا يأتي السؤال؛ من دون أن يكون هناك أكثر من نسخة للموقع، كيف يمكن بناء نسخة واحدة تعرض بعامود واحد في الشاشات الصغيرة و 3 أعمدة في الشاشات الكبيرة؟ والجواب على هذا السؤال هو من خلال خاصية استدعاء الوسائط. إن مبدأ عمل هذه الخاصية هو تكويد أكثر من تخطيط للصفحه وإدراج كل تخطيط تحت شرطٍ ما « if...then » وعندما يتحقق هذا الشرط فسيتم عرض التخطيط المناسب له. بدأت خاصية استدعاء الوسائط في CSS2 وغالباً ما كان يتم تصميم تخطيطين للصفحة أحدهما للطباعة « print » والآخر للعرض على الشاشات « screen » فعند طباعة الصفحة فإنها تتغير بشكل تلقائي لتلائم الورق. تطورت هذه الخاصية في CSS3 وأصبحت تدعم حالات أكثر مثل عرض، طول، اتجاه الشاشة وغيرها. في 2009 دعمت المتصفحات CSS3. أما في 2010 فقد بدأ ظهور مصطلح الويب المستجيب على يد Ethan Macrott.^[2][3]

خصائص صفحات الويب المستجيبة

تقوم صفحات الويب المستجيبة على 3 خصائص:^[3]

1. قياسات مرنة: تعطى عناصر الصفحة قياسات مرنة تسمح للعنصر بتغيير حجمه بناء على خصائص الجهاز.
2. وسائط مرنة.
3. إمكانية الاستعلام عن الوسائط من خلال « Media Query ».

مميزات التصميم المستجيب

تساعد تقنية التصميم المستجيب على:^[2]

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

مراجع

موسوعات ذات صلة :

• موسوعة إنترنت
• موسوعة تصميم
• موسوعة تقنية المعلومات
• موسوعة علم الحاسوب