تصميم الويب المتجاوب: كيف تجعل موقعك يبدو رائعًا على الهواتف والأجهزة اللوحية

في المشهد الرقمي المتسارع والمتغير باستمرار للأجهزة المتصلة بالإنترنت، يظل تصميم الويب المتجاوب (Responsive Web Design - RWD) حجر الزاوية في تطوير الويب الحديث. لم يمر وقت طويل حتى كان مصطلح “تصميم الويب المتجاوب” غير موجود بالأساس، لكن اليوم، أصبح تبنيه ضرورة لا غنى عنها لمعظم المطورين والمصممين. تشير الإحصائيات الصادرة عن Statista إلى أنه بحلول عام 2019، شكلت زيارات البحث عبر الأجهزة المحمولة 61% من إجمالي زيارات بحث Google. ومع التغييرات المستمرة في خوارزميات Google التي تعطي الأولوية للمواقع المتوافقة مع الجوّال، أصبح ضمان تجربة مستخدم سلسة عبر جميع الأجهزة ليس مجرد ميزة، بل مطلبًا أساسيًا.

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

• ما هو تصميم الويب المتجاوب (RWD)؟
• علامة الميتا viewport ودورها المحوري.
• تقنيات فعالة في تصميم الويب المتجاوب لتلبية احتياجات الأجهزة المحمولة والأجهزة اللوحية.
• أدوات محاكاة ومراقبة تجربة المستخدم على الهواتف والأجهزة اللوحية.

ما هو تصميم الويب المتجاوب (RWD)؟

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

• اتصال الشبكة.
• حجم الشاشة.
• نوع التفاعل (شاشات اللمس، لوحات التتبع).
• دقة الرسومات.

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

علامة الميتا viewport لتحديد موقع ويب متوافق مع الجوّال

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

 <meta name="viewport" content="width=device-width,initial-scale=1" />

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

استعلامات وسائط CSS لأحجام الشاشات والاتجاهات المختلفة

إذا كنت جديدًا في عالم تصميم الويب المتجاوب، فإن استعلامات الوسائط (media queries) هي أول وأهم ميزة في CSS يجب أن تتعلمها. تسمح لك استعلامات الوسائط بتنسيق العناصر بناءً على عرض منفذ العرض (viewport width). إحدى استراتيجيات CSS الشائعة هي كتابة أنماط الأجهزة المحمولة أولاً، ثم البناء عليها بأنماط أكثر تعقيدًا ومحددة لسطح المكتب (استراتيجية “Mobile First”).

تُعد استعلامات الوسائط جزءًا مهمًا من تصميم الويب المتجاوب، وتُستخدم عادةً لتخطيطات الشبكة (grid layouts)، وأحجام الخطوط، والهوامش (margins)، والحشوات (padding) التي تختلف بين أحجام الشاشات واتجاهاتها. فيما يلي مثال على حالة استخدام شائعة لتصميم “Mobile First” حيث يكون العمود بعرض 100% للأجهزة الأصغر، ولكن في منافذ العرض الأكبر يكون بعرض 50%.

 .column {
   width: 100%;
 }
 @media (min-width: 600px) {
   .column {
     width: 50%;
   }
 }

الكود أعلاه مثال بسيط، لكن ما يفعله في الواقع مثير للاهتمام للغاية. عند الأخذ بمنهجية “Mobile First”، يتم تعيين عرض العنصر .column ليكون 100%. باستخدام استعلام وسائط min-width، نحدد قواعد خاصة لمنافذ العرض التي يبلغ عرضها الأدنى 600px (أي منافذ العرض الأوسع من 600px). لذلك، بالنسبة لمنافذ العرض الأوسع من 600px، سيصبح عرض عنصر العمود لدينا 50% من عرضه الأب.

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

ما هو Flexbox؟

قد تتساءل: “ماذا يفعل Flexbox؟” السؤال الأفضل هو: “ما الذي لا يستطيع Flexbox فعله؟” ما هي أسهل طريقة لمركزة عنصر رأسيًا باستخدام CSS؟ Flexbox. كيف تنشئ تخطيط شبكي متجاوب؟ Flexbox. كيف يمكننا تحقيق السلام العالمي؟ ربما ليس Flexbox، لكنه بالتأكيد يحل الكثير من مشاكل التخطيط!

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

 <style>
   main {
     background: #d9d7d5;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
   }
   div {
     background: #767775;
     flex-basis: 100%;
     height: 100px;
     margin-bottom: 0.5rem;
   }
   @media (min-width: 600px) {
     main {
       flex-wrap: nowrap;
     }
     div {
       flex-basis: 33%;
     }
   }
 </style>
 <main>
   <div></div>
   <div></div>
   <div></div>
 </main>

