Frisch ans Werk in 2009. Die Träum-und-Drömel-Zeit zwischen den Jahren geht dem Ende zu – Zeit über Neues nachzudenken. Und ich habe auch schon ein Thema, welchem ich mich 2009 intensiver widmen werde: Javascript. Jawohl, richtig gelesen. Das Teufelswerk, aber kommt man dran vorbei? Es ist nunmal Fakt, dass mir Kunden oft Beispielwebseiten zeigen, auf denen sehr schöne Effekte zu sehen sind. Ja, ja – schön finde ich die auch, aber wer Wert auf Webstandards legt, weiß, dass man bei vielen Dingen meist das eine nicht ohne das andere haben kann. Und das andere sind dann oft tiefgreifende und nicht akzeptable Minuspunkte bezüglich der Bedienbarkeit (Strichwort: JS deaktivert) und/oder erschwerte Suchmaschinenoptimierung (Stichwort: Indizierbarkeit von Links in JS-Navigationen und Flash-Webseiten). Das alles war für mich bisher ein Grund, dass ich mich auf das Wesentliche konzentriert habe, also auf alles, was möglich ist, ohne diese Nachteile in Kauf zu nehmen.
Es hat sich jedoch zwischenzeitlich einiges getan und ich bin auf eine Reihe von Möglichkeiten gestoßen, den Wünschen meiner Kunden vielleicht doch mehr entgegenzukommen ohne dasss ich die Anforderungen, die mir wichtig sind, zu sehr zurückschrauben muss. Es gibt Webseiten, auf denen Javasript-Effekte eingesetzt werden und die dennoch bedien- und benutzbar bleiben auch wenn JS per Browser deaktiviert wurde.
Einige Fundstücke habe ich hier zusammengetragen:
http://www.hotel-oxford.ro/
Diese Webseite wurde von www.desero.net/en, Webdesigner aus Rumänien, erstellt. BTW: Es lohnt sich mal einen Blick in das Protofoilio zu werden – zum Neidischwerden ;-). Die Webseite benutzt für die Slides das Javascript-Framework Mootools. Das Ganze ist unobstrusive eingebaut – d.h. die Webseite bleibt bedien- und benutzbar, auch wenn JS dekativert ist.
http://jareddesign.com/
Jared Christensen ist – wie es scheint – ein Multitalent aus Iowa, USA. Auch seine Webseite benutzt mootools um von einem zum nächsten skip sanft hinüberzugleiten.
http://www.teamviget.com/
Teamviget ist eine web consulting / design / development / marketing Firma mit mehreren Büros rund um Washington.DC und Durham. Auf der hier vorgstellten Webseite wird jQuery eingesetzt.
http://moofx.mad4milk.net/
Moo.fx ist eine Javascript Bibliothek, die im framework mootools und prototype verwendet werden kann. Auf dieser Webseite kommt das „akkordeon“ zum Einsatz. BTW: Das Akkordeon ist standardmäßig im CMS Typolight integriert – aber dazu im Laufe des Jahres noch mehr.
http://www.78d.se/
Und so kann die Akkordeaon-technik auch aussehen: Mario Eklund ist Webdesigner aus Schweden und setzt es in seinem Portofolio ein.
Das wären mal ein paar Beispiele für den Anfang. Ich werde diesen Artikel aber wahrscheinlich fortlaufend ergänzen, wenn ich noch andere Beispiele finde. Oder vielleicht habt ihr noch ein paar gute und interessante Beispiele? Es sollten aber unbedingt Webseiten sein, die auch dann noch bedien- und benutzbar sind, wenn JS deaktivert ist. Webseitenbespiele bei denen leider gar nichts mehr geht aber das dafür sehr schön, gibt es genug. Zur Nachahmung ist das aber nicht so sehr zu empfehlen.
One-Site
Bei einigen der hier vorgstellten Beispiele ist es offensichtlich, dass seiteninterne Skip-Links verwendet werden, bei anderen weniger oder hättet ihr bei der Oxford-Seite gedacht? So werden die Informationen für das menschliche Auge wohl proportioniert, das heißt: es gibt zu einem Thema immer nur eine kurze, schnell erfassbare Menge Text. Die Suchmaschine jedoch bekommt im Quelltext alle Informationen geballt auf einer Seite. Das finde ich sehr geschickt gemacht.
Und hier noch ein Link zu einer umfangreichen Sammlung weiterer Beispiele von onesite-Webseiten
Naja, ich finde „alles auf einer Seite“ eher sogar recht ungeschickt gemacht. Da sprechen für mich folgende Punkte dagegen:
* Erhöhte Speichergröße – evtl. will der Besucher nicht alles herunterladen. Nur weil momentan DSL hipp ist, bedeutet das nicht, dass man die Dateigrößen vernachlässigen sollte. Ich denke, dass mobiles Internet immer wichtiger wird und in diesem Rahmen dann auch wieder die Dateigröße
* Suchmaschinenoptimierung: hier kommen mehrere Aspekte zum Tragen. Zum einen werden Texte nach ihrer Reihenfolge oft gewichtet, zum anderen existiert nur ein Dokument, so dass die gesamte Domain nicht als relevant betrachtet werden könnte.
Die einfachste (und offensichtlichste) Lösung ist für mich – wenn ich diese Design-Effekte haben will – die entsprechenden Inhalte per AJAX nachzuladen. Das kann ja gerne beim Onload nach und nach sein. Geht auch inobtrusiv und hat die oben genannten Nachteile nicht.
Und was ist, wenn es ganz kleine Webseiten sind? Wäre das denn in diesem Fall nicht vielleicht sogar sinnvoll? Fakt ist, dass an Text meist eher mal zu wenig als zu viel vorhanden ist.
Dass es one-sites sind, habe ich ja auch nur nebenbei erwähnt – am wichtigsten sind mir die Effekte und dass eine Seite auch bei deaktivertem JS noch bedien- und benutzbar ist.
Frohes Neues übrigens ;-)
Für die Hotelseite z.B. müssen über 1MB in zig Dateien übnertragen werden – ich finde das indiskutabel. Auch in DSL-Zeiten versuche ich zumindest eine Startseite unter 100kb zu bringen.
Die JS-Effekte mögen anfangs noch ein Hingucker sein, aber mich nervt sowas inzwischen – wenn ich im Internet bin, suche ich nach Informationen und Seitenübergänge jedweder Art behindern mich nur.
Zum Thema SEO hat Mathias sich ja schon geäußert.
Bei einer „ganz kleinen“ Seite, z.B. ener Visitenkarte, mag sowas noch akzeptabel sein, aber nicht für andere – besonders wenn (geschäftlich wichtige) Informationen präsentiert werden sollen.
Die Frage ist, aus welchem Blickwinkel man eine Webseite betrachtet. Geht es darum Neukunden aus dem Netz zu gewinnen, kommt man an gewissen Anforderungen, die grob mit Usability und Acessibility umschrieben werden können, nicht vorbei. Da brauchen wir gar nicht drüber zu diskutieren. Jeder, der sich ernsthaft mit Webdesign beschäftigt, weiß das.
Es gibt aber bei Webseiten auch noch den werbenden Aspekt, den, bei dem es um die Wirkung geht und der mit Statistiken und PR nicht nachweislich zu erfassen ist. Und je mehr es in Richtung Werbung und Image geht, desto mehr werden solche Effekte nachgefragt. Ich würde es auch nicht übertreiben wollen. Wenn es auf jeder Webseite übersteigert viel an Effekten gibt, würde wahrscheinlich in der Gesamtheit schnell eine Sättigung eintreten. Aber das sehe ich bei den hier vorgstellten Beispielen nicht so.
Was ich mich im Moment nur frage ist, dass die ganzen JS Sachen vielleicht doch irgendwie inskonsequent sind, nicht Fisch nicht Fleisch. Wenn feststeht, dass es eine Imagewebseite sein soll, dann wäre vielleicht doch Flash die konsquentere Wahl, die zudem auch noch mehr Möglichkeiten bietet.
Da kommt ein nettes Zitat aus einem Usability-Buch, das in etwa so hieß: Wenn der Kunde bereits auf der Website ist, warum noch werben? Er ist da, weil er informiert werden will.
Wenn ich ein Buch über Usability geschrieben hätte und dieses Buch verkaufen möchte, würde ich wohl auch so reden ;-)
Definiere: Information!
Sind Informationen immer nur das was wir lesen und durch das Oberstübchen filtern? Oder sind nicht auch „Wirkungen“ und „Eindrücke“ eine Form von Information? Oder: Sind Sinneseindrücke keine Informationen?
Besucher auf einer Webseite sind in erster Linie mal (wichtiger aber) nicht qualifizierbarer Traffic, aus dem muss man die Kunden doch erst noch machen. Und hier braucht es – neben aller funktionsfähigen Technik und qualifizierten Informationen – auch Elemente, die positive Assoziationen schaffen.
Es steht für mich außer Frage, dass man Effekte nicht auf jeder Webseite, überladen und behindernd einsetzen sollte. Ich bezweifle jedoch, dass Usability und SEOtechnik in jedem Fall ausreichen um damit ausreichend viele und gute Kundenbeziehungen aufzubauen.
Ich denke, wenn Javascript (bzw. ein Framework) dezent eingesetzt wird und die Grund-Funktionalität nicht beeinträchtigt, falls JS deaktiviert ist … dann ist es ein Mehrwert für den Nutzer. Als Webprogrammierer hat man durchaus die Möglichkeit, beides zu kombinieren (siehe hierzu das erste Beispiel).