Alles paletti: So wird deine Website valide, barrierefrei, sicher und schnell

Facebook
XING
Twitter
Alles paletti
. . . Reklame

Möchten Sie ihr Geld in der WordPress-Welt verdienen? Dann bietet sich anstatt eines HTML-Editors der Einsatz eines Page Builders wie Elementor an. Mit diesem Tool werden Sie das Ziel professionelle Websites zu erstellen wesentlich schneller erreichen.

. . .

Webentwicklung wird zunehmend komplexer. Neben korrekter Auszeichnung von HTML und CSS gibt es zahlreiche weitere Faktoren, die zwar nicht zwingend das korrekte Aussehen einer Website beeinflussen, aber dennoch auf den Erfolg einer Website Einfluss haben. Dazu gehört eine barrierefreie Darstellung der Inhalte, sowie eine schnelle Erreichbarkeit. Das alles selbst im Blick zu haben, ist schwierig. Daher gibt es zahlreiche Tools, die dir dabei helfen, zu dem Werturteil „Alles paletti“ zu gelangen.

Klassische Validatoren für HTML und CSS

Als allererstes solltest du natürlich sicherstellen, dass dein HTML- und CSS-Quelltext richtig ausgezeichnet ist. Das W3C bietet hier einen Validator an, der deinen HTML-Quelltext auf Fehler durchsucht und Warnungen sowie Verbesserungsvorschläge ausgibt. Neben Einhaltung der Syntax gibt es weitere Faktoren, die bei HTML beziehungsweise HTML5 eingehalten werden sollten.

validator_w3c_html
W3C-Validator für HTML

Gerade bei HTML5 spielt die Semantik eine große Rolle. Du solltest also darauf achten, dass deine Website sich an die semantischen Regeln von HTML5 hält. Dazu gehört etwa, dass Überschriften richtig gesetzt werden. So sollte jedes „<article>“-Element immer eine Überschrift beinhalten. Mehrere „<h1>“-Überschriften sollten vermieden werden. Der W3C-Validator macht dich auf diese Dinge aufmerksam.

Auch für CSS gibt es einen entsprechenden Validator, der dich auf Auszeichnungsfehler hinweist. Leider interpretiert dieser Vendor-Prefixe als Fehler, weshalb ein tatsächlich valider CSS-Quelltext praktisch wenig sinnvoll ist.

Anzeige

Barrierefreiheit prüfen

Zunehmend wichtiger wird der Aspekt der Barrierefreiheit bei der Webentwicklung. Dies stellt Webdesigner und -entwickler vor große Herausforderungen. Denn für Menschen mit Sehbehinderungen muss eine Website besondere Merkmale erfüllen, damit diese mit Screenreadern erfasst werden kann. Dazu gehört, dass Inhalte, die mit dem Auge einfach erfasst werden können, so ausgezeichnet sind, dass Screenreader etwa Navigationselemente und Randbereiche einer Website gut interpretieren können.

Der HTML_CodeSniffer zeigt, wie es um die Barrierefreiheit deiner Website steht

Der HTML_CodeSniffer hilft dir dabei, kritische Elemente in deinem Quelltext zu finden und gibt dir Hinweise, inwiefern diese nicht barrierefrei sind. Dabei berücksichtigt das Tool mehrere Standards, die ein unterschiedliches Maß an Barrierefreiheit vorsehen.

Sichere Websites bevorzugt

Auch der Sicherheitsaspekt wird in der Webentwicklung immer wichtiger. So bewertet Google bereits Websites, die per SSL verschlüsselt sind, in Suchergebnissen besser. Gerade, wenn persönliche Daten übertragen werden – vor allem bei sozialen Netzwerken und Online-Shops ist das der Fall – solltest du sicherstellen, dass diese verschlüsselt werden.

validator_ssl-report
Der SSL-Report verrät, wie sicher deine Website ist

Mit dem SSL-Report von Qualys SSL Labs bekommst du einen schnellen Überblick, ob deine Website per SSL verschlüsselt ist und welche weiteren Faktoren ein mögliches Sicherheitsrisiko sein können.

. . . Reklame

Schnelle Ladezeiten sind absolut wichtig. Google und der Leser honorieren das. Mit GeneratePress machen Sie Ihre WordPress-Website zum Rennboliden. Jetzt kostenlos installieren.

. . .

