طراحی سایت پارالاکس

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

طراحی سایت با روش پارالاکس

در ابتدا بگذارید کمی دقیق تر به این وبسایت ها بپردازیم و نحوه پیاده سازی روش پارالاکس را بگوییم. این روش از طراحی سایت کاملا به حرکت نشانگر موس شما بستگی دارد و افکت های مختلفی با انواع حرکت موس به نمایش میگذارد. این افکت ها میتواند، حرکت از چپ به راست و بالعکس، حرکت از بالا به پایین، زوم و… باشد. برای اینکه بتوانید یک وبسایت پارالاکس طراحی کنید اول باید به HTML5 ، CSS3 ، Jquery مسلط باشید. البته به یک طراح گرافیست حرفه ای هم نیاز خواهید داشت. البته اگر سایت شما یک سایت وردپرسی باشد میتوانید افزونه هایی برای این نوع از طراحی پیدا کنید و آنها را روی وبسایت خود نصب کنید. البته طراحی سایت پارالاکس روش های متفاوتی دارد اما یکی از روش ها پر کاربرد استفاده از attribute (ویژگی) data-[name]=yourdata است که برنامه نویسان front end با آن آشنایی دارند. در این روش [name] متغیری است که شما تعریف میکنید و your data میزان آن متغیر میباشد. به عنوان مثال اگر میخواهید با این attribute متغیر سرعت را تغیر دهید میتوانید به این شکل عمل کنید data-speed=”20” . در لینک زیر میتوانید نمونه هایی از بهترین سایت های طراحی شده به روش پارالاکس را مشاهده کنید :

https://webflow.com/blog/parallax-scrolling

مزایای طراحی سایت پارالاکس

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

کاهش bonce rate (نرخ پرش)

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

افزایش time on page

Time on page یا زمان سپری شده در یک صفحه از سایت از دیگر فاکتور های بسیار مهم برای یک وبسایت به شمار می‌آیند. Time on page هر چقدر بالا باشد به معنی این است که کاربر تعامل بیشتری با صفحه شما داشته و مایل است زمان بیشتری را در صفحه سپری کند. Time on page هم به مانند bounce rate یکی از فاکتور های مهمی است که برای موتور جستجو به خصوص موتور جستجوی گوگل ارزشمند است و وبسایت ها را با آن میسنجد. طراحی سایت پارالاکس باعث میشود زمان سپری شده کاربر در صفحه شما افزایش یابد زیرا این طراحی ها جلوه بصری بسیار عالی ای دارند و عموما افراد آنها را دوست دارند و زمان بیشتری را به مشاهده کردن صفحه میپردازند.

معایب طراحی سایت پارالاکس

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

سنگین شدن حجم صفحه

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

تاثیر روی سئو سایت

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

 معمولا توصیه میشود برای سایت های فروشگاهی و شرکتی از طراحی پارالاکس استفاده نشود و برای سایت های تک صفحه ای و سایت های معرفی یا شخصی از این مدل طراحی ها استفاده شود. سرعت صفحات اهمیت بسیار زیادی برای رنک دادن توسط گوگل میباشد در این روش طراحی به دلیل تایم لود بالا سرعت لود صفحات زیاد میشوند. در بسیاری از موارد بیشتر از 3 ثانیه زمان بردن لود صفحه باعث میشود بسیاری از کاربران صفحه را ترک کنند؛ البته ما گفتیم که طراحی پارالاکس تاثیر مثبتی روی bounce rate میگذارد اما به شرطی که صفحه کند نباشد و زود بارگذاری شود.

سخن پایانی

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