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

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

طراحی ریسپانسیو (Responsive Web Design) روشی برای طراحی صفحات وب است که باعث می شود چیدمان و ظاهر صفحه متناسب با عرض صفحه نمایش کاربر تغییر کند. بنابراین یک صفحه واحد می تواند روی کامپیوتر، تبلت و موبایل با چیدمان مناسب نمایش داده شود. در واقع، به جای اینکه برای هر دستگاه یک سایت کاملاً جداگانه بسازیم، عناصر صفحه را طوری طراحی می کنیم که بتوانند در عرض های مختلف خودشان را با فضای موجود تطبیق دهند.

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

Viewport چیست؟

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

Breakpoint چیست؟

Breakpoint نقطه ای از عرض صفحه است که در آن می توانیم رفتار یا ظاهر طراحی را تغییر دهیم. در تنظیمات پیش فرض المنتور، breakpointهای اصلی برای دسکتاپ، تبلت و موبایل تعریف شده اند؛ این مقادیر قابل تنظیم هستند و المنتور امکان اضافه کردن breakpointهای بیشتر را نیز فراهم می کند.

در مستندات فعلی المنتور، به صورت پیش فرض نمایشگرهای بالاتر از ۱۰۲۴ پیکسل در محدوده PC، عرض بین ۱۰۲۴ تا ۷۶۷ پیکسل در محدوده تبلت و عرض کمتر از ۷۶۷ پیکسل در محدوده موبایل قرار می گیرد. نکته مهم این است که این تقسیم بندی بر اساس عرض viewport است، نه مدل واقعی دستگاه؛ بنابراین یک لپ تاپ با عرض viewport مشخص می تواند در breakpoint دیگری قرار بگیرد. به همین دلیل ریسپانسیو کردن سایت در المنتور بیشتر از کوچک کردن عناصر است؛ شما در واقع شما با خرید افزونه المنتور پرو رفتار صفحه را برای فضای جدید بازطراحی می کنید.

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

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

مرحله اول: صفحه را با المنتور باز کنید

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

مرحله دوم: ابتدا ساختار دسکتاپ را طراحی کنید

اگر صفحه را از صفر می سازید، ابتدا ساختار کلی آن را مشخص کنید. بخش های اصلی، عنوان ها، متن ها، تصاویر، دکمه ها و سایر عناصر را در جای مناسب قرار دهید. در نسخه های جدید المنتور، Containerهای Flexbox نقش مهمی در ساختار صفحه دارند. Containerها جایگزین ساختار قدیمی مبتنی بر Section و Column شده اند و کنترل بیشتری روی جهت، اندازه، ترتیب و نحوه قرارگیری عناصر در اختیار شما قرار می دهند.

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

مرحله سوم: وارد حالت Responsive شوید

بعد از اینکه طراحی اولیه آماده شد، نوبت بررسی واکنش گرایی صفحه است. در نوار بالای ویرایشگر المنتور، گزینه مربوط به نمایش واکنش گرا یا Responsive Mode را انتخاب کنید. در این قسمت می توانید نمایش صفحه را در اندازه های مختلف بررسی کنید. در نسخه های فعلی المنتور، ابزار Responsive Editing امکان مشاهده و تنظیم صفحه برای دستگاه ها و breakpointهای مختلف را فراهم می کند. همچنین می توانید عرض viewport را برای بررسی حالت های مختلف تغییر دهید.

مرحله چهارم: نسخه تبلت را بررسی کنید

پس از ورود به حالت تبلت، صفحه را از ابتدا تا انتها بررسی کنید. دنبال مشکلاتی باشید که در دسکتاپ دیده نمی شدند. برای مثال ممکن است یک ردیف شامل چهار کارت باشد. روی دسکتاپ هر کارت فضای کافی دارد، اما در تبلت چهار کارت بیش از حد کوچک شده اند.

