An entire web site in a single page

Update: I received nice feedback from some readers, explaining
why this one-page design is not very good for SEO. Thank you
very much! I appreciate your feedback. As a consequence of this,
I have now moved my site to a traditional multi-page design.
If you are still interested in seeing the original single-page
site, you can go here.

When I first put up my web site, it was all just a single, static page. Basically a small blurb about me, the services I offer, and so on. It looked kind of neat, with a very simple design, which I like. And with a small enough font and big enough screen, it really fit all into your browser without scrolling.

But then a friend told me that it doesn't really look professional enough with just a single page. People expect to see at least several pages on a 'real' web-site. So, something had to be done.

Now, I'm not a professional web-designer who can photoshop together wonderful logos and backgrounds and also work a site based on the best user/computer interaction strategies. I mostly just wanted to retain the very simple and straight forward design of my site. And it should load fast. And it should be friendly to search engines. And it should still look good in text based browsers, or browsers that don't have JavaScript enabled.

When you look at my site now, you see that it does use multiple pages. But then... not really. Your browser will actually just load a single HTML page, which contains the entire text of the site. The navigation links merely trigger some changes in the CSS for various text sections, so that different content is displayed when those links are clicked.

Using the 'display' style property for hiding elements on a page is nothing new and is used on many sites. It's just that normally you see it used to show or hide specific elements within a page, while site navigation itself is normally left to the real thing: Actual separate pages.

So, there are probably other sites which do it this way, but it was the first time for me that I tried this approach with a site, and I like how it turned out. That's why I'm sharing this.

If you look at the site without JavaScript enabled, you see all the content in the page, one 'page' after the other. The navigation links on the left still work. I'm thinking I might add a link back to the top enclosed in <noscript> under each section at some point.

One of the most visible benefits is that site navigation is so fast, it feels instantaneous. Nothing needs to be loaded when a navigation link is clicked. But that is not the only advantage...

If you look at the page in a text-based browser such as Lynx, you see that all the relevant information is there, easily readable on a single page.

Best of all, the 'crap-to-content' ratio for the page is very good. I you look at the HTML source, you see that there is a lot of relevant textual content, and very little markup to distract from it. I hope Google gives me brownie points for that one...

In fact, I would be very interested to hear what those of you with more SEO experience have to say about the site. Does this approach actually help with search engines, or would it make it worse?

Ok, so there is one issue I can see with this approach: Tracking of visitors is made a bit more complex. Maybe I can use a small bit of JavaScript to re-load the image of the tracker that I use when a user clicks one of the navigation links? Again, if you have some feedback there, I would really appreciate it.


You should follow me on twitter here.