التصميم المتجاوب - Responsive Design

ما هو التصميم المتجاوب - Responsive Web Design؟ وما هي مميزاته؟ تعلم كيفية تصميم موقع أو صفحة ويب بطريقة التصميم المتجاوب خطوة بخطوة عن طريق إستخدام HTML, CSS media query

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

مصطلح التصميم المتجاوب هو ترجمة للمصطلح Responsive Design، وهو عبارة عن طريقة (إسلوب) مستخدم في تصميم صفحات ومواقع الويب، حيث أن تصميم الصفحة/الموقع يتغير (يتكيف - يتجاوب) بتغير حجم الجهاز (الشاشة) الذي يعرض من خلاله الموقع، فعند تصفح الموقع من جهاز كمبيوتر يعرض تصميم، وعند تصفح نفس الموقع من جهاز تابلت (جهاز لوحي) أو جهاز موبايل (جوال) يعرض تصميم آخر متناسب مع صغر حجم (عرض) الشاشة لهذه الأجهزة مقارنة بشاشة جهاز الكمبيوتر (الحاسوب)، ويتم كتابة الأكواد اللازمة لإنشاء صفحة ويب بطريقة التصميم المتجاوب بلغة HTML/HTML5 و CSS3.

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

إعطاء تجربة إستخدام فريدة لمتصفح (مستخدم) الموقع، (User Experience)، حيث تتيح للمستخدم (User) أن يتصفح الموقع بسهولة من أي جهاز سواء كان جوال أو كمبيوتر أو أي نوع آخر من الأجهزة.
يتيح التصميم المتجاوب المزيد من النقاط لتصنيف أي موقع إلكتروني على محركات البحث، فعلى سبيل المثال إذا كان موقع ما يقدم معلومة/خدمة مهمة ولكن لا يستخدم طريقة التصميم المتجاوب، فإن فرص العثور عليه من خلال محركات البحث تكون أقل مقارنة بأي موقع آخر يستخدم هذه التقنية في التصميم.

كيفية إستخدام التصميم المتجاوب في إنشاء صفحة ويب

يجب أولا إضافة وسم <meta name="viewport" /> في منطقة رأس الصفحة <head>، وذلك لكي تستطيع إستخدام الخاصية @media، ويمكنك تعلم المزيد عن هذا الوسم من خلال الرابط التالي https://developer.mozilla.org/.../Viewport_meta_tag، وسوف نقوم بإنشاء ملف لكتابة أكواد الـ CSS وسوف نستخدم إسم للملف وهو main.css.

HTML5

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="main.css" />
</head>

بعد إضافة ملف main.css لصفحة الويب، سوف نتعرف أولا على مباديء الخاصية @media وكيف يتم إستخدامها لتصميم صفحة ويب بطريقة التصميم المتجاوب، حيث أن هذه الخاصية لها إستخدامات أخرى، حيث يمكن من خلالها تحديد تصميم يتم إستخدامه لطباعة صفحة الويب، ويمكنك أن تعتبر هذه الخاصية هي طريقة لغة الـ CSS لتطبيق الجمل الشرطية (IF Conditions)، حيث يمكن أن نستعلم من خلال هذه الخاصية على عرض الجهاز بالبكسل (Pixel)، وإذا كانت نتيجة الإستعلام متوافقة سوف نطبق مجموعة من التنسيقات، وإن كانت نتيجة الإستعلام غير متوافقة فلن نطبق هذه التنسيقات، والمثال التالي يوضح أكثر

CSS

@media only screen and (max-width: 1024px) {
  body {
    background: #cfcfcf;
  }
}

في المثال إستخدمنا الخاصية @media only وإستخدمنا معها النوع (type) screen ويتم إستخدام هذا النوع لتحديد حجم/عرض الشاشة، وهناك أنواع أخرى مثال print و speech ولكن في هذا المقال سنتناول النوع screen فهو النوع المستخدم لتطبيق التصميم المتجاوب، وإستخدمنا أيضا بالإضافة إلى النوع، الخاصية max-width وحددنا لها قيمة 1024px وهو ما يعني أننا نستعلم عن حجم الشاشة إذا كان أقل من 1024px فسوف يتم تطبيق التنسيقات الخاصة بالعنصر body، وذلك لتحقق الشرط، وإن كانت قيمة عرض الشاشة أكبر من هذه القيمة فلن يتم تطبيق التنسيقات لعدم توافق الشرط.

والآن سوف نتناول مثال آخر نقوم فيه بتغيير لون الخط للعنصر p على حسب عرض الشاشة

CSS

@media only screen and (min-width: 1025px) {
  p {
    color: #ea1e2c;
  }
}
@media only screen and (max-width: 1024px) {
  p {
    color: #1565c0;
  }
}

بتطبيق الأكواد في المثال سوف يصبح لون الخط في الجهاز الكبير (عرض الشاشة أكبر من 1024px) أحمر وإستخدمنا لتطبيق ذلك الخاصية min-width وحددنا الرقم المطلوب وأضفنا إليه 1 ليصبح 1025 هو أقل عرض للشاشة يتم تطبيق اللون الأحمر، أما الجهاز ذو الشاشة الأصغر من ذلك يكون الخط لونه أزرق، وذلك بإستخدام الخاصية max-width وتعني أن أكبر عرض للشاشة سوف يتم تطبيق هذه التنسيقات له هو 1024px. ويمكنك إستخدام أي نوع من العناصر أو المحددات (classes)، وأي نوع من الخصائص التي تريد تغييرها في داخل الجزء الخاص بالخاصية @media، حتى أنه يمكنك أن تخفي بعض العناصر في عرض معين وتظهرها لعرض آخر، فإن كنت تتصفح موقعنا من خلال جهاز كمبيوتر يمكنك تصغير (resize) حجم المتصفح وسوف تلاحظ تغيير التنسيقات الخاصة بالموقع مع تغيير حجم الشاشة.

وبذلك يتبقى شيء أخير، يتوجب عليك أن تقوم بترتيب الخاصية @media لتستهدف الأجهزة الأكبر ثم يليها الأجهزة الأصغر فالأصغر، أو بمعنى أبسط تكتب الأكواد الخاصة بجهاز الكمبيوتر أولا ثم يليها في الترتيب أجهزة التابلت ثم أجهزة الجوال، حيث يمكنك أن تكتب الأكواد الخاصة بكل جهاز في ملف CSS منفصل وتقوم بترتيبهم كالتالي

HTML5

<head>
  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="stylesheet" type="text/css" href="computer.css" />
  <link rel="stylesheet" type="text/css" href="tablet.css" />
  <link rel="stylesheet" type="text/css" href="mobile.css" />
</head>

وسوف نتناول الخاصية @media بالتفصيل في مقالات أخرى، وفي النهاية أتمنى أن أكون قد تمكنت من توصيل المعلومة بطريقة بسيطة، ولا تتردد في السؤال عن أي جزء غير مفهوم أو تقديم أي إقتراح أو تعديل على المحتوى من خلال التعليقات.