Browser Testing: Ein Stammbaum
Eine Aufgabe treibt Web-Profis mehr als jede andere zur Ablenkung: Sie testet, ob ihr Design in einer Vielzahl von Browsern und auf verschiedenen Geräten gleichermaßen gut funktioniert.
Die Liste der Browser und Plattformen, die überprüft werden sollen, wird immer länger, und als Entwickler werden unsere Launen proportional kürzer; IE6 wird wahrscheinlich in Albträumen für die kommenden Jahre auftreten!
Dennoch wird es immer wichtiger, unsere Arbeit in einer ständig wachsenden Vielfalt von Situationen zu tun.
Dieser Artikel beschreibt die häufigsten Probleme, die beim Testen mit "den üblichen Verdächtigen" auftreten, und erklärt, warum bald eine Änderung der Taktik erforderlich sein könnte. Ihre gesamte Sichtweise auf Kompatibilitätstests könnte sich ändern.
Die Fantastischen Fünf
Zurück während der Browserkriege mussten Designer durch andauerndes Gezänk zwischen Internet Explorer und seinem Rivalen leiden (einige Dinge ändern sich nie). Der Wendepunkt kam, als neuere Browser sich zur Unterstützung von Webstandards verpflichteten, was die Dominanz des Internet Explorers auf dem Browsermarkt allmählich untergrub.
Zeiten ändern sich. Die zunehmende Relevanz von mobilen Browsing-Geräten und neuen Rendering-Engines hat zu einem Wunsch bei Designern geführt, die Notwendigkeit einzuschränken, an jedem denkbaren Gerät zu testen.
Designer greifen jetzt auf ein Zahlenspiel zurück, indem sie normalerweise ihre Arbeit in den fünf oder sechs gängigsten Browsern testen und dann die Deckung des Rests beanspruchen. Während dies wie eine einfache Lösung scheint, bietet es ein paar Probleme, denn im Gegensatz zum Druck, passt eine Größe sicherlich nicht alle.
Obwohl der Markt von fünf Browsern dominiert wird, sollten Designer die orangefarbenen "Others" -Scheiben nicht außer Acht lassen. Besucher anderer Browser müssen noch untergebracht werden.
Der Schlüssel zum exakten Präsentieren des Designs Ihrer Website für den Endbenutzer ist die Rendering-Engine. Man könnte annehmen, dass, wenn Sie eine Website im populärsten Browser für jede der Render-Engines Trident, Gecko, Commit und Presto getestet haben, Sie andere Geräte mit denselben Engines ignorieren könnten, da Sie die große Mehrheit der Benutzer abgedeckt hätten .
Ich stimme generell zu, dass das Testen in diesen Browsern alle Probleme erkennen würde, die für den Benutzer sichtbar sind, aber das Testen in einer breiteren Palette 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 die bestmögliche Erfahrung zu bieten.
Trident (Internet Explorer), Gecko (Firefox), Webkit (Chrome und Safari) und Presto (Opera).
Jenseits des Breaking Point
Ein offensichtliches Problem ist heutzutage die Geräteabhängigkeit (oder Plug-in-Abhängigkeit), die Browser nicht nur auf Browserebene, sondern auch auf Renderingebene betrifft. Die Apple-Fans sind sich der Probleme von iPhone und iPad mit Flash sicher - und weil Adobe und Apple sich gegenseitig buhen, hören wir immer noch davon.
Während Flash in der Tat die allgemeine Wiedergabe von Inhalten selbst übernimmt, würde das Testen nur in den gängigsten Browsern nicht notwendigerweise Probleme damit aufzeigen. Während Mainstream-Technologien (sowohl offene als auch geschlossene) von Ausgrenzung bedroht sind, kann die Ausweitung Ihrer Testbasis von entscheidender Bedeutung sein.
Flash rendert außerhalb des Browsers, aber nicht jeder Webbrowser kann die Technologie nutzen.
Ein weiteres Problem sind die Versionen von Rendering-Engines. Während der neueste und beste Browser der Schlüssel zur Nutzung neuer Technologien ist, erfordert die fortgesetzte Verwendung älterer Versionen (insbesondere der verschiedenen Versionen des Internet Explorer, die in teuflischen Inkarnationen bestehen), dass wir uns nicht nur auf die neuesten Builds eines Renderers beschränken zu denen, die immer noch in Umgebungen funktionieren können, in denen das Aktualisieren von Software entweder ungeeignet oder unmöglich wäre.
Selbst im Kompatibilitätsmodus berücksichtigt das Testen in aktuellen Browsern keine alten Versionen der Browser, die frühere Versionen der Rendering-Engines verwenden.
Internet Explorer 6.0 verwendet eine ältere und buggerere Version der Desktop-Browser-Rendering-Engine von Trident.
Probleme beim Rendern können auch auftreten, wenn Unterschiede zwischen dem verwendeten Gerät und der Plattform bestehen. Es versteht sich von selbst, dass das Testen Ihrer Website auf einer Reihe von Mobiltelefonen und Pocket-Surfern Sie bis an den Rand des Wahnsinns treiben kann, insbesondere angesichts dessen, wie unterschiedlich alles sein kann.
Entwerfen für solch einen kleinen Bildschirm kann eine ziemliche Aufgabe sein, insbesondere weil Konventionen für mobile Geräte noch in den Kinderschuhen stecken. Aber dieses Problem gilt auch für Desktop-Plattformen. Es ist nicht ungewöhnlich, dass beispielsweise zwischen Windows- und Mac-Versionen von Firefox kleinere Rendering-Probleme auftreten - ein beunruhigender Gedanke.
A List Apart kümmert sich so sehr um Rendering-Unterschiede, dass es ein separates Design für mobile Geräte hat.
Eine andere Schlüsselkomponente, die sich von Browser zu Browser unterscheiden kann, ist die JavaScript-Engine. In den frühen Tagen war die einzige Frage über JavaScript, ob man es benutzt.
Heutzutage haben Browser mit der gleichen visuellen Rendering-Engine oft unterschiedliche JavaScript-Engines (Chrome und Safari sind ein perfektes Beispiel). Die Verwendung von mehreren Browsern, um die Fähigkeit Ihrer Website, diese wunderschönen jQuery-Skripts zu rendern, zu bewerten, ist von gleicher Wichtigkeit, besonders wenn Ihr Design viel funktionale Interaktivität aufweist.
Chrome Experiments zeigt die Rendering-Leistung des Google-Browsers.
Und schließlich ein Thema, das manche Leute anfeuern und andere stöhnen lassen: Zugänglichkeit! In vielen Augen sind die Zugänglichkeit und die Art, wie ein Browser eine Website rendert, nicht miteinander verknüpft. Es ist jedoch erwähnenswert, dass Benutzer, die Ihre Website besuchen, aufgrund ihrer Barrierefreiheitssoftware gezwungen sein könnten, einen bestimmten Browser zu verwenden, einen, der den Bildschirmleser des Computers oder sein Eingabegerät unterstützt.
In solchen Fällen können Minderheitsbrowser vollständig übersehen werden. Denken Sie daran, dass Ihr Design auch für diese Menschen funktionieren sollte, deren Bedürfnisse oft vergessen werden.
Opera kann einen kleinen Marktanteil haben, aber seine Sprachoptionen können für diejenigen mit besonderen Bedürfnissen lebensrettend sein.
Die langfristige Heilung
Angesichts all der Zugänglichkeitsanforderungen, verschiedener JavaScript-Engines, plattformübergreifender Probleme, Display-Unterschiede, Technologieabhängigkeiten wie Flash und der mobilen Revolution könnte man sich entschuldigen, wenn man sich darüber ärgert, wie viel Test benötigt wird. Sehen Sie sich dennoch die Anforderungen Ihrer Zielgruppe an, um zu sehen, ob die Erweiterung Ihres aktuellen Testworkflows zu langfristigen Ergebnissen führt.
Nehmen Sie sich etwas Zeit, um mit Ihren Besuchern zu kommunizieren. Vielleicht könnten Sie eine Umfrage durchführen, in der Sie gefragt werden, auf welchen Browsern und Geräten sie sich befinden, und dann Ihre Statistiken untersuchen, um zu sehen, ob sie Möglichkeiten aufgezeigt haben, wie Sie die Interaktion auf Ihrer Website verbessern oder erweitern können.
Sie werden vielleicht feststellen, dass Sie ein mobiles Design benötigen, oder vielleicht gibt es eine Begeisterung für eine iPhone-App, oder Sie erhalten einfach mehr Bug-Reports für Minderheitsbrowser. Ermutigendes Feedback ist im evolutionären Designprozess von größter Bedeutung.
Statistikpakete können eine klare Vorstellung davon geben, welche Geräte für den Besuch Ihrer Website verwendet wurden.
Kunden immer mehr zu erreichen, sollte jeder Website-Betreiber im Kontext der Benutzerfreundlichkeit berücksichtigen. Gute Kommunikation schafft eine emotionale Verbindung mit Besuchern; Sie haben das Gefühl, dass ihr Interesse bestätigt wird und ihre Zeit gut angelegt ist. Dies kann aus Klicks Kunden machen.
Auf der Testbühne zu bleiben, geht über das Beheben visueller Fehler hinaus. Ein breiteres Testfeld könnte zu neuen Funktionen und einzigartigen Navigationsmöglichkeiten auf der Website führen. Eine Belohnung könnte eine tiefere Verbindung mit den regelmäßigen Besuchern und Fans Ihrer Website sein.
Starten sie ihre Motoren
Wie Sie den Testprozess erweitern würden, sprengt den Rahmen dieses Artikels. Die einfachste Möglichkeit, das Aussehen und die Benutzererfahrung Ihrer Website zu verbessern, besteht jedoch darin, sicherzustellen, dass alles auf dem Bildschirm angezeigt wird.
Im Folgenden finden Sie eine Liste mit einer Vielzahl von mobilen und Desktop-Browsern, mit denen Sie Ihren Horizont beim Testen erweitern können. Während einige Ihr Design gleich machen, sollten diese Browser Ihnen helfen, die Skala der Tests zu ermitteln, die Sie durchführen müssen.
Mehr Browser werden zweifellos erstellt werden (und einige können bereits existieren), also auch die Zukunft in Betracht ziehen.
Desktop- und mobile Plattformen verfügen über eine breite Palette von Rendering-Engines.
Während Browser mit Trident, Gecko, Webkit und Presto enthalten sind (zusammen mit ihren älteren Varianten Tasman, Mozilla und KHTML), wurden andere Rendering-Engines mit einer Benutzerbasis hier wegen der sehr begrenzten Anzahl von Geräten, die sie unterstützen, nicht aufgenommen.
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 Render-Engine von Trident:
All diese Anwendungen der Desktop-Rendering-Engine Gecko (früher Mozilla):
Alle verwenden die Webkit-Rendering-Engine (oder die KHTML-Verzweigung in Konquerors Fall):
Da es sich bei Presto um eine proprietäre Plattform handelt, ist es nicht verwunderlich, dass sie auf Opera-Projekte beschränkt ist:
Über dem Regenbogen
Vielleicht ist Ihre Website völlig fehlerfrei. Vielleicht sieht es in jeder Situation gut aus. Aber wenn Sie die schiere Größe der Anforderungen für die Kompatibilität zwischen Plattformen berücksichtigen, geben Ihnen die Big Five nicht mehr ein genaues Bild von den Webbenutzern als Ganzes.
Wenn Sie nur eine Sache aus diesem Artikel entfernen, sollten Sie wissen, wie wichtig es ist, mehr Zeit mit der Analyse der Bedürfnisse Ihrer Besucher zu verbringen, da dies Ihnen dabei hilft, die Testphase auf eine größere Bandbreite von Szenarien zu überprüfen.
Verbringen Sie mehr Zeit mit Browsern für jede Rendering-Engine und vergessen Sie nicht Folgendes: andere Betriebssysteme, die möglicherweise Unterschiede aufweisen; andere Arten von Geräten (wie Handys), die möglicherweise sehr unterschiedlich sind; einzigartige JavaScript-Renderer, die Auswirkungen auf die Geschwindigkeit haben; ältere Versionen von Webbrowsern; und im Allgemeinen wird der größere Umfang, der als Code benötigt wird, sich entwickeln und das Web selbst verändern.
Zusammenfassung
In einer Welt, in der Menschen Zeit, Mühe und Geld investieren, um ihre Websites so freundlich wie möglich zu gestalten, indem sie Suchmaschinen und soziale Medien bedienen und sicherstellen, dass Ihr Design funktioniert (anstatt sich auf Pixel-Perfektion zu konzentrieren - denken Sie daran, das Web nicht Drucken) kann für die Hunderte oder Tausende von Personen, die auf Ihre Website auf unterschiedliche Weise zugreifen, wertvoller sein.
Es könnte sicherlich den Unterschied bedeuten, Kunden zu gewinnen und "Hallo und Auf Wiedersehen" -Besucher zu frustrieren.
Geschrieben exklusiv für WDD von Alexander Dawson
Wie gehen Sie vor, um Ihre sorgfältig gefertigten Designs so zu testen, dass 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?