التصميم المتجاوب: موقعٌ يليق بكل شاشة

في مقال CSS صمّمت صفحتك، لكنّك صمّمتها لشاشةٍ واحدة: شاشتك أنت. والمستخدمون يأتون من هاتفٍ بحجم ستّ بوصاتٍ ومن شاشةٍ بحجم ستّين بوصة وكل ما بينهما. فكيف يبدو موقعٌ واحدٌ رائعًا على الجميع؟ الجواب هو «التصميم المتجاوب» (Responsive Web Design).

تخيّل الموقع التقليديّ لوحةً زيتيةً جميلةً بأبعادٍ ثابتة: يبدو رائعًا على حائطه الصحيح (شاشة المكتب)، لكنّك إن وضعته في إطارٍ صغير (شاشة هاتف) اضطُررت إلى تصغيره حتى تختفي تفاصيله. أمّا الموقع المتجاوب فأشبه بسائلٍ ينساب ليملأ أيّ وعاءٍ يُسكب فيه. هذا المقال دليلك إلى المكوّنات التقنية التي تصنع هذا «السائل»: من فلسفته وتاريخه، إلى أركانه الثلاثة، إلى السطر الواحد الذي بدونه لا يعمل شيءٌ منها على الهاتف.

ما التصميم المتجاوب؟ فلسفة الويب الواحد

مع انتشار الهواتف الذكية الأولى وقع الويب في أزمة: مواقعُ صُمّمت لشاشات المكتب العريضة تبدو مروّعةً على الهواتف، فيضطرّ المستخدم إلى «القرص والتكبير» باستمرارٍ ليقرأ سطرًا. والحلّ الوحيد المتاح آنذاك كان بناء موقعين منفصلين تمامًا: الرئيسيّ www.example.com للمكتب، ونسخة الموبايل m.example.com، ويعيد الخادمُ زائرَ الهاتف قسرًا إلى نسخة الموبايل.

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

في سنة 2010 صاغ Ethan Marcotte الحلّ في مقالٍ شهيرٍ بمجلّة A List Apart: بدل موقعين «صلبين» بأبعادٍ ثابتة، يُبنى موقعٌ واحدٌ «مرن».^[1] الموقع التقليديّ كمكعّب ثلجٍ له شكلٌ ثابت، والمتجاوب كالماء: المادة نفسها، لكنه ينساب ليأخذ شكل أيّ وعاءٍ (هاتفٍ أو لوحٍ أو شاشة) بمثاليّة. تقنيًّا: تبني موقعًا واحدًا بعنوانٍ واحدٍ ومجموعةٍ واحدةٍ من ملفّات HTML وCSS، وهذا الموقع «يستجيب» لبيئته، إذ يسأل الـCSS المتصفّحَ عن حجم الشاشة ثمّ يطبّق قواعد تصميمٍ بحسب الجواب. هذه الفلسفة حلّت الكوابيس الثلاثة دفعةً واحدة: صيانةٌ موحّدة، وسلطةٌ مركّزةٌ على عنوانٍ واحد، وتجربةٌ واحدةٌ للجميع.

وقد عرّف Marcotte التصميم المتجاوب بثلاثة مكوّناتٍ تعمل معًا، اثنان يمنحانه المرونة وواحدٌ يمنحه الذكاء: الهيكل المرن، والوسائط المرنة، واستعلامات الوسائط. فلنأخذها واحدًا واحدًا.

الركن الأول: الهيكل المرن

في الماضي كانت شاشات المكتب متقاربة الحجم، فبنى المطوّرون مواقعهم «صندوقًا إسمنتيًّا» بعرضٍ ثابت (مثل width: 960px). فلمّا جاءت هواتف بعرض 360 بكسلًا، وقعت الكارثة: إمّا أن يصغّر المتصفّح الصفحة كلّها حتى يصير النصّ مستحيل القراءة، وإمّا أن «تفيض» الصفحة خارج الشاشة فيُجبَر المستخدم على التمرير الأفقيّ، وهو من أسوأ ما يصيب موقعًا.

