Sneak Preview of a PARALLAX template

[Adendum]

Rather than hijack rivieremagog's thread (see : viewtopic.php?f=19&t=60560 ) I thought it best to start this one.

Here is a sneak preview.

Still very much a work in progress and a great deal to do and to test, so it's early days.

Feel free to test in a variety of browsers and devices and let me know. For the record - it wont work on an iPad and maybe not on smartphones. I have yet to find any parallax sites that do....maybe someone else knows better?

And just to be clear - this will be a paid template not a free one. But at £10 I think it's worth every penny!!

[zinc]

Paul
This is by far one of the coolest things that I have seen on this forum, a breath of fresh air in terms of design and as I said to you before, this is taking WWB to another level. Well done! Def worth that £10.00!!!!
Z

[ColinM]

Excuse my ignorance Paul - what is parrallax?

[Adendum]

Take a look at the 'sneak preview' link and you'll see!

[Adendum]

Page load speed will depend entirely on how the end user applies images to the parallax page. If they dump loads of large unoptimised images on the page the load speed will suffer. However if the think about it first and optimse their images speeds will improve.

The template allows 4 x foreground images, 5 x mid-ground images and 4 x background images but that doesn't mean they have to use all 13 images. In fact most times I foresee that the mid-ground and background images are likely to be repeats of one or two images.

So you are right to mention it but the same is true of any page built with WWB.

[Adendum]

I am close to completing this template and have just uploaded a new demo (but not the final demo).

It now validates pretty well, for an HTML5 page and even the CSS is clean even though there's some CSS3 in there.
I've added an an animated pre-loader, just in case someone stuffs some big images in their site.
Navigation now optional and offers skins in 16 colours and 2 styles (circles and squares).
Navigational Labels and Next/Prev buttons in 16 colours.

One thing I do need to investigate is how to handle a potential SERP issue. Maybe someone can offer a suggestion? The issue is that the template is a one page site but is made up of 5 other pages that are embedded in the index page. This is necessary to make it easy for the user to create their content.

So once published and the site gets crawled it will find 6 pages in total. If Google reports back on a search and offers up one of the pages (that is embedded) and that page is clicked, the visitor will get a page with no navigation to the rest of the site. So I am looking for a method that ensures if one of the 5 pages is accessed (by any method) that the browser takes them to index.html. Ideas?

[Pascal-Gilles]

Hi,

Nice (very nice!) one Paul.

An idea (at first sight) would be to add this code to each of the 5 sub-page:

Code: Select all

<script>
window.location.href ='./index.html';
</script>

Cheers!

[Adendum]

Pascal,

the window.location.href sounds like a solution - will test that and report back!!

[Pascal-Gilles]

OK!

By the way, the safest way would be a redirection in the htacces file (see viewtopic.php?f=28&t=60630), so that Google can't see any (false) duplicate.

Cheers!

[Adendum]

Pascal,

True but I can't risk using that route when I release this as a template. Imagine the havoc I could create from the less experienced users out there!

When I am back on the PC I am going to try using anchors, so I'll add anchors to the html that the template generates and then use window.location.href='index.html#section-1'. So that should help

[haakoo]

You could always add a hash or search at the end of that script to point to the right section.

Hans

[Adendum]

Nope - that kinda killed the page!

Each of the 5 pages that are called in are called in using the object statement e.g.:-

Code: Select all

<object width="1000" height="550" data="./section-2.html" type="text/html"></object>

And when I add the location script each of the calls to the 5 pages tries to load the index page as well. So the page dies.

Shame....I have a way to deal with this but it's ugly, so if anyone can suggest an automated method I'd appreciate it...but remember the solution can only be invoked if/when the page is clicked or opened manually. So if someone opens the page ./section-2.html they actually get to index.html.

[haakoo]

Maybe jQuery works instead of object use a #div

Code: Select all

$(document).ready( function() {
    $("#wb_Shape1").on("click", function() {
        $("#wb_content").load("page1.html");
    });
 $("#wb_Shape2").on("click", function() {
        $("#wb_content").load("content.html");

    });
});

[Adendum]

I think the answer is a two fold approach - as I said, ugly, but I think effective...

1. Add a link in the called in pages that is not seen in the index page.

2. Add a canonical link to the index page, so search engines treat each called in page as duplicates and refer all links back to index.html.

Or can someone think of something neater/safer/better?

[Adendum]

Maybe jQuery works instead of object use a #div

Hey Haakoo,

Not sure how this helps. Using the object statement works very well - it's like using an iFrame I guess but embeds the content from one page into another with none of the disadvantages of using an iFrame. So I'm happy with the object call.

The problem is only if/when one of the pages like section-2.html is opened in a browser manually or via search engine results.