[Build Backlinks Online] Parallax Scrolling Websites and SEO - A Collection of Solutions and Examples

Build Backlinks Online has posted a new item, 'Parallax Scrolling Websites and
SEO - A Collection of Solutions and Examples'

Posted by Carla_DawsonThis post was originally in YouMoz, and was promoted to
the main blog because it provides great value and interest to our community. The
author's views are entirely his or her own and may not reflect the views of Moz,
Inc.
Parallax Scrolling is one of the latest trends in web design, yet most
parallax scrolling websites are not SEO-friendly. I have observed this trend on
sites like Awwwards, theFWA and many more. I have also observed that there are
many articles that say parallax scrolling is not ideal for search engines.
Parallax Scrolling is a design technique and it is ideal for search engines if
you know how to apply it. I have collected a list of great tutorials and real
SEO-friendly parallax websites to help the community learn how to use both
techniques together. There appears to be lots of confusion in the community and
I want to clear it up.

Parallax Scrolling â its origins and definition

Parallax Scrolling was originally created for the video game industry as a
âspecial effectsâ technique to give the audience an illusion of
depth. According to Wikipedia, parallax scrolling is


Parallax scrolling is a special scrolling technique in computer graphics,
wherein background images move by the camera slower than foreground images,
creating an illusion of depth


The web design industry defines parallax scrolling as


Creative Bloq


One big web design trend of the moment is parallax scrolling, which involves
the background moving at a slower rate to the foreground, creating a 3D effect
as you scroll down the page. It can sometimes be overwhelming, but when used
sparingly it can provide a nice, subtle element of depth.


Observations

It is defined as a design technique or trend.
The definition of parallax scrolling talks about a technique that tries to
accomplish 3D-like effects.
It talks about moving layers at different velocities
It does not talk about one page web design or web structure.
Parallax scrolling and web design - current industry trends

Parallax Scrolling is in style these days. The trend began in 2011 when Ian
Coyle created the very first parallax website for Nike "Nike Better World" on
2011. Here are several articles mentioning web design trends for 2014 and they
all mention parallax scrolling. Also note that the trend was strong in 2013.

Designing A Website For 2014
Website Design Trends In 2014: Clean And Simple Rules
Web Design Trends to Watch in 2014


Most parallax scrolling websites are not SEO friendly

I claim above that most parallax scrolling websites are not SEO-friendly.
Where do I get the data to make this claim? Note just because most are not
SEO-friendly does not mean they cannot be SEO-friendly.


Here are several samples

20 Best Websites with Parallax Scrolling of 2013
35 great examples of parallax scrolling websites
Awwwards Parallax Websites

Most of these examples of parallax scrolling websites have one-page web
architectures. Since most web designers apply parallax scrolling to one-page web
design, there is a misconception in the industry that parallax scrolling is
restricted to one page.


Ok ok....technicalities...so how does one do a parallax scrolling website that
is SEO-friendly?




How to create a parallax scrolling website for search engines?

Before designing a website with parallax scrolling and for search engines it
is important to keep in mind the following things;

Parallax Scrolling is a design technique that moves different layers of content,
images or backgrounds at different speeds.
Regular onsite SEO requirements like schema, address in footer, etc. still
apply. Remember, start with an SEO architecture, and then apply the design to
the architecture.
Parallax Scrolling is not ideal for mobile version. It makes the website to
heavy. Remove parallax scrolling for mobile views.

There are three main techniques. Here are some real examples of parallax
scrolling websites that are SEO-friendly or almost SEO-friendly.

Technique #1 â "One page" web design with parallax scrolling using Jquery

iProspectâs Senior SEO specialist Kevin Ellen created the following
tutorial - Parallax Scrolling and SEO How to use JQuery to SEO your website.


This technique addresses the issue of one page web designs that use parallax
scrolling and basically tweaks it for search engines. I am mentioning this
technique first since there are so many one page parallax scrolling websites on
the market. Please note that Kevinâs sample âParallax SEOâ
site is not really parallax since it does not move different items at different
velocities, however I am mentioning it because his technique can easily be
applied to most one page parallax scrolling websites on the market.


Google Webmaster recently published this article Infinite Scroll Search
Friendly. It addresses the same issue that Kevin did in his article but with
more detail. I highly recommend reading both. You should be able to fix any one
page parallax scrolling website with both these sources.


