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

امروزه افراد صفحات وب را با دستگاه های مختلف مانند موبایل ها، تپلت ها، لپ تاپ ها، مانیتور ها مشاهده می کنند. صفحه نمایش ریسپانسیو صفحه ای است که در همه دستگاه ها به خوبی نمایش داده شود.

صفحه وب واکنش گرا یا ریسپانسیو چیست؟
Article مجازی

امروزه افراد صفحات وب را با دستگاه های مختلف مانند موبایل ها، تپلت ها، لپ تاپ ها، مانیتور ها مشاهده می کنند. صفحه نمایش ریسپانسیو صفحه ای است که در همه دستگاه ها به خوبی نمایش داده شود.

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

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

اما امروزه به لطف فریمورک ها و چارچوب های محبوبی مانند bootstrap، foundation، Montage، Gumby، semantic UI و ... می توان صفحات وبی طراحی نمود که در همه دستگاه ها به خوبی و بدون به هم ریختگی نمایش داده شوند.

محبوب ترین آنها  فریمورک بوت استرپ نسخه 4 می باشد. برای یادگیری آن می توانید به دوره آموزش بوت استرپ که در راهیناب تهیه شده است مراجعه کنید.

اکثر این چارچوب های آماده مانند بوت استرپ از قوانین و امکانات css مانند media query ها، روش های لایه بندی در css مانند flex box و ... برای تولید صفحات وب ریسپانسیو استفاده می کنند. به این صورت که براساس اندازه عرض صفحه نمایش قوانین مختلفی از css را به صفحه اعمال می کنند.

/* Base Styles */
style rules
/* Mobile Styles */
@media only screen and (max-width: 480px) {
style rules
}
/* Tablet Styles */
@media only screen and (min-width: 481px) {
style rules
}
/* Desktop Styles */
@media only screen and (min-width: 769px) {
style rules
}

بنابراین نحوه نمایش صفحه در موبایل و تپلت که دارای صفحات نمایش با اندازه متفاوتی هستند فرق می کند طوری که در هر دو حالت به خوبی دیده شوند.

حتما سایت های فروشگاهی را مشاهده کردید که در مانیتور محصولات در چهار ستون کنار هم نمایش داده می شوند، اما اگر همان صفحه را در موبایل باز کنیم محصولات زیر هم نمایش داده می شوند.

 

 

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

برای طراحی وب ریسپانسیو می توانید مستقیما از css و مفاهیم آن استفاده کنید و یا می توانید کار خود را راحت تر کرده و از فریمورک های محبوبی مانند بوت استرپ استفاده کنید.

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

 

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

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

توسعه وب / Bootstrap