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

بازدید : 68
نویسنده : خانم نوروزی
زمان مطالعه : 4 دقیقه
انتشار : ۱۵ مرداد , ۱۳۹۶
بروزرسانی : ۷ شهریور , ۱۳۹۶
آموزش وردپرس اهمیت طراحی صفحات واکنش گرا یا ریسپانسیو

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

 

 

 

باتشکر از همراهی شما-شادباشید


دیدگاه بگذارید

avatar
  اشتراک در  
اطلاع از
قالب فروشگاهی دیجی کالا قالب آموزشی هنرستان برای وردپرسقالب فروشگاهی دیجی کالا

مطالب مرتبط

اتصال رسانه وردپرس به DropBox با افزونه BOXIT

اتصال رسانه وردپرس به DropBox با افزونه BOXIT

با کمک افزونه BOXIT  می توانید فایل های آپلودی خود را به صورت مستقیم در

مطالعه بیشتر
دانلود قالب وردپرس جریده Jarida فارسی

دانلود قالب وردپرس جریده Jarida فارسی

در میان تمام قالب های وردپرس قالب جریده که یک قالب چند منظوره مناسب برای

مطالعه بیشتر

پر بازدید ترین مطالب وردپرس

ویرایش پیشخوان وردپرس با ساخت افزونه سفارشی داشبورد من

ویرایش پیشخوان وردپرس با ساخت افزونه سفارشی داشبورد من

شاید شما هم از دسته افرادی هستید که پروزه های سفارشی با وردپرس { وردپرس

مطالعه بیشتر
پیدا کردن کد های مخرب وردپرس و آموزش رفع آن

پیدا کردن کد های مخرب وردپرس و آموزش رفع آن

پیدا کردن کد های مخرب وردپرس و آموزش رفع آن | شناسایی و یافتن کدهای

مطالعه بیشتر
معرفی قالب های برتر سال ۲۰۱۸

معرفی قالب های برتر سال ۲۰۱۸

معرفی قالب های برتر سال ۲۰۱۸ ، پوسته های وردپرسی ، بهترین قالب های رایگان

مطالعه بیشتر
آموزش راه اندازی فروشگاه اینترنتی محصولات دانلودی با EDD در وردپرس

آموزش راه اندازی فروشگاه اینترنتی محصولات دانلودی با EDD در وردپرس

آموزش راه اندازی فروشگاه اینترنتی با edd در وردپرس ، ایزی دیجیتال دانلود ، فزونه

مطالعه بیشتر
آموزش سرچ کنسول | بخش دوم | Search Console

آموزش سرچ کنسول | بخش دوم | Search Console

آموزش سرچ کنسول ، تنظیمات و نکات پیشرفته و حرفه ای در گوگل وبمستر ،

مطالعه بیشتر
قالب وردپرس چند منظوره رایگان و فارسی Hostel با فونت زیبا

قالب وردپرس چند منظوره رایگان و فارسی Hostel با فونت زیبا

امروز قالب وردپرس فارسی و رایگان hostel در اختیار شما کاربران عزیز قرار داده ایم

مطالعه بیشتر
تابع the_title() عنوان پست در حال نمایش در وردپرس | the_title() | Function

تابع the_title() عنوان پست در حال نمایش در وردپرس | the_title() | Function

برای نمایش عنوان پست در حال نمایش می بایست از تابع the_title() استفاده کرد ،

مطالعه بیشتر
صفحه فرود یا Landing Page چیست؟

صفحه فرود یا Landing Page چیست؟

صفحه فرود یا Landing Page چیست؟ ، اهداف لندینگ پیج ، نکات مهم در بهینه

مطالعه بیشتر

ایمیلت رو وارد کن ، قالب و افزونه جایزه بگیر

Scroll Up
کانال آپارات ما اینستاگرام مبنای وردپرس