آموزش وردپرس اهمیت طراحی صفحات واکنش گرا یا ریسپانسیو

اهمیت طراحی صفحات واکنش گرا یا ریسپانسیو را با یک مثال در مبنای وردپرس بیان میکنیم با ما همراه باشید.

شاید این موضوع برای شما پیش آمده باشد که با سیستم کامپیوتر خود وارد یک سایت شده باشید و دفعه ی بعدی با گوشی خود وارد همان سایت شدید اما متوجه تغییراتی درون سایت شدید مثلا منوی سایت عوض شده یا باکس ها در آن کوچکتر میشوند یا کنار هم چیده شده اند یا …

برای این که بهتر متوجه منظور من بشید کافیه با سیستم کامپیوتر خودتون سایت مبنای وردپرس رو باز کنید و دکمه ( ctrl + shift +m ) را همزمان بزنید در ابتدا اگر اولین بار باشد که این کار را انجام میدهید برای شما سایز گوشی را نمایش میدهد ، و شما متوجه این موضوع خواهید شد که منوهای سایت (ساخت منوی ریسپانسیو) به شکل دیگری درامده است. از طریق نوار کناری میتونید صفحه را کوچک و بزرگ کنید و بهتر متوجه تغییرات بشید.

اگر با فشار دادن این دکمه ها اتفاقی نیفتاد زیاد خودتون رو نگران نکنید کافیه پنجره ی مرورگرتون رو کوچک و بزرگ کنید.

اگر شما یک برنامه نویس وب باشید یا اطلاعاتی در مورد سایز بندی تصاویر ، لایه ها یا … داشته باشید این موضوع را درک خواهید کرد زمانی که از پیکسل (px) برای خاصیت سایز استفاده میکنید دارید یک سایز ثابت برای اون لایه یا هر چیز دیگه ای استفاده میکنید ، اما زمانی که از درصد (%) برای سایز استفاده میکنید با توجه به موقعیتی که داره سایز بندی میشه و تغییر پیدا میکنه. در ریسپانس (respons) از درصد برای سایز دادن به لایه ها در سایت استفاده میشود. البته این مثال بسیار ساده ای که متوجه بشین کار ریسپانس یه چه صورت است.

برای ریسپانس کردن سایت کد های بسیاری نوشته میشود مانند دستورات شرطی جاوااسکریپت ، یا css هایی که برای سایت نوشته میشوند مانند (@media) .

اهمیت طراحی ریسپانسیو و واکنش گرا

شاید الان متوجه این موضوع شده باشید که کار ریسپانسیو چیه یا ریسپانسیو چیست!

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

قبل از این که طراحی های واکنش گرا ابداع بشه مدیر وب سایت مجبور بود یک سایت دیگر برای گوشی یا تبلت یا …. بنویسد و کاربر مجبور بود برای استفاده از نسخه گوشی سایت به یک ادرس دیگر مراجعه کند به عنوان مثال اگر آدرس سایت http://mabnawp.ir بود شما برای استفاده از نسخه گوشی سایت باید به آدرس http://mobile.mabnawp.ir مراجعه میکردین و این کار برای ادمین سایت خیلی زمان بر بود و هزینه ی بسیار زیادی هم داشت علاوه بر این برای کاربر خیلی مشکل بود که به آدرس دیگه ای ممراجعه کنند و کاربران ریزش میکردند.

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

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

اما اگر بخواهیم این مسائل را کنار بگذاریم با گذشت زمان موتور های جستجو به سایت های واکنش گرا نمره های بهتری دادند و ادمین های سایت ها مجبور شدند کم کم سایت های خودشون رو از حالت خشک در بیارند و این روند پیشرفت بسیار زیادی داشت و روز به روز گسترده تر شد و امروزه کمتر سایت هایی رو میبینم که واکنشگرا نباشه.

چند نمونه از طراحی های ریسپانسیو: