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