نحقق ما يلي بهذا الكود:

• إنشاء تخطيط flexbox باستخدام display: flex في عنصر الحاوية main.
• تنسيق الأجهزة المحمولة أولاً: نضبط العنصر main على flex-wrap: wrap مما يسمح للعناصر الفرعية بالالتفاف داخل تخطيط flexbox الخاص بنا كما هو موضح أدناه في الشكل 1. نضبط flex-basis: 100% على عناصر div لضمان أنها تشغل 100% من عرض العنصر الأب في تخطيط flexbox (الشكل 1).
• تنسيق الأجهزة الأكبر مثل الأجهزة اللوحية وأجهزة سطح المكتب: نستخدم استعلام وسائط مشابهًا لمثالنا في القسم السابق لتعيين عنصر الحاوية main على flex-wrap: nowrap. هذا يضمن أن العناصر الفرعية لا تلتف وتحافظ على تخطيط من نوع “عمود داخل صف”. من خلال تعيين div إلى flex-basis: 33% داخل استعلام الوسائط، ننشئ أعمدة تشغل 33% من عرض العنصر الأب.

في هذا المثال، يظهر السحر في الأجهزة الأكبر حجمًا بفضل قواعد flexbox واستعلامات الوسائط المدمجة لدينا. نظرًا لأننا حددنا display: flex، ولأننا لم نلغِ القاعدة داخل استعلام الوسائط، فلدينا تخطيط flexbox للأجهزة المحمولة والأجهزة اللوحية وأجهزة سطح المكتب. ستمنحنا قاعدة flex-basis: 33% المدمجة مع display: flex الموروثة تخطيط flexbox مميزًا كما هو موضح في الشكل 2. في الماضي، لتحقيق هذا النوع من تخطيط الأعمدة، كنا نحتاج إلى بذل جهد كبير وكتابة أكواد CSS معقدة.

الشكل 1: مثال على شبكة Flexbox متجاوبة على الأجهزة المحمولة

الشكل 2: مثال على شبكة Flexbox متجاوبة على أجهزة سطح المكتب

يوفر Flexbox طريقة رائعة لتحقيق تخطيطات متغيرة وسلسة. في بعض الحالات، قد لا نتمتع بهذه الحرية في المساحة الرأسية. قد نحتاج إلى احتواء عنصر داخل ارتفاع ثابت. في هذه الحالة، لدينا تقنية أخرى تحت تصرفنا: التمرير الأفقي.

التمرير الأفقي باستخدام overflow-scroll

قد يأتي وقت يكون لديك محتوى يفيض عن منفذ العرض (viewport) دون طريقة أنيقة للتعامل معه. هنا يأتي overflow-scroll للإنقاذ! تشمل الاستخدامات الشائعة لهذه التقنية القوائم والجداول القابلة للتمرير. فيما يلي مثال على قائمة قابلة للتمرير.

 <style>
   menu {
     background: #d9d7d5;
     padding: 0.25rem;
     overflow-x: scroll; /* تم تغييرها من overflow-y: scroll في النص الأصلي لتناسب التمرير الأفقي */
     white-space: nowrap;
   }
   span {
     background: #767775;
     color: #ffffff;
     display: inline-block;
     margin: 0.25rem;
     padding: 0.5rem;
   }
 </style>
 <menu>
   <span>Responsive Web Design</span>
   <span>RWD</span>
   <span>Responsive menu</span>
   <span>Overflow scroll example</span>
   <span>This is a lot of content!</span>
   <span>Yes</span>
   <span>we</span>
   <span>have</span>
   <span>another</span>
   <span>item</span>
 </menu>

كيف فعلت ذلك؟! دعنا نتعمق أكثر.
overflow-x: scroll هو المكون الرئيسي لهذه الوصفة (ملاحظة: النص الأصلي ذكر overflow-y: scroll ولكن المثال والقصد هو التمرير الأفقي، لذا تم تصحيحه إلى overflow-x: scroll). بتحديد هذه الخاصية، ستفيض العناصر الفرعية عن المحور الأفقي مع سلوك التمرير. ليس بهذه السرعة! على الرغم من أنك قد تعتقد أن overflow-x سيكون كافيًا، إلا أنه يجب علينا أيضًا إخبار المتصفح بعدم التفاف العناصر الفرعية باستخدام white-space: nowrap.

