Pipette zum Anzeigen von RGB Werten
Als Webdesigner braucht man des öfteren mal den RGB-Wert der Farbe eines Elements auf einer Webseite. RGB-Werte ermitteln kann man ganz einfach mit einer Pipette. Dabei handelt es sich um ein kleines Programm mit dem man das gewünschte Element anklicken kann. Dadurch werden die Farben als RGB Werte angezeigt, die leicht in eine CSS Datei oder in die eigene Webseite übernehmen werden können. (weiterlesen …)
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:
Bildschirmlupe Downloaden
Eine Bildschirmlupe ist ein Programm, welches einen bestimmten Bereich am Bildschirm vergrößert. Als Bildschirmlupe Freeware gibt es zum Beispiel das Windows-Programm Lupe.zip, welches keine Installation benötigt und Sie es auch gleich downloaden können.
Download: 
lupe.zip
Bildschirmlupe am Mac ohne Installation
Auf Apple Rechner ist im Betriebssystem schon eine Lupe eingebaut.
Durch das Drücken von cmd + alt + 8 wird die Bildschirmlupe angezeigt.
Ein erneutes Drücken der Tasten lässt diese wieder vom Monitor verschwinden.
Zoom als Bildschirmlupe im Browser
Durch das Drücken der Tastenkombination STRG + Plus kann man heranzoomen und die angezeigte Webseite vergrößern, mit STRG + Minus rauszoomen und mit STRG + Null die Ansicht wieder auf normal zurücksetzen. Am Mac muss man statt STRG die Taste CMD benutzen.
Diese Befehle findet man auch im Browser unter dem Menüpunkt Ansicht – Zoom.
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
Farbwert-Konverter
Dieser freie Farben-Konverter erstellt hexadezimale Werte aus RGB-Werten und umgekehrt (RGB nach HEX sowie HEX nach RGB).
Verwende es, um deine Farbewerte zu konvertieren, um damit deine Webseiten und Grafiken zu gestalten. So kannst du aus Photoshop die Farben von eine RGB-Wert in einen HTML Wert umrechnen.
Du kannst den Konverter benutzen, OHNE das Symbol ‘#’ einzugeben (Beispiel: 3333CC wird konvertiert nach Rot: 51 Grün: 51 Blau: 204).
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
Ein Browsersizer dient dazu, das Fenster des Browsers auf eine gewünschte Größe zu bringen. Dieser ist sinnvoll, wenn man testen möchte, wie die eigene Webseite unter verschiedenen Auflösungen aussieht. (weiterlesen …)
Suche
Themen
Buch Empfehlung
Umfrage
Loading ...Partner
Blogroll
- Blog Marketing
- Community Summit Hamburg
- Nutzerfreundlichkeit.de
- Online Marketing Seminar
- Schroeder-Wendt
- UI Design
- Usability Diplomarbeit
- Usabilityblog.de
- WP Usability
Seiten
Mehr auf
