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

چرا طراحی واکنش گرا بسیار محبوب است

در اوایل دهه 2010 ، طراحان مجبور بودند به یک پدیده تاریخی بپردازند. تعداد بیشتری از کاربران شروع به دسترسی به مطالب وب در دستگاه های دستی کردند تا روی رایانه های رومیزی. دو راه حل اصلی وجود داشت. طراحان می توانند چندین نسخه از یک طرح بسازند و هر کدام دارای ابعاد ثابت باشند (رویکردی به نام طراحی تطبیقی). از طرف دیگر ، آنها می توانند روی یک طرح منعطف و انعطاف پذیر کار کنند که کشیده یا کوچک می شود تا متناسب با صفحه نمایش باشد (طراحی واکنش گرا). سازمانها و طراحان فواید طراحی واکنش گرا را نادیده گرفتند. به جای کار با واحدهای مطلق (به عنوان مثال ، پیکسل) در نسخه های جداگانه ، طراحان مختار بودند که فقط روی یک طرح تمرکز کنند و اجازه دهند مانند مایع برای پر کردن همه "ظروف" جریان یابد. طراحی واکنش گرا بی عیب نیست. با این وجود ، مزایای قابل توجهی دارد و جذابیت آن به طور پیوسته افزایش یافته است. همچنین تعداد چارچوب های رایگان متناسب با آن نیز وجود دارد. طراحی واکنش گرا به یکی از چندین ویژگی اجباری سازمان ها (به عنوان مثال Google) تبدیل شده است.

    "طراحی وب طراحی ریسپانسیو است. طراحی وب سایت واکنش گرا ، طراحی وب است ، درست انجام شده است. "

    - اندی کلارک ، مدیر خلاق ، طراح محصول و وب سایت

     طراحی پاسخگو - ویژگی های فنی

طراحی واکنش گرا دارای سه اصل اساسی است:

سیستم شبکه سیال - عناصر درصد مساوی از فضا را هر چقدر صفحه نمایش بزرگ یا کوچک باشد اشغال می کنند (به عنوان مثال ، کاربران در حال مشاهده طرح ها در دستگاه های مختلف). این بدان معناست که شما انتخاب می کنید که پیکسل ها کجا باید ظاهر شوند و اندازه طرح را مشخص می کنید تا عناصر به صورت ثابت بالا یا پایین بروند. اگر از سیستم شبکه CSS (Cascading Style Sheets) و ژنراتور برای طراحی اصلی خود استفاده کنید (برخی از آنها به صورت رایگان در دسترس هستند) راحت تر است. شما باید اندازه هدف تقسیم بر زمینه را به صورت درصد محاسبه کنید. این حداکثر عرض ویژگی طراحی شما بر حداکثر عرض مرورگر کاربران تقسیم می شود. هنگامی که این درصد از ویژگی ها را برای ویژگی های مورد نیاز در اسکریپت CSS اعمال می کنید ، یک طرح واحد خواهید داشت که با توجه به اندازه صفحه نمایش کاربران گسترش یا کوچک می شود.

استفاده از تصویر سیال - برخلاف متن ، تصاویر به طور طبیعی سیال نیستند. این بدان معناست که آنها از صفحه نمایش یک دستگاه به صفحه دیگر به همان اندازه و پیکربندی یکسان هستند. یک خطر آشکار این است که طراحی شما در دستگاه ها ناسازگار به نظر می رسد زیرا تصاویر نمی توانند تنظیم شوند و بنابراین بی تناسب با سایر عناصر ظاهر می شوند. بنابراین ، برای اطمینان از کوچک شدن تصویر برای صفحه های کوچکتر ، باید از دستور CSS-: img {max-width: 100٪؛} استفاده کنید. برای درج تصاویر زیاد ، از دستور CSS دیگری استفاده می کنید.

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

شما می توانید از ابزارهای مختلفی مانند Bootstrap ، H5P ، Gomo و Elucidat انتخاب کنید. بنابراین ، همیشه نیازی به داشتن تخصص برنامه نویسی ندارید.
بهترین شیوه ها و ملاحظات برای طراحی واکنش گرا

با طراحی واکنش گرا ، شما برای انعطاف پذیری از هر نظر طراحی می کنید - تصاویر ، متن و طرح بندی. بنابرین تو باید:

    روش "اول موبایل" را دنبال کنید:
        طرح های اندازه تلفن را متناسب با صفحه نمایش بزرگتر افزایش دهید.
        همیشه به یاد داشته باشید که کاربران تلفن همراه به دکمه های بزرگ (> 40 امتیاز) نیاز دارند. همچنین ، طراحی شما باید دو برابر معادل دسکتاپ بصری باشد ، زیرا نیاز به عناصر با اندازه خوب در صفحه های کوچکتر می تواند باعث گرفتگی و سردرگمی شود.
    شبکه ها و تصاویر سیال ایجاد کنید:
        ایجاد تصاویر در بعد بومی خود اگر فضای کافی ندارید ، آنها را برش دهید تا بیشترین تاثیر را داشته باشد.
    فقط از گرافیک های بردار مقیاس (SVG) استفاده کنید. اینها یک قالب فایل مبتنی بر XML برای گرافیک دو بعدی هستند که از تعامل و انیمیشن ها پشتیبانی می کند.
    شامل سه یا چند نقطه شکست (به عنوان مثال ، طراحی برای 3+ دستگاه).
    اولویت بندی و مخفی کردن محتوا متناسب با زمینه کاربران. سلسله مراتب بصری خود را بررسی کنید و از کشوهای افشای پیشرو و ناوبری استفاده کنید تا ابتدا موارد مورد نیاز را در اختیار کاربران قرار دهید. موارد غیر ضروری (برای داشتن بهینه) را ثانویه نگه دارید.
    مینیمالیسم را هدف بگیرید.
    اعمال الگوهای طراحی - برای به حداکثر رساندن سهولت استفاده برای کاربران در زمینه های آنها و افزایش آشنایی آنها: به عنوان مثال ، الگوی افت ستون محتوا را برای بسیاری از انواع صفحه متناسب می کند.
    با اندازه/سبک فونت ، دسترسی را هدف بگیرید. از کنتراست و پس زمینه به طور مثر استفاده کنید. عنوانها را حداقل 1.6 برابر بزرگتر از متن اصلی کنید. همه متن ها را پاسخگو کنید تا در این نسبت ها ظاهر شود. از آنجا که برخی از کاربران به خواننده های صفحه متکی هستند ، تمام متن خود را به جای متن درون تصاویر "واقعی" کنید.