views:

89

answers:

5

I would like to code a little web site that will contain several sections like "Home", "Gallery", "Contact Us", "FAQs", and so on.

I thought to do this in one HTML by putting each section in a div and show only one div per time (using Javascript / jQuery), based on the chosen menu button.

Alternatively, I could create a separate HTML page per section, and link these pages to the menu buttons.

What are the advantages and disadvantages of these two methods ?

+4  A: 

The first method means longer loading times since you have to load everything on the site up front, and it's totally broken for people who have disabled Javascript or whose browsers don't support it. The second method means the user only has to load the content they are actually looking at, and it should work even with non-Javascript browsers.

Paul Tomblin
+1 additionally, individual 'sections' are not bookmarkable without writing some unnecessary, convoluted javascript.
karim79
I do not agree, since there are #anchors :)
dzen
@dzen, if you follow a link to a #anchor when the div is hidden, do you see anything?
Paul Tomblin
I want to use jQuery in the site, so I guess it requires Javascript anyway, right ? And also all the major browsers support Javascript, so I don't think this should bother me.
Misha Moroshko
A lot of mobile devices have browsers that don't have Javascript. A lot of people turn off Javascript because it is a gaping wound of security holes. You've just lost a few percent of your potential users. Not to mention the other huge percentage that's going to leave before the huge page finishes loading.
Paul Tomblin
A: 

The advantage of the method would be speed, when navigating you don't need a round-trip to the server.

It also has a couple of disadvantages the main ones are; You can only link to the front-page, not directly to for example the about page because it doesn't have a separate url.

The back button in the user's browser won't work anymore.

Mendelt
A: 

The Advantages of the Javascript solution are mainly that you dont need to reload the page which is very nice for the user.

On the other hand you have the visitors with javascript disabled who wont be able to load the different pages. Also you cannot navigate over Javascript pages with the browser's back and forth buttons.

The last thing I see is that your code could become messy if you're not very careful and organized.

I think that today almost everyone has Javascript enabled. Am I right ?
Misha Moroshko
Yes that's the case but for example in my office there are some weird security plocies and because of these there is quite some blocked javascript which won't work. But generally speaking I would say that most Browser have hs active.
I actually think that, thanks to browser extensions like NoScript, there are probably *less* people with JavaScript enabled than there were a few years ago.
kibibu
A: 

SEO for one thing - Googlebot will likely only ever index the home page, and your other pages will be effectively invisible to search engines.

Eric Petroelje
I'd say that if he use anchors to show/hide content he would be covered of this situation.
Claudio Redi
@Claudio - Good point, but you still lose something by having a huge jumble of unrelated content on a single page. Also, Google is pretty good at filtering out any "hidden" content on a page to prevent keyword spamming (e.g. having a hidden div with lots of keywords that isn't actually visible on your page). So that filtering may hurt his page as well - even though keyword spamming isn't his intention.
Eric Petroelje
A: 

The main disadvantages that comes to mind for the first method are:

  • Poor SEO: Google will only see your home page as Google bot doesn't execute javascript.
  • Back/Forward buttons won't work.
  • Takes longer time to load initially.
  • As site becomes bigger, it'd need more memory and might slow down the browser and even the machine
Amarghosh