امروز قصد داریم با یک روش بسیار ساده با نحوه ریسپانسیو یا واکنشگرا کردن یک صفحه وب سایت آشنا شویم.طراحی صفحه ریسپانسیو یکی از مشکلاتی است که اکثر افرادی که به تازگی قدم به این حوضه گذاشته اند با آن مواجه هستند ما در این آموزش سعی کردیم به سادهترین شکل ممکن طراحی صفحه ریسپانسیو یا واکنشگرا را به شما همراهان کدفرند آموزش دهیم.

اما طراحی صفحه ریسپانسیو یا سایت واکنشگرا چیست؟

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

امروزه کاربران از نمایشگرهای مختلف در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند. بنابراین سایتی میتواند در فضای وب موفق باشد که بتواند به همه کاربران مراجعه کننده به سایت خدمات مناسب ارائه دهد و نمایش سایت به صورت کامل باشد .

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

مزایای سایت های ریسپانسیو:

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

با همه این توصیفات مطمئنا با مزایایی طرای یک صفحه ریسپانسیو آشنا شدید.پس شروع کنیم به یادگیری نحوه واکنشگرا کردن یک صفحه وب سایت به ساده ترین شکل.

برای اینکه بتوانید یک قالب واکنشگرا طراحی کنید باید با نحوه استفاده از متا تگ viewport و مدیا کوئری ها آشنا باشید.که ما در طول دو  آموزش مجزا به صورت کامل با آنها آشنا شدیم.برای طراحی ریسپانسیو ابتدا باید متا تگ viewport را به سورس وب سایت خود اضافه کنید و سپس به سراغ فایل CSS بروید و مدیا کوئری ها را به این فایل اضافه کنید.

قالب را باید برای چه دستگاههای طراحی کرد؟

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

Phones: <768px
Tablets: ≥۷۶۸px
Medium Desktops: ≥۹۹۲px
Large Desktops: ≥۱۲۰۰px

علامت های کوچکتر(>)برای نمایش اندازه کمتر از ۷۶۸px و علامت بزرگتر(<)برای نمایش اندازه بیشتر از ۷۶۸px استفاده می شود.

چگونه عناصر وب سایت را در دستگاههای مختلف نمایش دهیم؟

برای اینکه بتوانید پهنای عناصر صفحات وب سایت را در دستگاههای مختلف مدیریت کنید باید از max-width و min-width استفاده کنید.به عنوان مثال اگر یک تگ Div با آی دی Codefriend در سورس وب سایت شما وجود دارد، به کمک کد زیر می توانید عرض این تگ را در گوشیهای موبایل به گونه ای تنظیم کنید که همواره در وسط صفحه نمایش داده شود و اگر ابعاد گوشی کوچک تر از ۷۶۷px باشد، ابعاد این تگ متناسب با ابعاد گوشی تغییر کند:

@media screen and (max-width: 767px) { 
#codefriend { width: 100%; margin:0 auto; } 
}

حال اگر بخواهید این تگ را در تبلتها در سمت راست نمایش دهید باید یک مدیا کوئری دیگر اضافه کنید و استایل آن را به این صورت تعیین کنید:

@media screen and (min-width: 768px) and (max-width: 991px){
#codefriend { width: 150px; float: right; }
}

تمامی این مثالی های که در بالا ذکر شد برای این بود که شما با نحوه واکنشگرایی یک عنصر در css آشنا شوید.ما به شما توصیه میکنیم برای اینکه بهتر با ویژگی های مختلف سی اس اس بتوانید کار کنید از دوره آموزشی رایگان مقدماتی و پیشرفته Css , Css3 استفاده کنید.