Site Message

كل ما تريد معرفته عن التصميم المتجاوب Responsive Design

الموبايل النهارده أصبح هو الوسيلة اﻷسهل و الأفضل لاستكشاف الويب وتصفح المواقع , لكن ما يزال الكمبيوتر الشخصي موجود على الساحة أيضا , ومع تنوع الموبايلات وأحجام شاشاتها , وكذلك تنوع أحجام شاشات الكمبيوتر واللاب توب اصبح تصميم المواقع في مأزق , فإما أن تقدم تصميم مناسب لمستخدمي الجوال ويتجاهل مستخدمي الكمبيوتر أو أن تقدم تصميم مناسب لمستخدمي الكمبيوتر الشخصي و يتجاهل مستخدمي الجوال , أو تضطر لتصميم أكثر من نسخة من تصميم الموقع بحيث تكون كل نسخة مخصصة لشاشة عرض معينة .. لكن طبعا دي عملية مرهقة جدا , يبقى لازم يكون في بديل يقدم حل للمشكلة دي بشكل سهل وسلس , البديل ده هو التصميم_المتجاوب Responsive_Design وهو ده موضوعنا النهارده 😀

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

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

    
وبكدا مصمم الموقع مش هيحتاج يصمم أكتر من نسخة من واجهة الموقع بحيث تكون كل نسخة مخصصة لشاشة بأبعاد خاصة , ﻷ , هو تصميم واحد لكنه ذكي و مرن بحيث يقدر يصغّر أو يكبّر بعض وحداته و يعيد ترتيبها وفقا ﻷبعاد شاشة زائر الموقع.
    

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

التصميم المتجاوب بيقدم لزائر الموقع تجربة استخدام ممتازة Very Good User Experience ﻹنه بيقدر يستخدم موقعك أو تطبيقك من أي جهاز معاه بشكل سهل وسليم , كمان محركات البحث وخصوصا عمهم الكبير ( جوجل ) بيتجاهلوا حاليا أي موقع غير متجاوب.

    

إزاي أحول التصميم إلى تصميم متجاوب ؟

اﻷكواد الخاصة بتحويل التصميم إلى تصميم متجاوب بتتكتب بلغة الـ HTML5 والـ CSS3 و دول فقط كافيين لجعل التصميم متجاوب تماما.

لكن ﻹضافة المزيد من اﻹحترافية على تصميم موقعك وتحسين تجربة المستخدم بشكل أكبر ممكن تستخدم اللغة حبيبة الملايين 😍😍 طبعا بتكلم عن الجافا اسكربت .. الحب كله ❤
    
هنشوف أمثلة عملية , لكن اﻷول خلونا نبتدي من البداية خالص , أول خطوة في جعل التصميم بتاعك متجاوب Responsive هي إنك تضيف كود الميتا تاج ده في هيدر صفحات موقعك
<meta name="viewport" content="width=device-width, initial-scale=1" />
الكود ده مش محتاج تعدل فيه أي حاجة , وظيفته بإختصار إنه بيقول لبرنامج المتصفح Chrome, Opera, Firefox أو غيرهم إن تصميم الصفحة دي متجاوب و هيتغير حسب أبعاد الـ viewport اللي هي منطقة عرض صفحة الويب ( شاشة الجهاز ).
    
كدا خلصنا من جزء الـ HTML وندخل بقى على الـ CSS , الفكرة بمنتهى البساطة إنك بتكتب مجموعة قواعد أو شروط , لو اتحققت قاعدة منهم أو شرط منهم يتنفذ كود الـ CSS بتاعك واللي هتكون وظيفته إنه يعدّل جزء من تصميم الواجهة بحيث يناسب الوضع الجديد.

و ناخد مثال عملي :

دلوقتي لو أنا عايز أخلي لون خلفية الموقع أبيض مثلا بكتب الكود اللي كلنا عارفينه ده
body{
    background-color: white;
}
تمام جدا , هنفترض دلوقتي إنك عايز تحول لون خلفية الموقع إلى اللون اﻷصفر في حالة إن مقاس شاشة الزائر ( عرض الـ viewport ) أقل من 1000 بكسل مثلا , هتكتب الكود ده
@media only screen and (max-width: 1000px) {
    body{
        background-color: yellow;
    }
}

تعالوا نفصص الكود ده بقى و نشوف هو عبارة عن أيه 😝
أولا هو بيبدأ بـ @media ودي مجموعة أكواد في لغة الـ CSS3 اسمها استعلامات الميديا #media_queries , أنا ممكن استعلم ( اسأل يعني ) عن نوع الميديا ( وسيلة العرض ) اللي بتعرض الموقع بتاعي , هل هي شاشة ؟ طابعة printer ؟ أو برنامج من برامج قراءة الشاشة screen readers ؟

