Sneak Preview of a PARALLAX template
Sneak Preview of a PARALLAX template
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!!
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!!
Re: Sneak Preview of a PARALLAX template
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
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
Re: Sneak Preview of a PARALLAX template
Excuse my ignorance Paul - what is parrallax?
Re: Sneak Preview of a PARALLAX template
Take a look at the 'sneak preview' link and you'll see!
Re: Sneak Preview of a PARALLAX template
Paul,
How about load time? Parallax is cool but with Google's recent algorithm updates they've made it clear that pages/sites that load quickly are favored over ones that load slowly. I'm speaking strictly about SEO. I do agree that what you are working on is cool.
Thanks,
Steve
How about load time? Parallax is cool but with Google's recent algorithm updates they've made it clear that pages/sites that load quickly are favored over ones that load slowly. I'm speaking strictly about SEO. I do agree that what you are working on is cool.
Thanks,
Steve
Re: Sneak Preview of a PARALLAX template
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.
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.
Re: Sneak Preview of a PARALLAX template
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?
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
-
- Posts: 92
- Joined: Tue Apr 05, 2011 8:06 pm
- Location: France
- Contact:
Re: Sneak Preview of a PARALLAX template
Hi,
Nice (very nice!) one Paul.
An idea (at first sight) would be to add this code to each of the 5 sub-page:
Cheers!
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>
http://www.soslignes-ecrivain-public.fr/
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
Re: Sneak Preview of a PARALLAX template
Pascal,
the window.location.href sounds like a solution - will test that and report back!!
the window.location.href sounds like a solution - will test that and report back!!

- Pascal-Gilles
-
- Posts: 92
- Joined: Tue Apr 05, 2011 8:06 pm
- Location: France
- Contact:
Re: Sneak Preview of a PARALLAX template
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!

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!

http://www.soslignes-ecrivain-public.fr/
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
More than 30(!) Nivo Slider tutorials:
http://www.soslignes-ecrivain-public.fr ... -Blog.html
Re: Sneak Preview of a PARALLAX template
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
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

Re: Sneak Preview of a PARALLAX template
You could always add a hash or search at the end of that script to point to the right section.
Hans
Hans
Re: Sneak Preview of a PARALLAX template
Nope - that kinda killed the page!
Each of the 5 pages that are called in are called in using the object statement e.g.:-
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.

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>
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.

Re: Sneak Preview of a PARALLAX template
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");
});
});
Re: Sneak Preview of a PARALLAX template
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?
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?