ریسپانسیو چیست؟
راهکاری به نام طراحی ریسپانسیو
طراحی وب از زمان رواج روزافزون استفاده از دستگاه‌های همراه همواره برای پاسخگویی به نیازهای خاص کاربران این ابزارها و تناسب طراحی با محیط، اندازه و رزولوشن آن‌ها تحت فشار بوده است.
در ابتدا به نظر می‌رسید که بهترین راهکار استفاده از stylesheet های متفاوت برای اندازه‌های مختلف باشد؛
اما امروزه یک stylesheet می‌تواند پاسخگوی صفحات نمایشی باشد که اندازه‌های متفاوتی دارند.
در نتیجه از این طریق حجم کدهای وب‌سایت نیز کاهش پیدا خواهد کرد.
این نوع از طراحی همچنان از روش‌های استاندارد برای تشخیص دستگاه مورد استفاده کاربر بهره می‌برد، اما نیاز به طراحی یک stylesheet برای هر دستگاه را برطرف کرده است.
این طراحی همان چیزی است که به آن طراحی «ریسپانسیو» (Responsive) یا طراحی واکنشگرا می‌گوییم.
طراحی ریسپانسیو چیست؟
طراحی ریسپانسیو یک روش یا رویکرد است که طراح بر مبنای آن صفحه را به نحوی طراحی می‌کند که با دستگاهی که در آن نمایش داده می‌شود تطبیق پیدا می‌کند.
در این روش، طراحی و توسعه به گونه‌ای انجام می‌گیرد که بهترین تجربه برای کاربران دستگاه‌های مختلف رقم زده شود.
در طراحی ریسپانسیو از ترکیبی از تصاویر، گریدها (Grid) و طرح‌های انعطاف‌پذیر در کنار کاربرد منطقی و زیرکانه CSS استفاده می‌شود.
در این حالت با تغییر محیط کاربری از وضعیت لپ‌تاپ به گوشی هوشمند، وب‌سایت به سرعت با اندازه و رزولوشن صفحه و همچنین میزان پشتیبانی دستگاه مورد نظر از اسکریپت‌های مختلف تطبیق پیدا می‌کند.
طبیعتاً فناوری لازم برای واکنش خودکار به درخواست کاربر باید در سایت و مرورگر کاربر وجود داشته باشد.
در نهایت، از طریق این روش نیاز به طراحی و توسعه مجزا برای دستگاه‌های مختلفی که در بازار وجود دارند یا در آینده عرضه خواهند شد مرتفع می‌شود.
طراحی ریسپانسیو چه سبک و سیاقی دارد؟
یا استفاده از طراحی ریسپانسیو یک وب‌سایت خواهید داشت که مؤلفه‌هایی مختلفی در آن وجود دارد.
هنگامی که وب‌سایت شما در دستگاه‌های مختلفی به نمایش در می‌آید، بنا به تنظیماتی که برای طراحی تعریف شده، این مؤلفه‌ها واکنش‌های متفاوتی را از خود نشان می‌دهند.
یک وب‌سایت با طراحی سنتی را در نظر بگیرید؛ معمولاً چنین وب‌سایت‌هایی کاربران موبایل یا تبلت را مجبور می‌کنند تا به سمت چپ یا راست صفحه اسکرول کرده یا برای مشاهده متن‌های ریز به ناچار بر روی آن‌ها زوم کنند.
به عبارت دیگر کاربر مجبور به انجام کارهایی می‌شود که علاقه‌ای به انجامشان ندارد. طبیعتاً ایجاد طرح مناسبی که پاسخگوی نیاز همه کاربران باشد آسان نخواهد بود.
به علاوه، قابلیت چرخش خودکار صفحه گوشی‌ها و تبلت‌ها نیز مزید بر علت می‌شود و کار را برای طراحان دشوارتر می‌کند. برخی از دستگاه‌ها نیز صفحات بسیار کوچکی دارند.
که طراحی برای آن‌ها را به دردسر بزرگ‌تری تبدیل خواهد کرد. به علاوه، حفظ طرح صفحه و نمایش درست سایت برای وب‌سایت‌هایی که تصویر محور هستند یا از آیتم‌های گرافیکی فراوانی استفاده می‌کنند دشوارتر است.
در چنین شرایطی طراحی ریسپانسیو به کمک طراحان، صاحبان سایت و همچنین کاربران می‌آید.
به عنوان مثال با استفاده از این نوع از طراحی می‌توان نسخه تبلت را به نحوی تنظیم کرد که در حالت دو ستونه نمایش داده شود.
از این طریق، در خوانایی محتوا و حرکت در سایت اختلالی به وجود نمی‌آید. در گوشی‌های هوشمند می‌توان محتوا را به صورت عمودی در یک ستون مرتب کرد یا امکان جابجایی بین چند ستون را با حرکت لمسی سوایپ برای کاربر فراهم کرد و از نمایش عناصر مزاحم جلوگیری نمود.
تصاویر نیز به جای آنکه ریز یا بزرگ به نظر برسند یا اینکه فقط قسمتی از آن‌ها دیده شود به طور خودکار تغییر اندازه داده می‌شوند.
به زبان ساده، با استفاده از طراحی ریسپانسیو، وب‌سایت شما با دستگاه مورد استفاده بازدیدکننده تطبیق پیدا می‌کند
طراحی ریسپانسیو چگونه کار می‌کند؟
در طراحی ریسپانسیو از fluid grid یا جدول‌های شناور استفاده می‌شود.
در این حالت به جای تعیین اندازه مؤلفه‌های مختلف سایت بر مبنای پیکسل، همه اندازه‌ها به طور نسبی تعیین می‌شود.
بنابراین اگر در طرح سایت خود سه ستون داشته باشید، به جای آنکه عرض هر یک را به طور مجزا تعیین کنید مشخص می‌کنید که عرض هر کدام نسبت به ستون‌های دیگر چقدر باید باشد.
همین قضیه در مورد آیتم‌های رسانه‌ای و از جمله تصاویر سایت نیز مصداق دارد، به نحوی که تصاویر و انواع مختلف آیتم‌های چندرسانه‌ای سایت هم به صورت نسبی تغییر اندازه پیدا می‌کنند.
تفاوت طراحی ریسپانسیو با طراحی fluid (روان) و طراحی adaptive (انطباق پذیر)
تفاوت عمده طراحی ریسپانسیو با طراحی fluid یا روان این است که در طراحی روان، تمرکز طراحی بر روی نسبیت اندازه‌ها قرار دارد تا همه مؤلفه‌ها درصد مشابهی را در صفحات نمایش مختلف اشغال کنند؛ اما در طراحی ریسپانسیو با استفاده از Media Query های خاصِ CSS، نحوه نمایش مؤلفه‌های مختلف بر اساس اندازه صفحه تعیین می‌شود.
در طراحی adaptive یا انطباق پذیر یا انطباقی، اندازه‌ها به صورت ثابت تعریف شده و طرح‌ها و چینش‌های کاملاً مجزایی طراحی می‌شود که با توجه به اندازه صفحه یا دستگاهی که کاربر از آن استفاده می‌کند در اختیار وی قرار خواهند گرفت.
• طراحی Fluid یا Liquid: هدف در این نوع طراحی، حفظ اندازه نسبی همه عناصر موجود در صفحه است؛ بنابراین هر آنچه که در یک مانیتور 24 اینچی مشاهده می‌کنید را در یک لپ‌تاپ 12 اینچی نیز خواهید دید.
استفاده از این روش برای صفحات مشابهی که اندازه‌های متفاوتی دارند کارساز خواهد بود. در عین حال، هنگامی که پای گوشی‌های همراه به میان می‌آید، به دلیل اندازه کوچک صفحه نمایش این دستگاه‌ها تجربه کاربری تحت تأثیر قرار خواهد گرفت.
• طراحی Adaptive: در این نوع از طراحی باید هدف و کاربران مورد نظر را مشخص و پیش‌بینی کرد.
به عنوان نمونه می‌توان استفاده از برخی از مؤلفه‌های طراحی را محدود کرد تا صفحه مورد نظر با توجه به هدف‌گذاری انجام شده در گوشی‌های همراه با سرعت بیشتری بارگذاری شود؛ یا اینکه بر ویژگی‌های خاصی تمرکز کرد که بیشتر با نیازهای کاربران این دستگاه‌ها سنخیت دارند.
• طراحی ریسپانسیو: طراحی ریسپانسیو با عنایت ویژه به مقیاس پذیری (Scalability) شروع می‌شود. در این حالت، طرح صفحه به شکلی در می‌آید که برای صفحه نمایش مورد نظر تعریف شده است.
به عنوان مثال، اگر یک سایت را در موبایل خود باز کنید، کل طرح به حالت یک ستونه در خواهد آمد تا با اندازه صفحه موبایل شما تناسب پیدا کند.
