Interaktive Webseiten...

performant. browserkompatibel. übertragbar.

In der Welt des Webdesigns herrschen anders als in der konventionellen Anwendungsentwicklung - gemeint ist damit die Programmierung von herkömmlichen Computerprogrammen - vergleichsweise heterogene, infrastrukturelle Rahmenbedingungen auf der Anwenderseite.

Jede Webseite stellt ein Computerprogramm dar, das im Idealfall vom Webbrowser des Anwenders ausgeführt wird. Auch Grafiken sind streng genommen als seperate Programme zu betrachten.

Bis zur Bildschirmdarstellung einer Weseite wird der Anwender-PC mehr beschäftigt, als sich so mancher Webdesigner, der vor seinem 4000,00 Euro teuren Apple sitzt, vorstellen kann.

Ein Beispiel: Das Pulldownmenü im Kopfbereich dieser Website verlangt bei Interaktion durch Mausberührung von einem Athlon Dualprozessorsystem mit zwei 1800 MHz Prozessoren, 1GB Arbeitspeicher und einer Grafikkarte mit 256 MB unter Windows XP Professional SP2 im Firefox 11% Prozessor-Leistung (CPU-Leistung). Hier bleibt noch Luft für Programme im Hintergrund.

Auf einem Pentium P3 mit 196 MB Arbeitsspeicher, einer 64 MB Grafikkarte, Windows 2000 Professional unter Internet Explorer 6.0 steigt die CPU-Leistung auf 70%. Wenn hier noch irgendwo eine Flashanimation oder ein ActiveX-Objekt mit Transparenzeffekten laufen würde, beginnt die Datenauslagerung, die Festplatte fängt an zu Rödeln wie Gerd Müller und das Anzeigen des Pulldown-Menüs verzögert sich erheblich. Wenn ein unversierter Anwender noch ein paar mal verwirrt irgendwo herumklickt, kommt es zum Systemabsturz.

Beide beschriebenen Anwenderkonfigurationen treten in allen Zielgruppen des Internets auf. Möglicherweise befindet sich Ihre Zielgruppe in jenen Regionen dieses Planeten, in denen eher ältere PCs verbreitet sind.

Bei entsprechenden Ansprüchen oder technischen Anforderungen an das Webdesign, die Features und Gadgets Ihrer Internetpräsenz sollten sich genau darüber im Klaren sein, wen Sie mit der Gestaltung und Programmierung Ihrer Webseiten beauftragen.

Bei websmith gehören solche Performance-Tests zu den Standards der Qualiätssicherung von Webdesign und JavaScript. Die gleichen Maßstäbe gelten bei uns auch für Serverscripte.

Die Erdkugel oben links benötigte übrigens bei beiden Tests 0,00% CPU-Leistung, und zwar nicht deswegen, weil die Grafik etwa nicht skaliert wäre oder der Test mit deaktivierter JavaScript-Einstellungen vorgenommen wurde, sondern weil das Script, das diese Webanimation steuert, ein Modul der websmith JavaScript-Bibliothek ist :).

Der Renderprozess

Der vorher beschriebene, sogenannte Renderprozess wird von den Webbrowsern recht unterschiedlich ausgeführt und kann bei der Darstellung mancher auf den ersten Blick unscheinbaren Elemente des Webdesigns extreme Rechenleistung erfordern:

• Tabellen mit viel Inhalt, komplexe Formatierungen über mehrere Spalten und Reihen oder prozentualen Bemaßungen
• Transparenzeffekte, sofern Sie überhaupt vom Browser - speziell unter Linux - ausgeführt werden können
• Skalierungsprozess großer, eingequetschter Grafiken, Videos und Multimedia-Objekte
• Videos, speziell beim Windows Mediaplayer und Quicktime-Plugin
• Flashanimationen, speziell bei Flash-swfObjects und großflächigen Multimedia-Präsentationen
• JavaScript-Animationen, die mit Clipping-Begrenzungen und über mehrere Ebenen verteilten Layerobjekten arbeiten
• Erzeugung dynamischer Inhalte aus mehrdimensionalen Arrays durch JavaScript, VB-Script oder J-Script
• Generell die Ausführung von JAVA-Applets
• und sicher noch einiges mehr...

