Startseite > Un-Sinn > Webdesign > Java-Script

JavaScript - aber richtig!

Tips & Tricks für die ambitionierte Homepage

Das Geheimnis eines erfolgreichen Webmasters besteht darin, seinen Besuchern einen echten Mehrwert zu bieten. Wertvolle Informationen gibt es zu Hauf und an jeder Ecke im Internet. Aber progressiv gestaltete Seiten, die den Besucher mit dynamischen Effekten beeindrucken und ihn in ihren Bann ziehen, sind selten, sogar sehr selten. Und genau hier liegt Ihre Chance. Nutzen Sie die Möglichkeiten, die Ihnen JavaScript bietet! Diese Webseite will Sie dabei unterstützen und Ihnen zu einem erfolgreichen Webauftritt verhelfen.

Die folgenden Ratschläge und Hinweise sind in mehrere Abschnitte untergliedert. Lesen Sie die entsprechenden Texte aufmerksam und studieren Sie die zugehörigen Beispiele sorgfältig. Schon bald werden Sie das notwendige Rüstzeug erworben haben, um bei den Großen mitspielen zu können.

Hinweis: Im Hinblick auf die zahlreichen integrierten Beispiele ist es empfehlenswert, diese Seite mit aktiviertem JavaScript zu betrachten.

Links und Navigation

Links sind die unabdingbare Voraussetzung, um sich auf einer Website zu bewegen und von einer Seite zur nächsten zu navigieren. Um so erstaunlicher ist es, daß viele Webmaster den technischen Aspekten der Verlinkung kaum die erforderliche Aufmerksamkeit widmen. Aber bereits hier können Sie den ersten entscheidenden Fehler begehen. Sofern Sie Links mittels <a href="Ziel_URL">Linktext</a> setzen, kann jeder Besucher, auch derjenige, der JavaScript aus Unwissenheit oder Besserwisserei ausgeschaltet hat, auf die betreffende Seite gelangen. Wenn Sie dort aber interessante JavaScript Effekte eingebaut haben, wird der Besucher davon nichts mitbekommen, enttäuscht sein, daß Ihre Seite so langweilig ist und diese schnellstmöglich wieder verlassen. Wenn Sie die Verlinkung jedoch so vornehmen, daß eine Navigation nur mit aktiviertem JavaScript möglich ist, zwingen Sie den Besucher, JavaScript einzuschalten und er erlebt die Seiten so, wie Sie sich das als Webautor vorgestellt haben. Um diesen Effekt zu erreichen, genügt es, den folgenden Alternativ-Code zu verwenden: <a href="#" onclick="location.href='Ziel_URL';">Linktext</a>. Auf diese Weise beträgt der Anteil an Besuchern mit aktiviertem JavaScript auf Ihrer Homepage 100.0 % und sie müssen sich ab sofort keine Gedanken mehr darüber machen, daß Sie einzelne Surfer mit Ihren interessanten JS-Features wohlmöglich gar nicht erreichen.

Fenster

Nur ein unerfahrener Webmaster läßt es zu, daß seine Besucher ihr Browserfenster jeweils so gestalten, sie es für richtig halten. Ein Surfer kann naturgemäß nämlich gar nicht wissen, bei welcher Fenstergröße eine Seite optisch am besten zur Geltung kommt. Darüber hinaus lenken Menü-, Werkzeug- und Navigationsleiste nur von der Präsentation der multimedialen Inhalte ab. Nutzen Sie daher selbstbewußt die Möglichkeiten, die Ihnen JavaScript für die Gestaltung und Manipulation des Browserfensters an die Hand gibt und lassen Sie sich nicht von skeptischen Stimmen sogenannter Usability-Experten verwirren. Der entscheidende Befehl für die Erzeugung neuer Fenster, die Ihren Vorstellungen entsprechen, lautet dabei window.open(). Mit den Eigenschaften width, height, top und left können Sie dabei Größe und Position festlegen und mit den Eigenschaften toolbar, menubar, scrollbars und resizable, die allesamt auf 'no' gesetzt werden müssen, können sie verhindern, daß überflüssige Fensterbestandteile angezeigt oder Ihre Fenster durch den Besucher unzulässigerweise in ihrer Größe verändert werden.

Das folgende Beispiel demonstriert die eben geschilderte Technik in anschaulicher Weise. Bitte beachten Sie, daß Ihnen die JavaScript Befehle resizeTo() und moveTo() weitere sinnvolle Ansatzpunkte zur Umsetzung Ihrer gestalterischen Vorstellungen bieten, wie sie ansatzweise erkennen können, wenn Sie gleich in dem neu geöffneten Fenster mit Seite 1 über den dort vorhandenen Link Seite 2 aufrufen:

Beispiel 1 : neue Fenster sinnvoll gestalten

Beeindruckend, nicht wahr? Ich hoffe, daß Ihnen langsam klar wird, warum JavaScript aus Besuchersicht unverzichtbar ist.

Back-Button und Browser History

Ist Ihnen bei einem Blick in die Logfiles auch schon einmal aufgefallen, daß es Surfer gibt, die ziemlich schnell wieder das Weite suchen? Sehr häufig ist Unachtsamkeit und Unkenntnis die Ursache für dieses Phänomen. Genauere Analysen haben ergeben, daß in einem Großteil dieser Fälle die Zurück-Schaltfläche des Browsers irrtümlicherweise angeklickt wurde und der verwirrte und unerfahrene Besucher nicht mehr in der Lage war, zu der gerade eben verlassenen Seite zurückzufinden. Mit Hilfe von JavaScript gehören solche Pannen der Vergangenheit an. Der Back-Button läßt sich auf ganz einfache Weise deaktivieren, so daß ein versehentliches Drücken glücklicherweise folgenlos bleibt.

Beispiel 2 : irrtümliches Verlassen von Webseiten erschweren

Rufen Sie in obigem Beispiel - ausgehend von Seite 3 - die Folgeseite 4 auf und versuchen Sie, von hier - durch Betätigung des Zurück-Buttons in Ihrem Browser - wieder auf die Ausgangsseite 3 zurückzukehren.

Kernstück dieser sinnvollen Hilfestellung für unerfahrene Besucher ist die Verwendung des kleinen Codeschnipsels onunload="location.replace(self.location)" in einem frameset Element. Ein weiterer positiver Nebeneffekt einer solchen Vorgehensweise besteht darin, daß in einem neu erzeugten Fenster die sogennante History, also die Liste der bereits besuchten Seiten neu angelegt wird, also quasi bei Null anfängt. Auf diese Weise verhindert man als Webmaster eine mögliche Irritation des Besuchers durch bereits besuchte Seiten anderer Domains und steigert so unmittelbar seine Zufriedenheit.

Marketing & Werbung

Kein Besucher kann als Außenstehender die wahren Qualitäten einer Website auch nur ansatzweise beurteilen. Um so wichtiger ist es, daß ein Webmaster für sich und sein Produkt in angemessener Weise Aufmerksamkeit erzeugt. Und auch hier - Sie haben es bestimmt schon vermutet - kommt JavaScript als Mittel der ersten Wahl zum Einsatz. Die Zeiten langweiliger Textlinks, gleichförmiger Linklisten oder einfallsloser Banner gehören der Vergangenheit an. Angesagt sind heute creativ gestylte Werbemessages, die es auf den Punkt bringen. Coole Sites haben coole Werbung. Überzeugen Sie sich selbst:

Beispiel 3 : Werbung, die den Nerv trifft

Besonders erwähnt werden sollte in diesem Zusammenhang noch die Tatsache, daß die eben gezeigte Einblendung in moderner Layer-Technologie realisiert ist. Damit schlagen Sie als Webmaster allen Popup-Verweigerern, die auf sogenannte Popup-Blocker zur Unterdrückung unerwünschter Werbung setzen, ein Schnippchen. Auf Ihrer Seite bestimmen immer noch Sie als Webmaster, was zu sehen ist - dank JavaScript!

Optische Effekte

Wer kennt es nicht, das dringende Bedürnis nach positiven optischen Reizen, wenn er zuvor eine jener unsäglich drögen Seiten irgendwelcher Usability-Gurus besucht hat? Ergreifen Sie die Chance, sich auf diese Weise von Ihren Konkurrenten und Wettbewerbern positiv abzusetzen. Bieten Sie Ihren Besuchern überzeugende grafische Animationen getreu dem Motto "Meine Website soll schöner werden". Stetig steigende Besucherzahlen werden sie schnell davon überzeugen, daß Sie sich damit auf dem richtigen Weg zu befinden. Und zögern Sie nicht, mit JavaScript die beste dafür geeignete Technik anzuwenden. Der Erfolg wird Ihnen recht geben.

Falls Sie unsicher sind, was sich Ihre Besucher wünschen und sie noch über wenig Erfahrung mit animierten Grafiken verfügen, probieren Sie es zu Beginn am besten mit einem putzigen und immer wieder gern genommenen animierten Cursor:

Beispiel 4 : Mausverfolger - [stop]

Im Laufe der weiteren Verschönerung Ihrer Seiten können Sie sich dann stufenweise anspruchsvolleren Aufgaben, wie beispielsweise Feuerwerkseffekten oder sanft herabrieselnden Scheeflocken widmen. Ihrer Phantasie sind dabei keinerlei Grenzen gesetzt.

Funny Stuff

Neben hübschen und verspielten Bildeffekten lassen sich Webseitenbesucher erfahrungsgemäß besonders gut mit spaßigen und interaktiven Elementen beeindrucken. Kleine Gimmicks wie der folgende tragen dazu bei, daß Ihre Seiten nachhaltig im Gedächtnis bleiben und als Geheimtip gehandelt werden.

Beispiel 5 : suuuper lustig...

Unerfahrenen Besuchern wird beim Aufruf der Animation zunächst wohl der Atem stocken ob des gelungenen Effektes, wohingegen der routinierte Surfer mehr Gefallen an der ausgeklügelten Programmierung finden dürfte, durch die Sie sich als Fachmann in Sachen JavaScript zu erkennen geben. Als besonderer Clou erfolgt der Aufruf des Scriptes mittels der Funktion <onclick="setTimeout('funktion(..,..,..)', 3000)"> leicht zeitversetzt, wodurch die Wirkung auf den Besucher aufgrund des Überraschungseffektes noch gesteigert wird.

Technische Kompetenz

Der Einbau effizienter Kopierschutzmechanismen sollte für einen erfolgreichen Webmaster gleichfalls eine absolute Selbstverständlichkeit darstellen. Sie demonstrieren damit nicht nur Ihre ablehnende Haltung gegenüber dem Diebstahl geistigen Eigentums, sondern - viel wichtiger - programmiertechnisches Know-how, um das Ihre Besucher Sie beneiden werden. Auch hier entfaltet wieder ein kleines Stück JavaScript Code eine große Wirkung. Mit einem einfachen <body onContextmenu="return false" oncontext="return false"> sorgen Sie dafür, daß sich jeder Dieb bei dem Versuch, Inhalte Ihrer Seite zu klauen, daran die Zähne ausbeißt. Probieren Sie es gleich hier und jetzt aus! Und wenn Ihnen dieser Schutz noch nicht ausreichend erscheint, können Sie sogar noch einen Schritt weitergehen und den wertvollen Quellcode Ihrer Seite mit Hilfe von JavaScript wirkungsvoll verschlüsseln und somit komplett unlesbar machen.

