آموزش طراحی ریسپانسیو با المنتور

تو این مقاله قصد داریم اصول و نکات طراحی ریسپانسیو با المنتور رو قدم به قدم آموزش بدیم. قبل از هرچیزی باید بدونید طراحی ریسپانسیو چی هست و برای چی اهمیت داره؟

طراحی ریسپانسیو چیست؟

ریسپانسیو در لغت به معنای واکنشگرا هست؛ منظور از طراحی ریسپانسیو در سایت این هست که سایت شما در دستگاه های مختلف مثل موبایل، تبلت، لپ تاب و مانیتورهای عریض ظاهر مناسبی داشته باشه.

به دلیل تفاوت در ابعاد یا رزولوشن دستگاه های مختلف نحوه طراحی برای هر دستگاه هم متفاوت هست. این یعنی طراحی ای که برای لپ تاپ انجام می‌دید با طراحی ای که برای موبایل انجام می‌دید متفاوت هست!

موبایل تو دست شما عرض کمتری داره و در عوض ارتفاعش بیشتره ولی مانیتور یا لپ تاب شما دقیقا برعکس هست و عرض بیشتری نسبت به ارتفاعش داره.

فضایی که برای طراحی رو هرکدوم از این دستگاه ها دارین متفاوته پس در نتیجه چیدمان المان ها هم متفاوت خواهد بود.

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

هرچیزی که لازمه بدونید تا بتونید با المنتور ریسپانسیو طراحی کنید در ادامه اشاره خواهیم کرد.

چرا طراحی ریسپانسیو اهمیت داره؟

تا اینجا جواب این سوال و دادیم که ریسپانسیو چی هست و متوجه شدین که چرا باید ریسپانسیو طراحی کنیم. اما چرا ریسپانسیو کردن انقد اهمیت داره.

معمولا ما طراحای سایت چون با سیستم سایت هامون رو طراحی می‌کنیم و اولین ویویی که میبینیم و بهش توجه می‌کنیم ظاهر صفحات روی دسکتاپ هست؛ ممکنه توجه کمتری به ظاهر طراحی روی موبایل کنیم. که این فوق العاده اشتباهه!

با توجه به آمارهای گوگل باید بدونید که حدود 70 درصد ورودی های سایت شما از طریق دستگاه های موبایل هست. این یعنی باید توجه ویژه ای به ظاهر و رعایت اصول ui/ux در موبایل داشته باشید.

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

اهمیت ریسپانسیو سازی از 2 جنبه مشخص میشه:

جنبه اول: کاربران موبایل تو سایت شما زمان بیشتری می‌گذرونن و بانس ریت سایت پایین میاد.

جنبه دوم: گوگل از سایت هایی که برای موبایل بهینه طراحی شدن و اصطلاحاً طراحی ریسپانسیو دارن امتیاز مثبت در نظر می‌گیره و مسیر کسب رتبه و جذب ترافیک اورگانیک راحت تر می‌شه.

آموزش گام به گام طراحی ریسپانسیو با المنتور

برای ریسپانسیو کردن طراحی یک صفحه در المنتور کافیه 3 تا نکته مهم رو بدونید و بعد با ذهن خلاق خودتون چیدمان سایت رو برای موبایل یا تبلت اصلاح کنید.

قبل از گفتن این 3 نکته لازمه اولین قدم برای ریسپانسیو سازی رو بدونید.

قدم اول: انتخاب دستگاه برای ریسپانسیو سازی

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

به علاوه وقتی دستگاه رو انتخاب می‌کنید حالا اگر تغییری تو المان های مختلف ایجاد کنید فقط برای اون دستگاه اعمال می‌شه و عملا تغییراتی که انجام میدین برای دسکتاپ اعمال نمیشه. این کمک می‌کنه ظاهر طراحی شما همزمان برای هردو دستگاه مناسب باشه و مواردی مثل سایز فونت رو می‌تونید متناسب اون دستگاه متفاوت انتخاب کنید.