Die Website securityheaders.io gibt dir Auskunft darüber, welche sogenannten Security-Headers gesetzt sind. Gerade in Kombination mit HTTPS können hier zusätzliche Sicherheitsschranken gesetzt werden, die zum Beispiel dafür sorgen, dass eine sichere Verbindung zu einer Domain auch beibehalten wird und nicht versehentlich zu einer unsicheren Verbindung gewechselt wird. Securityheaders.io haben wir schon ausführlicher vorgestellt.

Schnelligkeit ebenfalls wichtig

Trotz Breitbandausbau solltest du immer darauf achten, ob deine Website auch schnell geladen wird. Gerade beim mobilen Internet ist es dank geringerer Bandbreiten und gedeckelter Datenvolumina wichtig, die zu übertragenden Daten gering zu halten.

Die Google PageSpeed Insights helfen dir dabei, herauszufinden, wo es Optimierungsmöglichkeiten bezüglich der Ladezeiten bei deiner Website gibt. So weist dich der Dienst etwa darauf hin, ob die Dateigröße von Bildern durch bessere Komprimierung reduziert werden kann und ob deine JavaScript- und CSS-Dateien das Rendering der Seite blockieren.

validator_gtmetrix
GTmetrix gibt ausführliche Informationen zur Geschwindigkeit deiner Website

Eine Alternative zu Googles Dienst ist GTmetrix. Er funktioniert ganz ähnlich und gibt dir als prozentualen Wert an, wie schnell deine Website ist und wie viel Optimierungspotenzial vorhanden ist. Dabei werden über 25 Parameter geprüft, die relevant für die Geschwindigkeit sind und bei Bedarf optimiert werden können.

. . . Reklame

Unzufrieden mit dem Hoster, oder neue Website am Start? Setzen Sie auf Kinsta, dem Managed Hosting Provider. Kostenlose Demo.

. . .

Mobiltauglichkeit testen

Zu guter Letzt – wo wir schon beim mobilen Internet waren – spielt natürlich auch die Frage eine Rolle, wie gut eine Website auf Mobilgeräten funktioniert. Auch hier hat Google ein spezielles Tool, welches dich darüber informiert, ob deine Website „mobile friendly“ ist. Der Test auf Optimierung für Mobilgeräte gibt kurz und knapp wieder, ob es Optimierungsbedarf gibt.

Ist das Weblayout responsiv? Sind Links und Buttons groß genug und haben sie einen ausreichend großen Abstand zueinander? Ist die Schrift gut lesbar? All diese Faktoren werden bei dem Test berücksichtigt.

validator_mobiready
mobiReady zeigt, wie „mobile friendly“ deine Website ist.

Auch die Seite mobiReady testet deine Website auf Mobilfreundlichkeit. Dabei wird diese auf einem Desktop sowie drei Smartphones simuliert. Als Ergebnis erhältst du einen Score, der deine Website mit den 1.000 weltweit größten Websites vergleicht. Außerdem erhältst du auch hier eine Reihe von Hinweisen, woran es hakt und wo du etwas verbessern kannst.

Fazit: Alles paletti!

Wer alles richtig machen will, hat bei der Gestaltung und Umsetzung viel Arbeit vor sich. Alle Tests zu bestehen, dürfte schwierig bis unmöglich sein – gerade bei gestalterisch aufwändigen und inhaltlich komplexen Websites. Aber die hier vorgestellten Dienste sind ein guter Anhaltspunkt, um Schwachstellen festzustellen und zumindest grobe Fehler auszumerzen, beziehungsweise zu vermeiden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

On Key

Related Posts

Eine Frau mit Latte

Webdesign für eine erfolgreiche Website

Die Website ist die Visitenkarte Ihres Unternehmens. Doch sie ist noch viel mehr als das. Sie ist zentrales Kommunikationsinstrument und erste Anlaufstelle für potenzielle Neukunden. Diese erwarten aussagekräftige Inhalte und ein nutzerfreundliches Design. Wer bei der Onlinepräsenz Professionalität walten lässt, macht auf sich aufmerksam und gewinnt mehr Kunden.

Eine Fußgängerzone im späten Sonnenschein.

So funktioniert User-Testing für den kleinen Geldbeutel

Ganz ehrlich: Sie wissen schon lange, dass User-Feedback essentiell ist, doch das Testen mit echten Usern kommt aus Zeit- und Kostengründen immer zu kurz? Mit dem Feedback Ihrer Nutzer decken Sie Probleme auf, bevor diese zum Problem werden. Heute zeige ich Ihnen, wie Benutzertests auch ohne großes Budget gelingen.