در این شرایط یکی از راهکارهای مناسب این است که عرض هر کارت را طوری تنظیم کنید که دو کارت در هر ردیف قرار بگیرند. اگر ساختار قدیمی ستون ها را استفاده می کنید، ممکن است برای هر ستون در breakpoint تبلت عرض ۵۰ درصد تعیین کنید. اگر از Containerهای Flexbox استفاده می کنید، می توانید از قابلیت Wrap و تنظیم عرض عناصر استفاده کنید تا المان ها در صورت کم شدن فضای افقی به ردیف بعدی منتقل شوند.

مرحله پنجم: عرض عناصر را برای تبلت اصلاح کنید

فرض کنید چهار ستون دارید و هرکدام در دسکتاپ ۲۵ درصد عرض را اشغال می کنند. اگر همین مقدار در تبلت باقی بماند، چهار ستون ممکن است در یک ردیف باقی بمانند و فضای بسیار کمی برای هرکدام ایجاد شود. در چنین شرایطی می توانید عرض هر عنصر را در breakpoint تبلت افزایش دهید. برای مثال:

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

مرحله ششم: جهت Container را در موبایل تغییر دهید

یکی از کاربردی ترین قابلیت های Containerهای Flexbox، امکان تغییر Direction بر اساس breakpoint است. فرض کنید در دسکتاپ یک بخش دو قسمت دارد:

• سمت راست: عنوان، توضیحات و دکمه
• سمت چپ: تصویر

در دسکتاپ می توانید این دو بخش را کنار یکدیگر قرار دهید. اما در موبایل معمولاً بهتر است این دو عنصر زیر یکدیگر قرار بگیرند. در Container می توانید Direction را برای موبایل روی حالت Column قرار دهید تا عناصر به صورت عمودی چیده شوند. اگر ترتیب نمایش عناصر اهمیت داشته باشد، قابلیت Custom Order نیز می تواند به شما کمک کند. به این ترتیب لازم نیست صرفاً برای تغییر ترتیب نمایش در موبایل چند نسخه تکراری از یک بخش بسازید.

مرحله هفتم: اندازه فونت ها را برای موبایل تنظیم کنید

یکی از رایج ترین مشکلات طراحی ریسپانسیو، بزرگ بودن بیش از حد متن در موبایل است. برای مثال اگر عنوان اصلی صفحه روی دسکتاپ با فونت ۶۴ پیکسل طراحی شده باشد، ممکن است همان اندازه روی موبایل باعث شود عنوان در چند خط نامناسب شکسته شود و بخش زیادی از صفحه را اشغال کند. برای حل این مشکل، عنصر Heading را انتخاب کنید و در حالت Responsive مقدار Font Size را برای موبایل تنظیم کنید. همین کار را می توانید برای موارد زیر انجام دهید:

• اندازه تیتر اصلی
• تیترهای H2 و H3
• متن پاراگراف ها
• متن دکمه ها
• اعداد و قیمت ها
• متن کارت ها
• منو و عناصر ناوبری

یک نکته بسیار مهم در المنتور این است که تنظیمات ریسپانسیو معمولاً از نمایشگرهای بزرگ تر به نمایشگرهای کوچک تر به ارث می رسند. بنابراین اگر مقدار جدیدی برای یک breakpoint کوچک تر تعیین نکنید، مقدار breakpoint بزرگ تر می تواند برای آن نیز استفاده شود. این رفتار باعث می شود لازم نباشد همه تنظیمات را برای هر دستگاه دوباره وارد کنید؛ فقط مواردی را که واقعاً نیاز به تغییر دارند، Override کنید.

مرحله هشتم: فاصله ها را در نسخه موبایل اصلاح کنید

گاهی صفحه در موبایل به خاطر اندازه فونت خراب نمی شود؛ مشکل از Margin و Padding است. فرض کنید یک بخش در دسکتاپ ۱۰۰ پیکسل Padding از بالا و پایین دارد. همین مقدار ممکن است در یک موبایل فضای زیادی از صفحه را اشغال کند. بنابراین در حالت موبایل بخش موردنظر را انتخاب کنید و فاصله های داخلی و خارجی را بررسی کنید.

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

مرحله نهم: تصاویر را برای موبایل بررسی کنید

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

