Wem die Rechteckformen beim Textlayout zu langweilig sind, ist gezwungen unzählige DIVs anzulegen und zu positionieren, um die Illusion runder Texte zu erschaffen. Alternativ kann man auf die Dienste eines Online-Editors namens CSS Text Wrapper zurückgreifen. Die Bedienung ist denkbar einfach: Rechts und links steht eine schwarze Linie zur Verfügung, die man durch das Setzen von beliebig vielen Kontrollpunkten verformen kann. Mit wenigen Klicks lässt sich auf diese Weise z. B. eine abgeschrägte Textführung erschaffen. Welche Formen möglich sind, zeigen einige Beispiele auf der Demoseite, wo beispielsweise Text in die Form eines Weinglases gebracht wurde. Auch das Umfließen von Bildumrissen lässt sich problemlos bewerkstelligen, da es möglich ist, eigene Bilder hochzuladen, die im Editor angezeigt werden.

Zunächst wird mit Standardvorgaben gearbeitet. Sie haben jedoch auch die Möglichkeit eigenen Text einzufügen, rudimentäre Schriftformatierungen vorzunehmen und die Größe des Arbeitsbereiches zu verändern. Nach einem Klick auf “Update Settings” wird der Quelltext fix und fertig ausgegeben, und zwar in drei Varianten:

1. XHTML mit Inline-CSS
2. XHTML für ein externes Stylesheet auf Basis von Klassen
3. Javascript

Natürlich ist nicht ratsam, sämtliche Texte mit diesem Hilfsmittel zu layouten. Sparsam eingesetzt kann diese Technik - insbesondere im Werbekontext – für besondere Effekte sorgen.

Kleiner Fehler – und weg ist der User

Bei vielen anderen Websites ist die Bedienung aus Sicht des Anwenders unverständlich. Häufig liegen die Tücken im Detail: Der Bestellbutton ist schlecht platziert, der Anwender erkennt nicht das er weiterscrollen muss oder notwendige Formulareingaben beim Anmeldeprozess sind unlogisch. Oftmals sind es solche Kleinigkeiten die Abbrüche provozieren und zur Nutzung eines Konkurrenzangebotes führen. Deshalb sollten die Entwickler noch vor dem Produktivstart überprüfen, ob die Umsetzung der Zielvorgabe tatsächlich funktioniert. Ebenso zu einem späteren Zeitpunk, wenn bei der Traffic-Analyse bevorzugte Ausstiegspunkte auffallen. Kommerzielle Projekte mit üppigen Budget beobachten zu diesem Zweck Probanden beim surfen, häufig unter Zuhilfenahme des aus der Marktforschung bekannten Verfahrens der Blickbewegungsregistrierung (Eye Tracking). Kleinere oder gar private Seitenbetreiber werden sich einen solchen Luxus natürlich niemals leisten können. Sie lassen meist befreundete Webworker oder vielleicht Familienmitglieder die Seite ausprobieren. Allerdings geht es hier mehr darum logische oder inhaltliche Fehler zu finden, die der Ersteller aufgrund der intensiven Arbeit am Projekt übersieht. Weder qualitativ noch quantitativ wird so ein repräsentativer Durschnitt der angepeilten Zielgruppe abgebildet.

Dem Anwender über die Schulter schauen

Einen Ausweg aus diesem Dilemma besteht darin, die Mausbewegungen echter Besucher im Remoteverfahren aufzuzeichnen und auszuwerten. Hierzu gibt es sowohl webbasierte Dienstleister wie auch serverbasierte Systeme. Ich möchte an dieser Stelle den für Einsteiger interessanten Platzhirsch m-pathy vorstellen. Die Auswertung erfolgt über die Website des Anbieters, Sie müssen allerdings ein Stück Javascript-Code in den Quelltext Ihrer Website einfügen. Zum Ausprobieren ist ein kostenloser Test-Account verfügbar, der lediglich in der Anzahl der Aufzeichnungen eingeschränkt ist.

Im Detail ermöglicht m-pathy folgende Auswertungen:

• Besuche als Film abspielen: Sie können sich jeden einzelnen Besuch als Film ansehen. So können Sie sich in den Besucher hineinversetzen und Schwächen Ihres Angebotes erkennen. Als Besonderheit sehen Sie den identischen Bildausschnitt wie Ihr Besucher.
• Auswertungen von Klicks und Mausbewegungen: Hier lässt sich zusammengefasst nachvollziehen, wo drauf der Besucher klickt. Interessant ist im Umkehrschluss, wenn der User auf etwas versucht zu klicken, was gar keine Verlinkung ist oder wichtige Verlinkungen kaum Beachtung finden. Zusätzlich lassen sich Bereiche anzeigen, auf denen die Maus überdurschnittlich häufig bewegt wurde. Anwender machen dies insbesondere, wenn sie eine Funktion suchen, z. B. im Navigationsbereich aber auch als Lesehilfe.
• Analysen für Webformulare: Mehrstufige Anmelde- oder Checkout-Prozesse lassen sich hier auswerten. Für jedes Formularfeld die benötigte Zeit zum Ausfüllen eingeblendet, ob und in welchen Umfang Eingaben korrigiert wurden und an welcher Stelle der Anwender die Eingaben abgebrochen hat.
• 
  

Performance und Datenschutz

Genau wie bei der Auswahl sonstiger Web-Analyse-Tools sollten Sie bedenken, dass das eingesetzte Script aktiv mit dem Server des Anbieters kommuniziert und damit Lade- und Antwortzeiten beeinflusst.
Wichtig ist auch, dass Sie vor einem Einsatz die Einhaltung datenschutzrechtlicher Vorgaben ausloten. Nach meiner Ansicht greift die Aufzeichnung der Mausbewegungen zumindest gefühlt in die Privatsphäre der Benutzer ein. m-pathy argumentiert in den FAQs mit dem Standardargument aller Tracking-Dienste, dass keine personenbezogenen Daten erfasst würden die Rückschlüsse auf individuelle Nutzerprofile erlauben, und empfiehlt einen Datenschutzhinweis zu platzieren. Ob diese Argumentation juristisch haltbar ist, kann ich nicht beantworten. Unabhängig davon ist es nach meiner Meinung eine Frage des Anstands, den Besucher vorab über den Einsatz zu informieren. Da momentan weder m-pathy noch andere Systeme eine explizite Einwilligung von Haus aus anbieten, sollte man eine solche Lösung selbst implementieren, beispielsweise indem man im Rahmen der Betaphase einen geschlossenen Bereich einrichtet.

Fazit

Die Kombination der Analyse-Tools als webbasierte Anwendung ist in dieser Form wohl einmalig. Aus den gewonnen Informationen lassen sich wertvolle Handlungsempfehlungen ableiten, um Stolpersteine bei der Bedienung zu eliminieren. Als einziger Wermutstropfen bleibt, dass der dauerhafte Einsatz leider relativ teuer ist.
Vergleichbar vom Funktionsumfang ist allenfalls noch der Dienst clicktale, allerdings sind hier die Daten schwerer zu interpretieren. Serverbasierte Alternativen sind z. B. SMT oder ClickHeat.
Aus Gründen der Performance und vor allem des Datenschutzes sollten eine Anwendung nur in geschützten Bereichen stattfinden, wenn der Anwender zuvor über den Einsatz informiert wurde.

Abhilfe schafft die Icon-Suchmaschine IconFinder. Der Umfang ist riesig, momentan sind über 130.000 Symbole katalogisiert. Die Suchoptionen wurden speziell an die Bedürfnisse der Iconsuche angepasst. So können Sie beispielsweise die Hintergrundfarbe auf weiß, grau oder schwarzem umstellen. So kann man schon im Voraus einschätzen, ob das Icon zum geplanten Layout passen kann. Auch lässt sich die angebotene Nutzungslizenz filtern, sodass nur Icons angezeigt werden, die überhaupt kommerziell genutzt werden dürfen.

Nach einem Klick auf eines der Icons werden Detailinformationen zur Auflösung und Lizenz angezeigt sowie eine Downloadmöglichkeit für die Formate ICO und PNG angeboten. Darunter werden weitere Bildchen aus derselben Serie des Designers eingeblendet. Eine Übersicht aller Serien kann über den Navigationspunkt Browse aufgerufen werden.

Einen möglichen Lösungsansatz bietet ein Werkzeug namens XRefresh, welches automatisch das Browserfenster aktualisiert sobald eine Änderung am Code vorgenommen wurde. XRefresh selbst besteht aus zwei Komponenten, nämlich aus einem Plugin für den Browser (Firefox und Internet Explorer) und einer Anwendung (Windows und Mac), die die Projektordner auf Änderungen überwacht.

Installation