ليه بسأل عن وسيلة العرض ؟
ﻹني ممكن جدا على حسب وسيلة العرض دي أغيّر من تصميم الموقع , مثلا تخيل إن موقعك بخلفية سوداء و الكتابة باللون اﻷبيض , وشخص عايز يطبع صفحة من صفحات موقعك عن طريق الطابعة printer مش اﻷفضل إنك تخلي تصميم موقعك يتحول إلى خلفية بيضاء و الكتابة باللون اﻷسود عشان يظهر بشكل أفضل عند الطباعة ؟
    
احنا في الكود اللي فوق ده قلنا له @media only screen يعني القواعد اللي هنكتبها دي تطبقها فقط إذا كانت وسلة العرض هي شاشة screen , لكن لو وسيلة العرض دي أي حاجة تانية ( طابعة مثلا ) هيتجاهل اﻷوامر دي
    
طيب احنا عندنا كام خيار هنا بالنسبة لوسيلة العرض ؟
يا إما شاشة , أو طابعة , أو speech اللي هي برامج قراءة الشاشة , أو إننا نقوله بغض النظر عن وسيلة العرض , مع أي وسيلة عرض مهما كانت نفذ اﻷوامر دي , و أكواد استهداف وسائل العرض هي :

@media only screen
@media only print
@media only speech
@media all

2. لسه مكملين فصفصة للكود اﻷساسي 😂😂
and (max-width: 1000px)
هنا بنقوله بعد ما شرط الميديا اللي احنا حددناه يكون اتحقق ( إنها شاشة ) وكمان and أقصى عرض لها 1000 بكسل , يعني لو الشاشة دي عرضها أكبر من 1000 بكسل تنفذ اﻷوامر دي .. احنا مشترطين هنا حاجتين , إن وسيلة العرض تكون شاشة + أكبر عرض ليها maximum width هو 1000 بكسل .. يعني لو كانت 1000 بكسل تمام هننفذ اﻷوامر دي , ولو أصغر من 1000 بكسل برضوا تمام هننفذ اﻷوامر دي
    
3. اللي هي أيه بقى اﻷوامر دي اللي هننفذها ؟
body{
background-color: yellow;
}
أوامر CSS عادية جدا بقى , مثلا تغير حجم صورة , تغير ترتيب العناصر بدل ما بيتعرضوا عنصرين بجوار بعض كل واحد منهم عرضه 50% , ﻷ على الشاشات الصغيرة خليهم يتعرضوا تحت بعض بحيث كل واحد يكون عرضه 100% ... وهكذا
    

هل أنا ملزم بعدد معين من الشروط في التصميم المتجاوب ؟

إطلاقا , أنت ممكن تحدد أي عدد من الشروط .. شوف المثال ده و ركز فيها شوية الله يبارك لك 😂
body{
    background-color: white;
}
@media only screen and (max-width: 1000px) and (min-width: 500px){
    body{
        background-color: yellow;
    }
}
@media only screen and (max-width: 400px) {
    body{
        background-color: blue;
    }
}
هنا احنا بدأنا بتحديد لون خلفية للصفحة إنها بيضاء
لكن إذا كانت وسيلة استعراض الموقع ( الـ media ) هي شاشة , وكمان الشاشة دي عرضها 1000 بكسل أو أصغر ( max-width: 1000px ) و كمان برضوا الشاشة دي عرضها 500 بكسل أو أكبر ( min-width: 500px ) لو كل الشروط دي اتحققت يبقى تحول لون خلفية الصفحة للون اﻷصفر
    
و ضيفنا تحتهم كمان شرط جديد أو قاعدة جديدة بنقول فيها , إذا كانت وسيلة استعراض الموقع ( الـ media ) هي شاشة , وكمان الشاشة دي عرضها 400 بكسل أو أقل ( max-width: 400px ) يبقى نحول لون خلفية الصفحة إلى اللون اﻷزرق
    
طيب السؤال دلوقتي , لو الشاشة دي عرضها 450 بكسل , لون خلفية الصفحة هيكون أيه بالظبط ؟
...
ﻷ فكر شوية مش كيميا هي 😂😂
لو عرض الصفحة 450 بكسل يبقى ولا شرط من اللي حددناهم هيتحقق , يعني هتفضل الصفحة بخلفية بيضاء زي وضعها اﻷصلي اللي موجود خارج قواعد الميديا كويري بتاعتنا.
    

هل أنا مجبر إن الشروط بتاعتي تكون العلاقة بينها and بمعنى إن لازم كلها تتحقق ؟

