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

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

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

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

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