Webdesign – Browser kompatibilität ist wichtig!

Heute möchte ich euch an dieser Stelle ein wirklich nützliches Tool zum Testen von Webseiten und Blogs vorstellen. Wer kennt das Problem nicht, da erstellt Mensch eine Webseite und die sieht im eigenen Browser auch ganz toll aus. Es kommt erste Freude auf und dann sieht Mensch sich die Seite mal in einem anderen Webbrowser an und – Oh Schreck!

Alles ist verzogen, Grafiken werden kleiner oder grösser, es erscheinen Scrollbalken, wo sie nicht sein sollten etc, etc… Es kann wirklich leicht vorkommen, dass der Ersteller der Seite dabei ganz schön ins Schwitzen kommet. Gerade bei Firmenseiten ist diese Browserkompatibilität ein äusserst wichtiger Aspekt! Denn wer will schon, dass sein Firmenauftritt auf dem Internet im Firefox Browser zwar toll aussieht, im Internet Explorer jedoch nicht anzusehen ist.

Und darum möchte ich euch heute einen Online Dienst vorstellen, welcher genau dieses Problem behandelt und wo ihr eure Webseiten gleich selber auf Browserkompatibilität testen könnt. Auf der Webseite browsershots.org könnt ihr aus einer Vielzahl an verschiedenen Browsern auswählen und eure Seiten damit testen. Im Moment vor allem für Linux und Windows Systeme. Zudem könnt ihr dort auch Bildschirmgrösse, Farbtiefe, Java, Javascript- und Flash-Versionen angeben und als weitere Testparameter definieren. Danach könnt ihr das Ergebnis in den verschiedenen Browsern ansehen. Nachfolgend ein Screenshot wie dieser Blog in den verschiedenen Browsern aussieht.

Website-Marketing Blog im Webbrowsertest

Übrigens habe ich auch bei Facebook leider schon festgestellt, dass auch dort die Seiten in den verschiedenen Browsern variieren. Vor allem ältere Versionen den Microsoft Internet Explorer machen hier in erster Linie Probleme und zeigen schnell Scrollbalken an und auch ein Zeilenumbruch wird hier anders angezeigt als im Chrome und im Firefox und bekommt einen grösseren Abstand.

Hattet ihr auch schon solche Probleme mit euren Webseiten? Für welche Browser optimiert ihr eure Webseiten? – Oder macht doch mal die Probe aufs Exempel und schreibt eure Ergebnisse hier als Kommentar rein. Bin gespannt!

Weiterempfehlen

image description

Kommentieren

10 Kommentare