Wer XRefresh im Zusammenspiel mit Firefox nutzen möchte, muss zunächst Firebug installieren. Zusätzlich muss noch das eigentliche XRefresh Add-on installiert werden.
Nutzer des Internet Explorers müssen lediglich ein Installationspaket ausführen, welches sowohl die Anwendung wie auch das Add-on beinhaltet.

Bedienung

Nach dem Start nistet sich XRefresh unter Windows im Infobereich (Traybar) ein. Als ersten Schritt trägt man die gewünschten Dateien bzw. Verzeichnisse in eine “Überwachungsliste” ein. Nun öffnet man den gewünschten Browser. Im Firefox müssen lediglich die beiden Add-ons aktiv sein, im Internet Explorer muss zusätzlich das XRefresh Icon betätigt werden. Wird jetzt eine Änderung an einer der Dateien aus der Überwachungsliste vorgenommen und diese gespeichert, aktualisiert das Programm sofort und automatisch die Seite im Browser.

Einsatzmöglichkeiten

Besitzt man einen ausreichend großen Monitor, kann man bequem den Editor und den Browser gleichzeitig geöffnet lassen, und hat nach dem Abspeichern (am schnellsten mit dem Tastenkürzel Strg+C) alle Änderungen in Echtzeit im Blick. Bei kleineren Monitoren ist zwar noch ein Programmwechsel (Alt+TAB) erforderlich, zumindest entfällt aber das lästige Aktualisieren der Website. Gute Dienste leistet die Software auch, wenn man mit zwei Monitoren arbeitet, d. h., auf dem ersten Monitor läuft die Entwicklungsumgebung und auf dem anderen der Browser. In jedem Fall lässt sich durch den Einsatz von XRefresh Maus- und Tastaturarbeit - und damit Zeit - einsparen.

Um das Aussehen einer Website bei verschiedenen Auflösungen auszutesten, greifen viele Webdesigner auf das Firefox-Plugin Web Developer zurück (Siehe Menüpunkt “Größe”). Eine internetbasierte Alternative bietet ViewLike.us an. Einfach rechts oben die URL eingeben und in der Menüleiste eine der sieben gängigsten Bildschirmauflösungen auswählen. Als Besonderheit kann man zusätzlich noch die exotischen Auflösungen des iPhone und des Wii-Browsers testen. Bedenken sollte man allerdings, dass ViewLike.us die tatsächliche Bildschirmgröße und nicht den Nettobereich des Browserfensters anzeigt. Auch Besonderheiten der verschiedenen Browserversionen bleiben unberücksichtigt. Für eine grobe Orientierung ist das Online-Tool aber auf jeden Fall nützlich.

Etwas anders geht der Dienst Google Browser Size an die Problematik heran. Er blendet eine überlagernde Grafik ein, die anzeigt, welcher Bereich der Seite bei gängigen Fenstergrößen sichtbar ist. Grundlage für die Einschätzung, welcher Anteil der Websurfer Seitenelemente in einem bestimmten Bereich ohne zu scrollen findet, sind statistische Auswertungen von google.com. Die Bedienung ist simpel: Einfach die URL der eigenen Webseite oben in das Textfeld eingeben und auf “Go” klicken. Zusätzlich kann man noch durch einen Klick auf “Opacity” der Transparenzgrad der überlagernden Grafik verändern. Leider funktioniert der Dienst im Moment nur bei linksbündigen, nicht zentrierten Seiten.

Eine einfache Möglichkeit das eigene Webdesign bewerten und kommentieren zu lassen bietet der Onlinedienst Notable. Zunächst muss man sich bei dem Dienst registrieren. Der sog. Personal-Account ist komplett kostenlos und sollte in den meisten Fällen vom Leitungsumfang ausreichen. Nach dem Login muss zunächst das gewünschte Webdesign erfasst werden. Hierzu kann man entweder eine existierende URL automatisch erfassen lassen oder einen Screenshot hochladen, für letztere Variante steht sogar ein eigenes Firefox-Plugin zur Verfügung. Nun kann man mit Hilfe von Notizzetteln (”Add Note”) beliebig viele Bereiche der Designvorlage kennzeichnen und mit Anmerkungen versehen. Als Themenstarter (Admin) kann man so die Aufmerksamkeit gleich auf bestimmte Probleme oder Besonderheiten lenken. Um externen Personen eine Kommentierung zu ermöglichen, muss man sie zunächst einladen. An die Kommentare können Screenshots – beispielsweise mit kurzen Designskizzen – angehangen werden.