Wir reden hier wohlgemerkt über Anwendungs-Praktiken, die von der Software-Industrie in Webauthoring-Umgebungen bedenkenlos propagiert werden. Natürlich um Software zu verkaufen. Allen voran Adobe / Macromedia und Microsoft.

W3C-Standards: Alibi der Software-Industrie

Insofern überrascht es natürlich wenig, daß diese Firmen maßgeblich im World Wide Web Cosnsortium involviert und engagiert sind. Würden man als Webdesigner seine Kunden mit Webdesign nach W3C-Standards konsequent bedienen, wäre die Darstellung Ihrer Webseiten von Browser zu Browser so unterschiedlich, daß man vergebens auf sein Honorar warten würde.

Der Einsatz von Authoring-Tools der meisten Hersteller hat im Übrigen nicht standardkonforme Dokumente zur Folge, was nachweislich für rund die Hälfte der Webdokumente unter www.w3c.org ebenso gilt. Die W3C-Validierungs-Grafiken sind also eigentlich nicht ihre eigenen Pixel wert.

Die Absicht, einheitliche Standards für Auszeichnungsdialekte und Programmiersprachen wie HTML, XTML, XML, CSS und JavaScript zu schaffen, ist gewiß ehrenvoll. In der Realität ist man aber davon weiter entfernt denn je.

Bei Microsoft selbst sieht es nicht anders aus: Weite Teile des für den Internet Explorer in der MSDN-Dokumentation definierten Funktionsumfanges werden seit Jahren nicht unterstützt.

Wir lernen daraus, daß die Damen und Herren in den Working-Groups des W3C bei Ihren wöchentlichen Telefonkonferenzen und regelmäßigen Symposien in aller Welt ganz andere Ziele verfolgen. Durch das “in die Welt Setzen” von Ideen für W3C-Standards soll Zeit für die Beseitigung der Defizite eigener Software-Produkte oder die Einführung neuer Lösungen gewonnen werden.

Datenmengen - AJaX

Zu den unbekannten Rahmenparametern des Anwenders gehört auch die Geschwindigkeit seiner Internetanbindung. Wie wir schon im Bereich Progressives Webdesign erläutern, sollten die Datenmengen des Webdesigns so gering wie möglich gehalten sein.

Das gilt auch für den HTML-Quellcode der Webseiten und für das gesamte Interface-Design und die Dialog-Logik von Content Management Systemen (CMS). Die populären Vertreter bringen mehrere hundert KB Datenmengen mit sich, die oft bei jeder Benutzeraktion neu übertragen werden.

Einem Kunden Typo3 als CMS anzudrehen, der eine normale Homepage mit Webshop betreibt und nur über ISDN-Zugang zum Internet verfügt, ist daher grober Unfug, der leider oft anzutreffen ist.

Um dem Problem Herr zu werden, verwenden einige Content Management Systeme inzwischen eine Technologie namens AJaX (Asynchronous JavaScript and XML). Hier werden Daten dynamisch vom Webserver abgerufen, ohne dass dazu die Seite neu geladen werden muß.

Diese über das XMLHttpRequest-Objekt per JavaScript und serverseitigem XML im Polling Verfahren funktionierende Technik liegt auch den meisten Web-Anwendungen des Web 2.0 Hypes zu Grunde und benötigt kein PlugIn. Sehr wohl sind hierfür aber eine wesentlich höhere Performance des Webbrowsers - speziell beim Internet Explorer - und bei umfangreichen Interaktionen mehr Prozessorleistung des Webservers erforderlich.

Besonders durch seinen Einsatz in Gmail, Google Groups, Google Maps oder der personalisierten Suche von Microsofts Suchmaschine Live-Search wird AJaX immer populärer und ist sicher ein guter Ansatz um den Datentransfer von Webanwendungen zu minimieren.

Die dem Webdesign einer Website zu Grunde liegenden Grafiken und Layoutkomponenten wie Cascading Style Sheets oder ihr Gerüst werden nur einmal übertragen, Nutzdaten sukzessiv angefordert und vom Webbrowser dynamisch zur Laufzeit in der Seite nachgerendert. Seit 1999 hat websmith einfachere Lösungen dafür entwickelt und verfeinert. In einigen Fällen entschlossen wir uns aber inzwischen für AJaX-Widgets.