The solution's use the help of jQuery's 'pushState's' functionality. This
allows a parallax scrolling page to be 'cut' into various sections which can be
identified in the SERPs, each with their unique URL and meta data. As a result,
one single page to be indexed multiple times, for different content.


Pros â It is a good fix for an existing one page parallax scrolling
website that needs to SEOed. It is a good technique for small websites that are
not interested in hard core analytics.


Cons â Bad for analytics. I suspect bounce rates may be higher on these
kinds of sites as scrolling through the website may occur rather quickly and to
a software program it would appear as a quick enter-exit per URL.


Flower Beauty


Woj Kwas mentioned this website in this Mozâs Q&A. This website does not
fit the technical definition of parallax scrolling but it does use the JQuery
/Infinite scrolling technique. FlowerBeaty.com allows the user to scroll through
the entire website and through multiple URLâs. It doesn't classify as
parallax scrolling since it does not play with layers and velocities. I am
mentioning it because it has received some visibility. It is not a parallax
scrolling website since it does not have multiple layers that move at different
velocities.

Technique #2 â Multipage parallax scrolling website on SEO architecture

This technique is very simple and easy to understand. You start with a SEO web
architecture and then place the parallax scrolling design effects on each SEO
URL. Wanda Anglin wrote a tutorial on this technique here. I have not been able
to find any other tutorials that mention this technique, if you do, please let
me know.


xDawson (Yes this is my website, but I have yet to find a perfectly SEOed
parallax scrolling website. If you do, please pin it here).


This website accomplished a very strict SEO architecture (definitely over
optimized) and placed parallax scrolling on almost every internal URL.


It did accomplish the movement of layers at different velocities however it
did not accomplish the âillusion of depthâ or the âtelling of
a storyâ. Although it does qualify as parallax scrolling, it does not use
parallax scrolling as the trend is today.


Pros â Good for analytics in that each URL has its own content, easy to
implement


Cons â Loading times can be a problem with this technique as too much
parallax scrolling may make browser loading time longer than it should be. It
may be a bit too âinteractiveâ. Designing each for each URL can be
expensive and keeps the design rigid.


Recommendations - Use parallax scrolling sparingly throughout the website
instead of on every URL. Reduces loading time and makes the website more
natural. It also will reduce design expenses and lets the website be a bit more
flexible.


Kickpoint


This website placed parallax scrolling on its homepage and on one internal
page. Notice the homepage and the services page have parallax scrolling.


Pros â Good for analytics and easy to design and implement


Cons - Does not have a 100% SEO Architecture. Notice the Services page did not
divide up the topics of SEO, PPC, SMM, and Content Marketing onto unique
URLâs with unique title and meta descriptions.


Recommendations â Divide up the content on the services page or use
Jquery fix (see technique #2). Add unique titles and meta descriptions.

Technique #3 â Parallax Scrolling on homepage and regular SEO architecture

Spotify


Another technique is to place parallax scrolling on the homepage and then
include other URLâs that are SEO-friendly, but do not have parallax
scrolling.


Pros â Keeps the website light and flexible. It is easy to design and
more affordable than technique #1.


Cons â Not maximizing creativity or making the website super
âinteractiveâ

Do the solutions above solve the parallax scrolling SEO conflict?

I obviously believe they do, but I am interested in hearing the
communityâs opinion on this issue. I love the parallax scrolling design
technique and am a strong believer in making websites beautiful and creative but
also SEO-friendly. I hope this collection of SEO parallax websites and tutorials
help you learn how to apply both techniques together. And remember, parallax
scrolling is just a design technique that can be used on different kinds of web
architectures.


This article was co-authored with Kevin Ellen from iProspect UK. You can find
more information about Kevin here. https://twitter.com/Kevin_Ellen and
uk.linkedin.com/in/kevinellen


Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten
hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think
of it as your exclusive digest of stuff you don't have time to hunt down but
want to read!



You may view the latest post at
http://feedproxy.google.com/~r/seomoz/~3/ILct7NvTQKE/parallax-scrolling-websites-and-seo-a-collection-of-solutions-and-examples

You received this e-mail because you asked to be notified when new updates are
posted.
Best regards,
Build Backlinks Online
peter.clarke@designed-for-success.com