Web-Mätzchen (kurz Wätzchen) sind alle Bilder, Animationen, Java-Scripts oder sonstigen Objekte, die die Datenmenge von Internetseiten vergrößern, ohne etwas zum Informationsgehalt beizutragen. Wätzchenfrei ist demzufolge eine Web-Seite, wenn sie eine möglichst geringe Ladezeit hat. Wätzchenfrei im erweiterten Sinne ist eine Web-Seite, wenn sie darüber hinaus noch eine funktionelle und verständliche Gestaltung hat. Vorgestellt wird hier eine Art der Dokument-Gestaltung, deren Philosphie selbst den modernsten Designern gänzlich unbekannt ist: Oberstes Ziel einer Web-Seite ist es, die Bedürfnisse der Benutzer zu befriedigen! Was sich für normale Leute wie eine Binsenweisheit anhört, ist für Web-Designer so revolutionär und wegrationalisierend, dass sie wohl bald scharenweise in andere, sinnvollere Berufe wie Wahrsager oder Paparazzi drängen werden. Ein Grund zur Hoffnung?

Der Aufbau dieses Dokuments Wenn Sie jetzt immer noch weiterlesen wollen, dann haben Sie wahrscheinlich während der kurzen Einführung etwas gesagt wie: "Ja, ja, genau...". Daher gehe ich mal davon aus, dass Sie die Problemstellung schon kennen und sich die Eiferei in Des Kaisers neue Kleider sparen können. Die 95 Thesen zur wätzchenfreien Web-Seiten-Gestaltung finden Sie nicht im Internetportal der Schlosskirche zu Wittenberg, aber weiter unten im Dokument.

Inhaltsverzeichnis Der Aufbau dieses Dokuments Kurz und bündig. Des Kaisers neue Kleider Wie retten wir den Web-Seiten-Standort Deutschland? Regeln für wätzchenfreie Internetseiten So machen Sie es besser!

Des Kaisers neue Kleider
oder: Schön ist man selbst, aber gefallen muß man den anderen

Die Firmen sind die Schlimmsten.

Dieser Text ist eigentlich für keinen wirklich interessant. Aber er ist Balsam für die Seelen derjenigen, die bereits Opfer der Web-Designer wurden. Das heißt, eigentlich alle. Kurioserweise sind die meisten Web-Seiten, die am wenigstens den Bedürfnissen der Benutzer gerecht werden, von Firmen mit Gewinnstreben, der oberstes Gebot doch eigentlich das Gegenteil, die Befriedigung der Bedürfnissen der Kunden, sein müsste.

Was ist Design?

Web-Design ist das Gestalten von Web-Seiten, damit sie gut aussehen, würde man meinen wollen. Zugegeben, viele Seiten tun das. Doch nur das, und das ist eben nicht genug. Design hat nicht nur einen ästhetischen Gesichtpunkt, sondern (und das vor allem) ein praktischen: Die Dinge müssen benutzbar sein. Eine Steckdose in Form eines barocken Cherubim ist sicherlich viel schöner als eine normale, doch werden die meisten eine schlichte, weiße vorziehen. Denn eine Steckdose ist vor allem erst einmal eine Einrichtung, in die man einen Stecker stecken kann; und zwar schnell und sicher. Dazu sollte eine Steckdose auch als solche erkennbar sein.

So gefährlich sind Web-Designer!

Was einer normalerweise auf einer Web-Seite sucht, ist Information. Was bekommen Sie? Vielleicht erstmal eine 100 kB große Seite, die Ihnen sagt: "Hier klicken, um zur Startseite zu kommen". Vielleicht sagt sie das auch nicht, weil Sie das neue Plug-In noch nicht nicht haben, was zum Hallo-Sagen unbedingt nötig ist. Diese Seite wäre für Sie unbenutzbar. Die Firma, die unter so einer Web-Seite zu finden ist, hat für Sie schlichtweg keine Web-Seite.

Eine Verteilerseite. Nicht hundert.

Die Startseite, oder das Portal, ist meist die vollgestopfste Seite von allen. Das macht einen gewissen Sinn, weil man ja schnell überall hin will. Schlimmer ist es dann eher, wenn auf jeder anderen Seite, auf die die Portalseite für, sämtliche Informationen der Portalseite wiederholt werden. So als ob ein Internetbenutzer nicht wieder zur Startseite zurückkäme, wenn er sie einmal gefunden hat.