البته هر تغییری مستقل نیست یعنی بعضی از مواردی که برای ویجت موردنظرتون اعمال می‌کنید ممکنه برای هر دو دستگاه مشترک باشه و نتونید مقدار متفاوتی برای هر دستگاه تنظیم کنید.

اما اینکه چطور تشخیص بدید کدوم موارد رو می‌تونید برای دستگاه های مختلف متفاوت یا مستقل تعیین کنید نکته مهم اولی هست که اینجا بهش اشاره می‌کنیم.

قدم دوم: تشخیص تنظیمات ریسپانسیو المنتور

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

برای مثال تو این تصویر روبروی سایز فونت یک آیکن موبایل می‌بینید و این نشون می‌ده که می‌تونید عدد منحصر به فردی برای دستگاه موبایل تنظیم کنید بدون اینکه این عدد برای دستگاه های دیگه اعمل بشه.

از طرف دیگه تو همین تصویر  تغییر وزن فونت، تغییر شکل، استایل و دکوراسیون برای تمام دستگاه ها مشترک انتخاب می‌شه پس نمی‌تونید این استایل هارو برای دستگاه های مختلف متفاوت انتخاب کنید.

حالا اگه برای المان یا ویجتی میخواین تنظیماتی رو ریسپانسیو کنید ولی این امکان وجود نداره دو راه دارید راه اول استفاده از کدهای css هست که باید دانش کافی رو داشته باشین و کدهایی شبیه این بنویسید:

@media (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}

راه دوم اینه که کانتینر یا ویجت موردنظرتون رو داپلیکیت کنید و هرکدوم رو برای یک دستگاه درنظر بگیرید و تنظیماتش رو هرطور که می‌خواین انجام بدین.

نکته مهم اینجاست که باید ویجت تکراری رو تو دستگاه های دیگه مخفی بکنید.

برای مثال ویجت سربرگ رو در موبایل مخفی می‌کنید و تنظیمات مربوط به دسکتاپ رو براش انجام بدین و سربرگ تکراری بعدی رو برای موبایل تنظیم می‌کنید و نمایشش رو تو دسکتاپ مخفی می‌کنید.

حالا چطوری؟ میرسیم به نکته دوم ⚡

قدم سوم: مخفی سازی المان برای هر دستگاه

بعضی وقتا لازمه یک بخش از سایت رو برای هر دستگاهی جداگانه طراحی کنید مثلا بخش هیرو سایت رو می‌خواین برای موبایل جدا طراحی کنید چون تنظیمات ریسپانسیو ویجت ها کار شما رو راه نمیندازه.

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

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

😃🖐 این بین لازمه اشاره کنم که اگه می‌خواین شرط گذاری در المنتور رو یاد بگیرین این مقاله رو از دست ندین کافیه روی لینک قرمز بزنید.

نکته مهم: اضافه کردن دستگاه های جدید برای ریسپانسیو

نکته مهم اخر این هست که چطور می‌تونید دستگاه هایی به جز دستگاه های پیش فرض المنتور یعنی موبایل، تبلت و دسکتاپ اضافه کنید و تنظیمات ریسپانسیو رو برای اون دستگاه انجام بدین.

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

بعد اسکرول کنید و  قسمت نقطه شکست رو انتخاب کنید، اینجا با زدن روی گزینه + می‌تونید رزولوشن های استاندارد دیگه رو اضافه کنید یا اگه قصد دارین دستگاه هایی با رزولوشن نامتعارف اضافه کنید صفحه عریض رو انتخاب و بعد عرض موردنظرتون رو وارد کنید تا این دستگاه تو نوار بالای مشکی ویرایشگرتون در کنار باقی دستگاه ها اضافه بشه.

هر دستگاهی که اضافه می‌کنید می‌تونید عرضش رو خودتون تعیین کنید. (روبروی نقطه توقف)

نکات مهمی که باید بدونید تا از پس طراحی ریسپانسیو با المنتور بربیاید توی این مقاله اشاره شد برای رسیدن به مهارت کامل به تمرین و تکرار نیاز دارید.

❓ سوالات پرتکرار طراحی ریسپانسیو با المنتور