برای تصاویر مهم صفحه بهتر است همیشه این سؤال را از خودتان بپرسید: اگر این تصویر در موبایل برش بخورد، آیا بخش مهمی از پیام یا محصول از بین می رود؟ اگر پاسخ مثبت است، باید Position و Size تصویر را مجدداً بررسی کنید. همچنین اگر با Widget تصویر کار می کنید، می توانید راهنمای ویجت تصویر در المنتور را نیز در کنار این آموزش مطالعه کنید.

مرحله دهم: عناصر غیرضروری را در موبایل مخفی کنید

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

در نسخه های مختلف المنتور محل تنظیم این قابلیت ممکن است متفاوت باشد. در نسخه های کلاسیک، کنترل های Hide On معمولاً در بخش Advanced > Responsive قرار دارند. در رابط های جدیدتر نیز تنظیمات نمایش عنصر بر اساس breakpoint در تنظیمات Layout در دسترس است. پس اگر المانی در موبایل نمایش داده نمی شود، قبل از اینکه تصور کنید مشکل فنی یا باگ وجود دارد، تنظیمات Responsive و Visibility همان عنصر را بررسی کنید.

مرحله یازدهم: ترتیب عناصر را در موبایل بررسی کنید

فرض کنید در دسکتاپ یک بخش دو ستونه دارید و در ستون اول تصویر و در ستون دوم متن قرار گرفته است. پس از تبدیل Layout به حالت عمودی در موبایل، ممکن است تصویر قبل از متن نمایش داده شود؛ در حالی که از نظر تجربه کاربری ترجیح می دهید کاربر ابتدا عنوان و توضیحات را ببیند. در Containerهای Flexbox می توانید ترتیب عناصر را در breakpointهای مختلف کنترل کنید. این قابلیت به خصوص برای صفحات فرود، صفحات خدمات و بخش های Hero بسیار کاربردی است.

مرحله دوازدهم: دکمه ها را در موبایل بررسی کنید

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

• متن دکمه کامل دیده می شود؟
• دکمه از عرض صفحه بیرون نزده است؟
• فاصله آن با سایر عناصر مناسب است؟
• ارتفاع و Padding آن برای لمس با انگشت مناسب است؟
• اگر دو دکمه کنار هم هستند، آیا بهتر نیست زیر یکدیگر قرار بگیرند؟

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

مرحله سیزدهم: منو و Header را بررسی کنید

یکی از واضح ترین نمونه های ریسپانسیو بودن سایت، منوی اصلی است. منویی که روی دسکتاپ به صورت افقی نمایش داده می شود، معمولاً نمی تواند بدون تغییر همان شکل را روی موبایل حفظ کند. به همین دلیل باید رفتار Header را در نمایشگرهای کوچک بررسی کنید. در موبایل باید مطمئن شوید:

• لوگو فضای بیش از حد اشغال نمی کند.
• منوی موبایل به درستی باز می شود.
• آیکون منو قابل مشاهده و قابل استفاده است.
• هیچ بخشی از Header از عرض صفحه خارج نمی شود.
• ارتفاع Header بیش از حد زیاد نیست.

اگر Header یا Footer در یک دستگاه ناپدید شده است، تنظیمات Responsive Visibility آن را بررسی کنید.

مرحله چهاردهم: از Width ثابت بیش از حد استفاده نکنید

یکی از اشتباهات رایج در طراحی واکنش گرا، استفاده افراطی از Widthهای ثابت بر اساس پیکسل است. فرض کنید یک Container یا Widget را روی عرض ثابت ۶۰۰ پیکسل قرار داده اید. این مقدار ممکن است در دسکتاپ مناسب باشد، اما روی موبایلی که عرض آن بسیار کمتر است، باعث ایجاد Overflow یا فشردگی شود. در بسیاری از موارد بهتر است از ترکیبی از واحدها و تنظیمات انعطاف پذیر مانند درصد، Max Width، Min Height و تنظیمات Flexbox استفاده کنید. در Containerها المنتور امکان تنظیم عرض و ارتفاع با واحدهایی مانند Pixel، Percentage و واحدهای viewport را فراهم می کند. بنابراین لازم نیست برای تمام عناصر یک مقدار ثابت انتخاب کنید.

