پنل مدیریت
  خروج
پرستو وب

طراحي وب واكنش‌گرا و تطبيقي چه تفاوت‌هايي با هم دارند؟

طراحی وب > طراحی رسپانسیو   |   نویسنده: سيد عبدالعظيم حسيني   |   تاریخ: ۱۳۹۷ پنج شنبه ۵ مهر

الگوهاي متنوع طراحي وب

به‌عنوان يك طراح وب بايد به‌خوبي از اين موضوع اطلاع داشته باشيد كه طراحي واكنش‌گرا و طراحي تطبيقي چه تفاوت‌هايي با يكديگر دارند. يك طراح وب زماني مي‌تواند در كار خود خوب ظاهر شود و به نتايج ايده‌آل‌تري دست پيدا كند كه به‌درستي بداند به‌دنبال چه نوع طرحي است. اگر به سبك و سياق طراحي‌ سايت‌ها در چند سال اخير نگاهي داشته باشيد، به‌خوبي مشاهده مي‌كنيد كه طراحي واكنش‌گرا رويكردي است كه يك روند رو به رشد دارد و اغلب شركت‌ها و حتي كاربران ترجيح مي‌دهند از اين الگو براي سايت‌هاي خود استفاده كنند. با اين حال، نكته‌اي كه نبايد از آن غافل شويم اين است كه اين تكنيك طراحي وب مشكلات خاص خود را دارد كه همين موضوع طراحان وب را به فكر مي‌اندازد تا رويكرد جايگزين ديگري به‌نام طراحي تطبيقي را به وجود آورند. اما پرسشي كه اغلب از سوي شركت‌ها و حتي طراحان مطرح مي‌شود اين است كه چگونه مي‌توانيم الگوي درست را در اين زمينه انتخاب كنيم؟ اين پرسشي است كه در نظر داريم در اين مقاله به آن پاسخ دهيم.


فراگير شدن و تنوع گوشي‌هاي هوشمند باعث شده است تا طراحان وب مجبور شوند ابعاد و اندازه صفحه ‌نمايش گوشي‌ها را در زمان طراحي سايت‌ها به‌دقت مورد بررسي قرار دهند. اين چالشي است كه طراحان وب و همچنين طراحان برنامه‌هاي كاربردي با آن روبه‌رو هستند. 
از مانتيورهاي غول ‌پيكر گرفته تا ساعت‌هاي هوشمند، امروزه راهكارهاي متنوعي در اختيار كاربران قرار دارد تا به‌شكل آنلاين به اطلاعات مورد نياز خود دست پيدا كنند. طراحاني كه به‌دنبال آن هستند تا سايت‌هاي خود را به‌گونه‌اي آماده كنند تا روي انواع مختلفي از دستگاه‌ها به‌درستي به نمايش درآيد، مجبور هستند از ميان دو الگوي طراحي واكنش‌گرا يا تطبيقي يكي را انتخاب كنند. (شكل 1)
نكته‌اي كه لازم است به آن اشاره داشته باشيم اين است كه هنوز هم سردرگمي‌هايي درباره تفاوت‌هاي طراحي واكنش‌گرا و تطبيقي وجود دارد. البته اين تفاوت‌ها براي افرادي كه تازه به دنياي طراحي وب وارد شده و هيچ‌گونه تجربه‌اي در اين زمينه نداشته‌اند ممكن است چندان محسوس نباشد، اما يك طراح وب كهنه‌كار به‌خوبي مي‌داند كه هريك از اين مدل‌ها چه تفاوت‌هايي با يكديگر دارند. 


شكل 1

طراحي واكنش‌گرا