Eine weiteres, extrem nützliches Einsatzgebiet von JavaScript ist der Schutz einzelner Seiten über eine Paßwortabfrage. Um diese äußerst wirksame Zugangskontrolle zu etablieren, müssen Sie in einem kleinen Script lediglich ein geheimes Kennwort über eine Variablenzuweisung deklarieren, anschließend den Besucher um Eingabe seines Codes bitten und ihn erst nach positiver Überprüfung auf die Zielseite weiterleiten.

    
    function pw() {
	var Eingabe=(prompt("Paßwort:") == "geheim") ?
	window.location.href="weiter.htm" :
	window.location.href="verboten.htm";}

Das folgende Beispiel benutzt ein vergleichbares Script, um ungebetene Besucher fern zu halten. Versuchen Sie, auf die Zielseite zu gelangen. Sofern Sie kein ausgesprochener Hacker sind, wird es Ihnen mit Sicherheit nicht gelingen.

Beispiel 6 : hochwirksame Zugangskontrolle über Paßwortabfrage

Usability

Oft liest man, der Einsatz von JavaScript mache Webseiten unbenutzbar. Lassen Sie sich nicht ins Bockshorn jagen - das Gegenteil ist richtig! Usability fängt damit an, daß Ihre Webseite korrekt dargestellt wird. Und dafür wiederum ist es zwingend erforderlich, daß der Besucher die passende Auflösung zum Betrachten Ihrer Webseite an seinem Monitor einstellt. Doch woher soll er wissen, welche Auflösung korrekt ist, wenn nicht Sie ihm diese Information via JavaScript liefern?

Um einen dezenten Hinweis wie den folgenden:

