Usability und SEO mit AJAX durch State Manager

State Manager für AJAX und JavaScript Widgets

Webseiten, die Inhalte über AJAX dynamisch nachladen oder JavaScript-Widgets (z.B. ein Akkordion) einsetzen, können zu Usability-Problemen führen. Benutzer versuchen z.B. den Zurück-Button Ihres Browsers zu benutzen, um zu vorherigen Inhalten zu gelangen. In einem JavaScript-Akkordion funktioniert dies natürlich nicht einfach so. Der User erhält stattdessen die vorherige Seite in der Browser-History.

Auch für Flash-Anwendung stellt das ein Problem dar, bei der professionellen Umsetzung werden dort aber schon seit längerem sogenannte State-Manager eingesetzt, denn eine Flash-Anwendung bleibt normalerweise nur auf einer URL im Browser stehen. Der State-Manager registriert Aktionen aus JavaScript in der Browser-History (z.B. der Wechsel eines Akkordion-Tabs) und ruft bei Aktionen des Benutzers über die Browser-Navigation wiederum eigene JavaScript-Funktionen als Callback auf.

HistoryManager als State-Manager für MooTools

Für MooTools (ein bekanntes JavaScript-Framework) gibt es in Form des HistoryManagers von Harald Kirschner eine einfache Komponente zur Verwaltung des Browser-Zustands. Am Beispiel unserer networkteam Website wurde das Akkordion auf der Startseite in kurzer Zeit um eine History-Funktion erweitert. Dafür reichte es aus, das JavaScript zu laden, den HistoryManager zu initialisieren, das eigene Widget mit einem Callback zu registrieren und eine Funktion bei jedem Wechsel eines Tabs aufzurufen.

Code-Beispiel für ein Akkordion

NJS.Accordion = new Class({
	Implements: Options,
	options: {
		useHistory: true
	},
	initialize: function(element, options) {
		this.setOptions(options);
		if (this.options.useHistory) {
			this.history = HistoryManager.register(
				'njs-accordion',
				[0],
				function(values) {
					this.toggleTo(values[0]);
				}.bind(this),
				false,
				false);
		}
		// Initialize accordion
	},
	toggleTo: function(tabIndex) {
		if (this.history) {
			this.history.setValue(0, tabIndex);
		}
		// Toggle to the selected tab
	}
});
window.addEvent('domready', function() {
	var accordion;
	HistoryManager.initialize({iframeSrc: '/path/to/blank.html'});
	accordion = new NJS.Accordion('accordion');
	HistoryManager.start();
});

Wie man sieht, reicht es aus, die Komponente im DomReady-Event zu initialiseren und nach der Registrierung innerhalb des Akkordions (in der initialize-Methode) den HistoryManager zu starten. Wichtig ist dabei eine Datei blank.html für den IE, da je nach Browser verschiedene Tricks angewendet werden, um Kontroller über die Browser-Buttons zu gelangen.

Die Registrierung setzt die Standardwerte für die Zustandswerte (im Beispiel des Akkordions den Tab-Index) und einen Callback, der bei Direktaufrufen über Deep-Links oder den Zurück-Button des Browsers das richtige Tab im Akkordion öffnet. Der Wechsel zu einem anderen Tab muss hingegen den HistoryManager über den Wechsel informieren, damit dieser den neuen Zustand speichern kann.

Fazit

Wenn auf einer Seite Inhalte dynamisch mit AJAX geladen werden oder JavaScript-Komponenten wie ein Akkordion zum Einsatz kommen, dann sollte ein State-Manager benutzt werden, um Usability und SEO-Maßnahmen nicht zu beeinträchtigen. Denn AJAX und JavaScript sollen die Bedienung einer Seite vereinfachen und eine bessere User-Experience bieten, anstatt sie zu verschlechtern. Fertige JavaScript-Komponenten wie z.B. der HistoryManager sorgen dafür, dass das nicht schwierig sein muss.

Links

• HistoryManager: digitarald.de/project/history-manager/
• SWFAddress: www.asual.com/swfaddress/
• Original StateManager: exanimo.com/actionscript/statemanager/