CSS einfach erklärt

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.

Mehr lesen … »

Die tatsächliche Größe für die Anzeige eine Website im Browserfenster variiert beträchtlich. Das hängt zunächst mit der verwendeten Bildschirmauflösung zusammen. Je größer die Bildschirmauflösung des Betrachters ist, desto größer ist die zur Verfügung stehende Fläche. Mehr lesen … »

Ziel eines Webdesigners sollte es sein, dass die von ihm erstellten Seiten immer korrekt dargestellt werden, unabhängig davon, welcher Browser und welches Betriebssystem vom Betrachter verwendet werden. Die einzige Möglichkeit, diesen Anspruch umzusetzen, bedeutet: testen, testen und noch mal testen. Die konkreten Möglichkeiten für diese Prozedur habe ich im CSS-Buch ab Seite 134 erläutert.

Eine Möglichkeit ist die Nutzung von Webdiensten, die Testsysteme mit verschiedenen Betriebssystem- und Browserversionen betreiben (sog. Cross-Browser-Check). Möchte man seine Website testen, teilt man dem Anbieter die jeweilige URL und die gewünschte Betriebsystem und Browser-Kombination mit. Der Anbieter ruft nun die URL auf dem gewünschten System auf. In der einfachsten Variante erstellt der Anbieter hiervon einen Screenshot, welcher grundsätzlich zur Qualitätssicherung von HTML und CSS herangezogen werden kann. Lediglich die Funktion dynamischer oder mit Events verknüpfter Elemente (z. B. ein Aufklappmenü oder Javascript) lässt sich mit einem Bild natürlich nicht testen, hierfür benötigt man vielmehr einen Livetest. Einige Anbieter stellen deshalb einen direkten Remote-Zugriff auf die Browser zur Verfügung. Während der Remote-Access immer kostenpflichtig ist, gibt es für gelegentliche Screenshots auch kostenlose Alternativen.

Mehr lesen … »

Adobe hat ein kostenloses Werkzeug zur Simulation verschiedener Browser namens BrowserLab veröffentlicht. Nutzbar ist BrowserLab in zwei Varianten: Einerseits als Onlineservice, anderseits als Erweiterung für Besitzer der Software Dreamweaver CS4. Bei CS5 ist es grundsätzlich integriert. Interaktive Funktionalitäten bietet leider nur die in Dreamweaver integrierte Variante, Nutzer des Onlineservices müssen sich hingegen mit originären Screenshots zufrieden geben.

Aktuell werden folgende Browser unterstützt:

• Firefox 2.0, 3.0 und 3.5 (Windows XP und Mac OS X)
• Internet Explorer 6.x, 7.x und 8.x (Windows XP)
• Safari 3.x und 4.x (Mac OS X)
• Chrome 3.0 (Windows XP)

Die Online-Variante

Voraussetzung für die Nutzung der Onlinevariante ist lediglich Flash 10 sowie ein Benutzerkonto bei Adobe.

Der BrowserLab Onlineservice ist kein Livetest, sondern zeigt lediglich auf Adobe-Servern erzeugte Screenshots an. Diese kann man dann nebeneinander (2-up View) oder übereinander (Onion Skin View) anzeigen lassen, wodurch eine pixelgenaue Analyse möglich wird.

Mehr lesen … »