مرحله پانزدهم: Overflow افقی را پیدا کنید

یکی از بدترین مشکلاتی که ممکن است در موبایل رخ دهد، ایجاد Horizontal Scroll است؛ یعنی صفحه از عرض viewport بزرگ تر شود و کاربر بتواند صفحه را به چپ و راست بکشد. اگر چنین مشکلی مشاهده کردید، معمولاً یکی از عناصر صفحه عرض بیش از حد دارد. موارد زیر را بررسی کنید:

• Containerهای دارای Width ثابت
• Margin افقی بسیار بزرگ
• تصاویر با اندازه نامناسب
• جداول عریض
• دکمه های کنار هم
• متن های بدون امکان شکست مناسب
• عناصر دارای Position خاص
• کدهای CSS سفارشی
• افکت های Transform یا Translate

اگر برای طراحی خود CSS سفارشی نوشته اید، آن را نیز بررسی کنید. در صورت نیاز می توانید از راهنمای افزودن CSS سفارشی به المنتور استفاده کنید.

مرحله شانزدهم: جدول ها را در موبایل بررسی کنید

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

مرحله هفدهم: از Breakpoint سفارشی فقط زمانی استفاده کنید که واقعاً لازم است

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

مرحله هجدهم: صفحه را فقط در سه حالت Desktop، Tablet و Mobile تست نکنید

این نکته بسیار مهم است. اینکه صفحه در سه حالت پیش فرض المنتور خوب به نظر برسد، لزوماً به این معنی نیست که در تمام اندازه های نمایشگر بدون مشکل خواهد بود. ممکن است صفحه در موبایل استاندارد خوب باشد اما در یک موبایل عریض، یک تیتر به شکل نامناسب شکسته شود. یا ممکن است طراحی در تبلت عمودی مناسب باشد اما در تبلت افقی به مشکل بخورد. به همین دلیل هنگام بررسی Responsive Mode، عرض viewport را تغییر دهید و چند اندازه مختلف را آزمایش کنید. هدف شما نباید طراحی برای یک مدل خاص از گوشی باشد؛ هدف، ساخت Layoutای است که در یک محدوده منطقی از عرض های صفحه رفتار مناسبی داشته باشد.

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

طراحی ریسپانسیو در المنتور با Container؛ روش پیشنهادی برای طراحی های جدید

اگر در حال ساخت یک سایت جدید هستید، بهتر است با منطق Containerها و Flexbox آشنا باشید. Containerها در المنتور برای مدیریت Layout طراحی شده اند و امکان کنترل بهتر جهت، اندازه، ترتیب و جایگاه عناصر را فراهم می کنند. برای مثال، یک ساختار ساده می تواند چنین باشد:

Container اصلی
├── Container متن
│   ├── Heading
│   ├── Text Editor
│   └── Button
└── Container تصویر
    └── Image

در دسکتاپ، Container اصلی می تواند Direction برابر Row داشته باشد تا متن و تصویر کنار هم باشند. در موبایل می توانید Direction را به Column تغییر دهید تا ساختار به شکل زیر تبدیل شود:

Container اصلی
├── Container متن
│   ├── Heading
│   ├── Text Editor
│   └── Button
└── Container تصویر
    └── Image

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

آیا برای ریسپانسیو کردن المنتور باید CSS بلد باشیم؟

خیر. بسیاری از نیازهای معمول طراحی ریسپانسیو را می توان با امکانات خود المنتور برطرف کرد. برای مثال می توانید بدون نوشتن CSS:

• عرض عناصر را تغییر دهید.
• Direction را تغییر دهید.
• فاصله ها را تنظیم کنید.
• اندازه فونت را تغییر دهید.
• تصاویر را برای دستگاه های مختلف تنظیم کنید.
• عناصر را در بعضی دستگاه ها مخفی کنید.
• ترتیب عناصر را تغییر دهید.
• Breakpoint اضافه کنید.

