استفسار عن تصميم الموقع لشاشات مختلفة

أنت تقصد التصميم المتجاوب للموقع، صحيح؟

ستحتاج إلى استخدام الـ  media query من أجل ضبط تصميم الصفحة على مختلف أحجام الشاشات وذلك من خلال إختبار الموقع وتفق الـ Break points التي يصبح فيها التنسيق غير سليم عند حجم معين، وذلك باستخدام أدوات المطور في المتصفح أي بتصغير حجم الموقع أو إختيار حجم معين للشاشة وتصفح الموقع لإختباره.

ومن الأفضل أن تعتمد من البداية على الـ Grid والـ Flex ووحدة قياس rem وأيضًا خاصية max-width من أجل تسهيل عملية تجاوب الصفحة.

وقد تم ذكر ذلك هنا بالتفصيل:

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

وعليكم السلام

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

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

التصميم المُخصص (Fixed Design)
هذا النهج يتضمن تصميم الموقع لحجم واحد محدد بشكل ثابت، وعادةً يكون مصممًا ليتناسب مع شاشات سطح المكتب. عندما يتم عرضه على شاشة أصغر، قد لا يكون متناسقًا ومحسّنًا بشكل جيد للأجهزة المحمولة، مما يؤدي إلى تجربة مستخدم سيئة.

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

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

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

• التصميم المتجاوب Responsive Web Design هو تقنية تستخدم تفاعلات CSS الديناميكية لتعديل العرض والتصميم ليتناسب مع أحجام الشاشات المختلفة. وبمعنى آخر، يتم تحديد العناصر وترتيبها وحجمها بناءً على حجم الشاشة التي يتم عرض الموقع عليها.
• أما التصميم المتلائم Adaptive Web Design، فهو يستخدم تقنية تعتمد على الاستشعار لتحديد حجم الشاشة ومن ثم تقديم تخطيط محدد مسبقًا لهذا الحجم. وبمعنى آخر، يتم إنشاء عدة إصدارات من الموقع، كل إصدار لحجم شاشة محدد، وعندما يتم عرض الموقع يتم تحميل الإصدار الأنسب لحجم الشاشة التي يتم عرض الموقع عليها.

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

لا يوجد حل واحد يناسب الجميع، فكل من التصميم المتجاوب Responsive Design والتصميم المتلائم Adaptive Design لهما مزايا وعيوب.

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

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

يفضل الإطلاع على المقالات التالية والموجودة في التعليق السابق لتعلم هذه المفاهيم بشكل أفضل