english

طراحی واکنش گرا یا انطباق گرا ؟

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

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

 

 

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

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

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

  • طراحی انطباق گرا

 

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

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

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

به طور کلی، یک طراح باید طرح بندی های متفاوتی  برای هر کدام از شش عرضی که بیشترین استفاده را دارند طراحی کند. این طراحی شامل بازه ی مطلوب و مناسبی از سایزها میباشد از جمله کوچکترین دستگاه های موبایل تا عریض ترین صفحه نمایش: 320px, 480px, 760px, 960px, 1200px, 1600px .

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

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

  • تصمیم بگیرید کدام را برای وب سایت تان استفاده کنید

 

 

انطباق گرا

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

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

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

واکنش گرا

اگر در حال طراحی اولیه ی یک وب سایت هستید، بهتر است از طراحی واکنش گرا استفاده کنید.آن هم به این منظور که به همه کاربران این اطمینان را بدهید که تجربه کاربری خوبی خواهند داشت.

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

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

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

  • انتخاب با شماست

 

 

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