One page with hide/show content vs several webpages?

Discussion in 'Web Design and Development' started by HarryPot, Sep 24, 2014.

  1. HarryPot macrumors 6502a

    Sep 5, 2009
    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?
  2. theluggage macrumors 68040

    Jul 29, 2011

    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 to go directly to a particular section.
  3. whooleytoo macrumors 604


    Aug 2, 2002
    Cork, Ireland.
    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".
  4. HarryPot, Sep 26, 2014
    Last edited: Sep 26, 2014

    HarryPot thread starter macrumors 6502a

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

    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.

    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.
  5. theluggage macrumors 68040

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

    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...
  6. HarryPot thread starter macrumors 6502a

    Sep 5, 2009
    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.

Share This Page