طراحی واکنش گرا (Responsive Web Design)
«طراحی واکنش گرا (Responsive)» یعنی صفحه وب شما روی همه دستگاه ها خوب دیده شود. این رویکرد فقط با HTML و CSS انجام می شود و برنامه یا جاوااسکریپت نیست؛ بنابراین نگهداشت ساده تری دارد و تجربه کاربری یکنواخت تری می سازد.
طراحی واکنش گرا چیست؟
هدف طراحی واکنش گرا این است که محتوا روی دسکتاپ، تبلت و موبایل خوانا و قابل استفاده باشد. در نتیجه به جای حذف محتوا در نمایشگرهای کوچک، صفحه باید با اندازه نمایشگر سازگار شود.
بهترین تجربه برای همه کاربران
کاربران از دستگاه های مختلفی استفاده می کنند. پس صفحه باید ساختار و چیدمان خود را تطبیق دهد تا ناوبری ساده بماند. با CSS و HTML می توانید اندازه دهی، مخفی سازی، کوچک نمایی، بزرگ نمایی یا جابه جایی بخش ها را انجام دهید تا در هر صفحه نمایشی مناسب دیده شوند.
نکته: قبل از افزودن الگوهای پیچیده، مطمئن شوید محتوا و ناوبری در همه اندازه ها قابل دسترس و واضح است.
مسیر ادامه یادگیری RWD
برای تکمیل این مقدمه، به بخش های مرتبط هم سر بزنید: قانون @supports برای نوشتن استایل های جایگزین، و صفحه طراحی واکنش گرا را به عنوان مرجع آغازین نگه دارید.
برای مرجع بیرونی نیز می توانید به اسناد معتبر رجوع کنید: MDN: مقدمه Responsive Design و W3C: CSS Sizing.