طراحی سایت ریسپانسیو Responsive Web Design یا به فارسی سایت واکنشگرا در مورد طراحی یک وب سایت با صفحاتی است که در تمامی دستگاه ها و نمایشگرها اعم از صفحه دسکتاپ، لپ تاپ، تبلت، گوشی های تلفن همراه و حتی در تلویزیون های هوشمند به درستی نمایش داشته باشد.
یک سایت با طراحی ریسپانسیو به صورت اتومات برای نمایش در انواع دیوایس با هر اندازه ای تنظیم می شود. در این مقاله با ما همراه باشید تا با تعریف دقیق تر این مفهوم مهم در طراحی سایت آشنا شوید و بررسی کنیم چرا داشتن یک وب سایت واکنشگرا انقدر مهم است و با روش های رسیپانسیو کردن سایت و تست آن آشنا شوید.
مفهوم سایت ریسپانسیو Responsive Design
یکی از مراحل مهم در طراحی سایت واکنشگرا بودن آن است. یعنی تمامی المان های HTML یک سایت اعم از منو، دکمه ها، متن و تصاویر، فونت، رزولوشن بر اساس صفحه نمایش دستگاهی که کاربر از آن استفاده می کند به صورت خودکار تنظیم و تغییر کند.
فرآیند ریسپانسیو کردن سایت شامل ترکیبی از شیت بندی و تنظیمات مختلف در CSS سایت است که کمک می کند که صفحات سایت به طور خودکار برای تطبیق وضوح، اندازه تصویر، رنگ و حتی جهت مورد استفاده کاربر، تغییر کند.
دلیل اهمیت ریسپانسیو بودن سایت
می دانید که با ظهور گوشی های هوشمند در اندازه های مختلف، بیشترین درصد از مخاطبان فضای وب را کاربران موبایل وگوشی های تلفن همراه تشکیل می دهند. یک سایت که صفحات آن به خوبی برای انواع دستگاه های مورد استفاده کاربران بهینه شده است بیشترین میزان از تجربه کاربری مفید را در اختیار مخاطبان قرار می دهد.
داشتن یک تجربه کاربری برای بقای کسب و کار و وب سایت شما در فضای آنلاین و موتورهای جستجو بسیار مهم است. ممکن است برای شما پیش آمده باشد که وارد یک وب سایت شده اید که متن در آن به قدری کوچک است که نیاز به زوم و یا اسکرول کردن های مکرر داشته اید. همین دشواری در استفاده از یک سایت سبب شده از آن سایت خارج شده و به سراغ سایت دیگری بروید.
به همین ترتیب، داشتن یک وب سایت واکنشگرا که به خوبی در تمام دستگاه ها نمایش داشته باشد و UX موفقی را ایجاد می کند، البته که موفقیت بیشتری را در مبحث سئو سایت نیز کسب خواهد کرد. زیرا گوگل ریسپانسیو بودن را یکی از مهمترین موضوعات در الگوریتم های موتور جستجو معرفی کرده است.
تست ریسپانسیو بودن سایت
ابزارهای رایگان مختلفی برای تست واکنشگرایی یک وب سایت وجود دارد که می توانید از آن ها کمک بگیرید که بدانید آیا وب سایت شما به خوبی ریسپانسیو شده است یا خیر؟!
یکی از بهترین و جالب ترین آن ها designmodo است که با کلیک برروی آن وارد صفحه آن شده می توانید با واردن کردن URL سایت خود نحوه نمایش آن را در انواع دیوایس با اندازه بر حسب اینچ ببینید.
ویژگی های سایت ریسپانسیو
برای آنکه یک وب سایت با طراحی ریسپانسیو یا واکنشگرا تلقی شود باید دارای این 3 ویژگی و فاکتور باشد.
هر وب سایتی به سادگی ریسپانسیو نمی شود و برای آنکه به خوبی در این حوزه بهینه شود باید برروی این 3 ویژگی به صورت همزمان کار شود. این فاکتورها عبارتند از:
-
گریدهای قابل تغییر
یکی از مباحث مهم در طراحی رسیپانسیو وب سایت Flexible Grid یا شبکه سیال است. در این بخش تلاش می شود تا اساس تغییر بر روی ستون ها، فاصله ها و کانتینرها با استفاده از یک سری ریاضیات ابتدایی برروی طرح بندی های سایت اعمال شود و نه برروی پیکسل ها! یعنی اندازه یک صفحه بر اساس پیکسل و تعیین اندازه برای آن محدود نمی شود، بلکه عناصر سایت نسبت به سایز نمایشگر چیده می شود.
-
تصاویر
یکی از مهمترین بخش ها در طراحی سایت واکنشگرا مربوط به تصاویر است. با توجه به اینکه تصاویر بخش زیادی از محتوای یک وب سایت را تشکیل می دهند مهم است که به درستی در هر دستگاهی نمایش داشته باشد. برای واکنشگرا کردن آن چند تکنیک آسان وجود دارد که آسان ترین آن مربوط به تصاویر سیال با استفاده از تعریف حداکثری CSS اندازه تصویر است.
بدین صورت: img{ max-width: 100%; }
در این حالت هر تصویر در اندازه حداکثر خود بارگذاری می شود، بنابراین تصویر دقیقاً به اندازه نمایشگر نشان داده می شود. در این حالت شما عرض و یا ارتفاعی برای تصویر خود اعلام نمی کنید و این مرورگر است که اندازه نسبی تصاویر را از CSS به دست می آورد.
-
ساختار لایه بندی
زمانی که در دستگاه های مختلف ابعاد المان ها و یا متن و تایپوگرافی دچار تغییرات شدید هستند با استفاده از برخی دستورات می توان آن ها را متعادل نمود. در حالی که لایه بندی ساختار می تواند تغییر کند اما سبک آن ها ثابت باقی خواهد ماند. یعنی عناصری همچون منو، متن و محتوای صفحات و ساید بار و… با عرض و ارتفاع، رنگ پس زمینه و تایپو گرافی به صورت پیش فرض برای اندازه های مخلف تعریف شده اند و در تغییر اندازه های شدید به صورت خیلی باریک یا خیلی عریض به صورت متعادل نمایش دارند.
این تغییرات با استفاده از کدهای CSS و فریم ورک های پیش فرض و یا سایر کد نویسی های سفارشی اجرا می شود. با استفاده ازین فاکتور عناصری همچون منو به صورت خودکار از صورت افقی در دسکتاپ به حالت عمودی در موبایل تغییر می کنند و یا بخش ساید بار که در نسخه دسکتاپ در کناره ها است در نسخه موبایل به قسمت انتهای صفحه خواهند رفت.
روش ریسپانسیو کردن سایت
چنانچه سایت شما براساس سیستم مدیریت محتوا مانند ورد پرس، جوملا، دروپال و… باشد، برای طراحی صفحات خود قطعاً از صفحه سازهایی مانند المنتور، ویژوآل کامپوزر و… استفاده کرده اید. این صفحه سازها به شما این امکان را می دهند تا در هنگام طراحی صفحه به صورت زنده صفحه را در سه حالت دسکتاپ، موبایل و تبلت مشاهده کنید. و اگر در هر کدام از دستگاه ها مشکلی از بابت ریسپانسیو داشته باشد می توانید با تغییر ابعاد در همان دستگاه این مشکل را برطرف کرده به طوری که در دستگاه دیگر تأثیر نگذارد.
اما اگر سایت شما بر اساس زبان های برنامه نویسی مانند php، asp.net باشد برای ریسپانسیو کردن آن باید از کدهای CSS مانند Media Query استفاده کرد. این کدها نوع دستگاه کاربر را تشخیص داده و بر اساس عرض آن صفحه را به همان اندازه نمایش می دهد. بهترین ابزار برای ریسپانسیو کردن این سایت ها استفاده از فریم ورک های CSS مانند Bootstrap و یا فریم ورک tailwind است.
این کدها در بسیاری از سایت ها به صورت آماده وجود دارد که می توانید به راحتی آن را کپی کرده و به آن ها دسترسی داشته باشید.
https://www.w3schools.com یک فریم ورک محبوب در این زمینه است.
در این مقاله ارائه شده از فامین ادز تلاش شد که مفهوم طراحی سایت ریسپانسیو توضیح داده شود.
اگر شما نیز تجربه و یا نکات دیگری از طراحی سایت واکنشگرا دارید، برای ما بنویسید.
No comment