Webentwicklung

Qualitätskontrolle von Webseiten

Webwirkung hat sich zum Ziel gesetzt, Ihren Kunden beste Umsetzung von Webseiten, Onlineshops und Applikationen zu bieten. Beste Umsetzung bedeutet für uns:

  • Die Webseite und der Onlineshop werden in allen herkömmlichen und in der Schweiz meistgenutzten Browsern und Gerätetypen korrekt dargestellt.
  • Die Responsiveness funktioniert auf allen Browsern und Geräten einwandfrei.
  • Das vom Kunden abgenommene Design wurde exakt nachprogrammiert.
  • Funktionen wie beispielsweise Formulare oder Animationen funktionieren einwandfrei.
  • Der integrierte Shop läuft zuverlässig, sodass Kunden ohne Probleme die gewünschten Produkte bestellen können.
  • Die Webseite ist SEO optimiert und weist diesbezüglich keine Fehler auf.
  • Alle Seiten werden schnell geladen.

Um diese Ziele zu erreichen, wendet Webwirkung einen erprobten und bewährten QA-Prozess an. Dieser startet nach der Entwicklung und endet im Normalfall mit der Liveschaltung der Webseite.

  1. Überprüfung des Designs
  2. Testing von Content & Blocks
  3. Link Validation
  4. Formulare, Eingabefelder und Funktionalitäten
  5. Interfaces
  6. Zusatzprüfung e-Commerce
  7. Search Engine Optimization
  8. Ein letzter Blick
  9. Übergabe an den Kunden
  10. Fazit

Überprüfung des Designs

Als erstes wird das UX-Design mit der entwickelten Webseite auf dem Google Chrome Browser Seite für Seite abgeglichen. In diesem Schritt geht es darum, sicherzustellen, dass die einzelnen programmierten Elemente dem Design entsprechen. Bei der Kontrolle des Designs wird insbesondere auf die Verwendung der korrekten Farben und Schriften geachtet. Der Abgleich zwischen UX-Design und der programmierten Webseite ist aufwändiger als der Abgleich zwischen zwei Browsertypen. Aus diesem Grund wird das Design nur auf einen Browser abgeglichen. Andere Browser- und Gerätetypen werden dann auf Basis von Chrome kontrolliert. Chrome wird als Grundlage verwendet, weil es sich um einen sehr fortschrittlichen Browser handelt und sich so gut allgemeine Probleme erkennen lassen.

Testing von Content & Blocks

Die von Webwirkung umgesetzten Webseiten verwenden das CMS WordPress. Der Inhalt auf der Webseite wird mittels sogenannter Blocks angezeigt. Für die richtige Darstellung ist es daher zentral, dass die Blocks richtig funktionieren. Insbesondere auch dann, wenn es darum geht, inhaltliche Anpassungen zum Beispiel an Texten oder Bilder vorzunehmen. In diesem Schritt wird deshalb mit einer speziell dafür angelegten Block-Übersicht-Seite geprüft, ob alle Blocks grundsätzlich korrekt dargestellt werden. Ein besonderes Augenmerk gilt dabei der Responsiveness. Ebenfalls wird getestet, wie die verschiedenen Blocks auf sehr kurze respektive sehr lange Textelemente oder besonders kleine und grosse Bilder reagieren. Dadurch wird verhindert, dass beim Befüllen der Seite durch den Kunden Fehler auftauchen. Dieser Schritt wird hauptsächlich im Chrome und stichprobenartig unter Berücksichtigung weiterer Browser durchgeführt.

In diesem Schritt werden sämtliche Links der Webseite geprüft. Auf den einzelnen Seiten gesetzte Links müssen an den richtigen Ort – zum Beispiel auf eine Unterseite oder auf eine andere Webseite – verweisen. Wichtig ist dabei, dass sich externe Links immer in einem neuen Tab öffnen, um den Nutzer auf der eigenen Seite nicht zu verlieren. Zudem sollen alle Links über einen sogenannten Hover-Effekt verfügen. Nutzer sind sich an diesen Effekt gewöhnt. Er zeigt ihnen, dass sie einen Link respektive ein verlinktes Element anklicken können. Wir gehen dafür Seite für Seite inklusiv Footer durch, um wirklich keinen Link zu vergessen.

Formulare, Eingabefelder und Funktionalitäten

Elemente, mit denen der Nutzer interagieren kann, werden separat getestet. Es handelt sich dabei typischerweise um Kontaktformulare. Bei Kontaktformularen gilt es folgendes zu beachten:

  • Eingabefelder verlangen die richtigen Formate beispielsweise bei für E-Mail-Adressen oder Telefonnummern.
  • Pflichtfelder funktionieren wie gewünscht.
  • Dem Besucher werden die korrekten Notifications eingeblendet und per Mail versendet.

Gibt es neben Kontaktformularen noch weitere Funktionen auf der Webseite, so werden diese ebenfalls separat und spezifisch getestet.

Interfaces