الحلّ الأوّل كان التوقّف عن البكسل الثابت واستعمال وحداتٍ نسبيةٍ كالنِّسَب المئوية (width: 80% بدل 960px). لكنّ هذا كان مرنًا «غبيًّا»: النسبة دائمًا من العنصر الأب، فبناء تخطيطٍ معقّدٍ كان يتطلّب تداخلًا مرهقًا من وسوم <div>، وكانت مهمّةٌ بسيطةٌ كالمحاذاة العمودية كابوسًا. وهنا يأتي دور أدوات التخطيط الحديثة التي فصّلتها في مقال CSS: Flexbox لترتيب العناصر في اتّجاهٍ واحد (وفيه تحلّ المحاذاة العمودية بـalign-items: center، والالتفاف التلقائيّ بـflex-wrap: wrap)، وGrid لتصميم تخطيط الصفحة كاملةً في صفوفٍ وأعمدة. بهما صار الهيكل المرن ذكيًّا لا مجرّد ممطوطٍ بالنِّسَب.

الركن الثاني: الوسائط المرنة

صار الهيكل مرنًا، فماذا عن محتواه؟ النصّ ينساب كالماء ليملأ حاويته، لكنّ الوسائط (الصور والفيديو وiframe) كتلُ جليدٍ بأبعادٍ ثابتة. صورةٌ بعرض 1000 بكسلٍ في حاويةٍ بعرض 360 بكسلًا «تفيض» خارج الشاشة فتخلق التمرير الأفقيّ المكروه. والحلّ قاعدةٌ بسيطةٌ تطبّقها على كل الوسائط:

img, video, iframe {
  max-width: 100%;
  height: auto;
}

والتمييز هنا حاسم: max-width: 100% ليست width: 100%. الأولى تقول: «أقصى عرضٍ مسموحٍ هو عرض الحاوية، فإن كانت الصورة أصغر فاتركها بحجمها». فلو وضعت أيقونةً بعرض 50 بكسلًا في حاويةٍ واسعة، بقيت 50 بكسلًا ولم تُمَطّ، أمّا الصورة الكبيرة فتتقلّص لتناسب الحاوية. وheight: auto شريكها الضروريّ: تحسب الارتفاع الجديد تلقائيًّا للحفاظ على نسبة العرض إلى الارتفاع، فلا تبدو الصورة مضغوطةً مشوّهة.

ونصيحةٌ احترافية: هذه القاعدة تحلّ الفيضان لكنّها لا تمنع «قفزة التخطيط» التي تحدث حين يحجز المتصفّح مكان الصورة بعد تحميلها لا قبله. ولذا ادمجها دائمًا مع سمتَي width وheight في وسم الصورة نفسه (<img src="..." width="1000" height="600">): فالسمتان تحجزان المساحة مسبقًا فلا تقفز الصفحة، والقاعدة تجعل الصورة مرنةً داخل تلك المساحة. هذا المزيج أفضل ممارسة، وأثره على استقرار الصفحة من الأمور التي تقيسها محرّكات البحث، كما هو مفصّلٌ في سلسلة تحسين الظهور.

وثمّة طبقةٌ أعمق تخصّ الأداء: قاعدة max-width تتقلّص بالصورة بصريًّا، لكنّ المتصفّح ينزّل الملفّ الكبير نفسه (1000 بكسلٍ) حتى على الهاتف، فيهدر بياناتٍ ووقت تحميل. والحلّ أن تخدم كل شاشةٍ بحجم الصورة المناسب لها عبر سمة srcset في وسم الصورة، أو وسم <picture> لحالاتٍ أعقد. تعطي المتصفّحَ عدّة نسخٍ من الصورة بأحجامٍ مختلفة فيختار الأنسب لشاشة المستخدم:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     alt="...">

فيحمّل الهاتف النسخة الصغيرة والحاسوب الكبيرة، فيتجاوب موقعك مع الشاشة في حجم الملفّ لا في عرضه فقط. هذا فرقٌ بين موقعٍ «يبدو» متجاوبًا وموقعٍ متجاوبٍ فعلًا حتى في سرعته، فلا يدفع مستخدم الهاتف ثمن صورةٍ صُمّمت لشاشةٍ لن يراها.

