HomeKontaktImpressum
Sie sind hier: Home

Navigationselemente & JavaScript

Durch Nutzung von Sprites kann JavaScript-Code bei der Realisierung der Navigationselemente einer Website vermieden werden. Statt eines Scripts, welches nur bei aktiviertem Interpreter funktioniert, wird die Navigation auf HTML- und Stylesheet-Code reduziert. Somit wird die Usability und Zugänglichkeit einer Internetseite gesteigert. Neben der Optimierung der Performance einer Internetseite wird also auch ein Schritt in Richtung Barrierefreiheit getan.

Ein weiterer Aspekt liegt darin, dass die oft per JavaScript-Code nachgeladenen Bilder schleppend beim Browser des Seitenbesuchers eintreffen. Fährt der Besucher mit der Maus über Navigationsbuttons, die bislang noch nicht vom Webserver geladen wurden, so sieht er nur die eventuell angegebenen Platzhalter oder aber einen entsprechenden Hinweis auf ein fehlendes Bild. Je mehr Navigationselemente enthalten sind, desto länger hält dieser unschöne Zustand an und die beim Webdesign erdachte Verschönerung fällt schnell negativ ins Auge. Hinzu kommt, dass bei weitem nicht alle Internetnutzer JavaScript aktiviert haben, was dazu führt, dass bei diesen Besuchern die schöne Navigationspracht überhaupt nicht funktioniert.

Durch die Zusammenlegung der Navigationselemente in einem Sprite kann dieser Zustand vermieden werden. Die Folge ist, dass weniger Seitenelemente nachgeladen werden müssen und die Website-Performance entsprechend gesteigert wird. Auch das Nachladen einzelner Elemente per JavaScript entfällt und es entstehen keinerlei Verzögerungen bei der Anzeige von Navigationselementen. Dabei können entweder einzelne Navigationspunkte aus dem Menu mit allen möglichen Zuständen innerhalb eines Sprites abgelegt oder aber gleich alle Menupunkte samt unterschiedlicher Zustände in einer Datei vereinigt werden. Am Ende erhält man eine Datei, welche alle benötigten Elemente zur Navigation enthält.

Aufgrund dieser Vorgehenseise entfällt der zuvor benötigte JavaScript-Code zum Nachladen von Navigationselementen. Das führt letztlich dazu, dass auch Besucher mit abgeschaltetem JavaScript-Interpreter in den Genuß der durch den Webdesigner umgesetzten Effekte kommen. Abgesehen davon dass Abhängigkeiten, die sich auf die Funktionsfähigkeit auswirken, vermieden werden sollten, ist eine möglichst barrierefreie Erstellung der Website, bei der alle Seitenbesucher die selbe Ausgabe und Funktionalität erhalten, grundsätzlich erstrebenswert.

Auch bei den Elementen zur Seitennavigation kann die Einbettung von Bildmaterial zu einer zusätzlichen Steigerung der Website-Performance führen. Die einzelnen Navigationselemente werden zunächst in einem Sprite vereinigt und das Ergebnis dieser Collage wird in Form von Base64-kodierten Bilddaten in die HTML-Seite oder in das Stylesheet der Internetseite eingebettet. Durch diese Vorgehensweise kann Bildmaterial, welches zur Navigation auf der Website benötigt wird, schnell und in einem Zug beim Browser des Seitenbesuchers landen.

Allerdings führt dies wieder einmal zu einer recht umständlichen Behandlung von Sonderfällen, was daran liegt, dass einige Browseranwendungen mit in HTML oder CSS eingebetteten Bildern nicht zurecht kommen. Gerade der bislang am weitesten verbreitete Browser, Microsofts Internet Explorer, beherrscht diese Technik bis einschließlich der Version 7 leider noch nicht. Da man im Umfeld der Browseranwendungen in der Vergangenheit derartige Extrawürste in Form von Browserweichen und Conditional-Comments gewöhnt ist, sollte aber auch dieses Problem in den Griff zu bekommen sein.

Seite 2 von 2 | « [1] • [2] »










  
© 2009-2020 Möglichkeiten zur Steigerung von Geschwindigkeit und Usability Ihrer eigenen Website