Qualitätssicherung
Wie schließt Du einen Webauftrag erfolgreich ab und wie sorgst Du für eine langfristige und gute Kundenbeziehung? Unter anderem indem Du einfach ein gutes Produkt ablieferst.
Nicht alle Webprojekte gehen problemlos über die Bühne. Es gibt zahlreiche Fallstricke, die dazu führen können, dass während einer Webproduktion Probleme auftreten, wie zum Beispiel bei der Überarbeitung des Webauftritts von Hertz:
Bei dem Auftrag, den der Automobilvermieter Hertz im August 2016 bei der Unternehmensberatung Accenture in Auftrag gegeben hatte, ging es um den Relaunch seines Webauftritts.
Der Kunde wollte einen neuen Online-Auftritt und dazu eine App, die auf dem Smartphone laufen sollte. Allerdings wurden beide Projekte nicht zur Zufriedenheit des Kunden umgesetzt, was zur Folge hatte, dass der Autovermieter Hertz die Unternehmensberatung Accenture auf Rückzahlung von 32 Millionen US-Dollar verklagt hat; das waren die Kosten die Hertz für Redesign und Entwicklung der App gezahlt hatte. Der Kunde monierte, dass die Agentur die vereinbarten Deadlines deutlich überschritten hatte; eigentlich sollte im Dezember 2017 das Projekt abgeschlossen sein, das war aber nicht der Fall, und Anfang 2018 war der Auftrag immer noch nicht fertig. Zahlreiche Features fehlten, so soll nach Angaben des Kunden die Website unter anderem nicht responsiv gewesen sein.
Mittlerweile hatte der Auftraggeber kein Vertrauen mehr in den Auftragnehmer.
Accenture hat die Klage als haltlos zurückgewiesen und sich vor Gericht dagegen verwehrt.
Siehe https://www.wuv.de/Archiv/Hertz-strengt-Millionen-Klage-gegen-Accenture-an.
Es gibt zahlreiche Beispiele für gescheiterte Projekte, gerade in der Softwareentwicklung, was unter anderem im Artikel unter https://thephp.cc/artikel/scheiternde-it-projekte schön beschrieben ist. Auch in Webprojekten warten zahlreiche Fallstricke, die zu Problemen führen können. Dazu gehören vor allem mangelhafte Absprachen oder nicht funktionierende Kommunikation zwischen Auftragnehmer und Auftraggeber.
Aber auch agenturintern gibt es bestimmte Prozesse, die zur Qualitätssicherung beitragen oder sie im ungünstigen Fall behindern.
Hier ist es eine gute Idee, regelmäßig während des Projektes und natürlich am Schluss vor der Projektübergabe eine QS (eine Qualitätssicherung) durchzuführen.
Im folgenden findest Du ein Beispiel für eine entsprechende Checkliste für einen einfachen Webauftritt …
Checkliste Qualitätssicherung
Für die Seite http://example.com/index.html
Getestet von Martha Musterfrau am 11.3.2021
| Was getestet | Wie getestet, gefundene Probleme und Lösungsvorschläge | Status |
|---|---|---|
| Semantisch sinnvolles und valides HTML bzw. CSS | Getestet per https://validator.w3.org/#validate_by_input: https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_uri: | ✔ |
| Browserübergreifend einheitliches Design und Funktionalität. | – Alle Plattformen Bei zu kleiner Bildschirmbreite läuft die border über den Schwerpunkten in das „s“ vom Logo hinein. Ggf. Border auf zu schmalen Viewports ausschalten. – Linux Chromium 89.0: bei sehr schmalem Viewport stehen die Leistungen untereinander statt in einer Reihe → word-break entfernen; text-align auf left ✔ Firefox 86.0: ✔ – Windows (Virtual Box) IE 10/Win 7: Portfolio permanent einspaltig. Header sehr vereinfacht dargestellt. Font-awesome funktioniert nicht. Pfeil-nach-oben wird nicht angezeigt. Also für IE 10-Nutzer soweit okay ✔ IE 11/Win 8: Portfolio permanent einspaltig. Animationen nahezu wie Original. Header wie Original. Besuchte Hyperlinks werden nicht gestylt angezeigt. Für IE 11-Nutzer okay. ✔ – MacOS Chrome 88.0: ✔ Firefox 86.0: ✔ Safari 11.1: ✔ | noch offen |
| Dark mode | Light mode nicht gewünscht; Dark ist Standard | ✔ |
| Responsives Verhalten auf mobile Devices (Portrait und Landscape) | – iPad (IOS 7) Safari: Header stark vereinfacht. Keine Anzeige der Overlays beim Antippen. ✔ – Android (Android 6 auf Archos-Handy) Chrome: leichtes horizontales Scrollen (lässt sich aber mit minimaler Zusammenzieh-Touchgeste anpassen). Impressum zu schmal! → word-break ✔ Firefox: leichtes horizontales Scrollen (lässt sich aber mit minimaler Zusammenzieh-Touchgeste anpassen). Impressum okay. Pfeil nach oben ist zu auffällig. ✔ | ✔ |
| Ladezeiten einzelner Seiten | Getestet per https://developers.google.com/speed/pagespeed/insights/ Leistung Desktop der Portfolioseite: 97 Punkte. https://tinypng.com/ für Bildkomprimierung ✔ | ✔ |
| Usability | Usabilitytests bestanden siehe Testprotokolle | ✔ |
| Barrierefreiheit | Getestet per https://pagespeed.web.dev und https://wave.webaim.org/report#/: z.T. zu geringer Kontrast. | noch offen |
| Erreichbarkeit / Geschwindigkeit des Servers. | Cronjob (https://wiki.ubuntuusers.de/Cron/#Erreichbarkeit-eines-Servers-testen) = keine Fehlermeldungen | ✔ |
| Sicherheit, Https, SSL-Zertifikate | Matomo läuft nicht über https ✔ Let‘s Encrypt Zertifikat gültig bis 11. Juni 2021 → automatische Verlängerung. | ✔ |
| BackUps | Standardmäßige lokale BackUps | ✔ |
| Weitere Funktionen / Formulare, robots.txt, 404-Seite | noch offen | |
| Inhalte | Wird vom Kunden verantwortet | |
| Rechtschreibung | Getestet und korrigiert per Google-Docs | ✔ |
| Linkcheck | Getestet per https://validator.w3.org/checklink | ✔ |
| Rechtliches | Cookiehinweis, DSGVO-Text und Impressum vorhanden. Gesetzte Cookies (gecheckt per WebDeveloper Extension): 3 von Matomo | ✔ |
| SEO | Wird von externem Dienstleister übernommen | |
| Matomo/Google Analytics | Matomo installiert | ✔ |
Wie kannst Du nun solche Checklisten einsetzen?
Im oben stehenden Beispiel gibst Du zunächst den Namen der Seite an, zum Beispiel „Meine Bewerbungshomepage“.
Dann kontrollierst Du, ob das Projekt mediengerecht aufbereitet ist; d.h. ist die Ordnerstruktur korrekt? Stimmen die Dateigrößen der Bilder oder sind sie eventuell nicht optimal komprimiert; sind in den Dateinamen vielleicht Umlaute, Sonderzeichen oder Leerzeichen enthalten? Und ist der Code valide?
Du kontrollierst den Webauftritt außerdem auf verschiedenen, auch mobilen Plattformen.
Bei der Usability, also der Benutzerfreundlichkeit, bietet es sich an, die Website unter realen Bedingungen zu testen. Das bedeutet, dass Du beispielsweise einer Person, die die Website bislang nicht kennt eine Aufgabe wie „Buche hier über das Formular eine Reise oder ein Hotelzimmer in einem Ferienort“ gibst. Du schaust der Person über die Schulter und beobachtest, wie sie die Aufgabe löst und ob die Testperson schnell zum Ziel kommt. Dabei forderst Du die Person auf, laut zu denken.
Das Testen der Barrierefreiheit gehört ebenfalls zur QS, siehe meinen Artikel zu diesem Thema.
Überprüfe die Links Deiner Website mithilfe eines Linkchecker-Tools wie zum Beispiel https://validator.w3.org/checklink. Oder linksleuth.
Unser Webserver muss natürlich auch erreichbar sein. Das zu überprüfen ist nicht immer ganz einfach. Aber mit einer Seite wie https://www.lima-status.de/ gibt der Provider einen ersten Überblick. Wenn Du es genauer wissen willst, helfen Monitoring-Werkzeuge wie auf https://weberblog.net/server-verfugbarkeit-monitoring-werkzeuge/ weiter. Die lassen auch regelmäßige Erreichbarkeitstests per cronjob zu.
Kümmere dich um Backups. Speziell bei Content Management Systemen wie WordPress, Drupal und ähnlichen. Vor allem bei einem CMS ist es wichtig, regelmäßig eine Sicherung des Servers vorzunehmen, inklusive der Datenbank. Denn bei einem CMS werden alle Inhalte ja zunächst nur auf dem Server erzeugt.
Beim Thema Analyse solltest Du Dir überlegen, ob man statt Google Analytics vielleicht ein anderes Tool wie Matomo/Piwik einsetzt. Matomo hat den Vorteil, dass es datenschutztechnisch eher unbedenklich ist, denn die Daten bleiben auf dem eigenen Server. Während bei Google Analytics die ganzen Daten, das komplette Logfile in die USA geschickt werden, also die Europäische Union verlassen und das bereitet vielen Datenschützern doch einige Kopfschmerzen.
Jetzt kannst Du nicht alle Betriebssysteme und Web-Browser vorrätig halten, die es auf diesem Planeten gibt. Aber Du kannst dir das Leben erleichtern, wenn Du auf deinem Computer eine virtuelle Maschine wie zum Beispiel Virtual Box von Oracle installierst. Ich selber habe zum Beispiel keinen Windows Rechner in Betrieb. Behelfe mir aber mit einer Virtual Box, wenn ich ausprobieren will, ob eine Webseite unter Windows korrekt angezeigt wird. Du kannst dir diese Software runterladen von www.virtualbox.org.
Funktioniert Deine Website auch bei deaktiviertem JavaScript? Es kann durchaus Besucher unserer Website geben, die in ihrem Browser Javascript deaktiviert haben. Das sind nicht viele, aber wenn Ihr euch mal anschaut, wie viele das Firefox Addon NoScript von Giorgio Maone benutzen, dann seht Ihr, dass es doch Anwender gibt, die Javascript unter anderem aus Sicherheitsgründen deaktiviert haben.
Anstatt die oben abgebildete Checkliste zu benutzen, könnt Ihr natürlich auch entsprechende Werkzeuge nutzen, die in Eurer Projektmanagement Software enthalten sind. In vielen Agenturen werden Projektmanagement-Tools wie Trello, Open Project und ähnliches eingesetzt. Diese Software setzt man allerdings üblicherweise nur in sehr großen Projekten ein. Bei kleinen oder mittleren Projekten ist man mit einer Office-Datei oder einem Google-Docs-Dokument vielleicht besser bedient.
Literaturhinweise
Eine launige Checkliste, die auch auf SEO und WordPress-Eigenheiten eingeht, findest Du unter https://mbaierl.com/go-live-checkliste/.
