Eine Aufgabe treibt Web-Profis wie kaum eine andere in die Irre: zu testen, ob ihr Design in einer Vielzahl von Browsern und auf unterschiedlichen Geräten gleich gut funktioniert.
Die Liste der zu überprüfenden Browser und Plattformen wird immer länger, und als Designer werden unsere Gemüter immer kürzer; IE6 wird wahrscheinlich noch viele Jahre in Albträumen eine Rolle spielen!
Dabei wird es immer wichtiger, unsere Arbeit in immer vielfältigeren Situationen zu erledigen.
Dieser Artikel beleuchtet die häufigsten Probleme, die bei Tests mit „den üblichen Verdächtigen“ auftreten, und erklärt, warum möglicherweise bald eine Änderung der Taktik erforderlich sein könnte. Ihre gesamte Sicht auf Kompatibilitätstests könnte sich ändern.
Die Fantastischen Fünf
Während der Browserkriege mussten Designer unter ständigen Streitereien zwischen dem Internet Explorer und seinem Konkurrenten leiden (manche Dinge ändern sich nie). Der Wendepunkt kam, als sich neuere Browser dazu verpflichteten, Webstandards zu unterstützen, was die Dominanz des Internet Explorers auf dem Browsermarkt allmählich untergrub.
Zeiten ändern sich. Die zunehmende Bedeutung mobiler Browsing-Geräte und neuer Rendering-Engines hat bei Designern zu dem Wunsch geführt, die Notwendigkeit von Tests auf jedem erdenklichen Gerät einzudämmen.
Designer greifen heute auf ein Spiel mit Zahlen zurück, indem sie ihre Arbeit in der Regel in den fünf oder sechs gängigsten Browsern testen und dann behaupten, den Rest abzudecken. Dies scheint zwar eine einfache Lösung zu sein, bringt aber auch einige Probleme mit sich, denn im Gegensatz zum Druck gibt es sicherlich keine Einheitsgröße, die für alle passt.
Obwohl der Markt von fünf Browsern dominiert wird, sollten Designer den orangefarbenen Abschnitt „Andere“ nicht außer Acht lassen. Besucher anderer Browser müssen weiterhin berücksichtigt werden.
Der Schlüssel zur präzisen Darstellung des schönen Designs Ihrer Website für den Endbenutzer ist die Rendering-Engine. Man könnte annehmen, dass man, wenn man eine Website im beliebtesten Browser für jede der Rendering-Engines Trident, Gecko, Commit und Presto getestet hätte, andere Geräte, die dieselben Engines verwenden, getrost ignorieren könnte, da man damit die überwiegende Mehrheit der Benutzer abgedeckt hätte .
Ich stimme im Allgemeinen zu, dass allein das Testen in diesen Browsern alle für den Benutzer sichtbaren Probleme erkennen würde, aber das Testen in einem breiteren Spektrum von Browsern, Geräten und Systemen hat seine Vorteile. Es lohnt sich, mögliche Probleme zu untersuchen und zu entscheiden, ob weitere Tests erforderlich sind, um den Besuchern das bestmögliche Erlebnis zu bieten.
Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome und Safari) und Presto (Opera).
Jenseits der Bruchgrenze
Ein offensichtliches Problem ist heutzutage die Geräte- (oder Plug-in-)Abhängigkeit, die Browser nicht nur auf der Browserebene, sondern auch auf der Rendering-Ebene betrifft. Die Apple-Gläubigen sind sich sicherlich der Probleme mit Flash beim iPhone und iPad bewusst – und weil Adobe und Apple angefangen haben, sich gegenseitig auszubuhen, hören wir immer noch davon.
Während Flash die allgemeine Darstellung von Inhalten tatsächlich selbst übernimmt, würde ein Test nur in den gängigsten Browsern nicht unbedingt Probleme damit zeigen. Während Mainstream-Technologien (sowohl offene als auch geschlossene) Gefahr laufen, ausgeschlossen zu werden, kann die Erweiterung Ihrer Testbasis von entscheidender Bedeutung sein.
Flash rendert außerhalb des Browsers, aber nicht jeder Webbrowser kann die Technologie nutzen.
Ein weiteres Problem ist das Versionen von Rendering-Engines. Während die Verwendung des neuesten und besten Browsers der Schlüssel zur Nutzung neuer Technologien ist, erfordert die fortgesetzte Verwendung älterer Versionen (insbesondere der verschiedenen teuflisch verkörperten Versionen des Internet Explorers), dass wir uns nicht nur auf die neuesten Builds eines Renderers beschränken, sondern auch zu denen, die in Umgebungen, in denen ein Software-Upgrade entweder ungeeignet oder unmöglich wäre, noch funktionieren können.
Auch im Kompatibilitätsmodus werden beim Testen in aktuellen Browsern keine alten Versionen der Browser berücksichtigt, die frühere Versionen der Rendering-Engines verwenden.
Internet Explorer 6.0 verwendet eine ältere und fehlerhafte Version der Trident-Desktopbrowser-Rendering-Engine.
Rendering-Probleme können auch auftreten, wenn Unterschiede zwischen dem verwendeten Gerät und der verwendeten Plattform bestehen. Es versteht sich von selbst, dass das Testen Ihrer Website auf verschiedenen Mobiltelefonen und Pocket-Surfern Sie an den Rand des Wahnsinns bringen kann, insbesondere wenn man bedenkt, wie unterschiedlich alles aussehen kann.
Das Entwerfen für einen so kleinen Bildschirm kann eine ziemliche Aufgabe sein, insbesondere weil Konventionen für mobile Geräte noch in den Kinderschuhen stecken. Dieses Problem betrifft jedoch auch Desktop-Plattformen. Es ist nicht ungewöhnlich, dass beispielsweise zwischen Windows- und Mac-Versionen von Firefox kleinere Rendering-Probleme auftreten – ein in der Tat besorgniserregender Gedanke.
A List Apart legt so viel Wert auf die Darstellung von Unterschieden, dass es ein separates Design für mobile Geräte hat.
Eine weitere Schlüsselkomponente, die von Browser zu Browser unterschiedlich sein kann, ist die JavaScript-Engine. In der Anfangszeit war die einzige Frage bei JavaScript, ob man es verwenden sollte.
Heutzutage verfügen Browser mit derselben visuellen Rendering-Engine häufig über unterschiedliche JavaScript-Engines (Chrome und Safari sind ein perfektes Beispiel). Die Verwendung mehrerer Browser zum Benchmarken der Fähigkeit Ihrer Website, diese großartigen jQuery-Skripte darzustellen, ist von gleicher Bedeutung, insbesondere wenn Ihr Design viel funktionale Interaktivität aufweist.
Chrome Experiments demonstriert die Rendering-Leistung des Google-Browsers.
Und zum Schluss noch ein Thema, das manche zum Jubeln und andere zum Stöhnen bringt: Barrierefreiheit! In den Augen vieler Menschen hängen Barrierefreiheit und die Art und Weise, wie ein Browser eine Website darstellt, nicht zusammen. Beachten Sie jedoch, dass Benutzer, die Ihre Website besuchen, von ihrer Barrierefreiheitssoftware möglicherweise dazu gezwungen werden, einen bestimmten Browser zu verwenden, der den Bildschirmleser des Computers oder ihr Barrierefreiheitsgerät unterstützt.
In solchen Fällen werden Minderheitsbrowser möglicherweise völlig übersehen. Denken Sie daran, dass Ihr Design auch für diese Menschen funktionieren sollte, deren Bedürfnisse oft vergessen werden.
Opera mag zwar einen kleinen Marktanteil haben, aber seine Sprachoptionen können für Menschen mit besonderen Bedürfnissen lebensrettend sein.
Die Langzeitheilung
Angesichts all der Barrierefreiheitsanforderungen, unterschiedlichen JavaScript-Engines, plattformübergreifenden Problemen, Anzeigeunterschieden, Technologieabhängigkeiten wie Flash und der mobilen Revolution könnte man sich darüber ärgern, wie viele Tests erforderlich sind. Schauen Sie sich dennoch die Bedürfnisse Ihrer Zielgruppe an, um zu sehen, ob eine Erweiterung Ihres aktuellen Testworkflows zu langfristigen Ergebnissen führen würde.
Nehmen Sie sich etwas Zeit, um mit Ihren Besuchern zu kommunizieren. Vielleicht könnten Sie eine Umfrage durchführen, um zu fragen, welche Browser und Geräte sie verwenden, und dann Ihre Statistiken untersuchen, um zu sehen, ob dort Möglichkeiten erwähnt wurden, wie Sie die Interaktion auf Ihrer Website verbessern oder erweitern können.
Möglicherweise benötigen Sie ein mobiles Design, es besteht Begeisterung für eine iPhone-App, oder Sie erhalten einfach mehr Fehlerberichte für Minderheitsbrowser. Das Ermutigen von Feedback ist im Entwicklungsprozess des Designs von größter Bedeutung.
Statistikpakete können einen klaren Überblick darüber geben, mit welchen Geräten Ihre Website besucht wurde.
Kunden in immer größerem Umfang zu erreichen, sollte jeder Website-Betreiber im Hinblick auf die Benutzerfreundlichkeit berücksichtigen. Gute Kommunikation schafft eine emotionale Bindung zu den Besuchern; Sie haben das Gefühl, dass ihr Interesse bestätigt und ihre Zeit sinnvoll genutzt wird, und dies kann aus Klicks Kunden machen.
In der Testphase den Überblick zu behalten, geht also über die Behebung optischer Mängel hinaus. Ein breiteres Testfeld könnte zu neuen Funktionen und einzigartigen Möglichkeiten der Navigation auf der Website führen. Eine Belohnung könnte eine tiefere Bindung zu den regelmäßigen Besuchern und Fans Ihrer Website sein.
Starten sie ihre Motoren
Wie Sie den Testprozess erweitern würden, würde den Rahmen dieses Artikels sprengen. Der einfachste Weg, das Erscheinungsbild Ihrer Website und das Benutzererlebnis zu verbessern, besteht jedoch darin, sicherzustellen, dass alles auf dem Bildschirm ansehnlich aussieht.
Nachfolgend finden Sie eine Liste einer breiten Palette an Browsern, sowohl für Mobilgeräte als auch für Desktops, die Ihnen beim Testen helfen können, Ihren Horizont zu erweitern. Während einige Ihr Design gleich darstellen, sollten Ihnen diese Browser dabei helfen, den Umfang der Tests zu ermitteln, die Sie durchführen müssen.
Zweifellos werden weitere Browser erstellt (und einige existieren möglicherweise bereits), denken Sie also auch an die Zukunft.
Sowohl Desktop- als auch mobile Plattformen verfügen über eine breite Palette an Rendering-Engines.
Während mit Trident, Gecko, Webkit und Presto erstellte Browser enthalten sind (zusammen mit ihren älteren Varianten Tasman, Mozilla und KHTML), wurden andere Rendering-Engines mit einer Benutzerbasis hier nicht berücksichtigt, da die Auswahl an Geräten, die sie unterstützen, sehr begrenzt ist.
Geräte und Browser mit einzigartigen Rendering-Engines (Text, visuell und mobil), die hier nicht erwähnt werden, können einzeln getestet werden und könnten möglicherweise die Kompatibilität Ihres Designs erhöhen.
Ich empfehle die unten hervorgehobenen Browser für jede Plattform. Mit Ausnahme des Mac, der Tasman verwendet, verwenden alle diese die Trident-Rendering-Engine:
Alle diese verwenden die Desktop-Rendering-Engine Gecko (früher Mozilla):
Alle davon nutzen die Webkit-Rendering-Engine (oder den KHTML-Fork im Fall von Konqueror):
Da Presto eine proprietäre Plattform ist, überrascht es nicht, dass sie auf Opera-Projekte beschränkt ist:
Über dem Regenbogen
Möglicherweise ist Ihre Website völlig fehlerfrei. Vielleicht sieht es in jeder Situation großartig aus. Wenn man jedoch die schiere Größe der Anforderungen an die Kompatibilität zwischen Plattformen bedenkt, vermitteln die „Big Five“ kein genaues Bild der Webbenutzer als Ganzes mehr.
Wenn Sie aus diesem Artikel nur eines mitnehmen, dann verstehen Sie, wie wertvoll es ist, mehr Zeit damit zu verbringen, die Bedürfnisse Ihrer Besucher zu analysieren, denn das wird Ihnen helfen, die Testphase neu zu bewerten, um ein breiteres Spektrum an Szenarien abzudecken.
Nehmen Sie sich zusätzliche Zeit, um die Browser für jede Rendering-Engine durchzugehen, und vergessen Sie Folgendes nicht: andere Betriebssysteme, die möglicherweise Unterschiede aufweisen; andere Arten von Geräten (z. B. Mobiltelefone), deren Wiedergabe möglicherweise sehr unterschiedlich ist; einzigartige JavaScript-Renderer, die Auswirkungen auf die Geschwindigkeit haben; ältere Versionen von Webbrowsern; und im Allgemeinen der größere Umfang, der benötigt wird, wenn sich Code weiterentwickelt und das Web selbst verändert.
Zusammenfassung
In einer Welt, in der die Menschen bereit sind, Zeit, Mühe und Geld zu investieren, um ihre Websites so benutzerfreundlich wie möglich zu gestalten, indem sie Suchmaschinen und soziale Medien bedienen und sicherstellen, dass Ihr Design funktioniert (anstatt sich auf Pixelperfektion zu konzentrieren – denken Sie daran, das Web ist das nicht). gedruckt) kann für Hunderte oder Tausende von Menschen wertvoller sein, die auf unterschiedliche Weise auf Ihre Website zugreifen.
Es könnte sicherlich den Unterschied zwischen der Gewinnung von Kunden und frustrierten „Hallo und auf Wiedersehen“-Besuchern ausmachen.
Exklusiv für WDD geschrieben von Alexander Dawson
Wie testen Sie Ihre sorgfältig ausgearbeiteten Designs, damit sie flexibel funktionieren? Planen Sie, Ihren Testworkflow so zu optimieren, dass er weniger restriktiv ist? Könnte Ihre Website mehr Besucherfeedback zu ihrem Design anregen?
