سایت ساز گِــرَپ

واکنشگرایی در طراحی سایت

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

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

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

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

اولویت تنظیمات و حالت همه ابعاد

به صورت پیش فرض، تمامی تنظیمات از حالت «همه ابعاد» پیروی می کنند. این تنظیمات تا زمانی اعمال می شوند که برای یک حالت خاص، مانند موبایل یا تبلت، تنظیم اختصاصی تعریف نشده باشد.

برای مثال، فرض کنید عرض یک ستون در حالت «همه ابعاد» برابر با ۵۰ درصد است و در کنار ستون دیگری قرار دارد.
در صورتی که به حالت موبایل برویم، می توان برای همان ستون عرض ۱۰۰ درصد تعریف کرد تا در نمایش موبایلی، ستون ها به صورت عمودی و زیر هم قرار بگیرند و خوانایی محتوا افزایش یابد.
از این لحظه به بعد، این ستون در موبایل همیشه ۱۰۰ درصد عرض خواهد داشت، در حالی که در دسکتاپ همان مقدار ۵۰ درصد حفظ می شود.

تغییر ترتیب نمایش ستون ها در ابعاد مختلف

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

تنظیم نقاط شکست واکنشگرایی

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

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

برای تغییر مرز بین موبایل و تبلت، عرض نقطه شکست موبایلی تنظیم می شود و برای تغییر مرز بین تبلت و دسکتاپ، مقدار نقطه شکست تبلتی تغییر داده می شود.

بررسی نقاط شکست به صورت عملی

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

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

با افزایش عرض صفحه و رسیدن به انتهای بازه موبایلی یعنی ۵۷۶ پیکسل، اولین نقطه شکست اتفاق می افتد. از این نقطه به بعد، عرض کانتینر ثابت مانده و برابر با عرض موبایلی باقی می ماند. این مقدار، نقطه تغییر واکنشگرایی از موبایل به تبلت محسوب می شود.

با ادامه افزایش عرض صفحه و رسیدن به دومین نقطه شکست یعنی ۷۶۸ پیکسل، رفتار مشابهی مشاهده می شود. از این نقطه تا نقطه شکست سوم، کانتینر با عرض ثابت ۷۶۸ پیکسل نمایش داده می شود.

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

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

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

جمع بندی

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