auszugeben, müssen Sie lediglich das folgende kleine Script an passender Stelle Ihrer Seite einbauen:

    
    <script type="text/javascript">
    <!--
      var correctwidth=900
      var correctheight=600
      if (screen.width!=correctwidth||screen.height!=correctheight)
      document.write("Die ideale Monitorauflösung zum Betrachten dieser
          Website beträgt "+correctwidth+"*"+correctheight+". Sie haben
          zur Zeit eine Auflösung von "+screen.width+"*"+screen.height+"
          gewählt. Bitte passen Sie Ihre Monitorauflösung umgehend an, da
          der ästhetische Gesamteindruck der Website ansonsten nachhaltig
          beeinträchtigt ist!")
    //-->
    </script>

Ihre Besucher werden Ihnen dankbar sein, ist doch eine optimale Darstellung der Inhalte der verdiente Lohn für die Änderung der Monitorauflösung.

Ein weiteres unverzichtbares Feature benutzerfreundlicher Seiten stellt die Integration separater Buttons zum Aufrufen der Zurück- sowie der Druck-Funktion des Browsers dar. Den meisten Usern ist nämlich gar nicht bewußt, daß ihr Browser über diese Möglichkeiten verfügt. Mit Hilfe von <onclick="history.back()"> sowie <onclick="window.print()"> leistet JavaScript also einen nicht hoch genug einzuschätzenden Beitrag zur Usability von Webseiten und straft alle diesbezüglichen Kritiker Lügen.

Ist es Ihnen auch bereits passiert, daß Sie beim Surfen die Zeit vergessen und vor dem Rechner "versackt" sind? Auch das gehört - dank JavaScript - der Vergangenheit an. Ein nur 6 KB kleines Script sorgt dafür, daß Ihre Besucher ständig die Uhrzeit vor Augen haben, wenn sie auf Ihren Seiten unterwegs sind. Ein kleiner Schritt für den Webmaster - aber ein großer Schritt hin zu mehr Benutzerfreundlichkeit!

Besucher binden

Der Durchschnittssurfer ist untreu. Zu groß sind für ihn die Verlockungen der unendlich vielen Seiten, die es noch neu zu entdecken gilt. Für Sie als Seitenbetreiber ist der Besucher andererseits Ihr wertvollstes Gut, das Ziel all Ihrer Aktivitäten. Was also tun, um den Anteil an treuen Stammbesuchern zu vergrößern? Ganz einfach - bauen Sie eine persönliche und emotionale Bindung zu Ihren virtuellen Gästen auf. Eine freundliche Begrüßung beim Betreten der Seite (zum Beispiel in der Statuszeile) und eine herzliche Verabschiedung, verknüpft mit der Bitte um baldige Wiederkehr (zum Beispiel als Systemmeldung) bewirken Wunder. Ihre Besucher fühlen sich wertgeschätzt und sind schnell bereit, die Website als virtuelle Heimat zu akzeptieren. Das folgende Script, welches ich auch selbst sehr erfolgreich verwende, ist für diesen Zweck wie geschaffen:

    
    <body onunload="alert('Herzlichen Dank für Ihren Besuch.\n
        Bitte beehren Sie uns demnächst wieder!');">

Der freundliche Statuszeilentext, der - wie Sie sicher schon bemerkt haben - maßgeblich zum positiven Flair dieser Seite beiträgt, wurde ebenfalls im Handumdrehen mit wenigen Zeilen JavaScript unter Verwendung von window.status realisiert.

Statistik

Oft wird die Frage gestellt, wie groß denn der Anteil an Surfern sei, die JavaScript auf ihrem Rechner deaktiviert hätten. Sehr häufig - nicht zuletzt von JavaScript Kritikern - hört man darauf die Standardantwort: So viele, daß es sich ein Webmaster nicht leisten kann, Seiten ins Netz zu stellen, die ohne JavaScript nicht funktionieren.

Falls Ihnen diese Antwort zu ungenau ist, kann ich Ihnen - natürlich mit Hilfe von JavaScript - eine wesentlich präzisere Antwort geben. In der folgenden Box sehen Sie eine exakte Echtzeit-Auswertung für alle Besucher, die sich gegenwärtig auf den Seiten von k-faktor.com befinden. Mit einem Klick auf den "Refresh"-Button lassen sich die Daten jeweils aktualisieren.

Besucher auf k-faktor.com mit und ohne JavaScript

Besucher	absolut	prozentual


Datum / Zeit	n.a.

gesamt	n.a.	n.a.
mit JavaScript	n.a.	n.a.
ohne JavaScript	n.a.	n.a.
Sonstige	n.a.	n.a.

Hinweis: Für die Anzeige und Aktualisierung der Daten sind selbstverständlich JavaScript und ein Browser der neueren Generation erforderlich.

Die Statistik ist selbstverständlich kein Hexenwerk, sondern klar und logisch abgeleitet und mit wenigen Zeilen JavaScript Code realisiert. Die ausgeklügelten Formeln bilden - in leicht abgewandelter Form - das Herzstück der obigen JavaScript Statistik. Sie sehen also einerseits, welche Möglichkeiten diese Technik dem ambitionierten Webautor bietet und andererseits, wie weit Sie sich darauf verlassen dürfen (auf JavaScript an sich und darauf, daß Ihre Besucher es auch aktiviert haben).

Fazit

Wenn Sie sich bis hierher durchgekämpft haben, sollte es Ihnen jetzt nicht mehr schwer fallen, den Inhalt dieses Artikels und die Meinung des Autors zum Einsatz von JavaScript für die Realisierung reiner "Gimmicks" auf Webseiten richtig einzuordnen. Falls Sie aber dennoch unsicher sind, dürfen Sie gerne nachfragen. ;-)

Interessante weiterführende Links:

JavaScript Workshop: Für die sinnvollen Anwendungen... - Online Version des von S. Mintert und C. Kühnel herausgegebenen Buches.
Yams!: Hier wird JavaScript nicht für überflüssige Effekte auf Webseiten mißbraucht sondern bildet die Grundlage für die Online-Version des gleichnamigen beliebten Würfelspiels.

Diese Seite bookmarken:

URL: http://www.k-faktor.com/kram/javascript.htm | Letzte Änderung: 09.10.2006