Es gibt eine schier unendliche Anzahl an Browser-, Auflösungen- und Gerätekombinationen. Diese alle zu testen ist nahezu unmöglich. Allerdings heisst das nicht, dass nur weil etwas auf dem Chrome funktioniert und richtig dargestellt wird, dass dies zwangsläufig in anderen Browsern und auf anderen Geräten ebenfalls der Fall ist. Webwirkung testet aus diesem Grund Ihre Webseiten auf den in der Schweiz am häufigsten verwendeten Browser. Dies sind: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge und Internet Explorer 11, jeweils in ihrer neusten, stabilen Version auf Windows 10. Dabei werden die drei sehr verbreiteten Auflösungen 1360×786, 1920×1080 sowie 1280×720 geprüft. Dies hilft, spezifische Probleme (zum Beispiel Textumbrüche) bei verschiedenen Fenstergrössen zu erkennen. Insbesondere der Internet Explorer 11 ist aufgrund seines Alters besonders anfällig auf Darstellungsprobleme. Allerdings gibt es in der Schweiz immer noch viele Leute, die diesen Browser verwenden, weshalb die gezielte Prüfung sinnvoll ist.

Da unterdessen mehr als 50 Prozent aller Webseitenzugriffe über mobile Geräte erfolgen, sind solche gerätespezifische Tests wichtig. Webwirkung testet in diesem Zusammenhang die iPhones 8 und 11, iPad sowie das Samsung S10 jeweils auf Chrome.

Für das Interface-Testing wird das Tool Browserstack verwendet. Browserstack ermöglicht mit wenigen Klicks, gezielte Geräte-, Browser- und Auflösungsumgebungen zu erzeugen. Um diesen aufwändigen Schritt so effizient wie möglich zu gestalten, wird wiederum die Block-Seite verwendet, um die Darstellung aller Blocks zu prüfen.

Das Interface-Testing erfolgt bewusst erst gegen Ende des QA-Prozesses. So hat die Entwicklung genügend Zeit, allfällige Fehler, die auf dem Chrome aufgetaucht sind, zu verbessern, was auch positive Auswirkung auf andere Browser haben kann.

Zusatzprüfung e-Commerce

Falls die Webseite über einen integrierten Shop verfügt, wird ein spezifisches Shop-Testing durchgeführt. Unter anderem wird folgendes kontrolliert:

  • Produktseiten
  • Funktionalität des Warenkorbs
  • Funktionalität von Rabatten und Gutscheincodes
  • Funktionalität des Filters
  • Währungsrechner (falls vorhanden)
  • Korrekte Berechnung der Versandkosten
  • Notification-E-Mails
  • Alle verfügbaren Zahlungsarten
  • Account erstellen
  • Login und Checkout funktionieren
  • Spezialfall: Registrierung während Checkout
  • Page time out limit

Damit die Webseite über Suchmaschinen gut gefunden wird, werden im Rahmen des Webwirkung QA-Prozess entsprechend Massnahmen ergriffen.

Eine wichtige Hilfe dabei ist der Sistrix Optimizer. Dieses Tool zeigt zum einen allfällige Fehler, die bisher unentdeckt blieben und gibt zudem wertvolle Hinweise, die für die SEO-Optimierung nützlich sind. Beispielsweise ob jede Seite genau über eine H1 Überschrift verfügt. Dies ist ein wichtiger Faktor, um in Suchmaschinen wie Google besser gefunden zu werden. Ebenfalls wichtig diesbezüglich sind die sogenannten Meta-Tags. Aus diesem Grund werden für alle wichtigen Seiten eigene Meta-Tags definiert. Zudem werden Ladezeiten geprüft, um entsprechende Probleme zu identifizieren.

Um später wertvolle Analysen und Reportings erstellen zu können, wird in diesem Schritt auch das Analyse-Tool Google Analytics eingerichtet. Analytics liefert wertvolle Infos über die Seitenbesucher, unter anderem wie sie auf die Seite gelangt sind oder wie sie sich auf der Seite verhalten. Sobald dann die Seite veröffentlicht ist, wird die Indexierung direkt bei Google beantragt. So kann die Seite von Suchmaschinen entsprechend gefunden und angezeigt werden.

Ein letzter Blick

Nachdem sämtliche Verbesserungen und Anpassungen umgesetzt worden sind, wird noch einmal stichprobenartig die Seite geprüft. So sollen allfällige Fehler oder Probleme gefunden werden, die durch andere Anpassungen ausgelöst werden können.

Übergabe an den Kunden

Dann folgt ein grosser Meilenstein in jedem Projekt. Die Webseite wird als sogenanntes Go Live Beta dem Kunden übergeben. Das Ziel bis zu diesem Zeitpunkt lautet: Die Seite ist im perfekten Zustand und der Kunde findet keine Fehler.

Damit er, sollte er doch welche finden, diese so einfach wie möglich melden kann, richten wir vorgängig Usersnap ein. Usersnap ist ein Tool, um Kundenfeedback mithilfe von Screenshots und Markierungen einzuholen. Die Rückmeldungen werden automatisch in Trello-Board hinzugefügt. Zudem erhält die verantwortliche Person bei Webwirkung eine Benachrichtigung über jedes eingegangene Feedback. Der Kunde sieht jederzeit den Status seines gemeldeten Fehlers. Diese Art des Feedbacks wird in der Regel sowohl vom Kunden als auch von Webwirkung sehr geschätzt, da Mails mit Rückmeldungen zu allfälligen Fehlern entfallen. Zudem bekommt Webwirkung von Usersnap bereits Angaben zur Browserumgebung, die bei der Fehlerbehebung sehr nützlich sein können.

Fazit

Der QA-Prozess von Webwirkung nimmt zwar viel Zeit in Anspruch, allerdings sind wir der festen Überzeugung, dass es sich das auch lohnt. So ist nämlich sichergestellt, dass sich die Kunden von Anfang über eine stimmige und fehlerfrei funktionierende Webseite freuen können.