میزان استفاده کاربران از تلفن های هوشمند هر روز بیشتر شده و تنوع سایز و صفحه نمایش آنها گسترده تر میگردد؛ در نتیجه نمایش صحیح سایت شما به کاربران موجب جلب رضایت کاربرانی خواهد شد که با موبایل یا تبلت وارد سایت شما میشوند. همچنین براساس الگورتیم های جدید گوگل سایت هایی که مناسب موبایل یا Mobile Friendly هستند شانس بیشتری برای کسب جایگاه در نتایج گوگل خواهند داشت. این دو دلیل موجب شده است که امروزه طراحان وب سایت اهمیت و جایگاه طراحی ریسپانسیو یا واکنش گرا را درک کرده باشند و مشتریان نیز هنگام مراجعه به آنها خواهان استفاده از این قابلیت در سایت خود باشند. در مقابل طراحی قابل تطبیق در ایران زیاد استفاده نشده است و کمتر کسی به آن علاقه نشان میدهد. هردو تکنیک نمایش سایت در موبایل را بهینه سازی میکنند ولی با روش هایی کاملا متفاوت، پیش از مقایسه بهتر است هرکدام را بخوبی بشناسیم. طراحی سایت رسپانسیو یا واکنش گرا چیست؟ در طراحی سایت با تکنیک ریسپانسیو مهم نیست که سایز صفحه نمایش یا نوع دستگاه کاربر چه بوده باشد. بطور کلی طراحی ریسپانسیو روشی برای بهینه سازی نمایش سایت در موبایل با کمترین تغییر سایز صفحه توسط کاربر، منوی سریع و آسان و کمترین اسکرول شناخته میشود. این کار با استفاده از شبکه بندی شکل پذیر و استفاده از ابعاد بصورت درصدی ممکن میشود. در تکنیک طراحی سایت واکنش گرا ساختار صفحه و کدهای لود شده در همه دستگاه ها یکسان بوده و تنها نمایش آنها متفاوت است. مهم نیست سایز صفحه نمایش شما چقدر باشد، المان های مختلف صفحه ابعاد خود را براساس درصدی از این سایز تعیین میکنند. همچنین ممکن است بخش هایی از صفحه در سایزهای مختلف پنهان یا پدیدار شود. بعنوان مثال اسلایدر صفحه اصلی در موبایل ظاهر مناسبی نخواهد داشت، در نتیجه با استفاده از تکنیک طراحی ریسپانسیو آن را در سایزهای کوچک حذف خواهیم کرد. فریم ورک های بوت استرپ و متریال دیزاین را میتوان شناخته شده ترین نمونه ها از به کارگیری تکنیک طراحی ریسپانسیو و دلیل اصلی محبوبیت آن دانست.
طراحی سایت قابل تطبیق چیست؟
طراحی سایت Adaptive برخلاف طراحی Responsive از یک ساختار یکسان برای همه سایزها استفاده نمیکند، بلکه چندین ساختار متفاوت برای سایزبندی های پیش بینی شده تهیه میشود که در زمان مناسب نمایش داده خواهند شد. عموما طراح سایت برای دسکتاپ، تبلت و موبایل ساختارهای متفاوتی طراحی میکند؛ با ورود کاربر به سایت و براساس سایز صفحه نمایش تصمیم گرفته میشود که کدام چینش و طراحی باید به اون نمایش داده شود. در تکنیک طراحی قابل تطبیق به جای درصد از پیکسل و ابعاد ثابت برای هر بخش استفاده میشود.
مقایسه Responsive Design با Adaptive Design
در این بخش دو تکینک اصلی در طراحی سایت را مقایسه می کنیم تا نقاط ضعف و قوت هر یک را بهتر بشناسیم. در تصویر زیر نحوه نمایش هر دو روش با تغییر سایز صفحه نشان داده شده است. نمونه بالایی Responsive و پایینی Adaptive است.
طراحی رسپانسیو سخت و زمانبر است
اگر تکنیک طراحی ریسپانسیو را انتخاب کنید کار شما دشوارتر است. زیرا ایجاد یک ساختار واحد و کسب اطمینان از نمایش صحیح آن در همه سایزها نیازمند کدنویسی های دقیق و استفاده از دستورات پیچیده CSS است. در مقابل با بکارگیری تکنیک قابل تطبیق شما نهایتا 3 یا 4 ساختار متفاوت را برای سایت خود طراحی میکنید که میتوانید از کلاس دهی های جدید برای هرکدام بهره بگیرید. طراحی قابل تطبیق گستره کمتری را پوشش میدهد شما نهایتا 3 یا 4 سایز اصلی را طراحی میکنید در حالیکه هم اکنون تنوع سایز تلفن های هوشمند و تبلت ها بسیار زیاد شده و هر روز بر تعداد آنها افزوده میشود. هرچقدر سایز صفحه نمایش کاربر با سایز طراحی شده شما فاصله داشته باشد احتمال خطا و نمایش نادرست سایت نیز بیشتر خواهد شد. در مقابل طراحی ریسپانسیو برای هر سایز صفحه نمایشی کاربرد داشته و با تولید و معرفی گوشی های جدید نیازمند بازبینی در طراحی و کدنویسی نخواهد بود.
تکنیک طراحی ریسپانسیو سرعت سایت را افزایش میدهد
در تکنیک قابل تطبیق چندین ساختار متفاوت هنگام اتصال کاربر به سایت بررسی و لود میشوند در حالیکه در طراحی ریسپانسیو تنها یک ساختار وجود دارد. معمولا فایل استایل سایت های ریسپانسیو سنگین تر است و در مقابل زمان اولیه برای بارگذاری صفحه در طراحی قابل تطبیق بالاتر است. در نتیجه برای سایت هایی که تعداد صفحات آنها زیاد است طراحی ریسپانسیو موجب افزایش سرعت کلی سایت خواهد شد و برای سایت هایی با تعداد صفحات کمتر از 20 طراحی قابل تطبیق انتخاب بهتری خواهد بود.
تلفیق دو تکنیک در طراحی سایت
هرکدام از این دو تکنیک معایب و محاسن خود را دارند که نمیتوان از آنها چشم پوشی کرد. بهترین راه تلفیق این دو و ایجاد یک روش جدید برای بهره گیری از همه محاسن است. در تکنیک طراحی سایت ریسپانسیو معمولا هنگام طراحی بخش هایی مانند منوی سایت بسیار دشوار خواهد بود زیرا ظاهر آن بطور کلی در سایزهای متفاوت تغییر خواهد کرد. در مقابل ساختار محتوای مقالات و صفحات عموما نیازمند تغییر اساسی نیست که در تکنیک قابل تطبیق مجبور به انجام این کار و بازتولید این بخش در سایزهای گوناگون هستیم. بهترین تکنیک استفاده از طراحی ریسپانسیو است به شرطی که بخش های خاصی از صفحه مانند منوی اصلی، فوتر یا حتی هدر سایت را براساس سایز صفحه نمایش کاربر و با استفاده از تکنیک طراحی قابل تطبیق لود کنیم. در اینصورت نکات مثبت هر دو تکنیک را در سایت خود استفاده کرده ایم.
تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.
ثبت یک نظر
آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی مشخص شده اند *
ورود / ثبت نام با حساب گوگل