Webdesign: Handgenäht hält besser

Die InfoWeek-Umfrage zeigt es: Professionelle Webdesigner setzen visuelle Editoren vornehmlich für Prototyping und Templates ein. Den letzten Schliff verpassen sie dem Code im Texteditor von Hand.

Artikel erschienen in Swiss IT Magazine 2001/32

     

Anlässlich jedes neuen Release übertreffen sich die Hersteller von Webdesign-Tools gegenseitig mit einer überbordenden Fülle immer noch raffinierterer Features. Automatisches Generieren von JavaScripts zwecks Mouseover-Bildwechsel, DHTML-Animation und allerlei anderen Nettigkeiten gehören ebenso zum Standardrepertoire der zwei bekanntesten Web-Editoren Dreamweaver und GoLive wie ein mehr oder weniger WYSIWYG-konformer Editiermodus: Die Webseite wird wie im Print-Layoutprogramm durch Drag&Drop-Plazieren von Design-Elementen komponiert statt wie bisher durch Zusammenstellen einzelner HTML-Tags, ergänzt durch handgearbeitete Scripts in JavaScript, ASP, PHP und anderen Sprachen, programmiert.




Je bequemer aber der Editor dem Anwender die Seitengestaltung macht, desto mehr wird er vom eigentlichen HTML-Code entfremdet, der nach wie vor die Basis jeder angezeigten Webseite bildet: Die Feinkontrolle über das Ergebnis geht verloren, was in unserer Umfrage denn auch das fast einhellig geäusserte Hauptargument gegen den breiten Einsatz von WYSIWYG-Tools im Webdesign war.


Achtfaches Webprofi-Urteil

Wir haben acht Webdesign-Agenturen über ihren Tool-Einsatz befragt und uns gleichzeitig nach den wahrgenommenen Stärken, Schwächen und Wünschen an die Hersteller erkundigt. Unter den befragten Firmen finden sich sowohl kleinere Studios mit weniger als zehn Mitarbeitern als auch international tätige Dienstleistungsunternehmen. Hochkarätige Erzeugnisse sind von allen Interviewpartnern im Web präsent (siehe Tabelle im Heft).



Bereits die Frage nach den benutzten Tools zeigt, dass der Design- und Entwicklungsprozess typischerweise mehrstufig abläuft - je nach Projekt und Agentur sind Abweichungen natürlich möglich:





Layout-Entwurf: Nach dem inhaltlichen und strukturellen Konzept, das neben Hirn und Textverarbeitung - sei es am PC oder mit Bleistift und Papier - ohne Werkzeug auskommt, wird als erstes ein grafisches Layout-Konzept oder "Mock-Up" erstellt. Dabei kommen in den meisten Fällen Photoshop, Illustrator, Fireworks oder QuarkXPress zum Einsatz: Zum Beispiel Matthias Saner von Popeye nutzt diese auch im Print-Bereich gebräuchlichen Standardprogramme: "QuarkXPress und Photoshop sind die schnellsten Tools für den Design-Entwurf."
Laut Artur Schmidt von Aseantic ist "Photoshop das stärkste Tool unter den Grafikprogrammen. Mit Version 6 ist jetzt auch das direkte Abspeichern in den Webformaten praktisch umgesetzt."




Templates: Aufgrund eines vorliegenden Layout-Entwurfs oder gleich direkt in einem Webeditor wird sodann das Grundgerüst der Seiten aufgebaut, auf dessen Basis später die Details meist "von Hand" implementiert werden. Am häufigsten wird hier Dreamweaver genannt (6 von 8 Antworten), dreimal GoLive; Frontpage wird nur von Namics erwähnt. Bei Nextron setzt man generell auf Texteditoren wie HomeSite oder arbeitet vom Start weg in ColdFusion Studio, "da wir sehr intensiv mit ColdFusion arbeiten". Lukas Frei, Mitglied der Nextron-Geschäftsleitung, legt auch in der Template-Phase grössten Wert auf effizienten Code: "Es dauert vielleicht etwas länger, eine Seite von Hand zu codieren, aber ich glaube immer noch, dass ein perfektes Mastertemplate der Schlüssel zur erfolgreich funktionierenden Homepage ist."




Produktive Umsetzung: Auf Basis der Templates entstehen nun die einzelnen Seiten. Sämtliche befragten Agenturen fordern für diesen Arbeitsschritt die uneingeschränkte Eingriffsmöglichkeit in den HTML- und Scripting-Code und nutzen dazu meist entweder einen Texteditor - neben HomeSite werden UltraEdit-32 (PC) und BBEdit (Mac) genannt - oder, je nach der am Backend benötigten Datenbank- und Systemanbindung, eine Web-Entwicklungsumgebung wie Visual Interdev oder ColdFusion Studio. "Die Komplexität unserer Lösungen sowie unsere Qualitätsansprüche fordern die volle Kontrolle über den erzeugten Code", bemerkt Reto Girsberger von Crealogix. Damit fallen Tools für den professionellen Einsatz a priori weg, die wie das kürzlich durch Herstellerkonkurs ohnehin zu Grabe getragene NetObjects Fusion die erstellte Site vor der definitiven Publikation in einem proprietären Zwischenformat speichern.


