User Experience Suite
Die User Experience Suite wurde von der Internetagentur Kuehlhaus entwickelt und soll die Usability von Webseiten kostengünstig und automatisiert verbessern. Die Suite besteht zum einen aus der Card Sorting Software und zum anderen aus dem Synchron-Remote-Usability-Test.
Die Card-Sorting Software lässt Unternehmen ihre Nutzer zu einem Online-Usability-Test einladen. Bei dem Test werden die Oberbegriffe der Seite auf vituelle Karten geschrieben und der User soll diese Oberbegriffe den Inhalten der Webseite zuordnen. So können Problem in der Navigation auf der Seite oder beim Wording erkannt werden. Die Software wertet die Informationen selbständig aus und liefert am Ende konkrete Empfehlungen für die Struktur der Navigationsleiste.
Der Synchrone-Remote-Usability-Test soll dem Entwickler der Website bereits in einem frühen Stadium der Webpräsenz mögliche Probleme bezüglich der Benutzerfreundlichkeit im zu erkennen geben. Dies geschieht im direkten und persönlichen Kontakt mit den Besuchern der Webseite.
So sieht das Tool in Aktion aus:
URL Encoder Decoder
Tool zum Codieren und decodieren von URLs und deren Sonderzeichen.
HTML-Tag Stripper
Entfernt alle HTML Tags aus einem Text. Nützlich um Texte aus einer Webseite weiter zu verarbeiten.
E-Mail Antispam Bild Generator
Wer seine E-Mail-Adresse ins Impressum stellt, setzt sich den Spam-Bots aus.
E-Mail Spam Bots sind Programme die das Internetseiten nach E-Mails durchsuchen und diese sammeln um das Postfach des Besitzers mit Spam zu überfluten.
Um dies zu umgehen sollte man seine E-Mail-Adresse als Bild in die Seite stellen, so haben Spam Bots keine Chance.
Mit dem Antispam Tool kannst einfach einen Text in ein Bild umwandeln.
E-Mail eingeben und gerendertes Bild als E-Mail ersatz im Impressum einbinden.
Ein weiteres brauchbares Tool ist der address-protector mit einer krassen Javascript verschlüsselung.
Hex to RGB Converter
Download Calculator
Wie viel Kilobytes sollte eine Seite haben?
40-50 Kb ist ein guter Mittelwert. Kleiner ist natürlich besser. Sie sollten natürlich immer die Grafiken dazu rechnen.
Falls Sie Homesite benutzen können sie unter “Tools” das Gewicht der Seite berechnen lassen.
Tipps um die Ladezeit der Seite zu verringern:
- Entfernen Sie überflüssige Leezeilen.
- Achten Sie bei dynamischen Code (ASP, PHP, JSP etc.) auf eine sparsame Ausgabe von Leerzeilen bei Loops, Schleifen und Anfang der Datei (vor dem <html> Tag). Wenn z. B. Einträge aus einer Datenbank kommen, sorgen Sie dafür, dass im Quellcode nicht immer ein Zeilenumbruch am Ende der Schleife verursacht wird. Leute, die sich Ihren Quelltext dann anschauen und bemängeln, dass der Code nicht sauber oder lesbar wäre, haben so was noch nicht verstanden. Ignorieren Sie solche Kommentare. Sie erzielen eine bessere Ladezeit und Ihre Benutzer werden es Ihnen danken.
- Laden Sie den Quelltext aus Ihrem Browser (wird auch als gerenderter Code bezeichnet) mal wieder in den Editor und schauen Sie ob sie noch unnötige Umbrüche, Kommentare und HTML Fehler (mit einem HTML-Checker wie der Validator von Homesite) finden.
Falls der Code, wegen fehlender Zeilenumbrüche, nicht mehr richtig lesbar ist, können Sie zum aufspüren von HTML Fehlern auch den CodeSweeper von Homesite benutzen.
Hinter dem Symbol des CodeSweeper von Homesite befindet sich ein mächtiges Werkzeug welches komprimierten HTML Code wieder in lesbarer Form einrückt. - Kommentieren Sie Ihren Code mittels ASP, PHP oder JSP und nicht mit HTML dann sparen Sie noch mal Ladezeit da der Code Kommentar nicht mehr an der Brwoser ausgeliefert wird. Weiterer Vorteil: vertrauliche Angaben in den Kommentaren liegen nur den Entwicklern vor und nicht jedem Besucher.
Screenruler oder Bildschirmlineal
Ein Screenruler erleichtert einem den Altag als Webdesigner enorm. Mit einem solchen Bildschirm Lineal kann man Layout ausmessen oder einfach nur prüfen ob verschiedene Elemente einer Seite sich auf einer Linie befinden.
Früher gab es dafür eigene Programme, die seit der Erfindung der Firefox Web Developer Toolbar oder Internet Explorer Developer Toolbar eigentlich überflüssig geworden sind.
Ich erkläre das mal bei der Firefox Toolbar: Rechte Maus-Taste im Firefox klicken und dort den Punkt Web Developer ansteuern. Dann unter Miscellaneous den Punkt Display Ruler wählen. Man kann dann ein Fadenkreuz aufziehen. Oben in der Browserzeile erscheint eine Zusätzliche Zeile wo die genauen Pixelangaben angezeigt werden.
Um das Fadenkreuz wieder verschwinden zu lassen, klickt man einfach rechts in der Toolbar auf das rote Kreuz-Icon.
Alternativ kann man auch ein eigenes Programm, wie den Screenruler von Microfox benutzen. Das gibt es sogar für MAC und PC. Macht aber eigentlich kaum noch Sinn, das als zusätzliches Programm zu haben.
HTML Browser Sizer
Browser Sizer in HTML. Für Internet Explorer, Firefox und Netscape. Keine Installation notwendig.
| Resizes the window of your browser to the chosen size.
Requires javascript |
|
| PC Standard resolutions | |
| Netscape / Firefox |
Internet Explorer |
| Apple Macintosh Standard resolutions | |
| Netscape |
Internet Explorer |
| Other Macintosh resolutions are: 1152×870 1280×960 1280×1024 |
|
Wer es noch schneller haben will kann sich folgendes Lesezeichen (Bookmarks) in seinen Favoriten
für den Internet Explorer
anlegen welches den Browser automatisch an die gewünscht größe anpasst.
Wenn Sie das Lesezeichen übernehmen wollen müssen Sie die Javascript Fehlermeldung bestätigen,
Sie werden gewarnt, dass das Lesezeichen Javascript Code enthält (was nicht immer sicher ist).
javascript:resizeTo(640,452); Lesezeichen übernehmen
javascript:resizeTo(800,572); Lesezeichen übernehmen
javascript:resizeTo(1024,740); Lesezeichen übernehmen
Lesezeichen für Netscape
javascript:outerWidth=640;outerHeight=452;
javascript:outerWidth=800;outerHeight=572;
javascript:outerWidth=1024;outerHeight=740;
Bei allen Lesezeichen ziehen wir ca. 30 Pixeln in der Höhe da diese meistens von der Taskleiste eingenommen werden.
XHTML Templates
Da ich für Projekte CSS / XHTML Templates verwende und dann entweder ein altes eigenes Template verwende oder wieder 2 Stunden im Netz surfe, habe ich mal eine Liste zusammengestellt, wo es XHTML Templates für gutes Webdesign gibt.
- Oswd.org steht für Open Source Webdesign. Sehr schön ist, dass man unter “Search all designs” Templates nach bestimmten Kriterien suchen kann wie: Validation (eben XHTML Transitional oder strict), Images, CSS, Contrast, Color und die Anzahl der Spalten des Layouts (eine bis fünf spalten). Auf der Seite wird man sehr schnell fündig.
- FreeCSSTemplates Dort kann man zwischen über 300 Templates wählen, leider gibt es keine Suchfunktion und man muß sich durch die Vorlagen durchklicken.
- templateserver.de
Wer ein wenig mehr haben möchte und keine Standard Vorlage die man schon aus jedem zweitem Blog kennt, sollte sich Templateserver mal anschauen. Dort gibt es Professionell aussehende Layouts schon ab 29 Euro.
Meta Tag Generator
Gib einfach eine Beschreibung deiner Website und Schlüsselwörter ein.
Warum werden keine weiteren Meta Tags angeboten? Weitere Meta Tags werden nicht, oder nicht mehr, von Suchmaschinen ausgewertet, sind also überflüssig.
Suche
Themen
Schlagwörter
Blogroll
- Community Summit Hamburg
- Nutzerfreundlichkeit.de
- Online Marketing Seminar
- Schroeder-Wendt
- UI Design
- Usability Diplomarbeit
- Usabilityblog.de
- WP Usability
