Was sind die Merkmale einer qualitativ guten Webseite in technischer Hinsicht?
Stand: aktualisiert April 2021
Als Kunde versteht man in der Regel deutlich weniger von den technischen Aspekten der Webseite als der Programmierer. Ökonomisch gesehen haben wir es mit einer asymmetrischen Informationsverteilung zu tun: Der eine weiß nichts, der andere viel.
Aus Erfahrung weiß ich, dass viele Besitzer einer Webseite keine Ahnung haben, wie gut oder schlecht ihre eigene Webseite in technischer Hinsicht aufgestellt ist.
Außerdem sollten Sie bei der Auftragsvergabe beachten, dass diese Punkte wichtig sind, auch wenn Sie dies einer Webseite nicht immer auf den ersten Blick ansehen.
Technische Anforderungen einer Webseite
In diesem Artikel geht es mir also nicht primär um das Aussehen, die Benutzerfreundlichkeit oder die Barrierefreiheit einer Webseite.
Hier werden einige Hinweise zu den technischen Anforderungen gegeben, die an eine moderne Webseite zu stellen sind und an die man als Laie nicht unbedingt denkt.
Dies ist keine vollständige Aufzählung. Tatsächlich beachte ich bei der Programmierung von Webseiten viele weitere Punkte. Ich möchte hier aber den Rahmen nicht sprengen.
Best Practices beim Webdesign
Bei der Programmierung einer Webseite sind folgende Anforderungen zu stellen:
Technische Grundgerüst: HTML5 und CSS3, PHP, Javascript
Das sind die Standards, die man technisch – je nach Anwendungsfall – in der Regel verwenden sollte. Natürlich gibt es weitere Möglichkeiten, eine Webseite zu programmieren. In der Regel sind dies aber die Bausteine.
HTML5 und CSS3 haben eine lange Entwicklung hinter sich und es macht keinen Sinn, bei einer neuen Webseite auf ältere Standards zu setzen.
Nicht jeder Browser kann im Bereich CSS alles
Es ist wichtig zu wissen, welche Technik auf welchem System funktioniert und welche nicht. Dies kann man hier prüfen:
Also nur CSS Techniken einsetzen, die breit unterstützt werden. So wird z.B. die Layout Technik CSS Grid im veralteten Internet Explorer nicht und auch im Edge Browser schlecht unterstützt. Beim Einsatz der Technik ist also zu beachten, welche Browser unterstützt werden sollen.
CSS Frameworks
CSS Frameworks sind Bibliotheken, die die Erstellung einer Webseite vereinfachen können und dazu führen, eine gewisse optische Einheitlichkeit der erstellten Seiten zu gewährleisten.
Es gibt zahlreiche Frameworks. Beliebt sind z.B. Bootstrap 3, Bootstrap 4, Bootstrap 5, Foundation, Materialize, Tailwind, Bulma, Uikit und viele weitere.
Insbesondere Bootstrap ist sehr verbreitet. Dies führt dazu, das man Bootstrap Webseiten sehr oft sieht und optisch kaum auseinanderhalten kann. Hier führt die schnelle Entwicklung oft zu einem austauschbaren Design.
Man muss also genau abwägen und wissen, was man tut, wenn man ein Framework einsetzt und die Unterschiede kennen. Arbeitserleichterung reicht als Argument für den Einsatz eines CSS Framework nicht aus.
Viele Frameworks führen Ballast mit, den man oft nicht braucht. Und eine Webseite muss schlank und schnell sein.
CMS (Content Management System) oder nicht
Viele CMS bedeuten Ballast, den man eigentlich nicht will und braucht, aber es kommt ganz auf den Anwendungsfall an.
Zum Thema CMS verweise ich auf diesen Artikel: CMS oder nicht?
Kein Flash, keine Frames
Diese Techniken sind veraltet. Moderne Browser zeigen Flash auf Webseiten freiwillig nicht mehr an. Umso schlimmer, wenn die Navigation Flash verwendet. Frames muss man normalerweise nicht mehr verwenden und diese sind in vielfacher Hinsicht heute problematisch.
Tempo, Tempo, Tempo und nochmals Performance
Dazu ist die Optimierung der kompletten Webseite notwendig.
Viele Webseiten sind unnötig langsam, da zu viel Bibliotheken / Frameworks, CSS, Javascript, JQuery usw. geladen werden. Es sollte nur geladen werden, was wirklich notwendig ist unter Berücksichtigung der Wartungsfreundlichkeit.
Man kann die eigene Webseite mit dem Google PageSpeed Insights Test auf Geschwindigkeit testen. Man sollte einen Wert 90+ erreichen. Wenn der Test Mängel anzeigt, muss man dies analysieren und interpretieren können.
https://developers.google.com/speed/pagespeed/insights/?hl=de
Sehen Sie sich dann das Ergebnis für „Mobil“ und „Desktop“ an.
Es hängt teilweise auch vom verwendeten Server ab, welche Optimierungen möglich sind und unterstützt werden. Es kann also auch ein Serverumzug in Betracht kommen, um ein optimales Ergebnis zu bekommen.
Vieles lässt sich aber direkt verbessern. Ein wichtiges Thema bei der Optimierung der Ladezeit der Webseite ist die Bildoptimierung.
Bilder und Formate
Die von Google empfohlenen „modernen“ Formate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was grundsätzlich gut ist.
Der Nachteil ist jedoch gravierend, da die Formate derzeit nicht von allen Browsern unterstützt werden und man mit Fallbacks arbeiten muss, was den Wartungsaufwand deutlich erhöht.
https://caniuse.com/#search=WebP
Auch wenn z.B. der Chrome Browser WebP versteht, lässt sich ein WebP Bild zwar anzeigen, aber z.B. nicht im Chrome Browser im neuen Tab öffnen, sondern nur lokal speichern. Erst dann kann man es weiter betrachten. JPG und PNG sind für Benutzer also derzeit unkomplizierter und „verständlicher“.
Außerdem lassen sich auch JPG und PNG sehr effizient komprimieren, wenn man weiß wie. Damit sind wir beim Thema Bildbearbeitung.
Bildbearbeitung
JPG und PNG Formate müssen komprimiert zur Verfügung gestellt werden. Komprimierung kann verlustbehaftet und verlustfrei sein.
Optimal ist vom Ursprungsbild kommend zunächst eine verlustbehaftete Komprimierung vorzunehmen, da man nur so die Dateigröße deutlich kleiner bekommt. Dabei darf man nicht automatisiert vorgehen, sondern händisch und nur genauso weit, bis man sieht, dass das Bild Qualität verliert. Dies erfordert Erfahrung und ein gutes Auge für das Bild.
Danach ist diese verlustbehaftete Bilddatei nochmal verlustfrei zu komprimieren. Dazu benutze ich das hervorragende JPEGmini:
Mit diesem zweistufigen Verfahren bekommt man das beste Ergebnis.
Google fordert, dass man Bilder maximal in der Größe zur Verfügung stellt, wie sie der Monitor ausgeben kann. Theoretisch richtig. Allerdings gibt es Gründe, die Bilder in höherer Qualität anzubieten, weil dann das Bild auf dem Endgerät optisch oft besser aussieht. Außerdem kann man damit beeinflussen, in welcher Qualität die Bilder der Webseite dann im Internet zu finden sind.
Es gibt da einen Interessenskonflikt zwischen den Google Anforderungen, dass Internet möglichst kompakt mit wenig Serverkapazität zu speichern und meinem Qualitätsempfinden bei der Bildbearbeitung. Mir sind optimale Ergebnisse wichtig und nicht die Serverkosten von Google.
Es geht um den optimalen Punkt zwischen Bildqualität, Ladezeit, mobile Ladezeit, Zeitaufwand und Wartung.
Mobile freundlich
Prüfen, ob die Webseite mobile freundlich ist, also auf allen Displays (PC Monitor, Handy, Tablet) und im Hoch- und Querformat gut lesbar und einwandfrei zu verwenden ist.
Die Webseite benötigt den „viewport“ meta Tag und muss entsprechend „mobile friendly“ programmiert werden.
Webseiten, die mobile unfreundlich sind, werden in den Suchergebnissen abgestraft.
SEO
Der Bereich der Suchmaschinen Optimierung ist ein ganz weites Feld. Grundsätzlich erstellt man Webseiten für Menschen und nicht für Suchmaschinen. Und dann klappt es auch mit den Suchmaschinen. Aber es ist tatsächlich eine Frage der Erfahrung und Technik, über die man Bücher schreiben könnte.
Ein guter Programmierer sagt, was geht und was nicht geht und ja, SEO ist Aufwand.
Fehlerfreiheit des Programm Codes
Es ist notwendig, den Programmcode auf Fehler zu überprüfen.
Für HTML und CSS kann man dies man auch Online testen, z.B. hier:
https://validator.w3.org/unicorn/?ucn_lang=de
Favicon
Eine gute Webseite enthält ein Favicon, welches von Desktop Browsern angezeigt wird. Dies ist das kleine Bildchen in den Browser Tabs.
Aber man sollte auch Favicons für iOS und Android Chrome bereitstellen, damit Nutzer ein Bild / Icon der Webseite auf dem Homescreen festpinnen können. Windows Metro und macOS Safari sind ebenfalls zu berücksichtigen.
Hier sind beispielhaft Favicons meiner eigenen Webseite, die je nach aufrufendem Gerät in unterschiedlicher Auflösung automatisch verwendet werden, bzw. angepinnt werden können.
Navigation und Links
Eine gute Webseite hat keine Fehler in der Navigation und alle Links finden ihr Ziel. Eigentlich eine Selbstverständlichkeit, aber ich erwähne es nicht ohne Grund.
Fehlerseiten, z.B. 404-Seite
Wenn ein Besucher einen fehlerhaften Seitenaufruf vornimmt, sollte dies abgefangen werden und auf eine eigene Fehlerseite führen. Auf meiner Webseite landet man im Fall des Falles hier:
https://www.christian-netz.de/404.html
Server, „.htaccess“ Datei, Cache u. s. w.
Der Server muss hinreichend schnell sein. Es gibt Unterschiede, die sich negativ bemerkbar machen können.
Eine gute Webseite enthält eine maßgeschneiderte .htaccess Datei, die auf den Server gespielt wird und wichtige Einstellungen zum Beispiel für die Komprimierung der übertragenen Daten oder das Cachen für Dateien vornimmt.
Optional
-
Sichere Verbindungen (SSL). Kann man lange diskutieren, ob dies immer Sinn macht. Tatsächlich gibt es auch Nachteile. Zu beachten ist auch die DSGVO, die dies bei manchen Funktionalitäten einer Webseite fordert.
-
Facebook, Twitter Cards, Social Media Verlinkung. Kommt darauf an, wie man aufgestellt ist.
Testen, testen, testen
Sehr wichtig ist das Testen der Webseite auf realen Geräten, also Handys, Tabletts, am PC mit unterschiedlichen Browsern. Es reicht nicht aus, nur das Browserfenster testweise zu verkleinern. Der Teufel liegt oft im Details und nur reale Hardware verhält sich genau wie das Original. Emulieren reicht hier nicht.
Mobile Faustregeln:
-
Wenn es auf dem iPad 1 und unter Android 3 läuft, läuft es mit neueren Versionen erst recht.
-
Auf dem Handy sollte man nicht über Wlan testen, sondern unter realen Bedingungen.
PC Faustregeln:
-
Es reicht nicht, mit Google Chrome zu testen. Man muss auch mit Firefox, Edge, IE, Safari und Opera testen. Außerdem im Idealfall auf dem Mac und unter Linux.
-
Es gibt nicht nur Windows 10. Es gibt Windows 8, Windows 7, selbst XP Rechner sind noch unterwegs, wenn auch sehr selten. Und es gibt die Apple Welt und Linux.
Und ja: Testen ist Aufwand.
Weitere Webseiten Tests
Mit Lighthouse für den Google Chrome Browser kann man die Webseite im Hinblick auf Performance, Accessibility, Best Practices und SEO analysieren lassen.
Es gibt zahlreiche weitere Tests, die man machen kann und die ich verwende. Man muss diese dann natürlich auch interpretieren können.
Fazit
Die technische Komponente bei der Programmierung einer Webseite ist komplex und erfordert Erfahrung und Know-how.
Daneben sind Optik, Benutzerfreundlichkeit, Barrierefreiheit, SEO, Wartung, Updates u. s. w. zu beachten.
Auch haben wir noch nicht über die Sicherheit gesprochen. So ist dies gerade bei CMS ein Thema. Nicht ohne Grund gibt es hier einen Trend zum Flat-Flie-CMS, also CMS Systeme ohne Datenbank. Diese sind tendenziell sicherer als Systeme mit Datenbank. Aber warum dann nicht gleich in HTML ggf. PHP unterstützt programmieren?
Der Trend geht wieder zurück zu den Wurzeln.
Eine Webseite irgendwie zusammenschustern geht relativ schnell und ist kein Hexenwerk. Es liegt aber in der Verantwortung des Programmierers, die beschriebenen und weitere Qualitätsanforderungen zu beachten und umzusetzen. Und es liegt in Ihrer Verantwortung, dies bei der Auftragsvergabe zu berücksichtigen, wenn Sie Qualität für Ihr Projekt erwarten.