با این حال، در پروژه های حرفه ای ممکن است گاهی CSS سفارشی برای یک نیاز خاص لازم باشد. نکته مهم این است که قبل از استفاده از CSS، بررسی کنید آیا خود المنتور ابزار مناسب برای حل مسئله را دارد یا خیر.

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

گاهی تغییرات داخل ویرایشگر المنتور صحیح هستند اما در سایت واقعی همان تغییرات را نمی بینید. در این حالت قبل از تغییر دوباره طراحی، مسئله Cache و فایل های CSS تولیدشده را بررسی کنید. کش مرورگر، افزونه های کش وردپرس، کش سرور یا CDN می توانند باعث شوند نسخه قدیمی صفحه نمایش داده شود. در صورت ادامه مشکل، می توانید از بخش ابزارهای المنتور گزینه Clear Files & Data را برای بازسازی فایل ها و داده های مربوط به طراحی استفاده کنید و سپس کش های مرتبط را نیز بررسی کنید.

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

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

این دو مفهوم به یکدیگر نزدیک هستند اما دقیقاً یکی نیستند. Responsive Design به سازگارشدن Layout با اندازه های مختلف نمایشگر اشاره دارد. در مقابل، موبایل فرندلی بودن بیشتر به این موضوع توجه می کند که کاربر موبایل بتواند به راحتی محتوا را بخواند، روی دکمه ها کلیک کند، فرم ها را تکمیل کند و بدون دردسر در صفحه حرکت کند. بنابراین ممکن است یک صفحه از نظر فنی ریسپانسیو باشد، اما تجربه کاربری خوبی در موبایل نداشته باشد. مثلاً تمام عناصر در عرض صفحه جا شوند، ولی فونت خیلی کوچک، دکمه ها خیلی نزدیک و فاصله بخش ها بسیار زیاد باشد. هدف نهایی شما باید ترکیبی از واکنش گرایی فنی و تجربه کاربری مناسب باشد.

آیا استفاده از المنتور پرو برای طراحی ریسپانسیو ضروری است؟

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

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

جمع بندی

طراحی ریسپانسیو با المنتور زمانی موفق است که فقط به کوچک کردن عناصر فکر نکنید؛ بلکه رفتار کل صفحه را در عرض های مختلف بررسی کنید. روش کار ساده است: ابتدا ساختار اصلی صفحه را ایجاد کنید، سپس آن را در Responsive Mode بررسی کنید. در مرحله بعد، مشکلات تبلت و موبایل را یکی یکی شناسایی کنید و برای هر مشکل، مناسب ترین راهکار را انتخاب کنید؛ گاهی تغییر Width کافی است، گاهی باید Direction را عوض کنید، گاهی فاصله ها یا فونت را تنظیم کنید و در بعضی موارد نیز لازم است عنصر خاصی را در یک breakpoint مخفی یا جابه جا کنید.

اگر با ساختارهای جدید المنتور کار می کنید، بهتر است به جای وابستگی زیاد به Section و Columnهای قدیمی، منطق Container و Flexbox را یاد بگیرید. این ساختار کنترل بیشتری روی چیدمان و رفتار عناصر در اندازه های مختلف در اختیار شما می گذارد. در نهایت، هیچ مقدار ثابتی برای همه صفحات وجود ندارد. عددی که برای Font Size، Padding، Width یا Gap در یک سایت مناسب است ممکن است در سایت دیگری نتیجه خوبی نداشته باشد. طراحی ریسپانسیو یک فرآیند بررسی، آزمایش و اصلاح است.

اگر می خواهید طراحی ریسپانسیو را فقط در حد تنظیم موبایل یاد نگیرید و کنترل بیشتری روی ساخت صفحات داشته باشید، بهتر است یادگیری خود را با چند موضوع مکمل ادامه دهید:

• آموزش فلکس باکس در المنتور
• کار با Container در المنتور
• آموزش Margin و Padding در المنتور
• افزودن CSS سفارشی به المنتور
• افزایش سرعت المنتور
• آموزش نصب المنتور

سؤالات متداول درباره طراحی ریسپانسیو با المنتور