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

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

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

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

ملاحظة المحرر: ما يلي هو مقدمة للمبتدئين للتصميم سريع الاستجابة غير المخصص لمصممي الويب الأكثر خبرة.

المكونات الرئيسية للتصميم سريع الاستجابة

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

شبكات مرنة

الشبكات المرنة هي في الأساس سمات وقوالب يتم فيها تعيين عناصر التصميم بالنسب المئوية بدلاً من وحدات البكسل. باستخدام النسب المئوية كوحدة قياس ، فهذا يعني أن العنصر المصمم بنسبة 50٪ سيشغل دائمًا نصف الشاشة ، بغض النظر عن حجم الشاشة أو صغرها.

صور مرنة

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

 img { max-width: 100%; }

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

استعلام الوسائط

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

استعلامات الوسائط ترقى إلى مستوى تلك الإمكانات ثم بعضها. ولكن بدلاً من الاهتمام بنوع الجهاز بالطريقة التي تعمل بها أنواع الوسائط ، تنظر استعلامات الوسائط في إمكانات الجهاز بدلاً من ذلك.

قد يبدو استعلام الوسائط البسيط كما يلي:

المكونان للاستعلام هما نوع الوسائط ، المعين كشاشة ، ثم الاستعلام الفعلي - (max-device-width: 480px) - والذي يسأل بشكل أساسي عما إذا كان عرض الجهاز 480 بكسل أو أقل. إذا كان الأمر كذلك ، يقوم الجهاز بتحميل ملفات generic.css. إذا لم يكن الأمر كذلك ، فسيتم تجاهل الارتباط ، كما هو الحال بالنسبة للآخرين ، حتى يتم تحديد الدقة الصحيحة ويتم تحميل ورقة الأنماط المناسبة.

أكثر من مجرد قرار

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

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

عقلية مرنة

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

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

ضع في اعتبارك ، على سبيل المثال ، الفرق بين تعيين عرضين بنسبة 100٪ و 100 بكسل لعنصرين متطابقين. في إحداها ، يمكنك التأكد من أن العنصر سيملأ الشاشة ، سواء كانت شاشة سطح المكتب أو الكمبيوتر المحمول أو iPhone. لكن العنصر الذي يبلغ عرضه 100 بكسل سيكون كبيرًا على شاشة iPhone بدقة 480 بكسل ولكنه صغير نسبيًا على شاشة سطح المكتب بدقة 1600 × 900.

التصميم المستجيب يعني العمل

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

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

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