More often than not we tend to jump at the chance to use some trendy web design technique without actually thinking how that can influence our sites. Why? I’m not exactly sure, but some evidence testifies we do it just to be able to say,”I use such and such thing in my site design”. That sounds Ok at first sight. Well, exactly. It’s just at first sight.

Websites-with-Parallax-Scrolling

Your Audience First

Before you go ahead and implement some gimmick on your site, think if your audience is gonna appreciate that. If your site is about web development and web design, odds are that they’ll like the feature. Plus you can show your skill set to potential clients that way. On the flipside, if your audience just wants specific info and anything that prevents them from obtaining it will most likely be considered as an unnecessary obstacle.

Big in Size

Since most parallax scrolling sites are created as one-page sites, you need to keep in mind one extremely important thing. The point is that all the images, texts and videos that you may want to add to your site will be loaded into the same file. Thus, it’ll most likely become really huge. And enormously big sites load slowly. That especially holds true for mobile devices.

Long story short, if the user does not have the patience to wait for a few seconds till your site loads, he or she won’t even see the gimmick. The irony is that that particular gimmick is the reason of your site loading slowly.

SERP Performance

That fact that your site is heavy will also impact your SEO rankings. Plus Google started to pay more attention to sites’ loading times. If your site is an online business and you’re an entrepreneur, you want your site to rank high for your target keywords. That’s how you drive traffic and prospects to your site. That’s how your online business works.

Onepageness

Like I said above, all the issues derive from the disadvantage (in terms of SEO) of one-page sites. The obvious way out is to make your site a multi-page one. Now, how would you go about that?

Divide and Rank

You can actually use your homepage for your parallax scrolling gimmick. The rest of your pages will be full of thick content that you want to rank in search engines. So, the idea is that you just put links from your homepage to the rest of the pages. Doing so allows you to combine the best of both worlds. The only problem may be your homepage not ranking that high, but if it’s Ok with you and you drive enough traffic with your other pages, then it’s no problem at all.

External Files

This approach allows you to use visually the same file, but it will actually load content from other files. You can do that either with the help of PHP or JavaScript/jQuery. In case you want to go the PHP way, you’ll need to rename all your HTML files to PHP ones. Plus you won’t be able to test it locally if you don’t have a local server installed, such as MAMP for Mac or WAMP for Windows.

External PHP Files

You can just rename your HTML files to appropriate PHP alternatives. Basically, that means replacing the .html extension with .php. That’s about it in terms of handling file names. Again, you’ll be able to test the PHP version of yours site locally given that you have a local host (server) installed on your PC or laptop.

So, just place this code in your index.php file where you want the content from your.html file to appear:

<?php
$my_file = 'file.html';
$handle = fopen($my_file, 'r');
$data = fread($handle,filesize($my_file));
echo ($data);
?>

Should you just want to load some parallax scrolling elements into the background of your site, you can just use a parallax scrolling effect builder. If that sounds like exactly what you want, feel free to read more. In case you need to use something that works without a local server, you need to consider using JavaScript/jQuery.

JavaScrip/jQuery

Basically, this method works exactly as the previous one, but you are not supposed to install anything else on your computer. You just need to load the jQuery JavaScript library and off you go. No panic! It’s not that scary as it sounds. Before I figured out how it actually works, the jQuery thing sounded pretty intimidated to me as well. :)

For example, name your div ‘intro’ and keep the content of that div empty:

That done, go to the bottom of the same .html file and add the following code before the tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

That will just load the jQuery library that you need for further manipulations.

Having done that, just load the content of your external file as follows:

<script>
$('#intro').load('intro.html’', function() {
});
<script>

Again, #intro is the name of the div where you want to load the content of your external html file called intro.html.

Bottomline

Most of the web designs effects out there can be implemented without harming SEO rankings, but they do require treatment with caution. You either need to investigate that sort of innovation on your own or just hire a pro who can do it for you. The latter option may cost you an arm and a leg, but if you’re sure that it’ll benefit your site, why not?

10 thoughts on “The Parallax Danger for Your Site”

  1. Hello,
    I really want to appreciate you for this post.You have given me lots of good points which help me to increase my site performance.I personally using cdn on my blog to increase my blog loading speed.

    Most of the developer are coming with funky design which takes time to load .This affect bog readership as no one wait for long time to read a blog post.

  2. Thanks for the nice article. Wish I had read it a few years ago. I built a site that was parallex and also incorporated some flash features. Took forever to load and never ranked well. Nowadays I use a wp template and use a traditional web design with a blog page for posts. Works great for users and seo too.
    Cheers, Mel

  3. There are many people write on blogging with some disguised content, but you are really writing unique and professional articles. Thanks and congrats!

  4. About that Onepageness term you just referred to, I think its an Old SEO practice to target one page for the whole bunch of keywords, things have changed now

    1. Kenneth von Rauch

      That’s right, but if you have just one page, you don’t really have much to choose from, right?

  5. Tried to use a theme similar to Pinterest for my wallpapers website but not having a footer was really annoying and I had to switch back.

  6. yes, in theory, minimal is the best, few colors, and just few options, so readers can focus on exactly what you want.

    sometimes there are those little gadgets that are really cool, anyway, like social buttons..

  7. For better looking and user eye catching purpose Parallax now a time implemented over a lot of sites. But ultimately the page loading time is increase. One most important thing is in SEO point of view its not SEO friendly so getting traffic or rank of those site is too difficult. Thanks to discuss such a unique and very important topic…..

Leave a Comment

Your email address will not be published. Required fields are marked *