Crossbrowser - Testing, ein kurzer Guide

Jeder Entwickler kennt es: Die neue Website steht kurz vor dem Launch, das Anforderungsprofil des Kunden wurde wunschgemäß umgesetzt und das Design Pixelgenau vom Screendesign ins Web übertragen. Noch ein „schnelles“ Crossbrowser - Testing, dann kann die Website auch schon online gehen.

Während die Seite auf Chrome, Firefox und sogar dem Microsoft Edge (Vendor-Prefix sei Dank), einwandfrei funktioniert und dargestellt wird, sieht es auf Safari und vor allem dem Schreckgespenst Internet Explorer 11 nicht so toll aus.

Illustration von Crossbrowser Optimierung

Muss ich ALLE Browser-(versionen) berücksichtigen?

Nun, das hängt immer sehr stark davon ab, was zuvor mit dem Kunden vereinbart wurde. Wir optimieren bei uns standardmäßig auf Google Chrome (Version 66), Microsoft Edge (Version 17) Safari (Version 11) und Mozilla Firefox (Version 60). Der Internet Explorer ist dabei in der Entwicklerszene oft ein rotes Tuch. Wäre er eine Person, würde man vermutlich bei Kontakt die Straßenseite wechseln.

Vor- und Nachteile

Wir haben für uns die beste Erfahrung gemacht, dem Kunden die Vor- und Nachteile der Optimierung für ältere Browser-(versionen) aufzuzeigen, und da lässt sich durchaus diskutieren.

Vorteile:
Etwa 2,58 Prozent aller Anwender Nutzen den Internet Explorer Version 11 oder älter. Betrachtet man verschiedene Studien, so liegt es nahe, dass vor allem ältere Nutzer IE und Konsorten benutzen, schlicht und ergreifend, weil er bei den Windows Versionen 7 und 8 vorinstalliert mit dabei war. Zugegeben, der Anteil ist nicht besonders hoch.
Hat man aber nun eine Zielgruppe, die sich in einer ähnlichen Altersgruppe befindet so macht es durchaus Sinn, auch für sie eine einwandfreie Darstellung der Seite zu gewährleisten.

Aber: Woher weiß ich überhaupt, welche CSS-Befehle ich ohne Bedenken verwenden kann?
Dafür gibt es eine tolle Website, welche genau darüber Auskunft gibt.

screenshot der website "caniuse.com"
Auf der Website caniuse.com können alle gängigen CSS - Einstellungen auf Browserkompabilität getestet werden

Nachteile:
Die Optimierung der Website auf ältere Browser hat natürlich auch einige Nachteile. So gab man sich doch über Jahre große Mühe, großartige CSS Funktionen wie object-fit, grid, filter oder sogar Variablen im Browser verfügbar zu machen. Dies gibt uns als Entwickler völlig neue Möglichkeiten und erleichtert die Erstellung von Layouts immens.
Da man beim IE zum Beispiel gänzlich auf diese Neuerungen verzichten muss, schränkt einem das in nicht unerheblichem Maße ein und man muss auf ältere Einstellungen zurückgreifen.

Der aus diesen Punkten resultierende Mehraufwand spiegelt sich natürlich auch in den Kosten des Projektes wider.

Fazit

Ob man nun ältere Browser miteinbezieht oder nicht, wir wollen Ihnen trotzdem zwei Tipps geben, um auch das Nutzererlebnis von nicht ganz so versierten Anwendern auf ein akzeptables Level zu heben:

  • Funktionalität > Design
    Sind Sie zum Beispiel Betreiber eines Online-Shops, ist es viel wichtiger, dass Ihre Kunden den Bestellprozess bis zum gehen und Ihre Bestellung abschließen können, als dass ein Blur-Filter nicht greift oder eine Box nicht richtig floated. Stellen Sie also sicher, dass der Nutzer zumindest die gegebenen Interaktionsmöglichkeiten Ihrer Anwendung / Website Nutzen kann.

  • Polyfills wirken Wunder
    Ob Sie nun CSS- oder Javascript Code schreiben: Jagen Sie Ihren Code vor dem Merge nocheinmal durch einen Taskrunner, welcher Ihnen Vendorprefixes und Fallbacks ergänzt. Das kann Ihnen einiges an Arbeit und Nerven ersparen!

Weitere interessante Beiträge...

contao workflow thumbnail

28.01.2019

Contao

Wenn es um komplexe Websites geht, ist Contao unser CMS der Wahl. Heute wollen wir unseren Contao Workflow vorstellen, wie wir im Team arbeiten und was es zu beachten gilt.

PHP Elephant Logo

15.12.2018

PHP

Nicht nur bei Content Mangagement Systemen erfreut sich die Arbeit mit Templates immer größerer Beliebtheit. Auch bei statischen Websites und Frameworks sind sie beinahe nicht mehr wegzudenken...

01.06.2019

Marketing

E-Mail Marketing als Marketingkanal wird seit Jahrzehnten erfolgreich eingesetzt, obwohl viele die Wirksamkeit in den letzten Jahren anzweifeln. Wir geben Ihnen das nötige Know-How, wie Sie mit mit Ihren Newslettern durchstarten.