Misstrauen gegenüber WYSIWYG

Mit zwei Ausnahmen plädieren alle Interviewpartner gegen den durchgängigen Einsatz von visuellen Editoren während des gesamten Produktionsprozesses - meist werden zwar Layoutentwürfe und Templates mit Dreamweaver oder GoLive erstellt; die definitiven Seiten bastelt man aber im Texteditor.



Die Ausnahmen: Bei kleineren Sites arbeiten die Aseantic-Designer mit Dreamweaver, und Matthias Saner von Popeye ist von GoLive überzeugt: "Aktuelle WYSIWYG-Editoren erzeugen guten HTML-Code, sie erlauben auch gute Kontrolle über den Code. Zur Optimierung ist dann noch etwas Handarbeit vonnöten."




Ganz anders klingt es dagegen beim Gros der übrigen Webprofis. Webpublisher Sebastian Krause von Additiv: "Wir programmieren von Hand, darum benutzen wir HomeSite und Visual Interdev." Bytics-Gründer Pentti Aellig gibt sich ebenfalls WYSIWYG-skeptisch: "Das Bytix-Team besteht aus HTML-Code-Puristen. Wir wollen schlanken Code, dafür eignet sich HomeSite als Basis-Editor sehr gut." Und auch bei Aseantic wird, im Gegensatz zu kleineren Projekten, "bei grossen Sites alles von Hand geschnitten und codiert". Ein kleines Detail am Rande: Von den acht befragten Agenturen arbeiten drei ausschliesslich auf dem PC, vier auf PC und Mac, nur eine setzt auch heute noch voll auf die Macintosh-Plattform.




Flexibilität eingeschränkt

Thomas Link bringt den Hauptgrund ans Licht, der ausser für die allereinfachsten Sites den Einsatz von Texteditor oder Entwicklungsumgebung unabdingbar macht: "Ein WYSIWYG-Editor bietet hervorragende Möglichkeiten, um Templates und Testvorlagen zur Umsetzung komplexer Tabellen und DHTML-Layouts zu erstellen. In der Produktionsphase erreicht man leider sehr schnell die Grenzen. Individuelle Lösungen wie die Anbindung an unterschiedliche Datenbanken sind nicht ohne weiteres möglich, und den angesprochenen Editoren fehlen Funktionen zur Versionierung von Files oder zur Erstellung und Bearbeitung von Datenbanken." Demgegenüber lobt Reto Girsberger das Dreamweaver-Interface zum Source-Control-System VSS.



Links Ausführungen auf den Punkt gebracht: "Der bewährte Ablauf im Namics-Produktionsprozess sieht den Einsatz von WYSIWYG-Edioren zur Erstellung des visuellen Prototyps und die anschliessende Umsetzung von Hand vor." Noch kürzer formuliert es Lukas Frei: "WYSIWYG-Tools sind in unseren Augen zu wenig flexibel. Ein Text-Editor ist für komplexe Datenbankapplikationen praktisch die einzige Lösung." Dem haben offensichtlich auch die relativ umfangreichen Applikationsentwicklungs-Features von Dreamweaver Ultradev nichts entgegenzusetzen: Sie sind für Standardsituationen ausgelegt und kommen im Einzelfall sowieso nicht ohne Anpassungen am Code aus - und dann kann man genauso gut von Anfang an selbst programmieren.




Frei weist darüber hinaus auf verschiedene Nebenaspekte hin: "Die Webdesigner verlernen mit WYSIWYG-Tools die Grundlagen von HTML und effizientem Codieren - Stichwort Server- und Browser-Performance. Die Mitarbeiter müssen sich ohne solche Tools zwar etwas mehr mit der Materie auseinandersetzen, aber dafür wissen sie dann genau, was geht und was nicht. Ich habe vor allem auch Bedenken, dass bei einem WYSIWYG-Editor beim häufigen Laden und Speichern irgendwann einmal etwas kaputtgeht und dann die Seitenkonsistenz nicht mehr gewährleistet ist." Ausserdem leidet für Frei die Arbeitseffizienz mit dem Texteditor keineswegs: "Ich bin da vielleicht ein Traditionalist - aber ich denke, mit guten Templates kann man im Text-Modus gleich schnell arbeiten."




Schlechter Code?

