One page with hide/show content vs several webpages?

[HarryPot]

I have one website were the main product page is one single page with several hide/show content.

So, for example, I don't have a different page for the general overview, characteristics and technical specifications sections. Instead, I have three "links", all in a single page, that show and hide each section content without leaving the page.

Is this a good approach SEO and user usability wise?

I actually think that usability is great. But I'm not sure about SEO.

Any thoughts?

 

[theluggage]

I actually think that usability is great. But I'm not sure about SEO.

Makes sense as long as its done "properly": I.e.think what it will look like without Javascript and write it as a long, scrollable page with sub-headings for the various sections and a section menu at the top using named anchors, so if someone has javascript blocked they get something readable (if not pretty). Don't hide things by default in the .css file: Only IF the JavaScript runs should it collapse into a 'paged' view & load the extra images in slideshows etc. Have the script check at the URL and display the appropriate page, so you people can still link to http://foo.bar.ting/whatever.htmll#techspecs to go directly to a particular section.

 

[whooleytoo]

Are you loading all the subsections initially, or dynamically once expanded? If you're loading them all at the start it might slow down the initial load, particularly if content is added as the site grows.

Another thing to consider is the browser Back button - if the user hits that expecting to go back out of a section, will they actually jump out of your site? As pointed out above too - you may also need to consider if people want deep-linking to specific sections, how you'll do that with a "1-page site".

 

[HarryPot]

Makes sense as long as its done "properly": I.e.think what it will look like without Javascript and write it as a long, scrollable page with sub-headings for the various sections and a section menu at the top using named anchors, so if someone has javascript blocked they get something readable (if not pretty).

Currently if the user has no Javascript they are redirected to another page. Which takes me to your next comment...

Don't hide things by default in the .css file: Only IF the JavaScript runs should it collapse into a 'paged' view & load the extra images in slideshows etc. Have the script check at the URL and display the appropriate page, so you people can still link to http://foo.bar.ting/whatever.htmll#techspecs to go directly to a particular section.

How can I achieve this? Right now I have in the CSS file a display: none;.

EDIT: Found it! By setting a class to the html when Javascript is enabled.

Are you loading all the subsections initially, or dynamically once expanded? If you're loading them all at the start it might slow down the initial load, particularly if content is added as the site grows.

Another thing to consider is the browser Back button - if the user hits that expecting to go back out of a section, will they actually jump out of your site? As pointed out above too - you may also need to consider if people want deep-linking to specific sections, how you'll do that with a "1-page site".

I'm loading everything from the beginning. But it is a small page (around 800KB in images). Still, I'm finding out how to load some images first, so they appear in the order the user will be seeing them normally.

As for the back button, I do have several pages in my website. The page I'm talking about is, for example, like the iPhone page. Where there is a design/characteristics/tech-specs sections. Apple currently uses separate pages for each, but since I don't have as much content, I opted for a single page. Still, if they hit back, they will go to a Products page, from were they would normally arrive to this page.

 

[theluggage]

EDIT: Found it! By setting a class to the html when Javascript is enabled.

Yes - or if you use jQuery and all of the sub-pages have the class "subpage" then you just need $('.subpage').hide();

As for the back button, I do have several pages in my website.

In your scenario, each .html page is a clearly defined entity: "information on product X" - and the show/hide stuff within the is just offered as an alternative to scrolling, so the action of the back button still makes sense.

One way to look at it is, if I wanted to download or print a "page" what would I want to get? I think, in your case, the complete "brochure" for the selected product is the right answer.

Personally, I'd rather have one long scrolling page with headings and named anchors, but I know that if you are promoting a product you also have to consider making the site look a bit sexy...

 

[HarryPot]

Personally, I'd rather have one long scrolling page with headings and named anchors, but I know that if you are promoting a product you also have to consider making the site look a bit sexy...

I also like long scrolling pages, but they wanted in my office the minimum amount of scroll, so I had to come with this solution.