الآن بعد أن أصبح لدينا بعض تقنيات تخطيط RWD في جعبتنا، دعنا نلقي نظرة على العناصر التي تشكل تحديات خاصة بطبيعتها المرئية: الصور ومقاطع الفيديو.

الصور المتجاوبة

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

 <style>
   img {
     max-width: 100%;
   }
 </style>
 <picture>
   <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
   <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
   <img alt="صورة توضيحية للموقع" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
 </picture>

هذا الكود يقوم بالكثير من الأشياء. دعنا نفصلها:

• من خلال تعيين max-width: 100%، ستتوسع الصورة أو تتقلص بناءً على عرض حاويتها.
• باستخدام مزيج من علامات picture و source و img، فإننا في الواقع نعرض صورة واحدة فقط ونقوم بتحميل الصورة الأنسب بناءً على جهاز المستخدم.
• WebP هو تنسيق صور حديث يوفر ضغطًا فائقًا للصور على الويب. من خلال استخدام source، يمكننا الإشارة إلى صورة WebP لاستخدامها في المتصفحات التي تدعمها، وعلامة source أخرى للإشارة إلى نسخة PNG من الصور التي لا تدعم WebP.
• يُستخدم srcset لإخبار المتصفح بالصورة التي يجب استخدامها بناءً على دقة الجهاز.
• ننشئ التحميل الكسول (lazy loading) الأصلي باستخدام زوج السمة/القيمة loading="lazy".

الفيديو المتجاوب

الفيديو المتجاوب هو موضوع آخر ألهم عددًا كبيرًا من المقالات والوثائق. إحدى الاستراتيجيات الرئيسية لإنشاء صور ومقاطع فيديو و iframes وعناصر أخرى متجاوبة تتضمن استخدام نسبة العرض إلى الارتفاع (aspect-ratio). صندوق نسبة العرض إلى الارتفاع ليس تقنية جديدة، وهو أداة مفيدة جدًا يجب أن تكون في جعبتك كمطور ويب. دعنا نلقي نظرة على الكود ونفصله.

 <style>
   .videoWrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
   }
   .videoWrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
 </style>
 <div class="videoWrapper">
   <!-- Copy & Pasted from YouTube -->
   <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
 </div>

في هذا المثال، لدينا فيديو YouTube مضمن كـ iframe وحاوية div تحمل الفئة videoWrapper. هذا الكود يقوم بالكثير… دعنا نتعمق.

• position: relative على العنصر الحاوي يسمح للعناصر الفرعية باستخدام التمركز المطلق (absolute positioning) بالنسبة إليه.
• height: 0 جنبًا إلى جنب مع padding-bottom: 56.25% هو المكون الرئيسي هنا الذي ينشئ سلوكًا ديناميكيًا، ويفرض نسبة عرض إلى ارتفاع تبلغ 16:9.
• position: absolute و top: 0 و left: 0 المعينة على iframe تنشئ سلوكًا يتم فيه وضع العنصر بشكل مطلق بالنسبة لعنصره الأب… مما يثبته في الزاوية العلوية اليسرى.
• وأخيرًا، عرض وارتفاع بنسبة 100% يجعل العنصر الفرعي (iframe) يشغل 100% من عنصر الأب.

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

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

أدوات لمحاكاة ومراقبة مواقع الويب المتجاوبة

هناك مجموعة متنوعة من الأدوات المفيدة لمساعدتنا في إنشاء مواقع ويب بتصميم متجاوب. فيما يلي اثنتان أجدهما مفيدتين بشكل خاص:

محاكاة الجوّال في أدوات مطوري Chrome DevTools

توفر أدوات مطوري Chrome DevTools محاكاة للأجهزة المحمولة لمجموعة من الأجهزة اللوحية والهواتف المحمولة. كما توفر خيار “متجاوب” (responsive) الذي يسمح لك بتحديد حجم منفذ عرض مخصص.

الشكل 3: محاكاة الأجهزة المحمولة واللوحية في Chrome DevTools

مراقبة أداء موقع الويب على الجوّال باستخدام Lighthouse

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

الشكل 4: تقرير Lighthouse يوضح أداء الموقع على الجوّال

الخلاصة التقنية

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