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

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

تصميم مواقع الويب المستجيبة (responsive) يعد حلا رائع لمشاكل تعدد الشاشات، ولكن من زاوية الطباعة تعد امر صعب. فحجم الصفحة غير ثابت.  لذلك، دعونا نوضح بعض المبادئ الأساسية في تصميم الويب المتجاوب (responsive). ولجعل الأمر بسيط سنقوم بالتركيز علي التخطيطات (layouts).

ما هو التصميم المتلائم (Adaptive Web Design (AWD؟

يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا.

ما هو التصميم المتجاوب (Responsive Web Design (RWD؟

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

تصميم الويب المستجيب (Responsive) ضد المتكيف (Adaptive)


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

01_Responsive-vs-Adaptive اساسيات تصميم موقع متجاوب مع جميع الشاشة



الوحدات النسبية (Relative units)


الـ(canvas) يمكن أن يكون شاشة سطح مكتب أو موبايل أو أي شئ بينهما. كثافة البكسل يمكن أن تختلف أيضا، لذلك نحن بحاجة لوحدات تتسم بالمرونة وتعمل في كل مكان. الوحدات النسبية مثل النسب المئوية تكون عملية وفعالة. لذلك انشاء شئ عرضه 50% يعني انها ستاخذ دائما نصف الشاشة ( نصف إطار الرؤية).

02_Relative-Units-vs-Static-Units-1 اساسيات تصميم موقع متجاوب مع جميع الشاشة






الموبايل (Mobile ) أم سطح المكتب (Desktop) أولا





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

08_Desktop-first-vs-Mobile-first-3 اساسيات تصميم موقع متجاوب مع جميع الشاشة




قلعة الشروح

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

إرسال التعليق