Einen zweiten Grund, WYSIWYG-Editoren die kalte Schulter zu zeigen, nennt Sebastian Krause: "Dreamweaver schreibt keinen schönen Code. Bei Additiv brauchen wir ihn nur für Grob-Layouts und Demos für Kunden." Zwar ändere Dreamweaver selbst eingegebenen Code nicht willkürlich ab, wie es früher bei Frontpage üblich war, aber er stelle die Formatierung um, worauf sich der Programmierer nicht mehr zurechtfinde.



Diesem subjektiv empfundenen Missbehagen des Programmierers gesellen sich bei näherer Betrachtung handfeste Tatsachen hinzu. So erzeugen die Spezialbefehle der WYSIWYG-Editoren, die automatisch JavaScripts erzeugen - zum Beispiel für Rollover-Buttons - bestens funktionierende Scripts, aber das hat seinen Preis: Von Hand auf die spezielle Situation hin programmierte Funktionen dürften allemal kürzer ausfallen als die auf alle Eventualitäten getesteten und entsprechend allgemein gehaltenen Scripts aus der Macromedia- oder Adobe-Küche. Jedes eingesparte Byte verbessert nicht nur die Ladezeiten, sondern auch die Browser-Performance. Pentti Aellig dazu: "Generell gilt: Je umfassender die Editoren-Features, desto länger und anfälliger der Code."




Noch kritischer als bei Dreamweaver sieht es bei GoLive aus: Nutzt man das auf den ersten Blick hilfreiche Layout-Gitter, plaziert das Programm merkwürdige Zusatzattribute im Code, zum Beispiel "cool" oder "usegridx" in Tabellen. Auf die Darstellung beim Surfer wirkt sich dies nicht negativ aus - aber auch diese GoLive-intern verwendeten Hilfsattribute blähen den Code auf und werden zwischen Server und Browser übermittelt. Nur wer auf das Layoutgitter verzichtet und stattdessen Tabellenelemente oder DHTML-Objekte explizit spezifiziert, vermeidet jeden Ballast - aber dann fällt ein guter Teil der WYSIWYG-Bequemlichkeit dahin.




Schwachstellen und Anwenderwünsche

Die grössten Bedenken bestehen also gegenüber den WYSIWYG-Modi der modernen Webeditoren - die deshalb oft gar nicht erst zum Zug kommen. Mit den tatsächlich eingesetzten Tools sind die Anwender grösstenteils zufrieden; einige kleinere Missliebigkeiten werden mit nur leichtem Murren in Kauf genommen. So merkt Crealogix-CCO Girsberger an, die Drawing-Tools von Flash seien inkonsistent mit der überall sonst geläufigen Handhabung: "Wer will schon Flächen und Umrandungen bei jeder Mausbewegung separat verschieben? Macromedia-Produkte haben auch sonst ein eher schwaches User-Interface." Auch die Inkompatibilitäten zwischen den Grafikformaten verschiedener Hersteller seien störend; wieso könne eine Gruppierung von Objekten nicht über verschiedene Programme hinweg erhalten bleiben?



Für Matthias Saner ist "das Anfassen kleiner Elemente in GoLive etwas popelig", was der Autor bestätigen kann und auf Dreamweaver und Frontpage ausdehnen möchte. Auch die mikroskopische Schrift in der Dreamweaver-Eigenschaftspalette kommt nur Benutzern mit überdurchschnittlichem Sehvermögen wirklich entgegen. Gemäss Bastiaan van Rooden alias "Spot", dem Creative Director des Nothing Medialab, könnten das Site-Management und der integrierte FTP-Client stark verbessert werden. Er ist Anwender von Dreamweaver, Flash und UltraEdit, gibt aber nicht näher an, auf welches Produkt sich die Mängelrüge bezieht.




Namics-Designer Thomas Link sieht das Hauptproblem mit den eingesetzten Tools auf einer anderen Ebene: "Es ist die Verfügbarkeit auf den unterschiedlichen Systemplattformen - entgegen den üblichen Funktionserweiterungen wäre eine einfachere Verzahnung der Tools eher wünschenswert. Die Softwarehersteller stellen uns mit jeder Version immer umfangreichere und teils sogar unfertige Programme zur Verfügung."



Ähnlich argumentiert auch Matthias Saner mit der Feststellung "Bestehende Features ausfeilen und verbessern statt neue zu implementieren, wäre wünschenswert!". Und das abschliessende Postulat von Link möge Webdesignern wie auch Tool-Herstellern empfohlen sein: "Wer erliegt nicht gerne der Versuchung, jeden Effekt neuer Software auszunutzen? Dabei wäre es so viel sinnvoller, unser bestes, unerreichtes und einzigartiges Tool einzusetzen: das Hirn."



Artikel kommentieren
Kommentare werden vor der Freischaltung durch die Redaktion geprüft.

Anti-Spam-Frage: Vor wem mussten die sieben Geisslein aufpassen?
GOLD SPONSOREN
SPONSOREN & PARTNER