طراحی وب سایت پاسخگو (RWD)، در روش طراحی وب سایت با هدف ارائه طرح بندی صفحه وب انعطاف پذیر بودن آن را به ارائه مشاهده ای مطلوب در سراسر طیف گسترده ای از دستگاه می باشد. RWD اجازه می دهد تا برای خواندن آسان و ناوبری بر روی انواع دستگاه های مختلف با اندازه های متفاوت - از مانیتور رومیزی بزرگ به صفحه نمایش تلفن همراه - با حداقل مقدار از تغییر اندازه می باشد. به جای ساخت سایت های مختلف برای انواع دستگاه های متعدد، RWD به طراحان اجازه می دهد برای ایجاد یک وب سایت که پاسخ به هر نوع دستگاهی که آن را در دسترس قرار می دهند و خروجی مناسبی را ارائه می کند.
از آنجا که ایجاد وب، به کاربران با دید کم راه را برای تغییر اندازه متن بدون اضافه کردن اسکرول افقی به صفحه می دهند. علاوه بر این، اندازه های غیر ثابت باعث می شود متن با هم تداخل پیدا کنند و یا زمانی که متن یک صفحه وب تغییر اندازه شده است، موجب قطع آن شود. به طور مشابه، جداول و صفحات غیر سیال استفاده می شود که منجر به پخش کردن محتوای علت مسائل مربوط به مطالعه برای کاربران از خوانندگان صفحه نمایش می شود. یکی از اندازه های متناسب برای همه سایت ها را می توان به نیازهای کاربران معلول دانست که مناسب آنها نیست. اصول طراحی پاسخگو، از جمله پوسته های سیال، به نفع کاربران معلول بر روی دسکتاپ و همچنین در دستگاه های تلفن همراه می باشد.
RWD موثر با استفاده از پاسخگو (چند طرح بندی شبکه سیال) به جای تطبیق (چند طرح بندی عرض ثابت) طراحی می شود. طراحی وب سایت پاسخگو را مورد هدف عرض مرورگر وب قرار می دهند که به هر کاربر مقدار فضای در دسترس را تعیین می کنند و چگونگی آن در وب سایت نمایش داده می شود. نقاط شکست قطعنامه قرار است تا با هدف قرار دادن محدوده ای که تعریف انواع خاصی از صفحه نمایش داده شود. به عنوان مثال، یک مجموعه ای از CSS استفاده شده است که عرض صفحه نمایش بیشتر یا کمتر از یک اندازه خاص است.
@media all and (max-width:480px){
#container{
// styles here
}
در دسامبر 2012یک پست RWD، وبلاگ خبری اینترنت 2013 مشیبل به نام "سال طراحی وب سایت پاسخگو" در بخش های بزرگ با توجه به افزایش فروش دستگاه هایی مانند تبلت و گوشی های هوشمند باعث تغییر عمده ای در چگونگی مصرف کنندگان در حال مشاهده وب سایت های آنها نموده است. مشیبل پیش بینی کرده بود که تا پایان سال 2013، بیش از 50 درصد از ترافیک وب سایت خود را از دستگاه های تلفن همراه ی باشد. کاربران دارای معلولیت نیز به دستگاه های تلفن همراه مانند آیفون و آی پد هجوم آوردند و همچنین گوشی های هوشمند و تبلت های اندرویدی گوگل طراحی شدند. این سیستم عامل تلفن همراه حاوی مرورگرهای قابل دسترس و حمایت از ویژگی ها و فن آوری های کمکی بودند. تعیین کنندگان قوانین در ایالات متحده (مانند CVAA) برای اطمینان از دسترسی به خدمات ارتباطی پیشرفته (ACS) دستگاه های تلفن همراه کمک کردند.
با هزاران دستگاه های مختلف برای دسترسی به اینترنت، طراحی برنامه های بومی، به تمام کسانی که از سیستم عامل استفاده می کنند همیشه امکان پذیر نیست. علاوه بر این، بسیاری از کاربران به سادگی ترجیح می دهند تا از یک مرورگر به جای یک برنامه استفاده کنند. با توجه به مطالعات انجام شده در آینده، اخبار تلفن همراه توسط مرکز تحقیقات پیو در اکتبر 2012 منتشر شده بود، حدود 60 درصد از تبلت و تلفن های هوشمند کاربران ترجیح می دادند به استفاده از مرورگر خود برای دسترسی به اخبار در دستگاه های خود بپردازند. به طور مشابه، کاربران دارای معلولیت خاص سایت های جداگانه ای به منظور دسترسی به محتوای آن نمی خواهند. وب سایت های طراحی شده می توانند پاسخگو به دستگاه کاربر و همچنین نیازهای کاربر باشند. به عنوان مثال، تکنیک های مرتبط مانند افزایش روزافزون و ارائه تدریجی مشترک در دستگاه های تلفن همراه و کاربران ناتوان صورت می گیرد.
چهار مولفه های کلیدی در طراحی وب سایت پاسخگو وجود دارد:
رسانه ها ی نمایش داده شده و پرس و جوی رسانه های شنوندگان - کمک می کند تا یک دستگاه تصمیم بگیرید که چگونه برای مشاهده وب سایت به اندازه صفحه نمایش بستگی دارد.
انعطاف پذیری مبتنی بر طرح شبکه - با استفاده از اندازه نسبی، این اجازه را می دهد محتوای آن به تغییر اندازه و تنظیم مجدد به عنوان عرض صفحه بر اساس درصدی از یک شبکه صفحه وب انبساط و انقباض پیدا کند.
تصاویر انعطاف پذیر و رسانه ها، از طریق تغییر اندازه پویا و یا CSS انجام می شود.
ایجاد درگاه نمایشی
هر یک از اجزای فوق می تواند بر دسترسی صفحه ، تاثیر داشته باشند.
رسانه های نمایش داده شده می تواند مورد استفاده برای CSS های مختلف بر اساس خواص دستگاه ارائه شود. CSS یک نوع رسانه برای "شنیداری" است و همچنین رسانه خط "بریل" نیز وجود دارد. با این حال، این دو نوع رسانه ها، به خوبی توسط مرورگرها و فن آوری های کمکی پشتیبانی نمی شوند. به طور کلی، هر چند تطبیق سایت به اندازه دستگاه با استفاده از نقاط توقف کاربرانی که نیاز به بزرگنمایی و کمک به کاهش میزان زوم مورد نیاز است. علاوه بر این، سفارشی کردن مقدار در سایت بر اساس عرض دستگاه یک بیشتر متمرکز از محتوا برای کاربران دارای معلولیت تضمین خواهد کرد.
در طراحی ترقی دادن محتوای سیال، هنگامی که آن را تغییر اندازه می دهند و کمک می کنند تا برای اطمینان از سفارش خواندن صحیح آن صورت گیرد. پوسته های سیال که تمایل به ارائه محتوا در جهت مشخصی در مدل سند شی (DOM) به نظر می رسد. این همان جهتی است که خوانندگان صفحه نمایش ارائه محتوا را به کاربران نابینا یا کم بینا می دهند. پوسته های سیال نیز برای اندازه نسبی محتوا و ظرفیت آن اجازه می دهد متن و محتوای آن به بزرگی و به طور خودکار تغییر محتوای دیگر را به پایین صفحه تماس قرار دهد. بیش ترین مرورگرهای رومیزی مدرن قابلیت زوم کردن بزرگ تمام صفحه (نه فقط متن) را دارند که قادر به حرکت دادن آنها نیز هستند. در حالی که این امکان را فراهم می کند که دسترسی به آن بسیاری از پیمایش های افقی را انتشار می نماید. با بزرگنمایی بیشتر نیاز موثری به یک واحد طرح سیال بر اساس آنچه گفته شده است را دارد. کاربران با دید کمی به این موضوع می توانند از این برای آموزش مرورگر دسکتاپ خود " تنها تغییر اندازه متن " هنگامی که یک فرمان زوم ظاهر می شود بهره مند شوند. در تئوری شنونده رسانه ممکن است برای تشخیص تغییرات در یک دستگاه و به روز رسانی طراحی آن مورد استفاده قرار گیرد. در حال حاضر برای تغییر طرح سایت زمانی که کاربر از حالت عمودی به حالت افقی در دستگاه تلفن همراه تغییر می کند استفاده می شود اما مفهوم آن می تواند به چک کردن برای مقیاس کاربر در دستگاه های تلفن همراه استفاده شود.
استفاده از تصاویر انعطاف پذیر اجازه می دهد تصاویر را به اندازه در این منطقه تغییر داد و در دسترس آنها قرار داد. این اجازه را می دهد تا تصاویر را به فضای بیشتری داد اگر آن را در دسترس مطالب دیگر به همپوشانی داد ، اگر اتاق کمتری در دسترس داشته باشد.