Das Design einer Website bei einem kommerziellen Projekt wird häufig zunächst als grafischer Entwurf (z. B. in Photoshop) entwickelt. Ist der Auftraggeber mit dem Design zufrieden, wünscht er oftmals eine pixelgenaue Umsetzung in HTML und CSS. Um zu überprüfen, ob diese Vorgabe auch tatsächlich erfüllt wurde, gibt es ein Firebug-Plugin namens Pixel Perfect. Das geniale Tool ermöglicht es, den Entwurf direkt über die Website zu legen, wobei die Position und der Transparenzgrad angepasst werden kann.
Die Bedienung von Pixel Perfect ist simpel: Nach der Installation erscheint im geöffneten Firebug ein neuer Tab mit der Bezeichnung “Pixel Perfect”. Ein Klick auf den Knopf “Add overlay” öffnet eine Auswahlmaske, mit der ein Bild in den Formaten jpg, png und gif geladen werden kann. Um das geladene Bild innerhalb der Webseite sichtbar zu machen, muss man nun noch den Kasten “Layer Comps” aktivieren. Standardmäßig wird das Bild links oben im Browserfenster eingeblendet. Das Bild kann aber mit der Maus oder durch Verändern des Wertes Position verschoben werden. Über den Wert “Opacity” lässt sich der Transparenzgrad der Grafik verändern. Selbstverständlich lassen sich auch mehrere Grafiken laden. Entfernen lassen sich die Bilder mit einem Klick auf das Mülleimer-Icon. Über den Menüpunkt “Einstellungen” kann man zweierlei definieren: Der Punkt “Hide statusbar info” bestimmt, ob Pixel Perfect ein eigenes Icon rechts unten in der Firefox-Statusleiste (neben dem Käfer-Symbol) einnisten soll. Der Punkt “Hide overlay when inspecting” legt fest, ob auch bei der Arbeit mit einem anderen Firebug-Tab die Grafik eingeblendet werden soll.
Mithilfe der regulären Editierfunktion von Firebug (Tab “CSS”) lassen sich die Elemente der Website pixelgenau nach der jeweiligen Vorlage ausrichten.
Sonstige Lösungen
Pixel Perfect funktioniert leider nur im Firefox, eine Kontrolle der pixelgenauen Umsetzung muss aber auch in anderen Browsern erfolgen. Eine Lösung hierfür bietet das browserunabhängige jQuery-Plugin namens Smile Designer Smile. Hierfür benötigt man drei Komponenten:
- jQuery (ein JavaScript-Framework)
- das Plugin selbst sowie
- einen spezifischen Code zur Initialisierung
Im Blog von 9elements findet sich neben der Beschreibung zu Smile Designer Smile auch ein Demo, eine hilfreiche Einführung zur generellen Benutzung von jQuery findet sich hier.
Einen weiteren Lösungsansatz bietet das Open Source Scripts OverlayComp. Auch hier erfolgt die Überlagerung mithilfe von JavaScript. Allerdings ist die Handhabung einfacher, da hier lediglich ein script Element in den Quellcode eingefügt werden muss. Auch OverlayComp bietet eine Demoseite zum testen.
Wer mit dem jQuery-Plugin oder OverlayComp nicht arbeiten möchte, kann sich auch wie folgt behelfen: Einige Browser-Simulationsprogramme wie Expression Web SuperPreview oder BrowserLab bieten eine überlagerte Darstellung an. In einem solchen Programm verwendet man die mit Pixel Perfect optimierte Firefox-Version einfach als Referenz.
Bisher keine Kommentare.