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

حدود سه سال از تولد طراحی ریسپانسیو یا واکنش گرا گذشته و همانطور که انتظار می رفت در این مدت روند رشد خوبی داشته و کم کم طراحان به این متد روی آورده اند. اما هنوز هم هستند کسانی که در مقالات یا معرفی پروژه های خود بین طراحی انطباقی (Adaptive) و طراحی واکنش گرا (Responsive) دچار سردرگمی می شوند.

توجه: این دو یکی نیستند!

با اینکه اهداف این دو یکسان است اما تفاوت اصلی میان طراحی انطباقی و واکنش گرا در تجربه کاربری آنها در گوشی های هوشمند و تبلت ها است. سیالیت و لاادریگری (Fluidity and Agnosticismدستگاه اساس کار طراحی واکنش گرا است. در حالیکه طراحی انطباقی با تعریف عرض ثابت بسته به عرض دستگاه، عمل می کند. ممکن است این عقیده درست نباشد، اما به نظر می رسد طراحی انطباقی تفلید سطحی ای از طراحی واکنش گرا باشد.

شاید بهترین راه برای نشان دادن تفاوت این دو دیدن مثال های زنده و بررسی کدها باشد:

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

مثال: سایت Smashing Magazine

این سایت بدلیل استفاده از خاصیت درصد دهی، بدون محدودیت در عرض و کاملاً سیال است. کافی است گوشه سمت چپ پنجره را تغییر اندازه دهید تا متوجه موضوع شوید. اگر تاکنون از ۳۲۰andUp استفاده کرده باشید این ساختار برای شما آشنا خواهد بود.

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

طراحی انطباقی:

مثال: سایت Simon Collison

کد زیر نشان می دهد که هسته اصلی فریم ورک  Skeleton (یک فریم ورک انطباقی) چگونه کار می کند.

.container {
width: 700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.container {
width: 420px;
}
}
@media only screen and (max-width: 767px) {
.container {
width: 300px;
}
}

همانطور که می بینید. رویکرد طراحی انطباقی container های صلب بوده که یک احساس دگم و غیرمنعطف را به کاربر نهایی منتقل کرده و باعث می شود محتوا در container هایی با عرض ثابت قفل شده و به عرض های متغیر واکنش نشان ندهند.

در حالیکه هر دو طراحی از media query بهره می برند، طراحی واکنش گرا از آن برای معرفی تغییرات عرض و طراحی انطباقی برای تعریف عرض های مشخص استفاده می کند. به عنوان مثال در فریم ورک Skeleton کمترین عرض تبلت ۷۶۸px تعریف شده است. در این صورت هر تبلت (یا گوشی هوشمند بزرگی) که کمی از این اندازه کمتر باشد مجبور است مشخصاتی که برای دستگاهی کوچکتر تعریف شده است به ارث ببرد.

سایت  screensiz.es طول و عرض و سایر مشخصات تلفن های هوشمند و تبلت ها را در جدولی گرد هم آورده است. به دستگاه های زیر که عرضی کمتر از ۷۶۸px دارند توجه کنید:

  • Galaxy Tab 1 & 2
  • BlackBerry PlayBook
  • Kindle Fire, 1st Gen.
  • Nook Tablet
  • Microsoft Surface
  • BlackBerry Q10
  • Galaxy SIII
  • Galaxy Nexus
  • Galaxy Note II

در صورتیکه سایت ما انطباقی باشد کاربر نمایشی باریک از محتویات سایت را خواهد دید. به عبارت دیگر ضعف در تجربه کاربری! برخی از دستگاه های بالا سایت های انطباقی را با حداکثر ۶۰% عرض اصلی نشان می دهند! خیلی مضحک است! نه؟

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

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

*منبع

1 نظر طراحی انطباقی ≠ طراحی واکنش گرا

  1. AmirGT

    سلام
    مقاله خوبی بود.
    دقیقا این موضوع در بین عزیزان طراح و توسعه دهنده پرمدعای ایرانی هم دیده می شود :)

    پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *