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.
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.
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...
