morvahost
August 27th, 2014, 12:22
پارالکس جزء جدیدترین تکنیک‌ها در طراحی وب است که درون بسیاری از وب‌سایت‌ها از قبیل Awwwards و theFWA به چشم می‌خورد. برخی از نویسندگان مقالات عنوان می‌کنند که طراحی پارالکس با اصول اساسی سئو همخوانی ندارد و ایدئال موتورهای جستجو نیست. موضوع این است که پارالکس فقط یک تکنیک طراحی وب است و درصورتی‌که به شکل صحیح پیاده‌سازی شود، می‌تواند کاملاً برای موتورهای جستجو ایدئال باشد. در ادامه لیستی از سایت‌های پارالکسی ارائه می‌کنیم که اتفاقاً تمامی‌شان کاملاً با اصول سئو همگام هستند؛ با بررسی چنین وب‌سایت‌هایی می‌توانید با این تکنیک در سایه سئو آشنا بشوید.
http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites01.png (http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites01.png)
تعریف پارالکس و ریشه آن
طراحی پارالکس ابتدا در صنعت بازی‌های ویدئویی و به‌عنوان یک تکنیک “جلوه‌های ویژه” مطرح شد تا مخاطبان بازی‌ها، عمق تصویر را احساس کنند. تعریف ویکی‌پدیا از پارالکس به این صورت است:
“طراحی پارالکس نوعی تکنیک خاص برای حرکت درون صفحه در برنامه‌های گرافیکی کامپیوتری است که در آن دوربین تصاویر پس‌زمینه را قدری آهسته‌تر حرکت می‌دهد تا بیننده تصور کند تصویر عمق پیداکرده است.”
سایت CreativeBloq که از فعالان حوزه طراحی وب است هم این تعریف را ارائه کرده: “یکی از محبوب‌ترین تکنیک‌های طراحی وب در حال حاضر روش پارالکس است که در آن تصویر پس‌زمینه نسبت به تصاویری که بر روی آن قرارگرفته‌اند با سرعت کمتری حرکت می‌کند تا نوعی افکت سه‌بعدی ایجاد شود. چنین تکنیکی شاید در ابتدا گیج‌کننده به نظر برسد، اما درصورتی‌که به شکل صحیح اجرا شود، می‌تواند عمق جالبی به تصویر ببخشد.”
در حقیقت در طراحی پارالکس، لایه‌ها با سرعت مختلفی حرکت می‌کنند و کاری به ساختار وب یا طراحی یک صفحه خاص نداریم.
روش‌های رایج فعلی
تکنیک پارالکس را بار اول، ایان کویل در سال ۲۰۱۱ بر روی سایت کمپانی نایک پیاده‌سازی کرد و این روزها توانسته طرفداران خاص خودش را پیدا کند.
http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites02.png (http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites02.png)
اکثر سایت‌های پار الکسی با اصول سئو همخوانی ندارند
باید ببینیم دلیل این ادعا چیست؟ اینکه بیشترشان از اصول سئو پیروی نمی‌کنند، دلیل خوبی نیست که نتیجه بگیریم نمی‌توانند پیروی کنند. مثال‌های زیر را در نظر بگیرید:
۲۰ سایت برتر ۲۰۱۳ با طراحی پارالکس
۳۵ سایت نمونه با طراحی پارالکس
سایت های پارالکسی Awwwards
بسیاری از این سایت‌ها معماری وب تک‌صفحه‌ای دارند، درنتیجه بسیاری از افراد دچار سوءتفاهم شده‌اند که طراحی پارالکس فقط به سایت‌های تک‌صفحه‌ای محدود می‌شود.
اما چطور می‌توان تکنیک‌های پارالکس و سئو را باهم تلفیق کرد؟
چطور یک سایت پار الکسی طراحی کنیم که موتورهای جستجو هم دوستش داشته باشند؟ قبل از هر چیز باید چند نکته را در نظر داشته باشیم:
• طراحی پارالکس نوعی تکنیک طراحی است که لایه‌های مختلف محتوا، عکس یا تصاویر پس‌زمینه را با سرعت‌های مختلف حرکت می‌دهد.
• اصول اساسی سئو مثل تهیه schema، تعبیه آدرس داخل فوتر و … در این حالت هم کاربرد دارند. بهتر است کار را با یک معماری سئوپسند شروع کنید و در مرحله آخر، طراحی را بر روی معماری اعمال کنید.
• تکنیک پارالکس برای نسخه‌های موبایلی سایت‌ها چندان ایدئال نیست؛ سایت را بیش‌ازحد سنگین می‌کند و بهتر است از نسخه‌های موبایلی حذف شود.
در حالت کلی سه تکنیک وجود دارد؛ مثال‌های زیر وب‌سایت‌های پارالکسی را معرفی می‌کند که کاملاً یا تا حدود زیادی با اصول سئو همگام هستند:
تکنیک #۱: طراحی سایت “تک‌صفحه‌ای” با استفاده از Jquery:
این فایل آموزشی را کوین الن، متخصص ارشد سئوی کمپانی iProspect آماده کرده و در آن نحوه تلفیق سئو و پارالکس را با استفاده از Jquery توضیح داده است؛ این تکنیک سایت‌های تک‌صفحه‌ای پارالکسی را به نحوی دست‌کاری می‌کند که برای موتورهای جستجو هم ایدئال بشوند. ازآنجاکه تعداد سایت‌های پارالکسی تک‌صفحه‌ای خیلی زیاد است، این تکنیک را اول‌ازهمه معرفی کردم. توجه داشته باشید که سایتی که کوین مثال زده واقعاً پارالکسی نیست؛ چون آیتم‌ها را با سرعت‌های مختلف حرکت نمی‌دهد؛ بااین‌وجود این مثال را هم در لیست قراردادم چون می‌توانیم تکنیکش را بر روی بسیاری از سایت‌های پارالکسی تک‌صفحه‌ای اعمال کنیم.
وبلاگ مدیران وب گوگل هم اخیراً مقاله‌ای تحت عنوان طراحی نامتناهی همگام با موتورهای جستجو منتشر کرده و مسائل مطرح‌شده در مقاله کوین را با جزئیات بیشتری موردبررسی قرار داده است. پیشنهاد می‌کنم حتماً هر دو مقاله را مطالعه کنید.
درواقع در این تکنیک از قابلیت “PushState” در Jquery استفاده می‌کنیم تا صفحه موردنظر به چند بخش تفکیک شود و هرکدام با URL و متادیتای منحصربه‌فرد خودشان داخل صفحات نتایج جستجو ظاهر بشوند. درنتیجه یک صفحه مشخص به ازای بخش‌های مختلف محتوا چند بار اندیس گذاری می‌شود.
مزایا: برای سایت‌های پارالکسی تک‌صفحه‌ای که تمایل دارند تکنیک‌های سئو را اجرا کنند، گزینه بسیار مناسبی است؛ سایت‌های کوچکی که چندان به عملکرد سایتشان بها نمی‌دهند هم می‌توانند بر روی همین تکنیک منعطف باشند.
معایب: عملکرد ضعیف سایت؛ ازآنجاکه حرکت داخل سایت و چک کردن محتوا واقعاً سریع اتفاق می‌افتد، کاربران مدت بسیار کمی داخل سایت باقی می‌مانند که برای سایت نکته مثبتی نیست.
FlowerBeauty.com
این سایت هم هرچند با تعریف سایت‌های پارالکسی همخوانی ندارد، بااین‌وجود از تکنیک طراحی نامتناهی Jquery استفاده می‌کند. FlowerBeauty.com به کاربران امکان می‌دهد داخل کل سایت یا URL های مختلف آن بچرخند. درنتیجه ازآنجاکه لایه‌های مختلف را با سرعت‌های مختلف حرکت نمی‌دهد، جزء دسته‌بندی سایت‌های پارالکسی قرار نمی‌گیرد، ولی ازآنجاکه کاملاً به چشم می‌آید، داخل لیست قرارگرفته است.
تکنیک #۲: طراحی پارالکسی سایت‌های چندصفحه‌ای بر روی معماری سئو
این تکنیک واقعاً ساده است: کار را با معماری سئوی سایت شروع می‌کنیم و افکت‌های طراحی پارالکس را بر روی هرکدام از URL های سئو اعمال می‌کنیم. واندا انگلین هم مقاله کاملی دراین‌باره نوشته است.
وب‌سایت xDawson (که جزء معدود سایت‌های چندصفحه‌ای پارالکسی منطبق بر اصول سئو است)، ابتدا معماری سئو را کامل کرده (درواقع حتی بیش‌ازحد لازم بهینه‌سازی شده!) و بعدازآن تکنیک پارالکس را بر روی URL های داخلی‌اش اعمال کرده است. البته باوجوداینکه لایه‌ها با سرعت‌های مختلف حرکت می‌کنند، بیننده احساس نمی‌کند تصویر عمق دارد یا یک داستان متحرک می‌بیند. درنتیجه هرچند جزء دسته‌بندی سایت‌های پارالکسی قرار می‌گیرد، بااین‌حال تکنیک را به آن صورت که امروز مرسوم شده به کار نمی‌برد.
مزایا: عملکرد صفحه را بهبود می‌دهد؛ چون هر URL محتوای مخصوص به خودش را دارد. پیاده‌سازی‌اش هم راحت است.
معایب: حجیم بودن طراحی پارالکسی، زمان بارگذاری صفحات را بیشتر از حد معمول می‌کند. ممکن است بیش‌ازحد تعامل‌گرا به نظر برسد. طراحی جداگانه برای هرکدام از URL ها نسبتاً گران از آب درمی‌آید و طراحی را پیچیده می‌کند.
یک پیشنهاد: به‌جای اینکه تمام صفحات را به‌صورت پارالکسی طراحی کنید، بعضی از صفحه‌های دلخواه را با این تکنیک، به شکل متفاوت طراحی کنید تا سایت در کل طبیعی‌تر به نظر برسد و زمان بارگذاری هم کمتر شود. به‌علاوه هزینه‌های طراحی هم کاهش پیدا می‌کنند و سایت کمی انعطاف‌پذیرتر می‌شود.
Kickpoint.com
این سایت هم فقط صفحه نخست و یکی از صفحات داخلی‌اش (صفحه سرویس‌ها) را به‌صورت پارالکس طراحی کرده است.
مزایا: عملکرد مناسب صفحه و طراحی و پیاده‌سازی آسان
معایب: معماری سئو به‌صورت ۱۰۰% پیاده‌سازی نشده، ملاحظه می‌کنید که صفحه سرویس‌ها، بخش‌های SEO، PPC، SMM و بازاریابی محتوا در URL های منحصربه‌فرد با عنوان و متاتگ مخصوص قرار نگرفته‌اند.
یک پیشنهاد: بهتر است محتوای صفحه سرویس‌ها را تفکیک کنند یا به کمک تکنیک شماره ۲ از Jquery استفاده کنند. هر بخش باید عنوان و متاتگ خاص خود را داشته باشد.
تکنیک #۳: معماری معمولی سئو و طراحی پارالکسی صفحه نخست سایت
Spotify.com
در تکنیک بعدی فقط صفحه نخست سایت را به‌صورت پارالکس طراحی می‌کنند و سایر URL ها را که با اصول سئو همگام هستند، به حال خودشان رها می‌کنند.
مزایا: سایت سبک و انعطاف‌پذیر می‌شود؛ طراحی سایت در این حالت ساده‌تر است و نسبت به تکنیک شماره ۱ هزینه‌های کمتری به دنبال دارد.
معایب: خلاقیت چندانی به خرج نمی‌رود و سایت چندان تعامل‌گرا نمی‌شود.
اما این راه‌حل‌ها واقعاً تعارض موجود بین سئو و پارالکس را حل می‌کنند؟
به نظر می‌رسد همین‌طور باشد! به‌شخصه هم به اصول سئو التزام عملی دارم و هم دوست دارم با تکنیک‌های طراحی وب مثل پارالکس، ظاهر سایتم را زیباتر کنم و تا حد ممکن خلاقیت به خرج بدهم. امیدوارم به کمک مجموعه تکنیک‌ها و وب‌سایت‌هایی که مثال زدیم، بتوانید هر دو اصل را به‌خوبی باهم تلفیق کنید. یادتان باشد پارالکس صرفاً یک تکنیک طراحی سایت است که به‌راحتی قابل‌اعمال بر روی تمامی معماری‌های وب است…
http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites01.png (http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites01.png)
تعریف پارالکس و ریشه آن
طراحی پارالکس ابتدا در صنعت بازی‌های ویدئویی و به‌عنوان یک تکنیک “جلوه‌های ویژه” مطرح شد تا مخاطبان بازی‌ها، عمق تصویر را احساس کنند. تعریف ویکی‌پدیا از پارالکس به این صورت است:
“طراحی پارالکس نوعی تکنیک خاص برای حرکت درون صفحه در برنامه‌های گرافیکی کامپیوتری است که در آن دوربین تصاویر پس‌زمینه را قدری آهسته‌تر حرکت می‌دهد تا بیننده تصور کند تصویر عمق پیداکرده است.”
سایت CreativeBloq که از فعالان حوزه طراحی وب است هم این تعریف را ارائه کرده: “یکی از محبوب‌ترین تکنیک‌های طراحی وب در حال حاضر روش پارالکس است که در آن تصویر پس‌زمینه نسبت به تصاویری که بر روی آن قرارگرفته‌اند با سرعت کمتری حرکت می‌کند تا نوعی افکت سه‌بعدی ایجاد شود. چنین تکنیکی شاید در ابتدا گیج‌کننده به نظر برسد، اما درصورتی‌که به شکل صحیح اجرا شود، می‌تواند عمق جالبی به تصویر ببخشد.”
در حقیقت در طراحی پارالکس، لایه‌ها با سرعت مختلفی حرکت می‌کنند و کاری به ساختار وب یا طراحی یک صفحه خاص نداریم.
روش‌های رایج فعلی
تکنیک پارالکس را بار اول، ایان کویل در سال ۲۰۱۱ بر روی سایت کمپانی نایک پیاده‌سازی کرد و این روزها توانسته طرفداران خاص خودش را پیدا کند.
http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites02.png (http://blog.morvahost.com/wp-content/uploads/2014/07/Parallax-Scrolling-Websites02.png)
اکثر سایت‌های پار الکسی با اصول سئو همخوانی ندارند
باید ببینیم دلیل این ادعا چیست؟ اینکه بیشترشان از اصول سئو پیروی نمی‌کنند، دلیل خوبی نیست که نتیجه بگیریم نمی‌توانند پیروی کنند. مثال‌های زیر را در نظر بگیرید:
۲۰ سایت برتر ۲۰۱۳ با طراحی پارالکس
۳۵ سایت نمونه با طراحی پارالکس
سایت های پارالکسی Awwwards
بسیاری از این سایت‌ها معماری وب تک‌صفحه‌ای دارند، درنتیجه بسیاری از افراد دچار سوءتفاهم شده‌اند که طراحی پارالکس فقط به سایت‌های تک‌صفحه‌ای محدود می‌شود.
اما چطور می‌توان تکنیک‌های پارالکس و سئو را باهم تلفیق کرد؟
چطور یک سایت پار الکسی طراحی کنیم که موتورهای جستجو هم دوستش داشته باشند؟ قبل از هر چیز باید چند نکته را در نظر داشته باشیم:
• طراحی پارالکس نوعی تکنیک طراحی است که لایه‌های مختلف محتوا، عکس یا تصاویر پس‌زمینه را با سرعت‌های مختلف حرکت می‌دهد.
• اصول اساسی سئو مثل تهیه schema، تعبیه آدرس داخل فوتر و … در این حالت هم کاربرد دارند. بهتر است کار را با یک معماری سئوپسند شروع کنید و در مرحله آخر، طراحی را بر روی معماری اعمال کنید.
• تکنیک پارالکس برای نسخه‌های موبایلی سایت‌ها چندان ایدئال نیست؛ سایت را بیش‌ازحد سنگین می‌کند و بهتر است از نسخه‌های موبایلی حذف شود.
در حالت کلی سه تکنیک وجود دارد؛ مثال‌های زیر وب‌سایت‌های پارالکسی را معرفی می‌کند که کاملاً یا تا حدود زیادی با اصول سئو همگام هستند:
تکنیک #۱: طراحی سایت “تک‌صفحه‌ای” با استفاده از Jquery:
این فایل آموزشی را کوین الن، متخصص ارشد سئوی کمپانی iProspect آماده کرده و در آن نحوه تلفیق سئو و پارالکس را با استفاده از Jquery توضیح داده است؛ این تکنیک سایت‌های تک‌صفحه‌ای پارالکسی را به نحوی دست‌کاری می‌کند که برای موتورهای جستجو هم ایدئال بشوند. ازآنجاکه تعداد سایت‌های پارالکسی تک‌صفحه‌ای خیلی زیاد است، این تکنیک را اول‌ازهمه معرفی کردم. توجه داشته باشید که سایتی که کوین مثال زده واقعاً پارالکسی نیست؛ چون آیتم‌ها را با سرعت‌های مختلف حرکت نمی‌دهد؛ بااین‌وجود این مثال را هم در لیست قراردادم چون می‌توانیم تکنیکش را بر روی بسیاری از سایت‌های پارالکسی تک‌صفحه‌ای اعمال کنیم.
وبلاگ مدیران وب گوگل هم اخیراً مقاله‌ای تحت عنوان طراحی نامتناهی همگام با موتورهای جستجو منتشر کرده و مسائل مطرح‌شده در مقاله کوین را با جزئیات بیشتری موردبررسی قرار داده است. پیشنهاد می‌کنم حتماً هر دو مقاله را مطالعه کنید.
درواقع در این تکنیک از قابلیت “PushState” در Jquery استفاده می‌کنیم تا صفحه موردنظر به چند بخش تفکیک شود و هرکدام با URL و متادیتای منحصربه‌فرد خودشان داخل صفحات نتایج جستجو ظاهر بشوند. درنتیجه یک صفحه مشخص به ازای بخش‌های مختلف محتوا چند بار اندیس گذاری می‌شود.
مزایا: برای سایت‌های پارالکسی تک‌صفحه‌ای که تمایل دارند تکنیک‌های سئو را اجرا کنند، گزینه بسیار مناسبی است؛ سایت‌های کوچکی که چندان به عملکرد سایتشان بها نمی‌دهند هم می‌توانند بر روی همین تکنیک منعطف باشند.
معایب: عملکرد ضعیف سایت؛ ازآنجاکه حرکت داخل سایت و چک کردن محتوا واقعاً سریع اتفاق می‌افتد، کاربران مدت بسیار کمی داخل سایت باقی می‌مانند که برای سایت نکته مثبتی نیست.
FlowerBeauty.com
این سایت هم هرچند با تعریف سایت‌های پارالکسی همخوانی ندارد، بااین‌وجود از تکنیک طراحی نامتناهی Jquery استفاده می‌کند. FlowerBeauty.com به کاربران امکان می‌دهد داخل کل سایت یا URL های مختلف آن بچرخند. درنتیجه ازآنجاکه لایه‌های مختلف را با سرعت‌های مختلف حرکت نمی‌دهد، جزء دسته‌بندی سایت‌های پارالکسی قرار نمی‌گیرد، ولی ازآنجاکه کاملاً به چشم می‌آید، داخل لیست قرارگرفته است.
تکنیک #۲: طراحی پارالکسی سایت‌های چندصفحه‌ای بر روی معماری سئو
این تکنیک واقعاً ساده است: کار را با معماری سئوی سایت شروع می‌کنیم و افکت‌های طراحی پارالکس را بر روی هرکدام از URL های سئو اعمال می‌کنیم. واندا انگلین هم مقاله کاملی دراین‌باره نوشته است.
وب‌سایت xDawson (که جزء معدود سایت‌های چندصفحه‌ای پارالکسی منطبق بر اصول سئو است)، ابتدا معماری سئو را کامل کرده (درواقع حتی بیش‌ازحد لازم بهینه‌سازی شده!) و بعدازآن تکنیک پارالکس را بر روی URL های داخلی‌اش اعمال کرده است. البته باوجوداینکه لایه‌ها با سرعت‌های مختلف حرکت می‌کنند، بیننده احساس نمی‌کند تصویر عمق دارد یا یک داستان متحرک می‌بیند. درنتیجه هرچند جزء دسته‌بندی سایت‌های پارالکسی قرار می‌گیرد، بااین‌حال تکنیک را به آن صورت که امروز مرسوم شده به کار نمی‌برد.
مزایا: عملکرد صفحه را بهبود می‌دهد؛ چون هر URL محتوای مخصوص به خودش را دارد. پیاده‌سازی‌اش هم راحت است.
معایب: حجیم بودن طراحی پارالکسی، زمان بارگذاری صفحات را بیشتر از حد معمول می‌کند. ممکن است بیش‌ازحد تعامل‌گرا به نظر برسد. طراحی جداگانه برای هرکدام از URL ها نسبتاً گران از آب درمی‌آید و طراحی را پیچیده می‌کند.
یک پیشنهاد: به‌جای اینکه تمام صفحات را به‌صورت پارالکسی طراحی کنید، بعضی از صفحه‌های دلخواه را با این تکنیک، به شکل متفاوت طراحی کنید تا سایت در کل طبیعی‌تر به نظر برسد و زمان بارگذاری هم کمتر شود. به‌علاوه هزینه‌های طراحی هم کاهش پیدا می‌کنند و سایت کمی انعطاف‌پذیرتر می‌شود.
Kickpoint.com
این سایت هم فقط صفحه نخست و یکی از صفحات داخلی‌اش (صفحه سرویس‌ها) را به‌صورت پارالکس طراحی کرده است.
مزایا: عملکرد مناسب صفحه و طراحی و پیاده‌سازی آسان
معایب: معماری سئو به‌صورت ۱۰۰% پیاده‌سازی نشده، ملاحظه می‌کنید که صفحه سرویس‌ها، بخش‌های SEO، PPC، SMM و بازاریابی محتوا در URL های منحصربه‌فرد با عنوان و متاتگ مخصوص قرار نگرفته‌اند.
یک پیشنهاد: بهتر است محتوای صفحه سرویس‌ها را تفکیک کنند یا به کمک تکنیک شماره ۲ از Jquery استفاده کنند. هر بخش باید عنوان و متاتگ خاص خود را داشته باشد.
تکنیک #۳: معماری معمولی سئو و طراحی پارالکسی صفحه نخست سایت
Spotify.com
در تکنیک بعدی فقط صفحه نخست سایت را به‌صورت پارالکس طراحی می‌کنند و سایر URL ها را که با اصول سئو همگام هستند، به حال خودشان رها می‌کنند.
مزایا: سایت سبک و انعطاف‌پذیر می‌شود؛ طراحی سایت در این حالت ساده‌تر است و نسبت به تکنیک شماره ۱ هزینه‌های کمتری به دنبال دارد.
معایب: خلاقیت چندانی به خرج نمی‌رود و سایت چندان تعامل‌گرا نمی‌شود.
اما این راه‌حل‌ها واقعاً تعارض موجود بین سئو و پارالکس را حل می‌کنند؟
به نظر می‌رسد همین‌طور باشد! به‌شخصه هم به اصول سئو التزام عملی دارم و هم دوست دارم با تکنیک‌های طراحی وب مثل پارالکس، ظاهر سایتم را زیباتر کنم و تا حد ممکن خلاقیت به خرج بدهم. امیدوارم به کمک مجموعه تکنیک‌ها و وب‌سایت‌هایی که مثال زدیم، بتوانید هر دو اصل را به‌خوبی باهم تلفیق کنید. یادتان باشد پارالکس صرفاً یک تکنیک طراحی سایت است که به‌راحتی قابل‌اعمال بر روی تمامی معماری‌های وب است…