Parallax Design and SEO – Compatibility Problems.

Are you currently designing a new website for your business? What are you looking to achieve? Are you confused with how to balance an amazing user experience with higher organic traffic?

Questions like the above are asked all the time and if you’ve been following design trends over the past couple of years, then you should be no stranger to Parallax scrolling.

Let’s be upfront, parallax design is beautiful, it give voice to brands and an experience that wow’s most users. However it would seem that SEO and Parallax are still no closer to a perfect romance and website owners often sacrifice one for another.

My job is to help get SEO and Parallax into the same bed with a mission to start a new breed of super sexy search savvy slick sites. (I’m a sucker for sibilance).

The parallax design list of compatibility problems 

Design – In many cases a designer using parallax will opt for a single page design which makes it difficult to optimise a site for a wide variety of search terms. Having a good spread of topical pages not only gives users access to deeper content and knowledge but also helps increase your over all search visibility. Given that, you should plan out your sitemap to allow for supporting pages to have deeper content around most of the keywords.

Analytics – Another challenge is in gaining valued and accurate analytics for your website. How accurately can you measure engagement on a single page website? The problem is parallax pages take a long time to load so users can often get frustrated and click elsewhere.

The second problem is identifying the stronger pieces of content on the page as the “time spent on page” metric will become more ambiguous. The only workaround I can see from this problem would be to use heat mapping software which might highlight the pieces of content that users were most drawn to.

Finally what to do about setting conversion goals? You would require another page if you want to measure users who were interested in a part of the content but didn’t follow through on their intent.

Page Speed – Another sacrifice of having a beautiful parallax design is the heavy load on the home page. This is generally caused by having very high quality images and videos all located on one file. Although some of these issues can be resolved using faster servers, tidy code and CDNs. Google still dislikes slow page speeds as this represents a poor user experience in their eyes. Use Google’s page speed insights to check your site doesn’t offend.

Mobile – There still isn’t a perfect solution for using Parallax scrolling on mobile devices. Webmasters will have to create separate versions of the site specifically for mobile devices. A popular example of this is Google’s “How search Works”.

How to make the two compatible

Yes it’s possible. The two can co-exist in a way that pleases the eyes of both users and Google.

Say Whaaaaaaaat!!!

1) A “One page” design with parallax scrolling using jQuery.

This was first written about by Kevin Ellen of iProspect. The solution uses the help of jQuery’s “pushstate” functionality. This allows a parallax scrolling page to be cut into many various sections which can be identified by Google in the SERPS. The great thing about using this function is that each section will have its own unique URL and Meta data. This is great because one single page can be indexed multiple times for different content. This is handy because parallax designs that are implemented without any specialist SEO advice sometimes result in a severe lack of indexed pages meaning a poor search visibility.

Summary

– Pushstate is a great funtion for an existing one page parallax scrolling website that needs to be optimised for search.

-The function is perfect for smaller businesses or a branded mini site. Perhaps these are more interested in UX than SEO. This solution offers the best of both worlds on a very small scale but could never work on a bigger scale, such as an ecommerce site.

– It is a bit of an analytics fail. Scrolling through each of the sections will send signals to your analytics packages that users are bouncing or exiting content very quickly. Again, this might not be a huge issue for small businesses or mini sites that use the function for branding or simply referring traffic.

2) Adopt an SEO architecture allowing multipage parallax scrolling.

Put simply, you start with SEO page architecture pyramid and then place the parallax scrolling design effects on each URL. This is perhaps the perfect compromise between UX and SEO, neither outweighed by the other.

Summary 

– Beneficial for analytical software because each URL has its own content. Tracking can be placed across all the pages making setting up conversion goals and understanding user behaviour much easier.

– It doesn’t exactly follow the parallax scrolling trend and is therefore not as effective for telling potential of a brands story.

-The design might seem attractive however, having more pages also means that more maintenance is required which could lead to more expensive costs from your design team.

3) Parallax scrolling on homepage and regular SEO architecture.

This technique places parallax scrolling on the homepage and then includes other URL’s that are SEO-friendly, but do not have parallax scrolling. This is the method adopted by brands such as Spotify. It allows them to have an attractive home page which helps communicate the brands voice. Having other non parallax pages helps the users can then dig deeper into the websites content if they’d like to find out more about a particular service.

Another idea would be add a blog on the site. The addition of a blog to your parallax site can add tremendous value when trying to attract visitors. It’s also another way to showcase your industry knowledge and authority.

Summary

– Keeps the website light and flexible, making it easier to maintain and design whilst being more affordable than the previous two options.

– Creativity is kept in a box and fails to make the whole website UX and super interactive experience.

Can Parallax actually help your SEO?

Can a parallax design actually help your SEO? The answer is ‘yes it can’, but the best way forward would be to consult your search agency before you think of going gung ho on a funky new design. Seeing a mesmerising new design for your business can be exciting but don’t let it blind your judgement. A short consultation with your search agency should ensure that you can benefit from beautiful design without risking a huge drop in traffic because you dropped most of your web pages.

As SEO has started to become increasingly integrated into the normal marketing process and more specifically content marketing, using a parallax design is the perfect excuse to delve deep into the world of producing great content. Giving users an intuitive brand experience whilst delivering a compelling story can help attract more backlinks, repeat users and referrals. “No other recent web design technology has done more to impact the way we tell stories online than parallax”.

And if you are connecting more with your audience, then your content is likely being shared more widely, thus increasing your visibility in social media whilst hopefully grabbing the attention of industry influencers. All of which means you can create content for conversion.