تخطيط متكيف للمواقع

جدول المحتويات:

تخطيط متكيف للمواقع
تخطيط متكيف للمواقع
Anonim

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

الاتجاه الحديث

التخطيط التكيفي
التخطيط التكيفي

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

تعريف التخطيط المستجيب

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

تصميم القرار التكيفي
تصميم القرار التكيفي

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

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

مزايا التخطيط المستجيب

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

نموذج تخطيط سريع الاستجابة
نموذج تخطيط سريع الاستجابة

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

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

مبادئ وميزات التخطيط التكيفي

ما هي المبادئ التي تقوم عليها طريقة التخطيط سريع الاستجابة في تصميم الويب؟

- استخدام نوع التخطيط المرن

- الصور "المطاط".

- استخدام استعلامات الوسائط (استعلامات الوسائط).

- الحاجة إلى التفكير في الأجهزة المحمولة منذ بداية التخطيط

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

1. تصميم وإنشاء تصميم موقع ويب مع مراعاة العمل على مجموعة كاملة من الدقة: من الجوال إلى شاشات العرض العريضة.

2. تخطيط بأوراق الأنماط المتتالية باستخدام تقنية استعلام الوسائط المقدمة في CSS 3.

3. برمجة من جانب كل من العميل والخادم لإرسال الصور إلى الأجهزة المحمولة بحجم ودقة أصغر.

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

من أين تبدأ بالتخطيط سريع الاستجابة؟

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

أمثلة التخطيط التكيفي
أمثلة التخطيط التكيفي

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

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

على الرغم من أن تقنية مثل هذا التصميم المتجاوب ليست بهذه البساطة ، فإن إتقانها سيؤتي ثماره قريبًا.

موصى به: