دیجیتال مارکتینگ و سئو

طراحی ریسپانسیو یا انطباق پذیر؟

طراحی سایت ریسپانسیو بهتره یا برابری پذیر

در مقالات قبلی وبسیما فوت وفن طراحی سایت ریسپانسیو یا همون Responsive Design رو به شما معرفی کردیم اینجا می خوایم این روش رو با روش طراحی برابری پذیر یا همون Adaptive Design مقایسه کنیم.

برهیچ کس پوشیده نیس که اندازه استفاده کاربران از تلفنای هوشمند هر روز بیشتر شده و تنوع اندازه و صفحه نمایش اونا گسترده تر میشه؛ در نتیجه نمایش درست سایت شما به کاربران موجب جلب رضایت کاربرانی می شه که با موبایل یا تبلت وارد سایت شما می شن. هم اینکه براساس الگورتیمای جدید گوگل سایتایی که مناسب موبایل یا Mobile Friendly هستن شانس بیشتری واسه کسب جایگاه در نتایج جستجوی گوگل دارن.

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

مقایسه responsive design و adaptive

طراحی سایت رسپانسیو چیه؟

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

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

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

طراحی سایت انطباقی چیه؟

طراحی سایت Adaptive برخلاف طراحی Responsive از یه ساختار برابر واسه همه سایزها استفاده نمی کنه، بلکه چندین ساختار متفاوت واسه سایزبندیای پیش بینی شده جفت و جور میشه که در زمان مناسب نشون داده می شن.

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

مقایسه Responsive Design با Adaptive Design

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

مقایسه طراحی ریسپانسیو و انطباقی

طراحی رسپانسیو سخت و زمانبره

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

طراحی انطباقی وسعت کمتری رو پوشش می ده

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

فوت وفن طراحی ریسپانسیو سرعت سایت رو افزایش می ده

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

ترکیب دو فوت وفن در طراحی سایت

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

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