Heute habe ich mal wieder ein wenig am Stylesheet (CSS) meiner Seite verändert.
Danach wollte ich natürlich wissen, wie meine Änderungen bei den Anwendern so aussehen.
Denn, jeder der schon mal ein wenig Web-Design gemacht hat weiß, dass trotz (X)HTML- und CSS-Standards die Hersteller der Browser immer noch ihre eigene “Interpretation” von diesen Standards haben. Auch wenn es oft nur Kleinigkeiten sind, aber eine Webseite, die im Firefox gut aussieht, kann im IE6 wie die letzte Grütze aussehen. 🙂
Die Lösung heißt browserorientierte Optimierung der Webseite.
Denn jeder Webdesigner ist natürlich daran interessiert, dass die Seite bei den Besuchern möglichst gut aussieht. Aber aus Zeitgründen wird man die Seite nicht für alle erhältlichen Browser in allen auf dem Markt existierenden Versionen optimieren können. Aber man kann und sollte versuchen, die meist genutzten 80-90% der Browserversionen abzudecken.
Welche das sind, kann man aus den Weblogs auslesen, die jeder Webhoster oder auch Google Analytics den Webmastern bereitstellt. Bei mir sieht die Statistik der Browser-Verteilung so aus:
Meine Vorgehensweise beim Optimieren ist dann folgende. Ich ändere das CSS ab und schaue mir die Änderungen in meinem lokal installierten IE8 und Firefox an. Das deckt schon mal den größten Prozentsatz der Browser, die bei mir zugreifen, ab.
Zum Entwickeln des CSS nutze ich sehr intensiv das Firefox-Addon Firebug, und beim IE8 die Entwicklertools, die standardmässig unter Extras –>Entwicklertools oder F12 zu erreichen sind.
Beim IE7 gab es dafür die Web-Developer Toolbar, die man kostenlos bei Microsoft downloaden kann.
Bisher hatte bei mir immer noch zusätzlich das Programm Multiple IE von Tredosoft installiert. Damit kann man verschiedene IE – Versionen parallel installieren und so die Seiten in unterschiedlichen IE- Versionen anschauen. Da aber die Zeiten von IE6 und früher wohl langsam zu Ende gehen und IE7 und IE8 sich nicht so verschieden sind, habe ich Multiple IE gar nicht mehr installiert.
Nachdem ich meine Änderungen für Firefox und Internet Explorer fertiggestellt habe, teste ich ALLE anderen Browserversionen in einem Rutsch ab, ob es irgendwelche Ausreißer im Layout gibt. Ihr fragt Euch wie das gehen soll. Genau dafür gibt es ein geniales Web-Portal, nämlich BrowserShots.org
Browsershots ist ein Open-Source Online-Projekt, das eine Webseite mit vorher ausgewählten Browsern, bzw. Browser-Versionen aufruft und davon einen Screen-Shot erstellt.
Diese Screen-Shots kann man dann nach einer kurzen Wartezeit ansehen und somit prüfen, ob die Layout-Änderung keine größeren Probleme verursacht hat. Browsershots.org ist völlig kostenlos und kann ohne Anmeldung genutzt werden. Mehr Informationen über Browsershots gibts direkt auf der Webseite des Projektes.
Zusätzlich zu den verschiedenen Browser-Versionen kann man mit BrowserShots.org auch testen, wie die Seite in unterschiedlichen Bildschirm-Größen, Farbtiefen aussieht oder wie sich die Seite verhält, wenn JavaScript oder Flash deaktiviert sind.
Alles in allem halte ich BrowserShots.org für ein Must-Have für jeden Webdesigner. Probiert es ruhig einmal aus!
 |
 |
 |
|
Einstiegsmaske, erst mal Browser auswählen |
Etwas Wartezeit |
Ausgabe kontrollieren |
Antworten