انجمن کدستانMoisrex

شاید شما هم در جاهای مختلفی دیده باشید که کلمه واکنشرا گرا یا ریسپانسیو را در کنار واژه هایی چون طراحی سایت یا قالب و یا برنامه نویسی و یا هر چیزی که به این عبارات مربوط میشود،به کار رفته باشد.معنا و کاربرد عبارت واکنش گرا یا همان ریسپانسیو را ادامه این مطلب میخوانیم تا معنی واکنش گرا کردن سایت را به خوبی درک کنید.با ما همراه باشید تا در ادامه با عبارات وانکش گرا یا ریسپانسیو کردن،کاربرد آن و چگونگی انجام این کار آشنا شوید.

واکنش گرا یا ریسپانسیو کردن به چه معناست؟

اگر دقت کرده باشید در سایت های مختلفی دیده اید که یک سایت در کامپیوتر و صفحه مانیتور یک نوع ظاهر دارد و در موبایل یک ظاهر دیگر.!مثلا در دسکتاپ ما همین سایت را با دو ستون که در ستون سمت چپ و همچنین بالای مطالب اصلی، باکس هایی به نام آخرین مطالب، دسته بندی مطالب و تبلیغ میبینیم.ولی در موبایل دیدن این باکس های اضافی بسیار آزار دهنده است.پس باید با دستورات و کدهایی،شخص برنامه نویس برای قالب سایت تعریف کند که چنانچه کاربر با موبایل یا تبلت سایت را دید باکس های اضافی و کم ارزش حذف شوند و چنانچه کاربر با کامپیوتر در حال بازدید از سایت بود،این باکس ها میتوانند نمایش داده شوند.به سایتی که این ویژگی را داشته باشد،اصولا میگویند که آن سایتریسپانسیو یا همان واکنش گرا میباشد.

واکنش گرا یا همان ریسپانسیو کردن چه کاربردی دارد؟

انجام این امر باعث میشود تا کاربر در سایت راحت باشد و اذیت نشود.مثلا در سایت هایی که دارای تعداد زیادی تبلیغ هستند، میدانند که نشان دادن این تبلیغ ها به کاربر ایرادی ندارد و کاربر اذیت نمیشود به شرط اینکه کاربر با کامپیوتر در حال بازدید از سایت باشد.ولی حال فرض کنید که همان سایت که مثلا ده تا تبلیغ در قالبش دارد و کاربر با موبایل در حال بازدید از سایت است،چقدر برای بازدید کننده اذیت کننده و زجرآور است و این کاربر تا چه حد از این سایت بیزار خواهد شد و در آینده اگر در گوگل چیزی سرچ کرد و این سایت و سایت دیگری بالا آمد،بی شک کاربر سایت دوم را انتخاب خواهد کرد.

چگونه سایتمان را ریسپانسیو یا همان واکنش گرا کنیم؟

در زبان CSS ما دستوری به نام ات ساین مدیا داریم که یک نمونه اش به صورت زیر است:

@media screen and (max-width: 450px) {footer,.nav-menu {display:none;}}

این خط کد،یک خط کد از قالب سایت ما میباشد که در آن میگوییم اگر سایز صفحه نمایش دستگاهی که سایت در آن نمایش داده میشود کمتر از 450 پیکسل بود،قسمت فوتر و همچنین المنتی که دارای کلاسnav-menu است را شامل تغییراتی کن و آن تغییر این است که اتربیوت display آن را برابر با none قرار بده که این اتربیوت اگر مقدارش none باشد،به کاربر نمایش داده نمیشود.البته به شرطی که صفحه نمایش کاربرمان از 450 px کمتر باشد.

آیا ریسپانسیو کردن در سئو نیز تاثیر دارد؟

باید بگوییم چند سالی هست که این امر یکی از مهمترین اصل های سئو شده است و سایتی که واکنشگرا نباشد،از این نظر سعو آن افت خواهد کرد.

انتها/

ریسپانسیو یا واکنش گرا کردن سایت چیست و به چه معناست.

این مطلب در سایتاپ تهیه و تنظیم شده است.امیدواریم از آن لذت کافی را برده باشید.