“Cross Browser Optimierung” nennt der Webdesigner die Tätigkeit sich mit den Browsereigenheiten aller Standard-Browser zu beschäftigen. Hier sind oft  kleine Anpassungen nötig, damit die Seite auf vielen Browsern gleich gut aussieht. Viele Auftraggeber vertrauen hier blind ihrem Programmierer, dabei ist die Kontrolle so einfach. Hier wollen wir mal einige Tools und Möglichkeiten vorstellen, die die Kontrolle der Arbeit von Programmierer ermöglichen, aber auch für den einen oder anderen Programmierer ganz hilfreich sein könnten.

Die einfache Variante

Weil einfach, einfach einfach ist, hier die leichte und schnellste Lösung für einen kurzen Test. Die Entwickler von Browsershots.org bieten auf ihrer Seite einen Dienst an, der die Screenshots von allen möglichen Browsern und Betriebssystemen (Windows, Mac, Linux und FreeBSB) direkt frei Haus liefert. Dazu müssen Sie auf der Seite www.browsershots.org nur Ihre Adresse eingeben, und nach kurzer Wartezeit bekommen Sie alle Screenshots angezeigt.

Achtung: Nach 30 Minuten läuft die Wartezeit ab und es werden keine weiteren Screenshots mehr geliefert. Da jedoch manche Betriebssystem-Browser Kombinationen sehr gefragt sind, muss man hier unter Umständen länger warten. Die Wartezeit kann aber über den Button “verlängern” um weitere 30 Minuten verlängert werden.

Nachteile dieser Variante:

1. Wartezeit
2. jede Seite muss einzeln getestet werden
3. interne Seiten oder Seiten mit Logins können nicht getestet werden

Für alle die mehr wollen

Schritt 1. – Test mit aktuellen Standard-Browsern

Eine gute Möglichkeit, die Kompatibilität der Seite auf unterschiedlichen Browser zu testen, beginnt mit der Installation der aktuellen Standard-Browser. Doch welche sind überhaupt die am häufigst eingesetzten Browser?

Lassen wir dazu die aktuellen Browser-Statistiken der w3schools sprechen (Stand Oktober 2009):

Hier zeigt sich deutlich das neben der aktuellen 8er Vesrion des Internet Explorers auch die Version 6,7 recht aktiv im Internet sind. Die absolute Nummer 1 ist Firefox, aber auch die Abteilung Google Chrome, Apple Safari und Opera sollten nicht vernachlässigt werden. Hier die Links zu den Webseiten der Browser:

• Firefox
• Google Chrome
• Safari
• Opera
• Internet Explorer (sollten durch Windows-Updates aktuell sein)

Schritt 2. – Test in alten Browserversionen

Da es die Browserhersteller geschafft haben, in den aktuellen Versionen in etwa gleiche Ergebnisse zu liefern, sollten man einen Blick auf die älteren Versionen werfen. Hier zeigt die Statistik, dass viele Nutzer keine Updates Ihrer Browserversionen vornehmen und noch mit Internet Explorer 6 und 7 unterwegs sind. Aber auch der Marktführer Firefox ist davon betroffen, hier sind nur 60% der Nutzer mit der aktuellen Version ausgestattet (Statistik über die Firefox-Versionen auf w3schools).

Für den Firefox ist die Lösung recht einfach, denn er kann in mehren Version unter einem Betriebsystem laufen. Hierzu müssen Sie bei der Installation der einzelnen Version nur darauf achten, dass Profil- und Installationsordner sich von Version zu Version unterscheiden. Beim Internet Explorer hingegen, ist eine parallele Installation nicht ohne Zusatztools möglich. Hier empfehlen wir den IE Tester; mit dem können sie gleichzeitig IE 5, 6, 7 und 8 in unterschiedlichen Tabs/Reiter anzeigen und vergleichen.

Ein ähnliches Tool ist der multiple IE. Leider unterstützt er keine Angaben, die browserspezifisch sind. Daher ist dieses Tool nicht zu empfehlen!

Schritt 3. – Mobile Endgeräte

Da unsere Welt immer mobiler wird, sollten mobile Endgeräte à la IPhone, Google- und Windowsphone nicht fehlen. Denn gerade Kunden, die auf dem Weg zu Ihnen sind, und sich noch einmal schnell die Adresse über ihre Webseite besorgen wollen, sind besonders verärgert über fehlende Unterstützung. Hier bietet Opera, der Standard-Browser auf dem Googlephone und allen Symbiansystemen, die Möglichkeit zur Simulation der mobilen Ausgabe (“Ansicht”  – “Klein- Bildschirm”). Alle anderen Geräte sollten am Besten direkt am Gerät getestet werden. Hier sind die Unterschiede bei bisherigen Tests so groß, das die Simulation am PC schwierig ist. Dies ist auch eine gute Begründung für den Chef, warum sie das IPhone bestellen müssen.

