طراحی ریسپانسیو (واکنش‌گرا):

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

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

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

همچنین طراحی ریسپانسیو برای بهینه سازی SEO بسیار مهم است و یک وب‌سایت ریسپانسیو در نتایج جستجو رتبه‌ی بهتری دارد.

۳ اصل اساسی طراحی ریسپانسیو عبارت‌اند از:

🔷 سیستم‌های گریدبندی سیال (Fluid Grid Systems)
در طراحی ریسپانسیو از اندازه‌های نسبی (مانند درصد) به جای اندازه‌های مطلق استفاده می‌شود.
در سیستم گرید‌بندی سیال، هر عنصر درصد یکسانی از فضا را اشغال می‌کند؛ به همین خاطر هر چه‌قدر که صفحه نمایش بزرگ یا کوچک شود -مانند زمانی که کاربر دستگاه را تغییر می‌دهد- اجزا نیز می‌توانند بزرگ یا کوچک شوند.

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

🔷 مدیا کوئری Media Queries
در این بخش یادگیری چند تعریف اهمیت دارد:

🔸ویو پورت Viewport:
ناحیه‌ی قابل مشاهده‌ی کاربر از یک صفحه‌ی وب است.
بنابراین ویوپورت در صفحه نمایش‌های کوچک‌تر (مانند تلفن همراه)، کوچک‌تر از صفحه نمایش‌های بزرگ‌تر (مانند کامپیوتر‌) است.
در گذشته معمول بود که صفحات وب دارای طراحی ثابت و اندازه ثابت باشند؛ اما امروزه HTML5 روشی را معرفی کرد که به طراحان وب اجازه می‌دهد از طریق تگ <meta> کنترل ویو‌پورت را در دست بگیرند.

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

🔸نقاط شکست Breakpoint:
عناصر سازنده‌ی طراحی ریسپانسیو هستند و در صفحات استایل دهی CSS به کار می‌روند.
در واقع مرزی است که در آن، طراحی برای تطبیق ویژگی‌ها با اندازه جدید صفحه نمایش تغییر می‌کند.
زمانی که وب‌سایت باید با ویوپورت خاص یا سایز دستگاه خاص انطباق پیدا کند (یعنی مطابقت استایل یک صفحه ی وب با عرض صفحه نمایش دستگاهی که در آن مشاهده می‌شود) از breakpoint استفاده می‌شود.

🔸مدیا کوئری Media Queries:
یکی دیگر از ویژگی‌های CSS است که امکان تعریف استایل‌های مختلف را فراهم می‌کند.
در واقع دستورالعمل‌هایی برای تغییر طرح سایت بر اساس شرایط خاص هستند.
به عنوان مثال، رویکرد دو ستونی ممکن است در صفحه نمایش گوشی هوشمند عملی نباشد؛ یا اگر اندازه صفحه نمایش کوچک‌تر از اندازه خاصی باشد، از یک Media Query برای دستور دادن به مرورگر برای تنظیم مجدد صفحه نمایش استفاده می‌شود.

به صورت کلی با استفاده از Breakpoint و Media Query محتوای وب‌سایت برای ارائه بهترین تجربه ممکن به کاربر بازآرایی می‌شود.

…

🔗برای مطالعه کل مقاله به این لینک مراجعه کنید.

🔗لینک مقاله کمکی از سایت بوت‌استرپ
🔗لینک مقاله کمکی از سایت دبلیو‌تری‌اسکولز

(زمان حدودی مطالعه: ۹ دقیقه)

گردآورنده: محدثه عبادالهی

#رابط_کاربر #ریسپانسیو

@Dexign فلسفه دیزاین

______