[Build Great Backlinks] TITLE

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

<p>Posted by <a
href=\http://moz.com/community/users/392216\>Carla_Dawson</a/pp
id=promoted>This post was originally in <a href=/ugc>YouMoz</a>,
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.</pp>
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 <strong>not
ideal</strong> for search engines. Parallax Scrolling is a design
technique and <strong>it is ideal for search engines</strong> 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.
</p>
<h2strong>Parallax Scrolling – its origins and
definition</strong/h2>
<p>
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 <a
href=http://en.wikipedia.org/wiki/Parallax_scrolling>Wikipedia, parallax
scrolling</a> is
</p>
<blockquote>
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
</blockquote>
<p>
The web design industry defines parallax scrolling as
</p>
<p>
<a
href=http://www.creativebloq.com/web-design/parallax-scrolling-1131762>Creative
Bloq</a>
</p>
<blockquote>
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.
</blockquote>
<p>
<strong>Observations</strong>
</p>
<ul>
<li>It is defined as a design technique or trend.</li>
<li>The definition of parallax scrolling talks about a technique that
tries to accomplish 3D-like effects.</li>
<li>It talks about moving layers at different velocities</li>
<li>It does <strong style=line-height: 1.45em;>not</strong>
talk about one page web design or web structure.</li>
</ul>
<h2strong>Parallax scrolling and web design - current industry
trends</strong/h2>
<p>
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.
</p>
<ul>
<lia
href=http://www.forbes.com/sites/stevecooper/2013/11/30/designing-a-website-for-2014/
style=line-height: 1.45em;>Designing A Website For 2014</a/li>
<lia
href=http://www.creativebeacon.com/website-design-trends-2014-clean-simple-rules/
style=line-height: 1.45em;>Website Design Trends In 2014: Clean And Simple
Rules</a/li>
<lia href=http://www.inc.com/jill-krasny/web-design-trends-2014.html
style=line-height: 1.45em;>Web Design Trends to Watch in 2014</a/li>
</ul>
<p>
<img
src=http://d2v4zi8pl64nxt.cloudfront.net/parallax-scrolling-websites-and-seo-a-collection-of-solutions-and-examples/5329e54da4abd7.23235422.png
style=width: 685px;>
</p>
<h3strong>Most parallax scrolling websites are not SEO
friendly</strong/h3>
<p>
I claim above that most parallax scrolling websites are not SEO-friendly.
Where do I get the data to make this claim? <em>Note just because most are
not SEO-friendly <strong>does not mean</strong> they cannot be
SEO-friendly.</em>
</p>
<p>
Here are several samples
</p>
<ul>
<lia
href=http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
style=line-height: 1.45em;>20 Best Websites with Parallax Scrolling of
2013</a/li>
<lia href=http://www.creativebloq.com/web-design/parallax-scrolling-1131762
style=line-height: 1.45em;>35 great examples of parallax scrolling
websites</a/li>
<lia href=http://www.awwwards.com/websites/parallax/ style=line-height:
1.45em;>Awwwards Parallax Websites</a/li>
</ul>
<p>
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 <a
href=http://mmarley.com/parallax-scrolling-and-seo-are-100-compatible-clearing-up-the-misconception/>misconception
in the industry</a> that parallax scrolling is restricted to one page.
</p>
<p>
<strong>Ok ok....technicalities...so how does one do a parallax
scrolling website that is SEO-friendly?</strong>
</p>
<p>
<strong/strongstrong/strong>
</p>
<h2strong>How to create a parallax scrolling website for search
engines?</strong/h2>
<p>
Before designing a website with parallax scrolling and for search engines it
is important to keep in mind the following things;
</p>
<ul>
<li>Parallax Scrolling is a design technique that moves different layers
of content, images or backgrounds at different speeds.</li>
<li>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.</li>
<li>Parallax Scrolling is not ideal for mobile version. It makes the
website to heavy. Remove parallax scrolling for mobile views.</li>
</ul>
<p>
There are three main techniques. Here are some real examples of parallax
scrolling websites that are SEO-friendly or almost SEO-friendly.
</p>
<h3strong>Technique #1 – One page web design with parallax scrolling
using Jquery</strong/h3>
<p>
iProspect's Senior SEO specialist Kevin Ellen created the following tutorial
- <a
href=http://www.iprospect.co.uk/blog/featured/parallax-scrolling-and-seo-how-to-use-jquery-to-seo-your-website.html>Parallax
Scrolling and SEO How to use JQuery to SEO your website</a>.
</p>
<p>
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.
</p>
<p>
Google Webmaster recently published this article <a
href=http://googlewebmastercentral.blogspot.com.ar/2014/02/infinite-scroll-search-friendly.html
target=_blank>Infinite Scroll Search Friendly</a>. 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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
<a href=http://www.flowerbeauty.com/>Flower Beauty</a>
</p>
<p>
Woj Kwas mentioned this website in this <a
href=http://moz.com/community/q/parallax-websites-good-for-seo>Moz's
Q&A</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.
</p>
<hr>
<h3strong>Technique #2 – Multipage parallax scrolling website on SEO
architecture</strong/h3>
<p>
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 <a
href=http://www.seobuzzinternetmarketing.com/blog/how-to-create-a-parallax-scrolling-website-with-seo/
target=_blank style=line-height: 1.45em;>here</a>. I have not been able
to find any other tutorials that mention this technique, if you do, please let
me know.
</p>
<p>
<a href=http://www.xdawson.com/>xDawson</a> (Yes this is my
website, but I have yet to find a perfectly SEOed parallax scrolling website. If
you do, please pin it <a
href=http://www.pinterest.com/ecumbre/seo-and-parallax-scrolling/>here</a>).
</p>
<p>
This website accomplished a very strict SEO architecture (definitely over
optimized) and placed parallax scrolling on almost every internal URL.
</p>
<p>
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.
</p>
<p>
<strong>Pros</strong> – Good for analytics in that each URL has
its own content, easy to implement
</p>
<p>
<strong>Cons</strong> – 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.
</p>
<p>
<strong>Recommendations</strong> - 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.
</p>
<p>
<a href=http://www.kickpoint.ca/>Kickpoint</a>
</p>
<p>
This website placed parallax scrolling on its homepage and on one internal
page. Notice the homepage and the services page have parallax scrolling.
</p>
<p>
<strong>Pros</strong> – Good for analytics and easy to design
and implement
</p>
<p>
<strong>Cons</strong> - 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.
</p>
<p>
<strong>Recommendations</strong> – Divide up the content on the
services page or use Jquery fix (see technique #2). Add unique titles and meta
descriptions.
</p>
<hr>
<h3strong>Technique #3 – Parallax Scrolling on homepage and regular SEO
architecture</strong/h3>
<p>
<a href=http://www.spotify.com/>Spotify</a>
</p>
<p>
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.
</p>
<p>
<strong> Pros</strong> – Keeps the website light and flexible.
It is easy to design and more affordable than technique #1.
</p>
<p>
<strong> Cons</strong> – Not maximizing creativity or making the
website super "interactive"
</p>
<hr>
<h2> <strong>Do the solutions above solve the parallax scrolling SEO
conflict?</strong/h2>
<p>
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.
</p>
<p>
This article was co-authored with Kevin Ellen from <a
href=http://www.iprospect.co.uk/em>iProspect UK</em/a>. You can find
more information about Kevin here. <ema
href=https://twitter.com/Kevin_Ellen_>https://twitter.com/Kevin_Ellen</a>
and </ema href=http://uk.linkedin.com/in/kevinellen style=line-height:
1.45em;>uk.linkedin.com/in/kevinellen</a>
</p>
<p style=text-align: center;>
<img
src=http://d2v4zi8pl64nxt.cloudfront.net/parallax-scrolling-websites-and-seo-a-collection-of-solutions-and-examples/5329e54e4d3094.77133093.jpg
style=width: 360px;>
</pbr /pa href=http://moz.com/moztop10>Sign up for The Moz Top
10</a>, 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!</p>

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 Great Backlinks
peter.clarke@designed-for-success.com