الركن الثالث: استعلامات الوسائط، عقل التصميم

إن كان الركنان السابقان يمنحان المرونة السلبية، فاستعلامات الوسائط (Media Queries) تمنح التصميم ذكاءً وقدرةً على القرار. هي «تعليماتٌ شرطية» داخل CSS: «إن بلغ عرض الشاشة حدًّا معيّنًا، فطبّق هذه القواعد». فكّر فيها منظّم حرارةٍ ذكيّ: أنماطك الأساسية تعمل دائمًا، والاستعلام مستشعرٌ يراقب عرض الشاشة ويبدّل الأنماط عند نقطةٍ تحدّدها. وبنية الاستعلام:

@media (min-width: 768px) {
  /* قواعد تنطبق على الشاشات بعرض 768 بكسل فأكثر */
}

وهنا فلسفتان. min-width تعني «طبّق إذا كان العرض كذا أو أكبر»، وهي طريقة «الجوال أوّلًا» الحديثة: تكتب أنماط الهاتف البسيطة أوّلًا ثمّ تضيف تعقيدًا للشاشات الأكبر. وmax-width عكسها («كذا أو أصغر»)، وهي طريقة «المكتب أوّلًا» القديمة الأصعب. وأنصح بالأولى. ولنرَ مثالًا عمليًّا: حاويةٌ بعمودين. تكتب أوّلًا أنماط الهاتف الافتراضية، فتتكدّس الأعمدة عموديًّا:

/* الجوال أولًا: أعمدة مكدّسة */
.container {
  display: flex;
  flex-direction: column;
}

/* الشاشات الأكبر: صفّ أفقيّ */
@media (min-width: 768px) {
  .container { flex-direction: row; }
  .column { flex: 1; }
}

على الهاتف يظهر العمودان فوق بعضهما (وهو الأنسب لشاشةٍ ضيّقة)، وبمجرّد أن يبلغ العرض 768 بكسلًا «يستيقظ» الاستعلام فيحوّل اتّجاه Flexbox إلى أفقيّ فيصطفّان جنبًا إلى جنبٍ مستغلّين عرض الشاشة الأكبر. ونقطة التحوّل هذه تُسمّى «نقطة توقّف» (breakpoint).^[2] والاستعلامات تستشعر أكثر من العرض:^[4] orientation (أفقيٌّ أم رأسيّ)، وprefers-color-scheme: dark (هل يفضّل المستخدم الوضع الليليّ في نظامه، فتمنحه وضعًا ليليًّا تلقائيًّا)، وhover (أيستعمل فأرةً أم لمسًا).

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

وقد تصادف مصطلحًا قريبًا يلتبس على المبتدئ: «التصميم المتكيّف» (Adaptive Design). الفرق جوهريّ: المتجاوب تخطيطٌ واحدٌ سائلٌ ينساب بين كل الأحجام بلا انقطاع، أمّا المتكيّف فمجموعة تخطيطاتٍ ثابتةٍ منفصلة، يقفز الأنسب منها عند كل نقطة توقّف قفزًا لا انسيابًا، وكثيرًا ما يُقرن بكشفٍ عن الجهاز في الخادم يرسل شيفرةً مختلفةً لكل فئة. وتُقرّ جوجل بثلاث طرقٍ لتهيئة موقعٍ للجوال: التصميم المتجاوب، والخدمة الديناميكية (dynamic serving)، والعناوين المنفصلة، وتوصي صراحةً بالأولى لأنها الأسهل صيانةً والأمتن في البحث.^[5] فالمتكيّف قد يمنحك تحكّمًا أدقّ في كل مقاس، لكنك تدفع ثمنه صيانةَ عدّة نسخ، وهو عين الثمن الذي وُجد المتجاوب ليُلغيه.

وثمّة تطوّرٌ حديثٌ يستحقّ أن تعرفه: «استعلامات الحاوية» (Container Queries). استعلامات الوسائط تسأل عن حجم الشاشة كلّها، لكن ماذا لو أردت أن يتكيّف مكوّنٌ (كبطاقة منتج) مع حجم حاويته هو لا الشاشة، فيبدو عريضًا في المحتوى الرئيسيّ وضيّقًا في الشريط الجانبيّ؟ هذا ما تتيحه استعلامات الحاوية، وهي قفزةٌ نحو مكوّناتٍ متجاوبةٍ حقًّا تُعاد في أيّ موضع. لا تحتجها في بدايتك، لكن اعرف أنها مستقبل التخطيط المتجاوب.

وكيف تختبر هذا كلّه دون عشرات الأجهزة؟ بأدوات المطوّر في متصفّحك: فيها «وضع الجهاز» الذي يحاكي شاشات الهواتف واللوحات بأحجامٍ مختلفةٍ بنقرة، فترى تصميمك على كلٍّ منها وتجرّب نقاط التوقّف وأنت على حاسوبك. وتبقى التجربة على هاتفٍ حقيقيٍّ مرّةً قبل النشر مفيدةً للمسة الأخيرة، خاصّةً للّمس والأداء.

السطر الحاسم: وسم Viewport

تبني هيكلًا مرنًا وصورًا مرنةً واستعلاماتٍ ذكية، وتجرّب على حاسوبك بتصغير النافذة فيستجيب التصميم كالسحر. ثمّ تفتح الموقع على هاتفك الحقيقيّ فتجده نسخةً مصغّرةً باهتةً من موقع المكتب، واستعلاماتك لم تعمل. السبب ليس في شيفرتك، بل في سلوكٍ افتراضيٍّ قديمٍ في آليّة عمل المتصفّحات.

حين ظهر أوّل آيفون سنة 2007 كان معظم المواقع مصمّمًا للمكتب بعرضٍ ثابت، فحلّت أبل المشكلة مؤقتًا بأن جعلت المتصفّح «يكذب» على عرضه: يتظاهر بأن عرضه 980 بكسلًا (عرض مكتبٍ افتراضيّ)، فيرسم الموقع بذلك العرض ثمّ يصغّره ليملأ الشاشة. كان هذا مفيدًا للمواقع القديمة، لكنه يكسر المتجاوبة: إذ يخبر المتصفّحُ شيفرتَك أن العرض 980 بكسلًا، فلا تتفعّل استعلاماتك المكتوبة للشاشات الصغيرة أبدًا. الحلّ سطرٌ واحدٌ تضعه في <head>، وهو أهمّ وسم بياناتٍ في الويب الحديث:^[3]

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

الأمر الحاسم فيه width=device-width: «توقّف عن التظاهر بأنك شاشة مكتب، واجعل عرضك مساويًا لعرض الجهاز الفعليّ» (360 بكسلًا مثلًا). وinitial-scale=1.0 يبدأ بتكبيرٍ 100% دون تصغير. بمجرّد أن يقرأه المتصفّح «يستيقظ»، ويرى العرض الحقيقيّ، فتبدأ كل استعلاماتك في العمل ويظهر موقعك المتجاوب كما صمّمته. لا تنسَ هذا السطر أبدًا.

الخطوط المتجاوبة

صار الهيكل والصور مرنين، فماذا عن أهمّ عنصرٍ: النصّ؟ تحديد حجم الخطّ ببكسلٍ ثابت (font-size: 16px) كطباعته على لوحٍ صلب: مناسبٌ على الهاتف، صغيرٌ جدًّا على شاشةٍ كبيرة. الحلّ وحداتٌ نسبية. الوحدة em ترتبط بحجم خطّ العنصر الأب، لكنها قد تسبّب تأثيرًا متتاليًا مربكًا حين تتداخل. والمعيار الذهبيّ اليوم rem: يرتبط دائمًا بحجم خطّ جذر الصفحة (وسم <html>)، كأنه مسطرةٌ مركزيةٌ واحدةٌ للموقع كلّه.

والسحر أنك تدمج rem مع استعلامات الوسائط، فتكبّر نصوص الموقع كلّها بتغيير حجم الخطّ الأساسيّ مرّةً واحدة:

