فرض کنید وب سایت شما تنها در مرورگرهای رایج توسط کامپیوترهای شخصی به درستی نمایش داده شود. حال اگر برخی بازدیدکنندگان سایت شما از تبلت و یا موبایل های هوشمند امروزی برای مشاهده سایت شما استفاده کنند و صفحات وب سایت شما به درستی نمایش داده نشوند طبیعتا این دسته از بازدیدکنندگان از سایت شما خارج می شوند و این به معنی از دست دادن این بازدیدکنندگان و حتی در برخی مواقع مشتریان خواهد بود.
طراحان وب سایت در طراحی سایت با استفاده از ترکیب برخی موارد در CSS و ترکیب آنها با جداول شناور (Fluid Grid) میتوانند طراحی سایت خود را به صورتی طراحی کنند که در تمامی وسایل و تجهیزات به درستی نمایش داده شوند و این یعنی طراحی واکنشی (طراحی سایت ریسپانسیو) و یا همان Responsive Web Design که در مورد آن صحبت میکنیم.
معمولا در این نوع طراحی بزرگترین مشکل نمایش صحیح تصاویر در مرورگرها و تجهیزات مختلف با صفحه نمایش های متفاوت است. اما شما با استفاده از دستورات نمایش به صورت کامل مانند: max-width میتوانید این کار را انجام دهید. در واقع تصاویر شما همواره در اندازه واقعی خود نمایش داده میشوند مگر آنکه در فضای کوچکتری قرار گیرند.
در روش Responsive شما میتوانید فایل های CSS گوناگونی را برای نمایش سایت بر روی دستگاه های مختلف فراخوانی کنید. به عنوان مثال برای نمایش بر روی موبایل یک فایل CSS و برای نمایش در یک دستگاه دیگر از یک نوع فایل CSS دیگر استفاده نمایید.
نمایش در گوشی موبایل در حالت معمولی و بعد از لمس منو (منو از سمت چپ به داخل باز می شود)