Worte sagen mehr als 1000 Bilder

Der Informationsgehalt von vielen Extras ist meistens gleich null. Für eine Aufzählungsliste ist ein dicker schwarzer Punkt nicht fein genug, nein, es muss ein Bildchen geladen werden, am besten ein animiertes. Das speicherintensive Hintergrundbild bringt meistens auch keinen wirkliche Vorteil, verlängert aber die Ladezeit. Unter lauter Bildchen finden Sie dann meistens nur eines nicht: Den Link, um Ihre Beschwerde loszuwerden. Wätzchenfrei bedeutet, ein Bild oder eine Animation nur dann zu benutzen, wenn es mit Worten nicht gesagt werden kann. Reiner Text kostet meistens weniger Speicher.

Tabellen-Bild fester Größe

Skalierbares Tabellen-Bild

Ein weiterer Nachteil der Bilder ist, dass sie nicht skalierbar sind. Daher kommen solche Hinweise wie "Seite optimiert für eine Bildschirmauflösung von 800x600", weil mit einer anderen die toll gestaltete Seite wie Hund aussieht.

Um auch mal das andere Extrem zu zeigen: Links und rechts sehen Sie die Bilder von zwei Kreuzen. Es sind aber keine wirklichen Bilder, sondern sie sind mit HTML-Tabellen erstellt. Jedes von ihnen belegt ungefähr 200 Byte; und sie würden das auch dann noch tun, wenn sie zehnmal so groß wären. Das rechte Kreuz ist sogar dehnbar. Wenn Sie die Größe des Programmfensters ändern, ändert sich auch die Größe des Kirchenkreuzes.

Arbeit für die Browser!

Damit kommen wir zum nächsten Thema. Wätzchenfrei bedeutet die Fähigkeiten des Browsers auszunutzen. Ein Browser kann selbst den Umbruch des Textes berechnen, er kann verschiedene Format darstellen wie Tabellen und Listen und das in verschiedenen Farben. Er hat einen Seite-Vor- und Zurückknopf, und ein Menü, indem man die zuletzt besuchten Seiten direkt auswählen kann. Worauf ich hinaus will? Die meisten Java-Scripts sind nicht nur überflüssig, sondern verschlechtern die Benutzerfreundlichkeit sogar.

Statt der altbekannten Scroll-Leiste, wird ein eigenes Scroll-System hinzugefügt, deren Funktionsweise man oft genug nicht einmal versteht. Ein Go-Back-Knopf, am besten mit animiertem Bildchen, wird auch noch angefügt, obwohl in der Icon-Leiste des Brausers bereits einer ist. Und lang zu ladende Javascripts berechnen Textumbrüche, Adressen von Hyperlinks, auf die ich geklickt habe und sonst eine Menge Dinge, die der Browser selbst berechnen kann.

Sind Sie wätzchenfrei?

Da bleibtdann nur noch eine Frage der Psychologie. Kommt Ihnen eine Internetseite, z.B. die Ihrer Automarke, weniger "kompetent" vor, weil es da nicht irgendwie "professionell" aussieht, sondern so schlicht wie auf dieser Seite?

Wie würden Sie das Layout der Seite, die Sie eben gerade lesen charakterisieren? Vielleicht übersichtlich? Wenn es das tatsächlich ist, dann hätte ich schon gewonnen, denn dann würden Sie ja schnell finden, was Sie suchen, oder zumindest feststellen, dass meine Seite nicht das enthält was Sie suchen. Ein schlichtes Layout ist meistens nicht das schlechteste.

Allgemeine Wätzchenfrei-Regeln

Ladezeit

Ladezeitsteigernde Objekte in Web-Seiten werden nur dann benutzt, wenn sie unumgänglich sind bzw. eine alternative Form noch ladezeitintensiver wäre.

Seiten-Desgin

Die Gestalung einer Seite sollte funktionell sein, dass der Benutzer schnell erkennt, was sich dort befindet und was nicht.

Seiten- und Link-Architektur

Die Architektur (Verteilung des Inhaltes auf verschiedene Seiten und ihre Verbindungen) sollte der Denkweise des Benutzers folgen.

Spezielle Wätzchenfrei-Tips

• Wollen Sie eine Seite erstellen, die andere auch verstehen sollen, dann machen Sie sie so, dass sie auch für diese anderen benutzbar ist. Wer ist wahrscheinlich der Benutzer meiner Seite und was sucht er. Dinge, die er nicht braucht, benötigen nur unnötg Ladezeit.