اولين سايتي كه بر مبناي يك طرح سازگار با عرض مرورگرها كار خود را آغاز كرد سايت Audi.com بود كه نخستين بار در سال 2001 ميلادي به فضاي مجازي وارد شد. در سال 2008 ميلادي بود كه واژه‌هايي شبيه به انعطاف‌پذيري، شناور بودن و ارتجاعي بودن به دنياي طراحي وب وارد شد. اما اصلاح طراحي واكنش‌گرا اولين بار از سوي طراح و توسعه‌دهنده معروف وب ايتان ماركت در كتابش به‌نام Responsive Web Design مورد بررسي قرار گرفت. طراحي‌هاي واكنش‌گرا به تغيير اندازه در عرض مرورگرها واكنش نشان داده و عناصر موجود در صفحه را متناسب با فضاي آزاد در دسترس تنظيم مي‌كنند. يك سايت واكنش‌گرا محتوا را بر مبناي فضاي آزاد در دسترس مرورگرها نشان مي‌دهد. (شكل 2) اگر شما يك سايت واكنش‌گرا را روي دسكتاپ باز كنيد و در ادامه اندازه پنجره مرورگر را تغيير دهيد، محتوا و عناصر به‌شكل پويا دومرتبه چينش مي‌شوند (حداقل به‌لحاظ تئوري اين‌گونه است) تا محتوا به‌شكل بهينه‌ شده‌اي در پنجره مرورگر قرار گيرد. در گوشي‌هاي موبايل اين فرآيند به‌شكل خودكار انجام مي‌شود، سايت فضاي در دسترس را بررسي و در ادامه خود را با ايده‌آل‌ترين حالت هماهنگ مي‌كند. طراحي واكنش‌گرا يك تكنيك پياده‌سازي مستقيم است و بر مبناي رويكرد طراحي شناور (fluid) كار مي‌كند. اين حرف به اين معنا است كه كاربران مي‌توانند متناسب با دستگاهي كه از آن استفاده مي‌كنند و درست مشابه با حالتي كه پشت يك مانيتور بزرگ قرار گرفته‌اند، به محتواي شما دسترسي داشته باشند. در اين حالت طراح به‌جاي آنكه از مقادير ثابت براي آرايش عناصر استفاده كند، با مقادير پويا كار مي‌كند. در نتيجه در طراحي واكنش‌گرا با مقاديري همچون پيكسل و پوينت سر و كار نداريم، بلكه طراحي ما بر مبناي واحدهاي نسبي همچون درصد است. مقادير پويا به شما اجازه مي‌دهند بدون هيچ مشكل خاصي با كوچك‌ترين و بزرگ‌ترين صفحه ‌نمايش‌ها كار كنيد. در كنار به‌كارگيري واحدهاي نسبي شما بايد از انعطاف‌پذير نيز استفاده كنيد. به ‌طوري كه محتواي چندرسانه‌اي نيز بايد با واحدهاي نسبي به نمايش درآيد. اگر نسبت به اين موضوع بي‌توجه باشيد، محتواي چندرسانه‌اي از عنصري كه براي نمايش آن در نظر گرفته شده بيرون مي‌زند. فراموش نكنيد كه در طراحي واكنش‌گرا دو عامل مديا كوئري‌هاي CSS3 و نقاط شكست نيز نقش كليدي دارند. مديا كوئري‌ها به يك صفحه اجازه مي‌دهند از قواعد سبك‌بندي مختلف CSS بر مبناي ويژگي‌هاي ذاتي دستگاهي كه در حال نمايش يك سايت است استفاده كند. همچنين فراموش نكنيد كه به‌عنوان يك طراح وب بايد به‌شكل درستي اطلاعات لازم در ارتباط با نيازها و درخواست‌هاي كاربران نهايي را در اختيار داشته باشيد. 


شكل 2

طراحي تطبيقي

طراحي وب تطبيقي اولين بار در سال 2011 ميلادي از سوي آرون گاستافسون در كتابش تحت عنوان:

Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement 

معرفي شد. طراحي واكنش‌گرا بر تغييرات الگوي طراحي به‌منظور دستيابي به حداكثر تناسب ممكن اشاره دارد، در حالي كه در طراحي تطبيقي شما با طرح‌هاي چندگانه اما با اندازه ثابت سر و كار داريد. در اين طرح زماني كه سايتي فضاي آزاد در دسترس را شناسايي كرد، مناسب‌ترين طرح ممكن براي صفحه ‌نمايش را انتخاب مي‌كند. در نتيجه زماني كه شما در مرورگر دسكتاپي خود سايتي را باز مي‌كنيد، سايت بهترين لايه ممكن براي نمايش روي صفحه دسكتاپ را نشان مي‌دهد. در اين حالت زماني كه اندازه مرورگر را تغيير مي‌دهيد، هيچ تأثيري روي طراحي به وجود نخواهد آمد. بعضي از سايت‌ها به‌سرعت رويكرد طراحي تطبيقي را قبول كردند و آن ‌را به كار گرفتند. آمازون، اپل، About.com و... از جمله شركت‌هايي بودند كه خودشان را با اين الگوي طراحي هماهنگ كردند و به پيكربندي مجدد سايت‌هاي خود پرداختند، به ‌طوري كه سايت‌ها با رويكرد بهينه‌سازي ‌شده براي موبايل در اختيار كاربر نهايي قرار گيرد. نكته‌اي كه بايد به آن توجه داشته باشيد اين است كه طرح به نمايش درآمده از يك سايت موبايلي كه بر پايه طراحي تطبيقي طراحي شده ممكن است متفاوت از نسخه دسكتاپي آن باشد. به‌واسطه آنكه طراحان از يك لايه متفاوت براي صفحه ‌نمايش موبايل استفاده و در نتيجه براي چينش عناصر از بازطراحي متفاوت استفاده كرده‌اند. در طراحي تطبيقي مرسوم است كه شش طرح براي شش صفحه ‌نمايش با عرض‌هاي 320، 480، 760، 960، 1200 و 1600 پيكسل آماده كنيد. 

طراحي برنامه‌هاي موبايل مستقل

گزينه ديگري براي ساخت سايت‌ها وجود دارد كه در اين رويكرد سايت‌ها تنها براي گوشي‌هاي موبايل طراحي مي‌شوند. اگر به نشاني اينترنتي اين‌گونه سايت‌ها نگاهي داشته باشيد، پيشوند m. را به‌خوبي مشاهده مي‌كنيد. اين حالت طراحي نيز رويكرد جذابي است. برخي طراحان تمايل دارند تا سايت‌هايي را مختص دستگاه‌هاي موبايلي طراحي كنند، به‌ طوري كه عناصر و طرح‌بندي در قالب يك فرمت اختصاصي آماده ‌شود. در گذشته گوگل رتبه‌بندي خاصي براي اين سايت‌ها در نظر مي‌گرفت، اما امروزه با سايت‌هاي واكنش‌گرا، تطبيقي و سايت‌هاي ويژه دستگاه‌هاي همراه به يك شكل برخورد مي‌كند. عيب بزرگي كه اين رويكرد دارد در اين است كه شما نياز داريد يك سايت جدا را طراحي كنيد كه اين موضوع فرآيند ويرايش و نگهداري سايت را بيش از پيش سخت مي‌كند. به‌واسطه آنكه شما بايد دو نسخه از يك سايت را به‌طور مستمر مورد بازرسي و ويرايش قرار دهيد. دليل قابل قبولي براي به‌كارگيري چنين روشي نمي‌توان ارائه كرد و همچنين قابليت‌هاي خاصي نيز در چند سال اخير به اين تكنيك افزوده نشده است. در نتيجه بعيد به نظر مي‌رسد در آينده نيز شاهد تحول خاصي در اين زمينه باشيم.

كدام‌يك را انتخاب كنيم؟ طراحي تطبيقي يا واكنش‌گرا؟

طراحي واكنش‌گرا ساده‌تر است و براي پياده‌سازي به كار كمتري نياز دارد. در اين مدل شما كمتر نياز داريد تا روي اندازه هر صفحه ‌نمايش متمركز شويد. سايت‌هاي واكنش‌گرا به‌واسطه آنكه از استانداردهاي خاصي استفاده مي‌كنند از حجم بيشتري از كدها برخوردار هستند، همين موضوع باعث مي‌شود تا سرعت بارگذاري سايت‌ها كمي كند شود، حتي در شرايطي كه نياز داشته باشيد حجم كمي از اطلاعات يك سايت را مورد استفاده قرار دهيد. اين مشكل در تجربه كاربري چندان خوشايند نيست. همچنين، اگر به‌دنبال آن باشيد تا سايتي پيچيده را بر مبناي اين مدل طراحي كنيد، ممكن است مجبور شويد هزينه بيشتري پرداخت كنيد. اين احتمال وجود دارد كه بتوانيد از طريق قالب‌هاي ارزان‌ قيمت موجود در دسترس كه در اكثر سامانه‌هاي مديريت محتوا همچون وردپرس، جوملا و... وجود دارد، چنين سايتي را به‌سادگي طراحي كنيد. در اين حالت چه كسي دوست دارد چرخ را دوباره اختراع كند؟ طراحان سايت‌هاي واكنش‌گرا طرح واحدي را ايجاد مي‌كنند كه روي همه صفحه ‌نمايش‌ها به كار گرفته شده و مديا كوئري‌ها را براي تعيين تنظيماتي كه براي دستيابي به تفكيك‌پذيري بالا و پايين نياز است مورد استفاده قرار مي‌دهند. مهم‌ترين مزيت اين مدل در يكپارچگي و يكسان بودن نمايش محتوا روي دستگاه‌هاي مختلف متمركز است كه خود يك امتياز مثبت در زمينه تجربه كاربري به شمار مي‌رود. در اين مدل بايد سعي كنيد عناصر را به‌شكل درستي در تمام صفحه قرار دهيد و پخش كنيد. اين حرف به‌معناي آن است كه نياز داريد سايت خود را روي دستگاه‌هاي متعددي آزمايش كرده تا به مطلوب‌ترين طرح ممكن دست پيدا كنيد. 
اگر طراحي يك سايت نسبتاً ساده است، ممكن است به‌خوبي روي همه صفحه ‌نمايش‌ها نشان داده شود. يكي از مهم‌ترين دلايلي كه باعث مي‌شود شركت‌ها به‌سمت اين حالت طراحي متمايل شوند به مبحث سئو بازمي‌گردد. سايت‌هايي كه از طراحي واكنش‌گرا استفاده مي‌كنند (يك نشاني اينترنتي كه براي همه دستگاه‌ها مورد استفاده قرار مي‌گيرد)، به‌تازگي مورد توجه موتورهاي جست‌وجو قرار گرفته‌اند. طراحي واكنش‌گرا به نظر مي‌رسد اكنون به‌شكل جدي مورد توجه طراحان و سايت‌ها قرار گرفته است. با وجود اين، بهتر است به اين موضوع توجه داشته باشيد با توجه به اينكه سايت‌ شما روي دستگاه‌هاي مختلف به نمايش درمي‌آيد و متناسب با اندازه صفحه ‌نمايش‌ها تنظيم مي‌شود، در نتيجه اين احتمال وجود دارد كه تبليغات به‌درستي نشان داده نشوند و در عمل تبليغات به‌شكل صحيح از فضاي در دسترس استفاده نكنند. بايد به تفاوت زمان بارگذاري يك سايت واكنش‌گرا روي دستگاه‌هاي موبايل و دسكتاپ نيز توجه داشته باشيد. انعطاف‌پذيري تصاوير موضوع بسيار مهم ديگري است كه بايد مورد توجه قرار گيرد. يك طرح بزرگ ممكن است به‌سرعت روي صفحه ‌نمايش عريض كامپيوتر شخصي يا دفتر به نمايش درآيد، اما در مقابل براي باز شدن روي گوشي موبايل به زمان (و داده‌هاي) بيشتري نياز داشته باشد. در نتيجه شايد ارائه يك پيش‌نمايش ويژه نسخه موبايلي راهكار مناسبي در اين زمينه باشد. (شكل 3) اما در طرف ديگر داستان طراحي تطبيقي وجود دارد كه به‌لحاظ تئوري اين اطمينان خاطر را به شما مي‌دهد كه بهترين تجربه كاربري را زماني كه كاربر با دستگاه‌هاي مختلف كار مي‌كند، در اختيار او قرار مي‌دهيد. برعكس طراحي واكنش‌گرا كه يك صفحه از يك طراحي دسكتاپي به درون يك دستگاه كوچك‌تر وارد مي‌شود، در طراحي تطبيقي شما يك راه‌ حل متفاوت در اختيار داريد. همان طور كه از نام اين مدل مشخص است، در اين طرح فرآيند تطبيق بر اساس قابليت‌ها و نيازهاي كاربر تعديل مي‌شود. 

به‌عنوان يك طراح شما مي‌توانيد به كاربران نشان دهيد به آن‌ها احترام مي‌گذاريد و متناسب با دستگاه موبايلي كه در حال استفاده از آن هستند يك رابط كاربري دوستانه را در اختيار آن‌ها قرار مي‌دهيد. در همين حال، مي‌توانيد كاربران دسكتاپ را نيز در اختيار داشته باشيد. در اين مدل شما شش طرح را در قالب استاندارد در اختيار داريد، اما بسته به داده‌هاي كاربري ممكن است به طرح‌هاي بيشتري نياز داشته باشيد. يك طراحي تطبيقي قدرتمند يك تجربه كاربري دلپذير را در اختيار كاربران قرار مي‌دهد، در حالي كه طراحي واكنش‌گرا مبتني بر دسكتاپ است. اغلب كاربران با دستگاه‌هاي هوشمندي كه در اختيار دارند احساس راحتي مي‌كنند. ما تمايل داريم دستگاه‌هاي هوشمندي كه از آن‌ها استفاده مي‌كنيم به‌درستي درك كنند كه در حال انجام چه كاري هستيم. شما مي‌توانيد به‌منظور نمايش بهتر تبليغات طراحي تطبيقي را بهينه‌سازي كنيد. به‌واسطه آنكه شما براي تفكيك‌پذيري‌هاي مختلف طراحي مي‌كنيد، در نتيجه مي‌توانيد به نيازهاي خاص كاربران نيز جامع عمل بپوشانيد. متمركز شدن بر رفتار كاربران و در ادامه طراحي دقيق آگهي‌ها و نمايش درست آن‌ها رويكردي است كه طراحي تطبيقي به‌خوبي از عهده انجام آن برمي‌آيد. آمارها نشان مي‌دهند سايت‌هاي تطبيقي چيزي حدود 2 تا 3 برابر سريع‌تر از سايت‌هاي واكنش‌گرا هستند و به داده‌هاي كمتري در زمان بارگذاري نياز دارند كه همين موضوع روي تجربه كاربري تأثير محسوسي مي‌گذارد. طراحي تطبيقي مزاياي قدرتمند خاص خود را دارد. با وجود مزاياي متعدد، طراحي تطبيقي معايبي نيز دارد. اول آنكه در مقايسه با طراحي واكنش‌گرا به كار بيشتري نياز دارد. به همين دليل اكثر طراحي‌هاي تطبيقي به‌منظور تكميل سايت‌هاي موجود و با هدف دسترسي دستگا‌ه‌‌هاي مختلف به يك سايت مورد استفاده قرار مي‌گيرند. دوم اينكه طراحي‌هاي تطبيقي ممكن است در ميانه راه كاربر را به حال خود رها كنند. كاربران تبلت يا نوت‌بوك ممكن است مورد توجه قرار نگيرند، به‌واسطه آنكه امروزه تمركز اصلي طراحان روي كاربران دسكتاپ و گوشي‌هاي هوشمند قرار دارد. در نتيجه مهم است كه يك لينك براي رفتن از يك نسخه به نسخه ديگر در اختيار كاربران قرار دهيد. سرانجام، در حالي كه عملكرد بات‌هاي مورد استفاده از سوي موتورهاي جست‌وجو در مقايسه با گذشته بهتر بوده و به‌خوبي مي‌توانند تفاوت ميان سايت‌هاي .com و m.com را تشخيص دهند، اما هنوز هم اكثر موتورهاي جست‌وجو اين دو نشاني‌ اينترنتي را به يك شكل رتبه‌بندي نمي‌كنند. در نتيجه اين احتمال وجود دارد كه يك طراحي تطبيقي بر سئو شما تأثير منفي بگذارد. توجه داشته باشيد كه گوگل نيز همانند كاربران، سايت‌هايي كه به‌سرعت بارگذاري مي‌شوند را دوست دارد. 

درنهايت

در مجموع بايد بگوييم انتخاب يك طراحي واكنش‌گرا يا تطبيقي به توجه و بررسي دقيق نياز دارد. در حالي كه در ظاهر ممكن است منطقي به نظر برسد كه طراحي واكنش‌گرا به‌لحاظ كاهش هزينه‌ها گزينه ايده‌آل‌تري است، سئو را بهبود مي‌بخشد و يك تجربه كاربري بدون مشكل را ارائه مي‌كند، اما بررسي مزايا و معايب اين دو طرح كاملاً ضروري است. طراحي تطبيقي مي‌تواند به بيشتر نيازهاي كاربران پاسخ دهد و در مقابل تغييرات نيز انعطاف‌پذير باشد. جمله معروفي است كه مي‌گويد: «جانوراني كه در يك گونه زنده مي‌مانند لزوماً قوي يا باهوش نيستند، بلكه آن‌ها كه در مقابل تغييرات انعطاف‌پذيرتر هستند ماندگارند.» درباره محصول يا سرويس خود فكر كنيد. آيا كاربران شما در يك محيط خاص از آن استفاده مي‌كنند؟ از چه رويكردي براي مشاركت و آگاه‌سازي آن‌ها استفاده مي‌كنيد؟ به ياد داشته باشيد كه تنها گوشي‌هاي موبايل نيستند كه به‌مرور زمان هوشمند مي‌شوند. در خانه‌ها و ادارات نيز ما بيش از يك كامپيوتر دسكتاپ سنتي داريم. اكنون طيف گسترده‌اي از دستگاه‌هاي هوشمند كه تحت عنوان اينترنت اشيا از آن‌ها نام مي‌بريم قرار دارند. اين محيطي است كه اشيا به‌سرعت آن‌ را پر خواهند كرد. ما مجبور هستيم طراحي خود را متناسب با اين تجهيزات پياده‌سازي كنيم.


تدوين و گردآوري:azim hoseiny

 

 




کلمات کلیدی
 طراحي     واكنش گرا     تطبيقي     طراحي وب     responsive     adaptive     Design     
12

خدمات و محصولات

طراحی وبسایت

سئو و بهینه سازی

سیستم اتوماسیون اداری

پرتال های سازمانی

سامانه پیام کوتاه

تماس با ما

پست الکترونیک: ParastoTeam@gmail.com

آدرس: قم - خیابان معلم - مجتمع ناشران -

طبقه چهارم- دفتر تیم برنامه نویسی پرستو

تلفن: 9195423622 98 +

تمامی حقوق این سایت متعلق به تیم برنامه نویسی پرستو بوده و محفوظ می باشد.