تصميم موقع متجاوب: المحتوى والتكبير والمساحة المتاحة

ما الذي يجعل الموقع متجاوبًا؟

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

أساس مرن

ضع وسم viewport في HTML، واستخدم حاوية تضيق مع الشاشة. امنع الصور من دفع الصفحة خارج عرضها باستخدام حد أقصى مناسب.

.container {
  width: min(100% - 2rem, 66rem);
  margin-inline: auto;
}

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

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 45rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

يبدأ المثال بعمود واحد، ثم يصبح عمودين عند نقطة تغيير محددة. قيمة 45rem توضيحية؛ اختر النقطة بعد تجربة محتواك الحقيقي.

اجعل النص يحدد احتياجاته

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

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

جدول فحص صغير

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

لا تغير المعنى بالتخطيط

لو ترتيب المستند مقدمة ثم مثال ثم نتيجة، فلا تعرض النتيجة بصريًا كأنها البداية. قد تظل لوحة المفاتيح وتقنيات المساعدة تتبع ترتيب HTML.

اجعل البنية مترابطة، واستخدم التخطيط لخدمتها. الجمال وحده لا يصلح تسلسلًا مربكًا.

اختبار إنهاء

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

أصلح سبب المشكلة قبل إضافة نقاط تغيير كثيرة. HTML وCSS في جمال تك موضوعان مرتبطان بهذا التدريب، ويمكن تطبيق الفحص على صفحات المشروعات التي تبنيها بنفسك.