Schritt 4. – Wie sieht die Suchmaschine meine Webseite

Zu guter Letzt noch ein kurzer Blick auf unsere besten Freunde: “die Suchmaschinen”. Mit Textbrowsern lassen sich die Ansichten ihrer Webseite durch Suchmaschinen sehr gut simulieren. Dazu sollte Lynx nicht in der Sammlung fehlen. Alternativ gibt es auch eine einfachere Variante als Firefox-Plugin (Yellowpipe Lynx Viewer Tool).

Dateien, z. B. Bilder, die mit Hilfe von serverseitigen Anwendungen (z. B. PHP) bearbeitet und unter dem gleichen Namen gespeichert bzw. überschrieben werden, führen häufig dazu das der Browser die alte Datei aus seinem Cache anzeigt und nicht die neu erstelle Version herunterlädt.

Hierfür gibt es einen kleinen Trick, dazu wird im HTML-Code an das Ende des Dateinamen ein Fragezeichen gefolgt von der Uhrzeit angehängt. Der Browser findet diese Version in seinem Cache nicht und bekommt dann vom Webserver die aktuelle Datei neu geliefert. Dazu ein Beispiel PHP-Quellcode anhand eines Bildes:

echo '<img src="'.$image.'?'.time()' />";

Die Ausgabe gestaltet sich dann wie folgt:

<img src="img/logo.jpg?1253960538" />

Von der Verwendung auf öffentlich zugänglichen Seiten raten wir ab, da nicht bekannt ist wie Suchmaschine wie z. B. Google diese Ausgabe bewerten, wir verwenden dieses Verfahren ausschließlich im Backend.

Trotz der großen Auswahl an Programmen, die heutige Linux-Distributionen von Haus aus mitbringen und über sogenannte “Repositories” anbieten, oder die sich für lau aus dem Netz besorgen lassen, kommt fast jeder so genannter “Normalbenutzer” mal in die Verlegenheit, ein Windows-Programm unter Linux starten zu wollen. In diesem Fall bleibt ihr oder ihm nur die Möglichkeiten, Windows in einer virtuellen Maschine zu installieren, oder das OpenSource-Programm Wine zu verwenden.

Wine steht dabei für “Wine Is Not an Emulator” und ermöglicht es, Programme, die für Windows bestimmt sind, unter Linux/Unix auszuführen. Leider funktioniert das längst nicht mit allen Programmen und manchmal klappt es nur mit zusätzlichen “Tricks”. Der Grund dafür kann daran liegen, dass immer mehr Windows-Programme zusätzliche Laufzeitkomponenten benötigen um selbst unter Windows zu arbeiten. Diese werden natürlich auch unter Linux mit Wine benötigt.

Winetricks ist eine Skript mit dem verschiedene Redistributable-Runtime-Bibliotheken, beispielsweise die MS Visual Basic und C++ Runtime Libraries, heruntergeladen und installiert werden können. Zusätzlich lassen sich mit diesem Skript auch einige Einstellungen, wie die Wahl der Windowsversion, anpassen. Winetricks wird nicht installiert, es genügt die Datei aus dem Internet herunterzuladen und an einem beliebigen Ort zu speichern. Das funktioniert über die Kommandozeile mit dem Befehl:

$ wget http://www.kegel.com/wine/winetricks

Gegebenenfalls wird noch cabextract benötigt, dass sich mit dem Befehl:

$ apt-get install cabextract

unter Debian-basierte Distributionen installieren lässt. Zum Ausführen von Winetracks genügt anschließend die Eingabe:

$ sh winetricks

Darauf erscheint ein Fenster, in dem man die gewünschten Bibliotheken und Einstellungen auswählt und mit OK bestätigt. Danach werden die ausgewählten Bibliotheken heruntergeladen und installiert. Das Auswählen und installieren kann auch durch z. B.:

$ sh winetricks corefonts vcrun6

direkt ausgeführt werden.

Ein Aktuelles Beispiel für Windows-Programme, die sich mit Winetricks zum Laufen bringen lassen, ist das Programm “AdWords Editor”, dass es nur für Windows gibt. Dieses Programm ist bis zur Version 7.0 relative problemlos unter Wine gelaufen. Mit der Version 7.5 ging das leider nicht mehr. Beim Starten kommt die Fehlermeldung “Microsoft Visual C++ Runtime Library – Runtime Error!”.

Erst mit der Installation der MS Visual C++ 2005 und MS Visual C++ 2005 SP1 Bibliotheken über

$ sh winetricks vcrun2005 vcrun2005sp1

startet das Programm wieder. Dabei ist auf die genaue Reihenfolge der Installationen zu achten!