What Is A Parallax Website And Do You Need One?
Wikipedia definition: Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines Due to foreshortening, nearby objects show a larger parallax than farther objects when observed from different positions, so parallax can be used to determine distances.
How does it work?
Parallax scrolling is a particular technique used in web design where background images throughout a web page move slower than foreground images, creating an illusion of depth on a two-dimensional site. It is a simple motion that you are already accustomed to and it’s helped make many websites feel dynamic and interactive.
It is basically an optical illusion. Early adopter Disney first used it to give a realistic effect in traditional animation on Snow White and the Seven Dwarfs, later used in video game Super Mario. As CSS evolved and HTML developed it can now be used in web design.
Often described as fun, dynamic and exciting by users, it can lead to longer session times as visitors do not need to navigate, all content is on one page and they are curious how the animation will unfold.
In terms of web design, a parallax layout is simply one long single page.
If you choose to use it, it’s important to establish how parallax could affect the mobile experience and usability. It will simply not look the same on a desktop and mobile, your designer will need to translate the effect correctly to avoid compatibility issues.
Done well it can create a stunning impact on your website though definitely should not be adopted for effect only or it will detract from the content of your site and be off-putting for your visitor – the two things you really don’t want to happen.
Will it impact SEO?
Organic SEO can be negatively affected as essentially you will have one page with only one H1 tag. Your content will not be broken up logically.
Search Engines rank pages on their relevancy to certain keywords and phrases that match a search query. With a parallax site, you will only have one page with different topics all covered on that single page. This makes it difficult for the search engine to establish relevancy for a single category of keywords, thus the search engine becomes confused and doesn’t understand what the page is about. They value logical information, organised into site structure and hierarchy. Parallax is essentially a single page which appears disorganised to a search engine.
Instead of having a single page, you should break down the information you are sharing: incorporate related sections onto one page, for example an ‘About Us’ page; use parallax to group Overview, Mission Statement and Company History together; or use another page as a brochure type landing page to showcase all relevant information for a single service or product.
Should you use the parallax effect?
What is the goal of your website? Think like your intended user, will a parallax design enhance or detract from your goal? Parallax sites fit well with the visual arts sector, they are fantastic when used to tell an interactive story, or if the content of your site will be particularly creative.
Because parallax scrolling can also be combined with audio elements, telling a story with your website will also give you the option of including a sound component. Musicians will, therefore, find a parallax website helpful when they are presenting their portfolios online.
Why Parallax might not be useful for you.
- Bear in mind if you use PPC this might not be the best type of site to optimise results, there is no option for a landing page. Your website and marketing should always work in unison.
- Less tech-savvy users can find the effects confusing and complicated.
- Older browsers may have difficulty rendering the scrolling design.
- Those who suffer from motion sickness or sensitivity may find the effect unsettling.
- Your website will not be accessible, for example, those who suffer from cognitive disorders such as ADHD will find using the site difficult.
Some examples of well-designed parallax sites: