RGB Werte ermitteln Tools und Werkzeuge

Für PC und Apple gibt es verschiedene Werkzeuge um die RGB-Werte anzuzeigen:

Colorzilla für den Firefox Browser
Für den Firefox Browser gibt es ein kleines Programm mit dem Namen ColorZilla. Nach der Installation des kostenlosen Plugins erscheint in der Werkzeug-Leiste des Browsers oben rechts ein Symbol mit einer Pipette. Wenn man diese anklickt, kann man mit dem Mauszeiger einfach eine Farbe auf der Webseite anklicken. Der RGB-Wert wird ermittelt und automatisch in die Zwischenablage kopiert.

Colorzilla Firefox Plugin für RGB Werte

Tray Color Windows Programm für RGB-Werte

Wer nicht nur die RGB-Werte von Webseiten-Elementen ermitteln möchte, sondern auch die von Windows Programmen wie zum Beispiel Taskleisten oder anderen Elementen von Windows, sollte sich das Programm Tray Color mal anschauen. Nach dem Starten des Programms hat man an der Maus eine Pipette mit der man ein Element am Bildschirm anwählen kann. Nach dem Klick wird der RGB-Wert und der HTML Hex Wert angezeigt. Eine Umrechnung in Decimal-Wert ist ebenfalls möglich.

Traycolor findet den HEX und RGB-Wert einer Farbe auf dem Bildschirm.

Farben und RGB Werte mit der Web Developper Toolbar finden

Wenn man sich kein neues Programm oder Plugin installieren möchte, gibt es auch einen kleinen Umweg mit dem Web Developer Toolbar, die die meisten Web-Entwickler schon installiert haben sollten.

In den Web Developer Tools kann man in der Toolbar oder mit einem Klick auf der rechten Maustaste

Web Developer -> Informationen -> Farbinformationen anzeigen

Kostenloser Web Developer Toolbar download für verschiedene Browser

• Firefox Web Developer Toolbar
• Chrome Web Developer Toolbar
• Internet Explorer Toolbar

Alle RGB-Werte auf einer Webseite können mit der Web Developer Toolbar angezeigt werden

RGB Wert umrechnen

Wer den RGB-Wert auf der Webseite ermittelt hat, möchte diesen evtl. noch umrechnen. Das mit einem HEX / RGB Umrechner dort gibt man einfach den RGB- oder HTML Wert einer Farbe ein und dieser wird umgerechnet.

Für das Ermitteln von RGB Farben  auf Apple-Rechner verweise ich auf den Artikel Farben auf Webseiten ermitteln am Mac

Wenn du noch Fragen oder Anmerkungen hast, freue ich mich über einen Kommentar.

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:

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.

Tool zum Codieren und decodieren von URLs und deren Sonderzeichen.

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.

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).

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.

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.

Browsersizer mit den Web Developer tools

Am Einfachsten geht das Skalieren des Browsers mit den Web developer Tools. Unter Resize wählt man einfach Resize Window und gibt die Auflösung in Pixel ein unter der man die Webseite testen möchte. Mit Display Window Size bekommt man die aktuelle Größe des Fensters und des sichtbaren Bereichs in Pixel angezeigt. Sehr praktisch ist das Eingeben vordefinierter Größen wie zum Beispiel 1024×768 oder 1280×1024 Pixel.

Browsersizer von Web Developer Add-on

Das Add-on Web Developer gibt es mittlerweile kostenlos für die drei gängigen Browser Firefox, Chrome und Explorer.

Browsersizer ohne Plugin für MAC und PC

Wer öfters den Arbeitsplatz wechselt oder an einem fremden PC sitzt kann nicht immer Programme oder Plugins installieren.
Dafür gibt es die Seite browsersize.com. Dort kann man jeweils die Breite und Höhe des Browsers einstellen als auch alle Informationen zur aktuellen Größe des Fensters und des sichtbaren Bereichs ermitteln.

Mit whatsmy.browsersize.com erfährt man Browserfenster Breite, Höhe des Browsers, Bildschrim Breite & Höhe und die Fabrtiefe sowie eine Liste der installierten Plugins. Das ganze funktioniert sowohl unter Windows als auch auf Apple.

Unter setmy.browsersize.com kann man jeweils die Auflösung auf eine vordefinierte Standard auflösung bzw. eine eigene Pixelgröße Angeben. Und das ganze ohne Software oder Plugin installation.

Windows Browsersizer

Wer trotzdem nicht auf ein PC-Programm als Browsersizer verzichten möchte, sollte auf das Windows-Programm “Browser Sizer” zurückgreifen. Dort kann man unterschiedliche Auflösungen für Internet Explorer, Mozilla und Netscape einstellen. Das Programm ist zwar auf English aber dafür kostenlos. Als Download bei Chip.de zu haben.

PC Browsersizer

Statistiken zu Browsergrößen und Sinn eines Browsersizer

Google stellt mit browsersize.googlelabs.com ein eigenes Tool zur Verfügung. Dort kann man die Internet-Adresse seiner Seite eingeben und es wird angezeigt, wieviel Prozent der User welchen Bereich der Seite überhaupt noch sehen. Trotz der Zwischenebene über der Page kann man die Seite voll bedienen und oben unter “Opacity” sogar die Deckkraft einstellen.

Wer bei einem neuen Website-Design über die Größe des Layouts entschieden muss, sollte sich mal folgende Statisken ansehen:

• gs.statcounter.com
• www.browser-statistik.de
• webhits.de Deutsche Browser Statistik

Als Fazit kann man sagen , dass ca. nur noch 2% der Benutzer mit einer Auflösung von 800×600 Pixel unterwegs sind, und 1024×768 auch als veraltet angesehen werden kann da die Mehrheit der benutzer größere Monitore hat. Schon lustig wie schnell sich alles verändert.

Egal für welche Auflösung man sich beim testen mit einem Browsersizer entscheidet. Die Scrollbalken und die Taskleiste des jeweiligen Betriebssystem sollte man bei der Gesamtauflösung nicht ausser acht lassen. Am besten also immer mal auf jedem möglichem Computer (bei Freunden, am Flughafen, auf der Messe etc.) mal zum test die eigene Webseite aufrufen.