html { font-size: 16px; }
h1 { font-size: 3rem; }   /* 48px */

@media (min-width: 1200px) {
  html { font-size: 18px; }  /* الآن h1 = 54px تلقائيًّا */
}

وهناك وحدةٌ سائلةٌ تمامًا هي vw (واحدٌ منها يساوي واحدًا في المئة من عرض الشاشة)، ينمو الخطّ بها ويتقلّص بسلاسةٍ مع النافذة، لكنه قد يصير صغيرًا جدًّا أو ضخمًا، فيُستعمل غالبًا مع دالّة clamp() التي تحدّ من أدنى الحجم وأقصاه. بهذا يكتمل «ثلاثيّ المرونة»: هيكلٌ مرن، ووسائط مرنة، ونصوصٌ مرنة، فلا يتكيّف موقعك شكلًا فحسب، بل يبقى مقروءًا مريحًا على كل جهاز.

التنقّل المتجاوب: قائمة الهامبرغر

أوّل ما «ينكسر» في التصميم المتجاوب قائمة تنقّلٍ أفقيةٌ فيها عشرة روابط: كيف تتّسع في هاتفٍ بعرض 360 بكسلًا؟ الجواب: لا تتّسع. والحلّ الأشيع نمط «قائمة الهامبرغر»: تخفي القائمة على الشاشات الصغيرة وتستبدلها بزرٍّ واحدٍ (الأيقونة ☰)، فإذا نقره المستخدم ظهرت القائمة. وهذا النمط مثالٌ بديعٌ على تعاون اللغات الثلاث التي تعلّمتها. أوّلًا الهيكل في HTML: زرٌّ وقائمة.

<nav>
  <button id="menu-toggle">☰</button>
  <ul id="main-menu">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">خدماتنا</a></li>
  </ul>
</nav>

ثمّ CSS بفلسفة الجوال أوّلًا: يخفي القائمة ويُظهر الزرّ على الهاتف، وعند الشاشات الأكبر يخفي الزرّ ويُظهر القائمة أفقيةً:

#main-menu { display: none; flex-direction: column; }
#menu-toggle { display: block; }

@media (min-width: 768px) {
  #menu-toggle { display: none; }
  #main-menu { display: flex; flex-direction: row; }
}

لكنّ الزرّ لا يفعل شيئًا بعد على الهاتف. هنا يأتي دور جافاسكربت (التي تتعلّمها في المقال التالي) ليستمع للنقرة ويبدّل صنفًا على القائمة:

const menuToggle = document.querySelector('#menu-toggle');
const mainMenu = document.querySelector('#main-menu');
menuToggle.addEventListener('click', function() {
  mainMenu.classList.toggle('is-visible');
});

ويبقى أن تُخبر CSS ماذا يفعل حين يضيف جافاسكربت ذلك الصنف، بقاعدةٍ أخيرة: #main-menu.is-visible { display: flex; }. فيتولّى CSS الإخفاء والإظهار بحسب الشاشة، وجافاسكربت الاستماع للنقرة، وCSS الإظهار عند إضافة الصنف. هذا مثالٌ مكتملٌ على تناغم اللغات الثلاث لحلّ مشكلةٍ واحدة.

أكثر من تصغير: اللمس والأولوية

خطأٌ شائعٌ أن تظنّ التجاوب مجرّد «تصغير» تصميم المكتب. التجاوب الحقيقيّ يراعي أن جهاز الهاتف يُستعمل باللمس لا بالفأرة. وهذا يفرض أمرين. الأوّل حجم أهدافٍ كافٍ: الزرّ الذي ينقره مؤشّر الفأرة بدقّةٍ يحتاج إصبعًا أعرض، فاجعل أزرارك وروابطك على الهاتف كبيرةً متباعدةً بما يكفي للنقر المريح دون خطأ. والثاني أن حالة :hover لا وجود لها على شاشة اللمس، فلا تُخفِ معلومةً مهمّةً خلف تمرير الفأرة، لأن مستخدم الهاتف لن يصل إليها أبدًا.

وفلسفة «الجوال أوّلًا» أعمق من ترتيب الشيفرة: هي أن تقرّر ما الأهمّ. حين تبدأ بالشاشة الصغيرة تُجبَر على ترتيب أولوياتك، فتضع المحتوى الجوهريّ أوّلًا وتؤجّل الثانويّ. ثمّ على الشاشات الأكبر تضيف لا أن تحشر. فالتجاوب في جوهره انضباطٌ في الأولويات قبل أن يكون حِيَل CSS: موقعٌ يخدم المستخدم على أصغر شاشةٍ سيخدمه على الأكبر من باب أولى.

ويبقى محتوًى عنيدٌ يأبى التقلّص مهما فعلت: جدولٌ عريضٌ بأعمدةٍ كثيرة، أو كتلة شيفرةٍ بأسطرٍ طويلة. لا تشوّهه ولا تجبر الصفحة على التمرير الأفقيّ، بل لُفّه في حاويةٍ تمرّر هي وحدها أفقيًّا بـoverflow-x: auto، فيبقى جسم الصفحة ثابتًا ويتمرّر الجدول داخل إطاره. هذه حيلةٌ صغيرةٌ تنقذك من أكثر ما يكسر التصميم على الهاتف.

وأمرٌ أخيرٌ يخصّ من يضيفون حركات: بعض المستخدمين يصابون بالدوار من الحركة الكثيرة، وأنظمتهم تعلن ذلك. تحترم رغبتهم باستعلامٍ خاصّ، @media (prefers-reduced-motion: reduce)، تخفّف فيه حركاتك أو توقفها. التصميم المتجاوب الحقّ لا يتكيّف مع حجم الشاشة فحسب، بل مع حاجة الإنسان الذي يستعملها.

لم يعد خيارًا، بل هو المعيار

رأيتَ التصميم المتجاوب من كل زاوية: عرفتَ لماذا ظهر حلًّا لكابوس «الموقعين»، وكيف يعمل عبر أركانه الثلاثة (الهيكل المرن، والوسائط المرنة، واستعلامات الوسائط الذكية)، وكيف يوقظه وسم viewport، وكيف تتجاوب خطوطه وتنقّله. ورأيت كيف تجتمع هنا كل مهاراتك: HTML يوفّر المفتاح والأساس، وCSS يوفّر الأدوات، وجافاسكربت تضيف التفاعل.

لم يَعُد التصميم المتجاوب ميزةً إضافية، بل صار المعيار الافتراضيّ لبناء الويب: تطويرٌ نظيف، وتجربةٌ تخدم المستخدم أينما كان، وموقعٌ يلبّي ما تتطلّبه محرّكات البحث من أولويةٍ للجوال. وميزته الأبقى أنه يحصّن موقعك للمستقبل: حين يظهر جهازٌ بمقاسٍ لم يكن في الحسبان، لا تعيد بناء شيء، بل ينساب تصميمك إليه كما ينساب الماء إلى وعاءٍ جديد. فأنت لا تصمّم لشاشةٍ، بل تصمّم للمرونة نفسها. وقد لاحظت في «قائمة الهامبرغر» أن العقدة الأخيرة كانت جافاسكربت: اللغة التي تمنح الصفحة حياةً وتفاعلًا. وهي الركن الثالث والأخير في الواجهة الأمامية، وموضوع المقال التالي: «لغة JavaScript: إضافة الحركة والتفاعل».

المصادر

1. Ethan Marcotte: Responsive Web Design (A List Apart، 2010). المقال الذي صاغ المصطلح وحدّد مكوّناته الثلاثة.
2. MDN: التصميم المتجاوب. الهياكل المرنة واستعلامات الوسائط ونقاط التوقّف.
3. MDN: وسم viewport. ضبط منطقة العرض على عرض الجهاز الفعليّ.
4. MDN: استعلامات الوسائط. كتابة القواعد الشرطية بحسب خصائص الشاشة.
5. Google Search Central: أفضل ممارسات الفهرسة المتوافقة مع الجوال. الطرق الثلاث لتهيئة الموقع للجوال وتوصية جوجل بالتصميم المتجاوب.