Nachdem JavaScript ja schon totgesagt wurde hat es nicht zu Unrecht in den letzten zwei Jahren eine Reinkarnation seinesgleichen erlebt, bietet es doch etliche Möglichkeiten, mit dem Besucher einer Website zu interagieren. Gerade AJAX hat das ganze Thema wieder sehr populär gemacht, so dass Internet-Applikationen möglich sind, die sich von Desktop-Programmen nur noch marginal unterscheiden. Nur ist das nicht immer der Fall.
Spricht man heutzutage von JavaScript, fällt meist automatisch auch der Begriff “unobtrusive”. Früher wurden unter dem Buzzword DHTML Skripte so fest mit Websites verdrahtet, dass ein Browser mit abgeschaltetem JavaScript nahezu keine Möglichkeit hatte, die Website in irgendeiner Form zu nutzen. Von diesem Konzept sieht man unter Bezug auf Webstandards mittlerweile ab, was auch die technische Sicht von Unobtrusive JavaScript beschreibt:
- JavaScript ist eine optionale Erweiterung, auf die man sich nicht verlassen sollte.
- Ein Script ist möglichst robust. Es bringt immer die Verfügbarkeit von Objekten in Erfahrung, die es zu nutzen gedenkt. Das Script geht souverän mit den Fällen um, in denen etwas Ungewöhnliches passiert. Es treten somit keine kritischen Fehler auf. Ein Script arbeitet rationalisiert und möglichst effizient.
- Konsequenter Einsatz von standardisierten Techniken wie dem W3C-DOM. Verzicht auf den Einsatz browserspezifischer Objekte, soweit standardisierte Alternativen existieren (meine Lesart)
- JavaScript-»Verhalten« (Interaktivität) wird unabhängig vom verwendeten Eingabegerät definiert, so dass eine gleichwertige Nutzung über Maus, Tastatur usw. möglich ist
- Die Logik aller Schichten wird im Code voneinander getrennt: HTML, CSS und JavaScript werden in separaten Dateien untergebracht. Im HTML-Code wird kein JavaScript-Code mittels Event-Handler-Attributen untergebracht. Stattdessen wird über das W3C-DOM auf die Elemente zugegriffen. Das »Verhalten« wird erst nach dem Laden des Dokuments (onload) dynamisch hinzugefügt. Ferner wird im JavaScript-Code kein direkter CSS-Code untergebracht (
.style.eigenschaft = "wert"), stattdessen werden die Klassen gewisser Elemente geändert, so dass andere, vordefinierte CSS-Regeln greifen.
Quelle: SelfHTML Weblog
Und der User?
Schön und gut. Das Wörterbuch beschreibt unobtrusive aber als bescheiden, dezent, und vor allem als unaufällig. Das mag von technischer Sicht aus gegeben sein, aber wie sieht es mit der Wahrnehmung durch den Besucher aus? Gerade in letzter Zeit sind mir zwei Beispiele aufgefallen, die zumindest mich einfach nur noch nerven.
Lightbox
Lightbox ist eine neue Möglichkeit, Bilder darstellen zu lassen. Klickt man auf ein Bild wird die Website abgedunkelt und das Bild im Vordergrund dargestellt. Schon in der ersten Version gab es dabei etliche Mängel in der Benutzerführung: Tastaturkürzel waren in der ersten Version nicht vorhanden. Standardkürzel funktionieren nicht, da man sich in der Browserhierarchie nicht vorwärts bewegt hat (sprich das Bild als nächste Seite aufgerufen hat), sondern sich immer noch auf derselben Seite befindet.
Version 2 wurde zusätzlich mit Animationen versehen, so wird der Rahmen des Bildes nun sozusagen dynamisch ausgeklappt, bevor das Bild angezeigt wird. Zusätzlich wurde eine Slideshow-Funktion integriert, die aber auch den Nachteil besitzt, das bei unterschiedlich großen Bildern wieder der Rahmen in einer Animation dynamisch den neuen Verhältnissen angepasst wird. Dies kann je nach Größe 1 – 2 Sekunden in Anspruch nehmen. 1 – 2 Sekunden, die ich nicht mehr als unauffällig bezeichnen würde, nervt es mich doch gewaltig, so lange auf ein Bild warten zu müssen – da kann ich auch gleich wieder auf Modem umsteigen. Der Preis dieser “Verbesserungen” ist übrigens ein Anstieg in der Codegröße um etwa den Faktor 10.
WebSnapr
Ganz ehrlich: Ich habe schon lange nichts mehr so sinnloses und ärgerliches wie WebSnapr gesehen. Beim Überfahren mit der Maus bzw. Fokussierung eines Links wird unmittelbar darunter ein kleiner Screenshot der Zielwebsite angezeigt.
Ein Screenshot, der mir überhaupt nichts bringt. Ich kann darauf nicht erkennen, was für einen Inhalt ich dort präsentiert bekomme, ob der Link nun relevant ist oder nicht ist auch nicht in Erfahrung zu bringen. Ich weiss ungefähr, was mich farblich erwartet, nur war es das auch schon. Der Preis für dieses “Feature” ist ein Screenshot, der nicht nach einer bestimmten Zeit verschwindet. Man stelle sich folgende Situation vor: Ich scrolle mit der Tastatur bzw. Mausrad eine Website ab, um einen Text zu lesen. Zufällig bleibe ich mit dem Cursor über einem Link stehen, der Text darunter wird unmittelbar von besagtem Screenshot verdeckt. Ergo werde ich gezwungen, weiter zu scrollen – auch wenn ich das eigentlich nicht möchte – um den Inhalt weiter erfassen zu können. Unauffällig my ass.
Was bleibt ist ein Stück JavaScript, dass von Userseite nichts bringt und unter Umständen eine Behinderung darstellen kann.
So what?
Unobtrusive sollte sich in meinen Augen nicht nur auf die technische Sicht beschränken. Man sollte sich auch Gedanken darüber machen, ob die gegebenen Möglichkeiten auch wirklich sinnvoll sind. Sicher, wir werden nicht mehr in das “goldene” Zeitalter von DHTML zurückkehren, bei der Websites bei abgeschaltetem JavaScript nahezu unbenutzbar wurden – aber Firlefanz, den keiner wirklich braucht, davon gibt es schon wieder eine ganze Menge.
Hier läuft aktuell nur ein einzelnes JavaScript, was die Kommentarvorschau realisiert, die meiner Meinung nach den Benutzer bei der Eingabe seines Kommentars unterstützt. Der Benutzer sieht direkt, wie seine Eingaben aussehen werden und hat dadurch auch ein wenig Einfluss auf die Darstellung. Primär sollte meiner Meinung nach JavaScript unterstützend wirken, nicht einen bestimmten Weg vorgeben. Unobtrusive sollte sich nicht nur auf die technische Sicht beschränken.
dem mit lightbox kann ich einfach nicht zustimmen! hatte lange genug ohne sie gearbeitet und es hat mich wahnsinnig aufgeregt wenn das bild immer in einem neuen fenster gezeigt wurde… man musste immer zurück klicken!
ich weiss nicht wie es bei anderen seiten ist aber wenn ich bilder zeige sind das keine schnellen pics, da stören diese 2 Sekunden nicht beim warten bis das javafensterchen fertig ist
aber mit dem snapsche…. haste schon ganz recht! geht wirklich sehr auf den keks! das problem ist das wordpress den mist seit kurzem automatisch mitbringt
Jeriko, deiner Meinug zum Thema Websnapr kann ich mich nur anschließen. Prominente Blogger auf WordPress.com haben da auch schon gegen protestiert, weil ja dort es standardmäßig angeschsaltet war.
Als Ex-Modem Benutzer empfand ich auch Lightbox immer als Strafe, weil riesige Bilder endlos lang luden und man derwweil nichts anders tun konnte, als auf einer anderen Webseite weiterzulesen. Ja, und dann… habe ich meistens zum Abschluss der Surfsession nur noch die einzelnen Tabs weggeklickt. Effekt war also auch noch, dass mich die Seite mit dem großen Bild nicht weiter interessiert hat.
Schöner Artikel und zur vernichtenden Kritik an WebSnapr meine volle Zustimmung. Die Thumbnails sind nicht nur sinnlos, sie stören regelrecht den Lesefluß auf einer Webseite.
Ansonsten sollte obstrusive groß geschrieben werden, allerdings muß man einige Aspekte differenziert betrachten. So bringt asynchrone Serverkorrespondenz (nennen wir es mal AJAX) durchaus einen Mehrwert: der User muß nicht mehr warten bis die komplette Seite neu geladen wird, sondern nur bis einige Teile aktualisiert werden. Ein flotteres Surfen ist die Folge. Wenn ich die Aktualisierung mittels AJAX nebenbei noch um einen leichten Fade- oder Scroll-Effekt erweitere, ist das zwar nicht zwigend notwendig, schadet im Regelfall aber auch nicht. Wenn es gut gemacht ist, freut sich das Auge. ;-)
Du redest von Schichten-Trennung … jedoch hast du mir doch wegen meinem Archiv ein Javascript-Schnipsel im unteren Bereich meines Body eingesetzt. Ist das evtl. nicht ganz eleganz gelöst? (Soll nicht als blöde Anmache verstanden werden)
Also bis auf die Lightbox hast Du meine Zustimmung, denn wenn ich mir schon die Zeit für ein größeres Foto nehme, dann werte ich die Lightbox als angenehme Entschleunigung, die mich aus meinen Surf-und Geschwindigskeitswahn holt und meine Konzentration aufs Objekt zieht. Ich denke bei einer Präsentation sind solche Mittelchen schon erlaubt, da muss nicht alles stur Effiziens ausgerichtet sein, ein wenig Unterhaltung kann nicht schaden. Aber da sind die Geschmäcker grundverschieden. Mit Websnapr sieht das halt schon anders aus, das kommt immer so ungefragt daher…
Vielleicht wurde meine Kritik an Lightbox missverstanden – Version 1 fand ich zum Beispiel von der Präsentation noch in Ordnung. Mir geht es hauptsächlich um die Animationen, die sich ziemlich in die Länge ziehen können und sich sehr sehr schnell abnutzen. Nicht zu vergessen die Steigerung der Codegröße um den Faktor 10(!)
@Martin: Prinzipiell könnte man diesen Codeteil auch in eine externe Datei verfrachten – tu dir keinen Zwang an :-) Aber du hast schon Recht, das ist auch Bestandteil der Schichtentrennung. Hauptsächlich zielt es aber darauf ab, dass zum Beispiel die ganzen on-Events (onclick, onfocus etc.) eigentlich nicht verwendet werden sollen, das erledigen EventHandler im JavaScript Code selber. Und der Part ist in der Tat von mir blöd gelöst worden – aber das Highlight wolltest du ja auch noch haben, dann verpacken wir das alles schön ;-)
@Jared, Malte: Stimmt, jetzt wo ihr es sagt erinnere ich mich auch wieder daran, dass bei wordpress.com mal was war – zumindest, das Lorelle sich dafür ziemlich entschuldigt hat. Ist das immer noch per default aktiviert?
Du sagst es, diese Screenshots nerven wie die Pest.
Lightbox find ich aber gut. Ok, du ja auch ;)
Hallo,
bei Snapr und Co. meine absolute Zustimmung. Habe vor einigen Tagen selbst mal damit experimentiert und bin beim testen dann auf eine Webseite geraten, die viele externe Links hatte: grauenvoll:-)
Zu Lightbox:
OK, der ganze Animationskram könnte auch weg bleiben. Nur die Einzeldarstellung, die Abdunkelung und die Navi-Möglichkeit per Mausklick im Bild finde ich nicht schlecht.
Es kommt ja auch immer darauf an, welches Publikum man mit seiner I-Net-Präsenz ansprechen möchte.
Gerade z.B. im Fotografiebereich nehmen sich die Besucher gern die Zeit und warten für ein gutes Foto schon 1-2 Sekunden. Wenn´s schneller geht…umso besser.
Deine “Wysiwyg-Kommentarfunktion” hier z.B. finde ich einfach oberklasse! …kannte ich noch garnicht.
lg
mathias
Super, dass freut mich. Apropos wir. Wie siehts am Wochenende aus?
Der WebSnapr-Kritik kann ich auch voll und ganz zustimmen — das ist einfach unsinniger Bullshit und nervt mich momentan auch gewaltig.
Bei der Lightbox sieht es jedoch anders aus. Man navigiert mit “p” und “n” zum vorherigen bzw. nächsten Bild, kann die Lightbox mit “x” oder “c” schliessen — da sehe ich kein Problem. Und die Ansicht via Lightbox finde ich persöhnlich auch viel schöner als irgendwelche neuen Fenster, Tabs, o.ä., die sich öffnen und ein Chaos entstehen lassen.
Thema Websnapr – wo kann ich unterschreiben? Abolut richtig. Ich klick mich viel durch links und find Design auch wichtig, aber auch das erkenne ich auf den Screenshots (wenn sie dann funktionieren) auch nicht wirklich.
Ich schliesse mich den vorherigen Kommentatoren an, Websnapr ist wirklich nervig, auch wenn ich das ne Weile lang auch auf meinem Blog installiert hatte (Bin dann zur Vernunft gekommen ;-) ).
Lightbox widerum find ich ziemlich genial, und die Animationen stoeren mich auch nicht sonderlich, wirkt irgendwie wie ne kleine Praesentation.
Greetings
Ich stimme dir zu, WebSnapr ist schrecklich und Lightbox2 zu aufgebläht. Doch dafür gibt es eine tolle Alternative: Litebox »Same great taste, less calories.«
kannst du mir den unterschied zwischen “lightbox” und “litebox” erklären?
von der geschwindigkeit sind doch beide gleich oder?
also wie schnell sie ein bild aufmachen!
@jared: Beide sind von der Funktionalität gleich, der Unterschied liegt in dem benutzten JavaScript-Framework: Lightbox benutzt Prototype mit script.aculo.us, Litebox moo.fx als Basis.
habs mir gebookmarkt!
wenn ich aber für alle javascript funktionen im blog “prototype” benutze, kann ich ja leider nicht ohne weiteres auf ne andere library umsteigen! müsste ja den rest an funktionen auch ändern
oder ich versteh javascript falsch
Prinzipiell lassen sich beide ohne Probleme parallel benutzen – nur wird die Website dann noch weiter aufgebläht, was sicher nicht gewünscht ist. Man sollte sich schon auf ein Framework festlegen und dann dabei bleiben.
Aber möglich isses, ja.
Richtig, durch das andere Framework von Litebox ist die Gesamtgröße an zu ladenden Dateien für den Client kleiner. Außer man verwendet eh schon prototype.
“Litebox” kannte ich noch gar nicht …werd’ ich mal antesten, danke für den Tipp!
Bestes,
Micha
hä?