• Wann immer Sie etwas hinzufügen and Bildern, Java-Scripts oder sonstigem, fragen Sie, ob es wirklich nötig ist. Wenn die Seite nur "hübscher" wird, dann kann man das etwas sehr wahrscheinlich weglassen.

• Ein Bild sagt mehr als tausend Worte. Wenn nicht, werden die Worte benutzt!

• Eine Animation verbraucht mehr Ladezeit und Rechenkraft und macht den Benutzer leichter rahmdösig als ein statisches Bild. Deswegen sollten sie sparsam verwendet werden.

• Vergessen Sie nicht die Fähigkeiten des Browsers. Er merkt sich die zuletzt besuchten Seiten, kann sich Bookmarks merken, kann scrollen, kann Text umbrechen und mit verschiedenen Zeichenarten und -größen und Farben umgehen, und hält einige Textformate wie Listen und Tabellen bereit.

• For allem die Table-Umgebung ist bei HTML sehr nützlich zum Layout-Gestalten. Vermeiden Sie dabei feste Breiten und Höhen und genehmigen Sie dem Benutzer, die Fenstergröße des Browsers nach seinen Vorstellung festzulegen. Versuchen Sie horizontales Scrolling zu vermeiden.

• Benutzen Sie Frames überlegt, der Browser kommt mit seiner History-List bei Frames nicht so gut zurecht.

• Überlegen Sie sich, wie viele Benutzer ihrer Seite schon das Plug-In oder die neueste Version des Browsers haben, die Sie für Ihre Seite verlangen. Für die anderen ist Ihre Seite nicht benutzbar. Vergessen Sie nicht, dass Software auch veraltet, und das tolle Plug-Ins von heute morgen keiner mehr benutzt. Ziehen Sie offene Standards vor.

• Haben sie eine Seite, die nur als Sprungbrett dient, haben Sie zwei Möglichkeiten: Sie packen alles auf eine Seite und empfehlen den Benutzer den Suchbefehl des Browsers oder Sie machen ein hierarchisch geordnetes Sprungbrett mit Links zu Untersprungbrettern, die man bookmarken können sollte. (Bookmarken! Nein, diese Seite ist nicht kauderwelschfrei.)

• Wiederholen Sie in weiterführenden Seiten nicht alle Links des Sprungbretts.

• Vermeiden Sie seiten à la "Hier geht's weiter zur Hauptseite". Wenn Sie meinen, den Benutzer mit einem Vorspann unterhalten zu müssen, weil das Laden der Hauptseite so lange dauert, dann ändern Sie vielleicht besser Ihre Hauptseite.

• Die meisten Benutzer sehen sich allenfalls das an, was auf einen Bildschirm passt. Ein Portal, das 25 Bildschirmseiten füllt, ist 24 Bildschirmseiten zu lang.

• Wenn Sie Downloads nicht über FTP zulassen, dann packen Sie alle Informationen zum Download und alle Dateien auf eine Seite.

• Falls Ihre Seite allgemeine und nicht kopierrechtlich geschützte Informationen anbietet, z.B. über Industriestandards, bieten Sie auch eine Offline-Version für häufige Benutzer an; sprich eine Zip-Datei, die ausgepackt die selben Seiten bereitstellt. Es ist besser, einmal eine große Datenmenge zu laden, wenn man dafür später beim Benutzen nicht einmal mehr eine Internetverbindung braucht.

• Bei Nachschlagewerken ist auch nicht immer sinnvoll, die Information über 100 Seiten zu verteilen. Ein einziges, großes Dokument, das alles enthält kann man nämlich besser nach Begriffen durchsuchen (und abspeichern). Ihre Hyperlinks würden dann statt auf andere Seiten, auf Stellen in der eigenen Seite verweisen.

• Sollte Ihre Seite etwas größer werden, geben Sie bei Links, die auf diese Seite verweisen, ihre Gesamtgröße an (mit Bildern und Animationen).

• Java-Scripts und andere Berechnungen sollten benutzt werden, wenn etwas zu berechnen ist. Ihr Browser kennzeichnet bereits die Links, über die sich gerade der Maus-Cursor befindet und tolle aufklappbare Menüs sind auch nicht immer der Hit an Übersichtlichkeit.