Tipps und Tricks
Diesen Artikel als PDF ansehen/downloaden(msc) Vor Kurzem kürte Jakob Nielsen, seines Zeichens «der Guru der Webseiten-Benutzerfreundlichkeit» sowie Autor und Dienstleister auf dem Gebiet der Internet-Usability, die Top Ten der Webdesign-Fehler des Jahres 2005. Hier ist die Liste der zehn grössten Ärgernisse:
1. Unleserliche Seiten: Zu kleine Schriften, fehlender Kontrast zwischen Schrift und Hintergrund
2. Falsch ausgezeichnete Links: Es ist nicht klar, welche Elemente man anklicken kann und welche nicht und welche Links schon besucht wurden.
3. Flash: «Ich betrachte es als persönliches Versagen, dass Flash dieses Jahr die Bronze-Medaille erhält und nach wie vor eine Belästigung für viele Surfer darstellt. Ich habe vor drei Jahren die Richtlinien veröffentlicht, welche Exzesse der Vergangenheit vermieden werden sollten und auf welchem Weg Flash nützliche Benutzerschnittstellen bieten könnte», schreibt Jakob Nielsen. Geändert hat sich wenig; wer den Text «Flash and Web-Based Applications» dennoch nachlesen möchte, findet ihn unter folgender Adresse: www.useit.com/alertbox/20021125.html
4. Nicht fürs Web bestimmter Inhalt: Wer fürs Web schreibt, muss laut Nielsen kurz und bündig zum Punkt kommen, die Fragen der Surfer beantworten und eine leicht verständliche Sprache verwenden.
5. Schlechte Suchfunktionen
6. Browser-Inkompatibilitäten. Nielsen surft mit Firefox und sagt: «Jagen Sie keine Kunden weg, nur weil die einen anderen Browser benützen als Sie!»
7. Lästige Formulare: Es gibt zu viele Formulare, sie sind oft zu gross und zu unnötig.
8. Fehlende Kontaktinformationen oder Angaben zum Unternehmen: «Einem Unternehmen, das keine Adresse oder Telefonnummer angibt, wird man kein Geld überweisen wollen!»
9. Ein unflexibles Gestaltungsraster mit festen Seitenbreiten: Zum einen haben Surfer mit grossen Bildschirmen keine Möglichkeit, die Breite des Monitors auszunützen und Surfer mit kleinen Bildschirmen müssen die Seite horizontal scrollen. Zum anderen werden die Seiten mit dem unflexiblen Layout oft schlecht gedruckt, indem der rechte Rand abgeschnitten wird.
10. Unangebrachte Methoden der Bildvergrösserung: Die Richtlinien für die Benutzerfreundlichkeit von E-Commerce-Anwendung empfehlen, dass die Surfer bei Fotos die Möglichkeit haben sollen, per Klick eine vergrösserte Ansicht von (Produkt-)Bildern aufzurufen. Erfreulicherweise wird dieser Rat oft befolgt – aber schlecht: Oft erscheine beim Klick auf das Bild die gleiche Grafikdatei ein zweites Mal, schreibt Nielsen. Häufig wird das Bild vergrössert, aber so unwesentlich, dass der Surfer nichts vom «hochauflösenden» Bild hat. Nielsen empfiehlt, Bilder anzuzeigen, die den Monitor bei einer Auflösung von 1024×768 Pixeln ausfüllen.
(msc) Wer eine Website ins Netz stellt, möchte meist auch gerne wissen, bei wem das Gebotene auf Resonanz stösst. Eine Möglichkeit, das herauszufinden, bietet Google: Setzt man «link» plus die gewünschte Adresse ins Eingabefeld, liefert die Suchmaschine eine Liste zurück, die Seiten enthält, welche auf die angegebene Site verweisen. Mit anderen Worten: Mit der Eingabe link:www.publisher.ch erscheinen Sites, die auf die Publisher-Website verweisen.
Das ähnliche Prinzip steckt hinter dem «Cool Anchor Text Backlink Checker»: Er benutzt Google, um die Links abzufragen und zeigt die verlinkende Seite, plus den Link-Text an. Mitunter ist diese Liste recht erhellend!
(msc) Es gibt nicht allzu viele Aufgaben, für die man ImageReady zwingend benötigt, weil sie sich nicht mit Photoshop erledigen liessen. Wenn man aber ein flott animiertes GIF benötigt, das auf der Website Heiterkeit verbreitet und die Aufmerksamkeit auf sich zieht, ist ImageReady die richtige Wahl.
Bei der Arbeit mit animierten Grafiken gilt es eins zu beachten: Der Befehl «Dazwischen einfügen» hat seine Schwächen!
Dieser Knopf sitzt in der Animationspalette und ist dazu da, dem Webdesigner die Mühsal zu ersparen, jedes einzelne Frame seiner Animation von Hand zu gestalten. Nachdem man also das erste und das letzte Teilbild seiner Animation erstellt hat, klickt man auf die Schaltfläche mit den vier pinkfarbigen Rechtecken und ImageReady errechnet automatisch die angegebene Zahl der Frames dazwischen.
Wie gut das Resultat ist, hängt aber sehr von den verwendeten Effekten ab. Verwendet man zum Beispiel den Effekt «Ebene > Text > Text verkrümmen», dann passt die Software die Parameter schön an, sodass die Parameter in jedem Frame inkrementell angepasst werden. Die automatische Berechnung der Zwischenbilder funktioniert auch mit Vektormasken – allerdings nur bezüglich der Position oder des Ebenenstils; die Farbe lässt sich aber beispielsweise nicht anpassen.
Auch wenn man Filter einsetzt, ist das Resultat des Befehls «Dazwischen einfügen» meist nicht brauchbar: Die Bilder werden überblendet, aber nicht über die Parameter animiert. Möchte man beispielsweise einen Schriftzug per Unscharf maskieren, fokussieren oder defokussieren, kommt man nicht darum herum, jedes Frame von Hand einzurichten.
(msc) Selektives JPEG» erlaubt es, unter den Pixeln eines JPG-Fotos eine Zweiklassengesellschaft zu etablieren: Diejenigen Pixel, die zu einem wichtigen Bildbereich gehören, werden mit hoher Qualität abgespeichert, den anderen wird nur wenig Platz im Datenstrom eingeräumt.
Was klassenkämpferisch klingt, ist eine nützliche Sache: Als erstes richtet man im Bild mit Lasso oder einem anderen Auswahlwerkzeug eine Maske ein. Dann betätigt man den Befehl «Modifizieren > Selektives JPEG > Auswahl als JPEG-Maske speichern». Über den Befehl «Einstellungen» im gleichen Menü ist die Option «Selektive Qualität aktivieren» anzukreuzen und anzugeben, wie stark der Bereich in der Maske komprimiert werden soll – zum Beispiel mit Qualität «90». Der Rest des Bildes wird dann wie üblich anhand der Einstellung «Qualität» komprimiert, also etwa mit der Einstellung «60».
Mit der selektiven Komprimierung sind bei den Dateigrössen bemerkenswerte Einsparungen möglich. Und der Effekt lässt sich durchaus auch künstlerisch einsetzen. Bei extremen Unterschieden zwischen den beiden Komprimierungsraten gibt es einen augenfälligen Unterschied zwischen den stark und schwach komprimierten Bereichen, sodass der Webdesigner die Aufmerksamkeit des Betrachters dorthin lenken kann, wo er sie haben möchte...
(msc) Per Stylesheet sind nebst Schriftformatierungen auch Text-Transformationen möglich. Und zwar die folgenden: capitalize setzt die Wortanfänge gross, uppercase wandelt den ganzen Text in Grossbuchstaben und lowercase macht aus allen Versalien Minuskeln:
Alles in Grossbuchstaben!
Wieso sollte man capitalize verwenden, wenn man doch genauso gut Grossbuchstaben tippen kann? Die Antwort ist einfach: Zum einen kann man jederzeit die Schreibweise in Versalien wieder eliminieren. Aber noch wichtiger: Die Screenreader für blinde Surfer verstehen Wörter in Grossbuchstaben oft als Abkürzungen und buchstabieren sie – das passiert bei Texttransformationen nicht.
(msc) Buttons mit einem 3-D-Look werden häufig als Rollover-Grafik implementiert: Per Javascript tauscht man ein Bildchen aus, wenn der Surfer den Mauszeiger darüber bewegt. Es geht aber auch anders. Mit dem richtigen Stylesheet erscheint auch ein simpler Textlink als Schaltfläche. Mit den gleichen Techniken lässt sich auch ein ul-Menü mit dreidimensionalem Look kreieren: