طراحی سایت های معمولی و غیر ریسپانسیو، دلیل بر عدم نمایش سایت ها در دستگاه های مختلف نیست، بلکه سایت هم در کامپیوتر و هم در دستگاه های دیجیتال سیار نمایش داده می شود اما ممکن است برای دیدن بخشی از سایت مجبور به zoom کردن روی آن و یا طی کردن اسکرول شویم. در ادامه با روند ایجاد سایت به صورت ریسپانسیو( آموزش طراحی سایت واکنش گرا ) آشنا خواهیم شد.
درابتدا برای حل مشکل نمایش بهینه سایت در رزولوشن های متفاوت، طراحان اقدام به ایجاد قالب های مختلف برای رزولوشن های مختلف نمودند، این روش علاوه بر اینکه برای کاربران به جهت طراحی چند قالب بسیار پر هزینه بود ایرادات دیگری نیز داشت، از جمله اینکه اگر در آینده وسیله جدیدی به بازار ارائه و همه گیر می شد، باز هم می بایست هزینه ی مازادی برای ساپورت این سیستم جدید پرداخت می گردید و همچنین به سئو و رنکیگ سایت بسیار آسیب می زد.
نوشتن اپلیکیشن های موبایل هم راه حلی برای دسترسی ساده تر کاربر به بخش های مختلف سایت است، اما این روش نیز نیازمند هزینه و زمان جهت طراحی و ساخت نرم افزار است و همچنین همزمان سازی تغییرات سایت و نرم افزار تحت وب آن نیز بحث مجزایی در تخمین هزینه ها دارد.
بهترین راه برای حل این مشکل استفاده از متدهای ریسپانسیو است که با ساختن یک قالب واکنش گرا، سایت نسبت به هر رزولوشنی با دستگاه تطبیق داده می شود و نیازی به طراحی چندین قالب برای یک سایت نیست.

تفاوت سایت های ریسپانسیو با سایت های معمولی در این است که در حالت ریسپانسیو اگر یک صفحه سایت را در یک مروگر باز کنید و با گرفتن گوشه مرورگر آن را کوچک و بزرگ کنید می بینید که سایت واکنش داده و سایز آن تغییر میکند و خود را با اندازه های جدید تطبیق می دهد، در مورد سایت های غیر واکنش گرا با این کار سایت هیچ واکنشی نشان نمی دهد و فقط اسکرول های افقی و عمودی می خورد.
چگونه سایت ریسپانسیو بسازیم؟
برای ساخت صفحات ریسپانسیو احتیاج به داشتن پیش زمینه هایی در مورد css3 وhtml5 و JavaScript و استفاده از مدیا کوئریها دارید، همچنین شما نیازمند به استفاده از کامپوننت ها و فریم ورک های خاصی خواهید داشت، مانند استفاده از فریم ورک های bootstrap ،Foundation ،Skeleton ،YAML و…
در ادامه قصد ساخت یک صفحه سایت ریسپانسیو ساده را با استفاده از مدیاکوئری (media query) داریم. ما با استفاده از media query تعیین می کنیم صفحه سایت در هر دستگاهی با رزولوشن های مختلف چگونه نمایش داده شود.
به عنوان مثال با استفاده از تگ media@ تعیین می کنیم که اگر اندازه عرض رزولوشن دستگاه ۳۲۰ پیکسل باشد بک گراند صفحه سبز شود. از تگ مدیا برای ایجاد قالب ریسپانسیو استفاده می کنیم، این تگ رزولوشن دستگاه را چک میکند و بر اساس آن از کدهای اختصاصی مربوط به آن شرایط استفاده میکند. نگران نباشید برای طراحی سایت ریسپانسیو نیازی نیست به اندازه بی نهایت اندازه رزولوشن را در ذهن خود داشته باشید، این کدها بر اساس رزولوشن های استاندارد ایجاد می شوند:

سایزهای استاندارد طراحی سایت ریسپانسیو
ابعاد طراحی سایت موبایل
۳۲۰*۴۸۰ پیکسل
۳۶۰*۶۴۰ پیکسل
ابعاد طراحی سایت تبلت و دسکتاپ
۱۰۲۴*۷۶۸ پیکسل
ابعاد طراحی سایت دسکتاپ
۸۰۰*۱۲۸۰ پیکسل
۹۸۰*۱۲۸۰ پیکسل
۱۲۸۰*۶۰۰ پیکسل
۱۲۹۰*۹۰۰ پیکسل
تصور کنید هنگامی که شما در طراحی سایت برای دسکتاپ، در صفحه سه div کنار هم داشته باشید که عرض صفحه را پوشش می دهند، در نتیجه برای نمایش سایت در حالتی که رزولوشن ۳۶۰ پیکسل است، باید سه div ایجاد شده زیر هم نمایش داده شوند. برای دریافت بهترین نتیجه باید اندازه عرض عناصر (width) را با درصد (%) تنظیم نمود و نه پیکسل. یعنی در مثال گفته شده باید میزان عرض هر div به اندازه ۳۰% باشد نه ۳۰۰پیکسل. تصویر زیر گویای این موضوع است.