Wer erinnert sich noch an den "Browserkrieg" zwischen Microsoft und Netscape in den späten 1990er Jahren? Als Folge dessen sind Browser heutzutage ein kostenloses Produkt. Netscape und Microsoft hatten ihren Programmen in immer kürzeren Zyklen immer mehr Funktionalitäten einverleibt, bis am Ende das eine Schwergewicht von Microsoft als Sieger überlebte.
Der Mozilla Firefox startete im Gegensatz dazu als Leichtgewicht, ohne den Ballast von tausenden Funktionen, und zeigte mit der gezielten Erweiterbarkeit über so genannte Add-ons dass sich Menschen ihren individuellen Browser selbst zusammenstellen können und auch möchten.
Heute bieten auch Google Chrome, der Internet Explorer und der Opera-Browser ein ähnliches Konzept hinsichtlich der Erweiterbarkeit. Auch Web-Designer profitieren von dieser Entwicklung und können sich mithilfe von Add-ons ihre Browser so anpassen, wie sie es benötigen. Wir stellen Ihnen die wichtigsten Erweiterungen hier kurz vor.
- ColorZilla
ColorZilla ist ein praktisches Tool, um Farbwerte auf Webseiten zu ermitteln. - ColorPick Eyedropper
ColorPick Eyedropper unterstützt den Web-Designer bei der Feststellung der Farbwerte auf Web-Seiten. - HSL-Farbwerte
Bei Bedarf erzeugt der ColorPick Eyedropper auch HSL-Farbwerte. - Window Resizer
Mit dem Window Resizer für Chrome wechseln Web-Designer schnell in die gewünschte Display-Auflösung. - Individuell anpassbar
Wenn gewünscht, kann der Entwickler im Window Resizer eigene Formate und Hotkeys speichern. - ruul
Die Größe von Bildschirmelementen ermittelt ein Web-Designer mit Chrome mit ruul – dem Screen Ruler. - FireShot
Mit FireShot sind Web-Designer in der Lage, beliebige Teile einer Website auszuschneiden. - Internet Explorer Developer Toolbar
Microsoft hat die Entwickler-Leiste in den Internet Explorer fest eingebaut, für ältere Versionen gibt es das Add-on zum Download. - HTML Validator
Das Add-on HTML Validator prüft eine Webseite hinsichtlich ihrer HTML-Konformität und der Zugänglichkeit für die Barrierefreiheit. - Expressinstallation
Wie alle Browser-Add-ons ist auch der HTML Validator in wenigen Augenblicken installiert. - Gefährlicher Code
Der HTML-Validator zeigt an, welche Bestandteile im HTML-Code fragwürdig sein könnten. - Autofill Forms
Das Add-on Autofill Forms vereinfacht die wiederholte Eingabe in Formularen. Wie ein Feldbezeichner lautet, zeigt das Programme ebenfalls an. - Firebug
Firebug ist eine umfangreiche Erweiterung, die unter anderem zu einem selektieren Webseitenelement den jeweiligen Code anzeigt. - Umfangreiche Analyse
Die vielleicht wichtigste Funktion von Firebug ist die Analyse der Zugriffsgeschwindigkeit von Seitenelementen und Scripts. - Web Developer
Das Add-on Web Developer ist eine Sammlung von vielen hilfreichen Funktionen – beispielsweise der Wechsel von Proxy-Settings, ohne in das Einstellungsmenü wechseln zu müssen. - Messen
Größenmessung von Elementen mit dem Web Developer Lineal. - Alles in einem
Alle Bestandteile einer Webseite hat ein Web-Entwickler mit Web Developer im Blick.
Platz 10: ColorZilla
Viele Anwender kennen die praktischen Funktionen von Bildbearbeitungsprogrammen wie Photoshop oder Paintshop Pro, wenn es um die exakte Ermittlung eines Farbwerts geht. Innerhalb von Microsoft Office steht die Pipette zur Feststellung des Farbwerts ebenfalls zur Verfügung. ColorZilla erfasst, wie die bereits genannten Programme, den Farbwert eines jeden Pixels auf einer Webseite im Firefox beziehungsweise Google Chrome. Zieht der Webentwickler die Pipette auf die gewünschte Fläche, so wird der verwendete Farbcode in den gebräuchlichen Paletten wie RGB oder HSV ausgegeben.
Weitere Funktionen, wie beispielsweise die integrierte Lupe, Color-Picker und der Palette Viewer werten dieses kostenlose Add-on noch einmal auf.
Fazit: ColorZilla für Firefox und Chrome ist ein unerlässliches Hilfsmittel bei der Prüfung und Festlegung von Farbtönen bei der Website-Gestaltung.
Platz 9: ColorPick Eyedropper
Etwas weniger verbreitet, aber von der Funktionalität ähnlich dem ColorZilla ist der ColorPick Eyedropper für den Chrome-Browser. Dieses Add-on ermittelt ebenfalls den Farbwert für einen gewählten Pixel. Je nach Einstellungen des Webdesigners in den Optionen findet das kleine Programm ebenfalls die HSL-Werte heraus und überträgt die Ergebnisse automatisch in die Zwischenablage.
Fazit: Der ColorPick Eyedropper ermittelt die Farbwerte - nicht mehr und nicht weniger. Somit erledigt das nicht einmal 900 KByte kleine Add-on exakt das, was es tun soll.
Platz 8: Window Resizer für Chrome
Entwicklungen wie HTML5 oder zuvor CSS sorgen letztendlich dafür, dass sich Entwickler immer weniger Gedanken darum machen müssen, wie eine Website auf verschiedenen Geräten wohl aussehen mag. Browser passen die Optik auf Tablets, Smartphones oder klassischen Displays automatisch an ("Responsive Design"). Dennoch möchten Web-Designer die Auswirkungen ihres Designs auf möglicherweise kleineren Anzeigen einmal selbst in Augenschein nehmen. Der Window Resizer von Ionut Botzian für Chrome erweitert den Google Browser um eine Schaltfläche, die den schnellen Wechsel erlaubt, ohne selbst das Fenster in den Dimensionen anpassen zu müssen.
Alle klassischen Größen wie 320x480, 480x800, 640x960, 768x1280, 1024x768, 1366x768,1280x800, 1366x768, 1280x1024 und 1680x1050 liefert das kostenlose Add-on von Haus aus mit. Eigene Dimensionseinstellungen mit verschiedenen Piktogrammen, Ausrichtungen auf dem Bildschirm, unterschiedliche Hotkeys und Im- und Export der Einstellungen bietet das kleine Programm ebenfalls.
Fazit: Einfacher geht es wirklich nicht. Ein Mausklick und das Chrome-Fenster wird in der gewünschten Auflösung dargestellt.
Platz 7: Screen Ruler für Chrome
Wie groß ist ein Element auf dem Bildschirm? Um diese Frage auch ohne mit dem Zentimetermaß am Monitor zu hantieren, beantworten zu können, hat Chris Thelwell ein kleines Add-on für Chrome entwickelt. "Ruul" bietet verschiedene virtuelle Zollstöcke in Pixel, Inch und Zentimeter und erlaubt deren freie Positionierung auf dem Bildschirm. Die ermittelten Dimensionswerte kann der Webentwickler auch manuell eintippen und sieht die entsprechende Veränderung auf dem Monitor.
Fazit: Ein äußerst praktischer kleiner Helfer. Das Add-on macht nicht viel Aufsehen, sondern erledigt ganz schlicht die gestellte Aufgabe.
Platz 6: FireShot
Zumindest die jüngeren Versionen von Microsoft Windows verfügen über eine anständige Möglichkeit mit dem Snipping Tool Bildschirmausschnitte als Screenshot auszuschneiden. Andere Betriebssysteme bieten ähnliche Fähigkeiten.
Wer ganze Web-Seiten speichern möchte oder auch nur Ausschnitte und diese direkt in Dateien verwandeln und mit Kommentaren versehen möchte, braucht ein besseres Tool. FireShot Webpage Screenshots ist eine kostenpflichtige Lösung für den Internet Explorer, Chrome, Opera und den Firefox. Mit dem "Webpage Screenshot in Firefox" haben Entwickler eine schnelle und unkomplizierte Lösung um Screenshots
hochzuladen,
als PDF, PNG, GIF, JPEG, BMP zu speichern,
zu drucken,
in der Zwischenablage zu speichern und
per E-Mail zu verschicken.
Fazit: Webpage Screenshot ist äußerst leistungsfähig und sehr einfach in der Bedienung. Im Gegensatz zu vielen anderen Add-Ons ist das Programm auch in einer kostenpflichtigen Pro-Version erhältlich. In der 30-tägigen Trial-Phase können Entwickler viele Features der Lösung ohne Einschränkungen testen.
Die Pro-Version erlaubt noch einige weitere Gimmicks, wie beispielsweise die Microsoft OneNote-Unterstützung oder die Erstellung von mehrseitigen PDF-Dokumenten. Wer Ideen für eigene Konzepte sammeln und archivieren möchte, für den ist Webpage Screenshot die passende Software.