طراحی واکنش گرا

طراحی واکنش گرا, پیشرو وب, طراحی سایت در کرج, طراحی وب سایت در کرج, طراحی سایت
طراحی سایت واکنش گرا یا Responsive Web Design ، یعنی طراحی سایت بصورتی که در موبایل های هوشمند ، تبلت ها و… ، بتوان سایت را به طور صحیح و بدون مشکل مشاهده کرد.

روش های طراحی سایت واکنش گرا
بطور کلی برای ایجاد قابلیت واکنش گرایی در سایت می توان از روش های متفاوتی استفاده کرد:

1- استفاده از مدیا کوئری media query@ در css :
در این روش در هنگام کدنویسی سایت پارامترهای طول و عرض عناصر موجود در صفحه وب را طوری تعیین می کنیم که با استفاده از رزولوشن صفحه نمایش هر عنصر تغییر حالت بدهد و در نهایت سایت به طور صحیح نمایش داده شود. به عنوان مثال در صفحه نمایشی که دارای رزولوشن ۱۰۸۰ پیکسل است اسلایدر سایت در ابعاد ۷۰۰ در ۲۰۰ پیکسل نمایش داده می شود.

حال با استفاده از مدیا کوئری های css اسلایدر را در رزولوشن ۷۲۰ پیکسل در ابعاد ۴۰۰ در ۲۰۰ به نمایش می گذاریم و برخی از عناصر صفحه سایت را که ضرورتی در نمایش شان وجود ندارد مخفی می کنیم.

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

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

در این باره بیشتر بخوانید…

2- طراحی قالب برای دستگاه های متفاوت :
در این روش برای هر دستگاه (کامپیوتر ، تبلت ، موبایل و…) یک قالب جدا طراحی می شود و برای هر کاربری ، با توجه به دستگاهی که از آن برای نمایش سایت استفاده کرده است قالب مورد نظر اجرا می شود.

از مزایای این روش می توان به بهینه بودن سایت هم از نظر رابط کاربری و هم از نظر سرعت بارگذاری اشاره کرد و از معایب آن فرآیند پیچیده برنامه نویسی سایت. افزایش زمان طراحی وب سایت ، افزایش هزینه نسبت به استفاده از css برای واکنش گرایی ، اشاره کرد.

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