طراحی ریسپانسیو (Responsive Design) یا واکنشگرا ، روشی برای طراحی وب است که باعث میشود صفحات وب در انواع دستگاهها و اندازههای صفحه نمایش به خوبی ارائه شوند.
به این معنی که ظاهر وبسایت در تمام دستگاههایی که کاربر با آن از سایت دیدن میکند (مثل موبایل، تبلت، لپتاپ و..)، مناسب و بهینه باشد. امروزه کاربران با موبایل، تبلت، لپتاپ و.. از اینترنت استفاده میکنند. صفحات وب باید به گونهای باشند که کاربر موقع استفاده از آن نیاز به زوم کردن، اسکرول کردن افقی و… را نداشته باشد، متنها خوانا و دکمهها قابل کلیک باشند.
به تصویر زیر نگاه کنید. این یک نمونه از طراحی رسپانسیو است. در نمایشگر موبایل و تبلت چینش عناصری که در نمایشگر کامپیوتر بوده تغییر کرده است تا برای بیننده رابط کاربری مناسبتری را ایجاد کند. در واقع واکنشگرایی، یک تکنولوژی است که طراحی صفحه با توجه به سایز مرورگر به صورت اتوماتیک تغییر میکند. در طراحی ریسپانسیو طراح سایت باید بر حسب تجربه و خلاقیت خود برای هر سایز از صفحه یک طرح مناسب در نظر بگیرد.
چرا واکنشگرا بودن سایت مهم است؟
ریسپانسیو بودن صفحات باعث میشود کاربر حین مراجعه به سایت، تجربهی بهتری داشته باشد. بدون نیاز به زوم کردن در صفحه تمام مطالب را بخواند، تصاویر را ببیند به گونهای که استفاده از وبسایت برای او آزاردهنده نباشد.
همچنین واکنشگرایی صفحات اثر بسیار خوبی در سئو خواهد داشت.یعنی احتمال اینکه سایت شما در سطرهای اول از نتایج جستجو قرار گیرد ، بیشتر میشود.
روشهای رسپانسیو کردن صفحات وب
1- به کمک media@ در CSS :
با کمک media@ میتوان به عناصر html، در هر سایز از صفحه مرورگر، استایلهای مختلفی را اعمال کرد
2- استفاده از Bootstrap :
بوت استرپ یک فریمورک معروف است که از HTML ,CSS ,JQuery استفاده میکند تا صفحات وب را رسپانسیو کند. Bootstrap کاملاً رایگان است. با اضافه کردن فایلهای آن به پروژهی خود میتوانید حین نوشتن کدهای html از آنها استفاده کنید.
3- استفاده از W3.CSS :
یک فریم ورک از CSS است که به طراحی صفحات رسپانسیو کمک میکند. اساس کار این فریمورک به صورت پیشفرض (mobile-firs)طراحی بر اساس صفحهی موبایل است.
موضوعات كلي سايت