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?
|
|---|
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 Webseiten sparen könnten aber wahrscheinlich nicht wollen. Die knapp 95 Thesen zur wätzchenfreien Web-Seiten-Gestaltung finden Sie nicht im Internetportal der Schlosskirche zu Wittemberg, aber
weiter unten im Dokument.
|
ETA kündigt Terror an
Gar nicht zum Lachen finden ETA-Terroristen Web-Seiten mit überflüssigen Animationen und Javadatenmüll. Da im letzten Halbjahr die "Revolutionssteuer" nur zu 80% von baskischen Firmen erpresst werden konnte, ist der ETA das Geld für neue Modems knapp geworden. "Allerdings nicht für Bomben", wie ETA-Internet-Experte Nazikotz Unaus Sprechlich mitteilte. Auf die nächste Performance vom Typ Flash und Shockwave werden wir wohl nicht so lange warten müssen.
|
Dieser Text
| Die Firmen sind die Schlimmsten.
|
|---|
bringt eigentlich keine wirklich neuen Erkenntnisse. 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, deren oberstes Gebot doch eigentlich das Gegenteil, die Befriedigung der Bedürfnissen der Kunden, sein müsste.
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.
Was einer
| So gefährlich sind Web-Designer!
|
|---|
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.
Die Startseite,
| Eine Verteilerseite. Nicht hundert.
|
|---|
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 verweist, 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.
Der Informationsgehalt
| Ein Wort sagt mehr als 1000 Bilder
|
|---|
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 wirklichen 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.
Skalierbares Tabellen-Bild
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Tabellen-Bild fester Größe
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.
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 Browsers 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.
Da bleibt
dann 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
Die erste Regel ist die Bedürfnisse des Benutzers zu befriedigen - und
nicht vielleicht erst meine als Web-Designer. Daraus leiten sich allgemeine Regeln ab, aus denen sich wiederum die speziellen Wätzchenfrei-Tips
TM herleiten.
-
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, damit 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-TipsTM
-
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 an Bildern, Java-Scripts oder sonstigem, fragen Sie, ob es wirklich nötig ist. Wenn die Seite nur "hübscher" wird, dann kann man das sehr wahrscheinlich weglassen.
- Ein Bild sagt mehr als tausend Worte. Wenn nicht, Worte benutzten!
- 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.
- Die Mindestanforderung an den Browser sollte durch den Hauptinhalt festgelegt werden. Wenn z.B. die eigentliche Information auf Ihrer Seite nur Textinformation ist, dann sollte sie auch mit einem Text-Browser lesbar sein, selbst wenn dadurch Ihr Firmenlogo nicht mehr Flash animiert werden kann.
-
Verhindern Sie nicht das Anzeigen einer Seite, bloß weil jemand einen veralteten Browser benutzt. Es ist besser, das betrachten zu können, was man mit seiner Version zu sehen bekommt, als gar nichts.
- Haben sie eine Seite, die nur als Sprungbrett oder Web-Map 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, man lädt einmal eine große Datenmenge und kann dafür später beim Benutzen von Festplatte eine Menge Zeit sparen. Man braucht nicht einmal eine Internetverbindung.
- 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 einen 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.
-
Die Bildschirmauflösung ist 96 dpi, und deswegen sollten Sie Ihre Fotos mit 100 dpi scannen, wenn Sie auf dem Bildschirm genauso groß erscheinen sollen. Mit höhere Auflösung gescannte Bilder werden im Browser nicht detallierte, sondern einfach nur größer dargestellt. Wenn das Resultat dann doppelt so groß wie der Bildschirm ist, sieht man zwar besser die Details, aber schlechter den Gesamteindruck; oder man bricht die Betrachtung wegen der langen Ladezeit schon vorher ab.