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

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

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

ابعاد طراحی سایت موبایل
320*480 پیکسل
360*640 پیکسل
ابعاد طراحی سایت تبلت و دسکتاپ
1024*768 پیکسل
ابعاد طراحی سایت دسکتاپ
800*1280 پیکسل
980*1280 پیکسل
1280*600 پیکسل
1290*900 پیکسل

تصور کنید هنگامی که شما در طراحی سایت برای دسکتاپ، در صفحه سه div کنار هم داشته باشید که عرض صفحه را پوشش می دهند، در نتیجه برای نمایش سایت در حالتی که رزولوشن 360 پیکسل است، باید سه div ایجاد شده زیر هم نمایش داده شوند. برای دریافت بهترین نتیجه باید اندازه عرض عناصر (width) را با درصد (%) تنظیم نمود و نه پیکسل. یعنی در مثال گفته شده باید میزان عرض هر div به اندازه 30% باشد نه 300پیکسل. تصویر زیر گویای این موضوع است.

قطعه کد زیر را در نظر بگیرید(در مثال زیر ساده ترین روش آموزش طراحی سایت ریسپانسیو بیان شده است):

در این قطعه گفته شده که اگر اندازه مرورگر از 500 پیکسل بزرگتر باشد رنگ پس زمینه سبز و در غیر این صورت قرمز باشد. یعنی شما با کوچک و بزرگ کردن مرورگر باید این تغییرات را مشاهده کنید. همانطور که گفته شد برای نوشتن یک سایت ریسپانسیو احتیاج به استفاده از کتابخانه ها و کامپوننت های خاصی خواهید داشت. اصلی ترین نیازمندی صفحه واکنش گرا این است که سایت شما قابلیت رندر شدن در دستگاه های با رزولوشن های دیگر را داشته باشد، استفاده از تگ viewport سایت را قابل رندر شدن در سایزهای مختلف می نماید. بدون این تگ مرورگرها صفحه سایت شما را با اندازه 980 رندر می کنند.

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

کد مثال بالا را در نظربگیرید، برای ساخت نمونه سایت ریسپانسیو، در بخش head سایت، کد زیر را وارد کنید(مانند مثال):

meta name="viewport" content="width=device-width, initial-scale=1.0" 
        

همانطور که می بینید در بخش content می توانید شرایط مختلفی را جهت نمایش سایت تعیین کنید.

width=device-width به مرورگر دستور میدهد که عرض صفحه سایت را با عرض گوشی یکسان کند، یعنی اگر سایت در گوشی موبایل با اندازه 360 دیده شود، سایت نسبت به این اندازه واکنش نشان داده و عرض آن به 360 تغییر میکند. این متغیر حتی امکان دریافت مقدار عددی را هم دارد.

میزان zoom پیش فرض مرورگر را تعیین می کند، ممکن است بر اساس نوع سایت، طراح بخواهد هنگام نمایش سایت در یک دستگاه به صورت پیش فرض در حالت zoom دوبرابر یا غیره قرار داشته باشد. در حالت پیش فرض زووم روی 1 تنظیم شده است.

امکان zoom کردن روی سایت را به صورت کلی می توان با استفاده از این متغیر به بازدید کننده داد (yes) و یا کلا زووم را غیر فعال نمود (no)

میزان حداکثر زومی که کاربر می تواند روی سایت داشته باشد.

در قطعه کد بالا از خاصیت media@ برای دریافت عرض نمایشگر استفاده شده است، همانطور که میبینید این کد در بخش استایل در هدر سایت نوشته شده است. در حقیقت دو امکان برای تعیین خصوصیت های نمایش سایت وجود دارد.
مثال بالا ساده ترین مثال برای ساخت صفحه وب با استفاده از تکنولوژی ریسپانسیو است. همانطور که در ابتدای مقاله گفته شد روش های متفاوتی برای طراحی سایت  ریسپانسیو وجود دارد که بر اساس نوع برنامه نویسی سایت و عوامل موثر دیگر قابل استفاده هستند. برای تست کد ریسپانسیو بالا اینجا را کلیک کنید و صفحه نمایش داده شده را با کوچک و بزرگ کردن مرورگر خود تست کنید.