يعني مثلا أنا عايز أضيف قاعدة اقول فيها إذا كان عرض الشاشة أكبر من 1000 بكسل (( أو )) أصغر من 400 بكسل نفذ كذا
خلونا نفترض الوضع اﻵتي , أنا عايز على الشاشات الكبيرة ( أكبر من 1000 بكسل ) و على الشاشات الصغيرة ( أصغر من 400 بكسل ) تحصل حاجة معينة , ولتكن إن لون الخلفية يكون أحمر .. دي اعملها إزاي ؟
    
عندنا طريقتين , يا إما اكتب كل قاعدة بشكل منفصل كالتالي
@media only screen and (min-width: 1000px){
    body{
        background-color: red;
    }
}
@media only screen and (max-width: 400px){
    body{
        background-color: red;
    }
}
أو إني أجمع الشرطين مع بعض في سطر أوامر واحد , بس بدلا من استخدام العلاقة and في الربط بين الشروط , هنستخدم العلاقة or اللي هي في حالتنا هنا بيتم التعبير عنها بالفاصلة ,
لاحظ الكود التالي , وهو بيأدي نفس وظيفة الكود السابق تماما
@media only screen and (min-width: 1000px) , (max-width: 400px){
    body{
        background-color: red;
    }
}

طيب هل اقدر استهدف وضع الموبايل إن كان أفقي أو رأسي ؟


لاحظ إن الموبايل أو التابلت ممكن المستخدم يكون ماسكهم بالوضع الرأسي Portrait أو الوضع اﻷفقي Landscape , واحنا عن طريق الـ CSS نقدر نعرف وضعية الموبايل أو التابلت إن كان أفقي أو رأسي , ونقدر كمان نعدل تصميم الموقع بناءا على وضعية الموبايل
    
شوف الكود ده
@media (orientation: portrait) {
    .div4{
        background-color: green;
    }
}
@media (orientation: landscape) {
    .div4{
        background-color: red;
    }
}
أظن الكود شارح نفسه ومش محتاج تعليق , فقط لو في ملحوظة هنا هو إننا حذفنا شرط إنها تكون شاشة (only screen) و ممكن نرجعه عادي وهيتشغل برضوا على الشاشات فقط , يعني إنك تشترط نوع وحدة العرض إنها تكون شاشة أو طابعة أو برامج قراءة الشاشة .. دي قاعدة ممكن تضيفها للشرط بتاعك أو تحذفها , ولو حذفتها الكود هيتنفذ بغض النظر عن نوع وحدة العرض .. كإنك حددتها all بالظبط.

ملحوظة أخيرة بقى , آه في نقطة أخيرة و ملحوظة أخيرة 😂😂
عندنا في الــ CSS وحدات القياس , منها وحدات ثابتة جامدة زي البكسل px و النقطة pt و عندنا وحدات مرنة شوية أو بتعتمد على النسبية زي الـ rem , rm , %
استخدامك للوحدات المرنة دي هيوفر عليك جهد في تحويل التصميم إلى تصميم متجاوب , يعني هي إلى حد كبير وحدات متجاوبة
مثلا تخيل إن عندك صورتين هتعرضهم متجاورتين في الصفحة , وحددت عرض كل صورة بـ 500 بكسل , على الشاشات اللي عرضها 1000 بكسل أو أكتر هيتعرضوا الصورتين متجاورتين بشكل سليم , لكن تخيل لو الشاشة عرضها 900 بكسل مثلا ؟
هتتعرض الصورة اﻷولى بعرض 500 بكسل , و مش هيتبقى مساحة لعرض الصورة التانية ﻹنك حددته بـ 500 بكسل برضوا , فهتتعرض تحتها
    
طيب لو كنت أنت من اﻷول حددت عرض الصورتين كنسبة مئوية و خليتها 50% ؟
حتى مع الشاشة الـ 900 بكسل كانوا هيتعرضوا جمب بعض كل واحدة بعرض 450 بكسل
    
فدي نقطة حطها في اعتبارك أثناء التصميم , في أي حالة تقدر تستخدم وحدات القياس المرنة بدلا من البكسل أو البوينت .. استخدمهم
    
ختاما تستطيع اختبار معرفتك الحالية بمفهوم التصميم المتجاوب عن طريق اﻹجابة على 10 أسئلة ( اختيار من متعدد ) بدون الحاجة للتسجيل بالموقع , والاختبار لن يستغرق أكثر من دقيقتين .. هدف الاختبار هو إعادة صياغة المعلومات الهامة في صورة اسئلة و إجاباتها بحيث يتم توصيل المعلومة بشكل أفضل
    
و كالعادة ملفات الماتريال للتحميل , بألف هنا وشفا 😂😂