image description
  1. weblike | 5.04.2011 22:43

    Das Testprogramm ist prima und schon seit Jahren unsere erste Wahl!

  2. Stephan Wuethrich | 4.04.2011 16:48

    ok, ich sehe schon, dieser beitrag hat vor allem die fachleute angesprochen. herzlichen dank für die nützlichen und interessanten links zu den diversen testprogrammen. bezüglich IE möchte ich hier nur noch sagen, dass microsoft aus der vergangeheit gelernt zu haben scheint, denn im IE9 sind die probleme (sprich unterschiede) zu den anderen browsern sozusagen alle verschwunden.
    – immerhin… 😉

  3. Chris | 4.04.2011 12:54

    … und vor allem macht es auch keinen Sinn mehr, dass die Webseite in jedem Browser auf jeder Plattform 1:1 aussieht. Das Zauberwort heisst Progresive Enhancement und heisst nichts anderes, dass man coole CSS3- und HTML5-Features in den modernen Browsern einsetzt, und der gleiche COntent von älteren Browsern ohne diese Features aber mit der gleichen Funktionalität präsentiert bekommt. Siehe hierzu ein Videotutorial zu Modernizr unter http://www.youtube.com/watch?v=fMOuGu_O6PI.
    Modernizr wird auch von der besten HTML-Template-Engine „HTML5 Boilerplate“ verwendet, s. http://www.youtube.com/watch?v=qyM37XKkmKQ

  4. Florian Muff | 4.04.2011 12:34

    @René Stalder Da hast du den Nagel wohl auf den Punkt getroffen, 🙂

  5. Bärbel Loy | 4.04.2011 12:00

    Ja stimmt schon – aber das wird in diesem Bereich auch schon weniger.
    Obwohl schon auch noch einige damit unterwegs sind.
    Da hoffe ich mal, das die auch noch schnell umsatteln.

  6. René Stalder | 4.04.2011 11:51

    Wer seine Webseite mit gängigen Standards und den nötigen Resets schreibt, stösst auf wirklich minimale Probleme. Da diese meistens nur optischer Natur sind und UX nicht wirklich einschränken sehe ich auch kein Problem darin.

    Wer heute noch für IE6 optimiert, ist selber schuld. Der Marktwert ist gering. In Flos Beispiel würde es sich bereits bei der Zielgruppendefinition herausstellen, das eine reine IE6 optimierung stattfinden würde. Insofern auch nicht mehr Aufwand für einen erfahrenen Webdesigner, NUR für IE6 zu schreiben.

    Ich nutze übrigens Adobe Browserlabs. Es geht einfach etwas schneller und die gängigen Browser sind abgedeckt. Bei Browsershots gibts manchmal Stosszeiten, wo es für einige Browser bis zu einer Stunde Wartezeit kommen kann.

    Zudem macht ihr euch das Leben selber schwer wenn ihr nicht lernt, Frameworks einzusetzen. PNG Transparenz und co. ist doch längst kein Thema mehr. Fertige Frameworks enthalten bereits alle fixes und was nicht ersetzbar ist lässt man sich mit modernizr markieren.

    Viel wichtiger scheint mir heute übrigens das Testen für mobile Geräte als IE6, Konqueror und die <1% Browser.

  7. DaniBaumann | 4.04.2011 11:13

    Gebe Florian Recht.
    Ich habe für meine Seite IE6 sogar ganz weggelassen. Nach meiner Statistik kommen höchst selten Klicks mit IE6. Und wenn das mal der Fall ist, dann aus irgendwelchen Ländern, die ich sowieso nicht erreichen möchte.
    CSS3 ist nochmal ein anderes Tema…
    Ich möchte euch noch den Link zu Adobe Brwoserlabs ans Herz legen. Es handelt sich zwar auch „nur“ um ein Screenshot Tool, aber ich kann noch eine Delay-time einstellen und die Browsershots nebeneinander vergleichen.
    (browserlab.adobe.com)

    Gruss
    Dani

  8. Florian Muff | 4.04.2011 10:45

    Hallo Bärbel
    Das IE6 nicht mehr genutzt wird stimmt wohl für den Consumer Bereich. Für den Banken sowie Versicherungen-Bereich sieht es jedoch ganz anderst aus, da gehört der Einsatz von IE6 noch zum Alltag. Denke man muss das Browser-Testing immer auch auf dei Zielgruppe ausrichten.

  9. Bärbel Loy | 4.04.2011 09:03

    @florian muff
    Ich bin auch Deiner Meinung, dass es keinen Sinn macht für einen Konqueror 4.5 zu optimieren. Das gleiche gilt meiner Meinung nach für den IE 6 (den wahrscheinlich eh kaum noch einer hat).
    Eine Optimierung auf die gängigen Browser, so wie es die von Dir zitierte Statistik zeigt und gut ist.

  10. Florian Muff | 4.04.2011 08:00

    Hoi Stephan
    Danke für den Beitrag. Wieso sollte ich Browser wie z.B. Konqueror 4.5 überhaupt testen, der Aufwand lohnt sich hier meines Errachtens überhaupt nicht. Wenn ich mir die Browser-Statistik vom Feb. 2011 ansehe, dann machen IE, FF, Chrome, Safari und Opera > 99% (http://lib.li/gyXTj6) des Browsermarktes aus. IE6 zu optimieren ist ja schon genügend mühsam.

    Wenn ich Webseiten wirklich gut auf Browser-Kompatibilität testen will, dann führt kein Weg vorbei am Native-Testing. Ich möchte ja schliesslich nicht nur statische Screenshots erhalten, sondern auch JavaScript Funktionalitäten testen. Spoon bietet hier ein sehr schönes Tool an (http://lib.li/dFKiKk). Die Browser da reichen völlig aus. Für den IE gibt es halt nichts besseres, auch wenn mühsam, als virtuelle Maschinen aufzusetzen. Hierfür gibt es aber auch schon eine Möglichkeit von Microsoft (http://lib.li/hYowP3).

    Probleme machen meistens CSS3 und vorallem DIE Margins. Pixelwixing ist wahrscheinlich eines der meistgehassten Themen. Das nicht unterstützen von PNG und den Transparenzen, vorallem bei IE6 finde ich auch sehr mühsam, hier gibt es aber einen Fix (http://lib.li/gTkx7H).

    Der Einsatz von Standard-Libraries wie z.B. Jquery / JqueryUI hilft ungemein und spart sehr viel Zeit wie auch nerven.

    Liebe Grüsse
    Florian

Kommentar schreiben

Please copy the string oOUPI6 to the field below: