AJAX and the Browser Back Button

Question

I run a browser based game at www.darknovagames.com. Recently, I've been working on reformatting the site with CSS, trying to get all of its pages to verify according to the HTML standard.

I've been toying with this idea of having the navigation menu on the left AJAX the pages in (rather than taking the user to a separate page each time, requiring a reload of the title and nav bar, which almost never change) and I know that if I do so, I will probably break the Forward/Back buttons in the browser. My question I guess is, should I go ahead and AJAX the site, thus requiring the user to use the sites navigation to play the game, or should I leave the site as it currently stands, and use standard hyperlinks and things for navigation?

The reason I ask I guess is that I built a forums system into the site, and a lot of times I would want to link say to a particular topic within the forums.

I'm also open to suggestions. Is there a standard (preferably without traditional frames) way to make only the body area of the site reload, while still changing the URL so that users can bookmark and forward/back, etc? That could potentially solve my problem as well. I'm just asking for the best solution here, not an answer to a specific question. ^_^

Thanks

Answer 1

Use ajax for portions of the page that needs to update, not the entire thing. For that you should use templates.

When you want to still preserve the back button for your various state changes on the page, combine them with # achors to alter the url (without forcing the browser to issue another GET).

For example, gmail's looks like this:

mail.google.com/#inbox/message-1234

everything past the # was a page state change that happened via ajax. If I press Back, I'll go to the inbox again (again, without another browser GET)

Answer 2

There are numerous ways the solve this problem using funky Javascript techniques, often involving iframes, but I think in this situation you need to question why you're using AJAX. Is it actually going to make the site any easier to use for the user? It sounds to me like you're using it cos you think its cool (which in itself isn't always a bad thing) not because it will actually add any value to your visitors. From any normal website, normal hyperlinked documents are nearly always the right thing for the primary navigation. Its what people expect and I wouldn't recommend you go around breaking those expectations based on some fancy technology.

AJAX is awesome and allows you to do many great things, changing a websites navigation is not one of them.

Well done for picking up on this problem though, theres a lot of sites out there that just go ahead with AJAX and don't even think about this!

Answer 3

AJAX is not the best solution for navigation for exactly the reason you describe. The hit for reloading the header and navbar is minimal compared to the hassle of breaking the browser's navigation UI.

A more appropriate example of AJAX would be to allow users to play the game in the main window while they can browse through a list of other content in a nav pane. You could load additional items in the nav pane via AJAX without disturbing the gameplay.

Answer 4

I’d stick with simple hyperlinks. Your page furniture shouldn’t account for a big portion of the HTML, so it’s not a big win excluding it from page requests. Making each resource addressable (i.e. a URL for each bit of content a user might be interested in) is a key design feature of the web. It means caching can work, and means users can share bookmarks. It makes Google work, as well as social bookmarking sites.

Shaving a couple of HTML bytes off subsequent page changes isn’t worth the effort, in my opinion.

Answer 5

If you're going to enable AJAX, don't do it at the expense of having accessible URLs to every significant page on your site. This is the backbone of a navigable site that people can use.

When you shovel all your functionality into AJAX calls and callbacks, you're basically forcing your users into a single path to access the features and content that they want -- which is totally against how the web is meant to function. People rely on the address bar and the back button. If you override all your links so that your site is essentially a single page that only updates through AJAX, you're limiting your users' ability to navigate your site and find what they need. It also stops your users from being able to share what they find (which, that's part of the point, right?).

Think about a user's mental map of your site. If they know they came in through the home page, then they went to search for something, then they landed on a games page, then they started playing a particular game, that's four distinct units of action that the user took. They might have done a few other smaller, more insignificant actions on each of these pages -- but these are the main units. When they click the Back button, they should expect to go back through the path they came in on. If you are loading all these pages through AJAX calls, you're providing a site whose functionality runs contrary to what the user expects.

Break your site out into every significant function (ie, search, home, profiles, games -- it'll be dictated by what your site is all about). Anywhere you link to these pages, do it through a regular link and a static URL.

AJAX is fine. But the art of it is knowing when to use it and when not to. If you keep to the model I've sketched out above, your users will appreciate it.

Answer 6

Check out reallysimplehistory. The wiki hasn't been updated for 10 months, but I was just at the Ajax Experience 2008 and saw a presentation by Brian Dillard on it. He says the 0.8 code is on his hard drive. Hopefully, it will be downloadable soon.

Answer 7

Yo might want to check out; "Really Simple History" by Brad Neuberg...

Answer 8

If you're willing to give jQuery a shot, this tutorial might help.