Best Practices für dein nächstes Webdesign-Projekt

Was verursacht die große Diskrepanz zwischen dem, was einige WordPress-Entwickler im Vergleich zu anderen verlangen? Die Beantwortung dieser Frage erfordert eine Überlegung, warum man überhaupt eine Webseite haben möchte.

Einige Entwickler konzentrieren sich auf das buchstäbliche Endprodukt: die Kombination von Code, die zu einem ausreichend angenehmen Webseite-Design führt.

Aber Entwickler mit Marketingkenntnissen kümmern sich um mehr als nur darum, etwas zu bauen, das gut aussieht. Sie fungieren als Berater für Kunden, die mit ihren Webseiten bestimmte Ziele erreichen wollen.

In diesem Sinne ist es eine schlechte Idee, jemanden mit dem Aufbau einer Webseite zu beauftragen, der nicht daran interessiert zu sein scheint und keine Fragen zu deinen Zielen stellt. Es ist wichtig, die Tatsache hervorzuheben, dass selbst das schönste Webdesign möglicherweise nicht ideal ist, wenn es darum geht, Besucher zu Kunden zu machen.

Dennoch beurteilen 94% der Menschen die Glaubwürdigkeit der Webseite auf der Grundlage des Webdesigns.

Du musst dich also stattdessen darauf konzentrieren, dein Design zu verwenden, um die ideale Benutzererfahrung zu bieten. Du musst es den Besuchern leicht machen, die gesuchten Informationen zu finden, indem sie deine Webseite überhaupt erst besuchen, und sie gleichzeitig zu zielgerichteten Conversion-Aktivitäten führen.

Diese Best Practices für Webdesign konzentrieren sich auf die Schnittmenge zwischen der Erstellung einer schönen Webseite und einer Webseite, die deinem Geschäft dient.

Prefer to watch the video version?

Was definiert die Best Practices im Webdesign?

Sicherlich hat jeder irgendeine Meinung darüber, was eine gut gestaltete Webseite ausmacht.

Aber zügeln wir die Meinungen aller, indem wir uns auf die Experten konzentrieren.

Laut Orbit Media kannst du die besten Praktiken im Webdesign in diese drei grundlegenden Kategorien von Standards einordnen:

• Brandstandards: Vielleicht ist es für dich vertrauter, dasselbe Konzept als „Branding“, „Styleguides“ oder „Moodboards“ zu bezeichnen. Diese Standards umfassen alles, was mit dem Aussehen einer Webseite zu tun hat und die Verwendung von Farben, Typografie und geschäftsspezifischen Elementen beinhaltet.
• Kodierungsstandards: Webseiten sollten gemäß den Programmierstandards erstellt werden, die vom W3C, der internationalen Gemeinschaft, die gemeinsam an der Entwicklung von Webstandards arbeitet, vereinbart wurden.
• Zugänglichkeitsstandards: Der Zugang zu Informationen ist ein grundlegendes Menschenrecht, das in der UN-Konvention über die Rechte von Menschen mit Behinderungen anerkannt wurde. Darüber hinaus hat die Zugänglichkeit deiner Webseite positive Auswirkungen – nicht nur auf den Verkauf, sondern auch auf die Suchmaschinenoptimierung. Das W3C teilt eine grundlegende Liste von Standards, die du befolgen musst, um eine zugängliche Webseite zu gestalten. Wir werden später in diesem Artikel weitere verwandte Best Practices für Webdesign im Detail beschreiben.

Schauen wir uns an, wie man Webdesign-Praktiken entwickelt, die auf jedem dieser Standards basieren:

Brand Standards

Webseiten, denen ein konsistentes Branding fehlt, können nervig sein und zu Verwirrung führen. Daher sollte es nicht überraschen, dass etwa 38% der Besucher gesagt haben, dass sie sich nicht mehr mit einer Webseite beschäftigen werden, wenn der Inhalt oder das Layout unattraktiv ist.

Wenn man bedenkt, dass das Aussehen nicht alles ist, sind hier einige grundlegende Designprinzipien aufgeführt, die man bei der Erstellung einer Webseite, die die Leute benutzen wollen, beachten sollte:

Balance

Das Prinzip der Ausgewogenheit ist ein Gestaltungsprinzip, das vorschreibt, wie visuelle Elemente effektiv verteilt werden können. Im Allgemeinen sieht ein ausgewogenes Design sauber und natürlich aus und hat eine gute Symmetrie (obwohl das nicht unbedingt eine Bedingung für Ausgewogenheit ist).

Man kann die Ausgewogenheit in das Webdesign im Hinblick auf das Seitenlayout einbeziehen.

Das Zentrieren von Text oder anderen Elementen auf der Seite ist eine einfache Möglichkeit, dies zu tun. Im Allgemeinen sind Webseiten auf einem Rastersystem aufgebaut, das eine Form der Ausgewogenheit schafft. Du kannst die CSS-Float-Eigenschaft verwenden, um Elemente zu positionieren und sie über die Seite auszubalancieren.

Das Gleichgewicht kann auf 3 Arten erreicht werden:

1. Symmetrisches Design

Gleichmäßige Anordnung von Elementen auf der gesamten Webseite. Wenn du zum Beispiel ein schweres Element auf der linken Seite hast, solltest du ein schweres Element auf der rechten Seite haben. Wie bereits erwähnt, ist die Zentrierung die einfachste Möglichkeit, Symmetrie zu erreichen, aber sie kann manchmal flach oder langweilig wirken.

Um zu vermeiden, dass die Seite monoton aussieht, kannst du mit verschiedenen Elementen ein Gleichgewicht schaffen, z.B. ein großes Bild mit einem Textblock ausgleichen. Es gibt auch eine Art von symmetrischem Gleichgewicht, das als Radialbalance bezeichnet wird, bei dem die Objekte von einem zentralen Punkt aus strahlen.

2. Asymmetrischer Aufbau

Eine größere Herausforderung ist die ungleichmäßige Verteilung der Elemente auf einer Seite, wenn es darum geht, ein gutes, asymmetrisches Design zu erreichen. Beispielsweise kann ein großes Element in der Mitte liegen, das durch ein kleineres, weiter entferntes Element ausgeglichen wird.

Man kann andere Gestaltungselemente wie Farbe oder Textur verwenden, um ein asymmetrisches Design auszugleichen.

3. Nicht ausgeglichene Balance

Diese Art von Entwürfen suggerieren Bewegung und Handlung, was bei den Menschen Unbehagen auslösen kann. Wenn die Webseite zum Nachdenken anregen soll, dann ist ein Nicht ausgeglichenes Design das Richtige für dich.

Komposition

Der Begriff Komposition bezieht sich auf die Platzierung und Organisation von Gestaltungselementen.

Die Drittelregel wird häufig verwendet, um eine ausgewogene Komposition zu erreichen, insbesondere bei Fotos.

Abstände

Die Elemente sollten in gleichmäßigen Abständen angeordnet sein, damit die Benutzer Abschnitte oder Blöcke unterscheiden können.

Du solltest auch einen negativen Raum oder den Raum zwischen und um das Thema eines Bildes herum einführen. Negativer Raum kann visuelles Rauschen reduzieren, die Lesbarkeit erhöhen und ein Gleichgewicht herstellen.

Du kannst negativen Raum einführen, indem du Ränder und Polster um deine Designelemente herum anbringst.

Schwerpunkt

Schaffe einen Schwerpunktbereich, auf den du die Aufmerksamkeit lenken möchtest. Es sollte der wichtigste Teil deiner Seite sein, und idealerweise sollte sich jede Seite nur auf einen Schwerpunkt konzentrieren.

Farbe

Farbe ist ein wichtiges Gestaltungselement, wenn es um die Markenbildung geht. Im Idealfall kommt man in den Webdesignprozess mit einem Verständnis der Farben, die man mit seiner Marke assoziieren möchte.

Speziell beim Webdesign hilft es, mit einem Moodboard für die Marke zu beginnen.

Wähle eine Primär- und eine Sekundärfarbe (die Sekundärfarbe kann die Primärfarbe ergänzen oder kontrastieren) sowie einen helleren und einen dunkleren Farbton für jede Farbe. Schränke die Verwendung von Farbe ein, damit verschiedene Akzente nicht zum Schandfleck werden.

Adobe Color bietet ein ausgezeichnetes kostenloses Tool zum Testen verschiedener Farbkombinationen, um eine Arbeitspalette für Webseite-Elemente zu erstellen.

Außerdem ist es wichtig, bei der Entscheidung für eine Farbe diejenigen zu berücksichtigen, die farbenblind sind, was bis zu 4,5% der Weltbevölkerung einschließt.

Beispiel dafür, wie ein normales Design für farbenblinde Benutzer aussehen würde

Es gibt drei Arten von Farbenblindheit (völlige Farbenblindheit, zweifarbiges Sehen und mangelhaftes Farbsehen). Stelle also sicher, dass dein Entwurf auch für diejenigen, die vielleicht nicht in der Lage sind, Farben zu unterscheiden, noch brauchbar ist.

Kontrast

Bei der Wahl der Farbe ist es wichtig, sich der Farbverhältnisse und des Kontrasts bewusst zu sein.

Der Farbkontrast bezieht sich auf den Unterschied im Licht zwischen Vorder- und Hintergrund. Durch die Verwendung von ausreichend kontrastierenden Farben kann die Sichtbarkeit der Webseite leicht unterschieden werden. Verwende im Allgemeinen kontrastreiche Farboptionen – wie schwarzen Text auf weißem Hintergrund -, um deine Webseite lesbar zu machen.

Das Kontrastverhältnis ist der numerische Wert, der dem Kontrastunterschied zwischen den Seitenelementen zugeordnet wird.

Die World Content Accessibility Guidelines (WCAG) 2.0 empfehlen ein Kontrastverhältnis von 4,5:1 für normalen Text. WebAIM verwendet einige vorgegebene Kombinationen, die dem idealen Kontrastverhältnis entsprechen, um dir bei der Visualisierung dieser bewährten Webdesign-Methode zu helfen.

Um die Navigation mit diesem Verhältnis zu erleichtern, stelle sicher, dass du bei der Gestaltung deiner Webseite alle Zielgruppen (einschließlich derjenigen mit Zugänglichkeitsproblemen) berücksichtigst. Dies ist einfacher als die Planung, diese Probleme im Nachhinein anzugehen.

Berücksichtige alle Aspekte der Webseite, mit denen die Benutzer interagieren werden, einschließlich Kopf- und Fußzeilen und Menüs – die alle leicht sichtbar sein müssen, um nutzbar zu sein.

Einige Tools, die du verwenden kannst, um die Farbkontrastverhältnisse zu überprüfen, sind:

• Farbkontrast-Checker nach Level Access.
• Kontrastverhältnis..
• WCAG 2.0 AA & AAA Farbkontrast-Checker-Tool, das auf den WCAG 2.0-Richtlinien basiert.

Typographie

Die Typografie der Website ist ein weiterer wichtiger Aspekt der Markenbildung.

Es gibt zwar viele verschiedene Quellen für die Suche nach potenziellen Schriftarten, die du auf deiner Webseite verwenden kannst, aber du solltest zunächst die Optionen in Betracht ziehen, die unabhängig davon, welche Schriftarten der Endbenutzer auf seinem Computer installiert hat, konsistent angezeigt werden.

Google Fonts bietet eine große Auswahl an kostenlosen websicheren Schriftarten, auf deren korrekte Anzeige du dich verlassen kannst, unabhängig von den installierten Schriftarten/Programmen des Nutzers. Stelle sicher, dass du Schriften in dein Moodboard einbaust, um zu sehen, ob sie deiner Farbästhetik entsprechen.

Wenn du Probleme hast, Kombinationen zu finden, kann Google Fonts dir beliebte Schriftpaare vorschlagen. Du kannst auch eine Webseite wie FontPair verwenden, um Vorschläge zu erhalten.

Versuche, die verwendeten Schriftstärken zu begrenzen, da das Laden von zu vielen Dateien zu einer langsamen Seitengeschwindigkeit beitragen kann. Ziehe in diesem Zusammenhang in Betracht, Google Fonts lokal zu hosten, um zusätzliche Leistungsvorteile zu erzielen.

Wenn es um die Auswahl typografischer Elemente auf der Grundlage von Best Practices für das Webdesign geht, sollten als allgemeine Faustregel serifenlose Schriftarten für Überschriften und Serifenschriften für den Inhalt verwendet werden. Verwende zumindest keine dekorativen Schriftarten für den Inhalt, da dieser schwer zu lesen sein wird.

Lasse dich auch nicht dazu verleiten, auf deiner Webseite eine große Auswahl an verschiedenen Schriftarten zu verwenden. Eine gute Faustregel ist es, eine Schriftart für dein Logo, eine andere für deine Menüs/Überschriften und eine weitere für den Inhalt zu verwenden. Versuche in diesem Zusammenhang, Schriftarten zu kombinieren, die sich gegenseitig ergänzen, z.B. aus derselben Schriftfamilie.

Elementhierarchie

Hierarchie bezieht sich auf die Anordnung von Designelementen, die die relative Bedeutung darstellen. Dies wird durch die Manipulation von Elementen wie visuellem Kontrast, Größe und Platzierung erreicht, um die Aufmerksamkeit auf sich zu lenken.

So muss der Inhalt beispielsweise in logische Blöcke zerlegt werden, damit die Benutzer die Abschnitte voneinander unterscheiden können.

Dies kann durch die Verwendung von Inhaltsüberschriften erreicht werden, die es den Benutzern nicht nur erleichtern, zu den Teilen zu springen, die sie lesen möchten, sondern auch große Textmengen in lesbare Blöcke aufteilen, so dass Screenreader den Kontext jedes Abschnitts bestimmen kann.

Wenn du nach einigen hilfreichen visuellen Illustrationen dieser Designkonzepte und mehr suchst, deckt der Blog von Tilda Publishing einige der häufigsten Webseitengestaltungsfehler und deren Behebung ab.

Bestes Web-Design/Formatierungspraktiken

Laut einer Untersuchung von Orbit Media gibt es einige gemeinsame Webdesign-Standards, die in den Top 50 Marketing-Webseiten eingehalten werden sollten.

Mit „Standards“ meinen sie, dass 80% der Webseiten einen ähnlichen Design-Ansatz verwenden:

• Logo in der linken oberen Ecke.
• Horizontale Hauptnavigation über den oberen Rand jeder Seite.
• Wert-Angebot hoch auf der Homepage „above the fold“. Beachte, dass die meisten Webdesigner dir sagen werden, dass es keine Standardpixelhöhe für Browser gibt und technisch gesehen auch keine „fold“. Aber im Allgemeinen sollten wichtige Designelemente auf Seiten, die für die Mehrheit der Besucher sichtbar sind, auch ohne Scrollen erscheinen.

Hier sind einige bewährte Verfahren für Webdesign für gemeinsame Webseitenelemente:

Bilder

Die besten Praktiken für die Verwendung von Bildern im Webdesign könnten viele Bände von Ratgebern inspirieren, aber konzentrieren wir uns in dieser Diskussion über die besten Praktiken im Webdesign auf das absolute Minimum:

• Hinzufügen von ALT-Text. Bilder können nicht mit Bildschirmleseprogrammen verarbeitet werden, wenn kein ALT-Text verwendet wird. Das Hinzufügen von ALT-Text trägt auch zur Suchmaschinenoptimierung bei, aber einige Leute verwenden ALT-Text nur zur Ergänzung ihrer Keyword-Strategie. Eine hilfreichere Verwendung von ALT-Text wäre die Beschreibung des Bildes – obwohl man mit dem richtigen Ansatz sicherlich Spiders und Screenreader gleichzeitig zufrieden stellen könnte.
• Die Verwendung von Bildern mit menschlichen Gesichtern ist in der Regel effektiver als andere Grafiken oder Animationen. Es erhöht die Wahrscheinlichkeit, dass sich die Menschen mit dem Bild beschäftigen, da sie von dem angezogen werden, was sie als echte Empathie und Emotionen wahrnehmen.
• Verwende responsive Bilder, die je nach Browsergröße wachsen oder schrumpfen. Dies hilft sowohl bei der Geschwindigkeit der Webseite als auch bei der SEO.
• Vergiss niemals die Favicons. Favicons sind die kleinen Icons, die neben dem Titel der Webseite und auch in den Suchergebnissen angezeigt werden. Sie helfen bei der Wiedererkennung der Marke und verbessern die UX der Seite.

Websiten-Navigation

Die Benutzer erwarten, dass sie die gesuchten Inhalte auf einer Webseite leicht finden können. Daher ist es wichtig, dass die Navigation auf einer Webseite einfach und unkompliziert ist.

Webseiten-Navigation ist ein allgemeiner Begriff, der sich auf die interne Link-Architektur einer Webseite bezieht. Vergiss nicht, dass der Hauptzweck der Navigation darin besteht, den Benutzern zu helfen, relevante Inhalte auf deiner Webseite leicht zu finden.

Die interne Link-Architektur deiner Webseite bildet die Grundlage deiner Sitemap, die Suchmaschinen den Zugang zu deinen Inhalten erleichtert. Es hat sich herausgestellt, dass eine gut gestaltete Webseite, auf der Inhalte leicht zu finden ist, den Webseiten Traffic, den man von Suchmaschinen erhält, positiv beeinflusst (zusammen mit einer höheren Chance, Google Sitelinks zu erhalten).

Menü-Navigation

Es gibt mehrere Aspekte, die die Navigation auf der Webseite ausmachen, aber das Hauptmenü sollte ein Hauptschwerpunkt sein, da es eines der ersten Dinge ist, mit denen die Benutzer beim Besuch deiner Webseite interagieren.

Es gibt verschiedene Webseiten-Menü-Design-Heuristiken, aber die beliebtesten sind:

Navigationsmenü

Im Idealfall befindet sich dieser am Anfang und in der Mitte einer Webseite. Bei mehreren Kategorien kann dies die Verwendung eines Dropdown-Menüs beinhalten. Dropdown-Menüs werden jedoch nicht empfohlen, insbesondere wenn es um technisches SEO geht (sie sind schwerer zu durchsuchen). Außerdem hat sich herausgestellt, dass die meisten Menschen Dropdown-Menüs nicht mögen.

Das liegt daran, dass das menschliche Auge schneller arbeitet als die Hand, und so empfinden es die Menschen als störend, wenn sie bereits entschieden haben, worauf sie klicken wollen, und etwas anderes herunterfällt – was zu einem Rückgang der Seitenbesuche führen kann.

Hamburger-Menü

Ein Hamburger-Menü, das in erster Linie ein für Mobiltelefone optimiertes Design verwendet wird, befindet sich normalerweise oben links oder rechts auf der Seite. Es erscheint als ein Quadrat mit drei Zeilen, das mit einem Klick aufgeklappt werden kann. Viele Designer verachten jedoch das Hamburger-Menü, was Webentwickler dazu inspiriert hat, über neue Möglichkeiten nachzudenken, um die Navigation auf mobilen Webseiten unterhaltsam und funktional zu gestalten.

Hier sind ein paar Tipps für die Gestaltung der Navigation auf der Grundlage der besten Praktiken des Webdesigns:

• Füge eine Suchleiste hinzu, um den Benutzern das Auffinden von Inhalten zu erleichtern (hier erfährst du, wie du die WordPress-Suchfunktionalität verbessern kannst). Dies ist besonders nützlich für Webseiten, die viel Inhalt haben, wie z.B. ein Nachrichten-Blog.
• Gestalte deine Webseite nach der Drei-Klick-Regel, die besagt, dass Benutzer die gewünschten Informationen mit nicht mehr als drei Mausklicks finden können sollten. Dies liegt daran, dass die Benutzer es eigentlich vorziehen, durch eine Webseite zu navigieren, anstatt sich die Suchergebnisse anzusehen, wenn dies möglich ist.
• Gestalte dein Menütitel beschreibend (unter Berücksichtigung von Schlüsselwörtern), was den Benutzern das Auffinden von Elementen erleichtert und auch einen positiven Beitrag zur Suchmaschinenoptimierung (SEO) leistet.
• Die Position der Menüpunkte ist wichtig. Stelle die wichtigsten Seiten in den Vordergrund deines Menüs, damit sie leicht zugänglich sind.
• Halte die Menüpunkte auf maximal 7, nicht nur, um das Design der Webseite sauber zu halten, sondern auch, weil zu viele Kategorien von Menüpunkten deine Möglichkeiten, bei der Suche ein Ranking zu erreichen, beeinträchtigen können. Google kann diese scheinbar nicht zusammenhängenden Kategorien als ein Zeichen dafür interpretieren, dass sich deine Webseite nicht für eine bestimmte Nische entschieden hat.

Für ein bequemeres Format gibt es hier eine praktische Infografik:

Kodierungsstandards

Bei so vielen Webseiten, die weltweit erstellt und genutzt werden, besteht sicherlich Bedarf an einem standardisierten Kodierungsprinzipien. Einige Aspekte dieser Web-Standards umfassen:

SEO

SEO kann verwendet werden, um die Anzahl der Besucher deiner Webseite organisch (ohne den Einsatz von Anzeigen) zu erhöhen. Da es zu kompliziert ist, sich in einem kleinen Unterabschnitt eines Artikels angemessen mit SEO zu befassen, lese unsere SEO-Checkliste und unsere Tipps für die besten SEO-Plugins für WordPress, um dich mit diesem Aspekt der Best Practices im Webdesign vertraut zu machen.

Beachte, dass die folgenden Tipps zu den Kodierungsstandards Hand in Hand mit SEO gehen.

Mobile Responsiveness

Bei der responsiven Gestaltung geht es darum, ein großartiges Benutzererlebnis zu schaffen, unabhängig davon, welches Gerät oder welcher Browser für den Zugriff auf deine Webseite verwendet wird.

Es ist heute wichtiger denn je, deine Webseite so zu gestalten, dass sie responsive ist, da mehr als 60 % der Internetnutzer über ihr Mobiltelefon auf das Internet zugreifen und die Hälfte der E-Commerce-Transaktionen über mobile Plattformen abgewickelt werden. Hinzu kommt, dass der neue Suchalgorithmus von Google auch mobil-freundliche Webseiten priorisiert.

Eine responsive Webseite erleichtert den Benutzern nicht nur die Navigation auf deiner Webseite, sondern trägt auch zu mehr Engagement und Conversions bei. Die Nutzer empfehlen Marken, mit denen sie eine positive Erfahrung mit einer mobil responsive Webseite haben, und würden umgekehrt nicht nur den Kauf von Marken mit einer schlechten Erfahrung mit einer mobilen Website stoppen, sondern auch andere aktiv davon abhalten, dies zu tun.

Trotz der Nachfrage nach einer responsive Webseite verfügen jedoch schätzungsweise 91% der kleinen Unternehmen nicht über eine solche. Das sollten sie auch – denn die Gestaltung einer Webseite, die auf Mobiltelefone passt, zahlt sich sicherlich aus. 62% der Unternehmen haben von einer Umsatzsteigerung berichtet, nachdem sie eine auf Mobile-Responsive-Webseite konzipiert hatten.

Informiere dich auf Kinsta’s Ressource, wie du deine Webseite mobilfreundlicher gestalten kannst, die Liste der besten WordPress-Plugins für Mobiltelefone zum Herunterladen enthält, und sieh dir diese kuratierte Liste der besten WordPress-Themes an, in der du durch viele ansprechende Themes stöbern kannst.

Google bietet auch einige Tipps für die Gestaltung einer ansprechenden Webseite.

Sicherheit der Website

Eine weitere wichtige Kodierungspraxis? Die Erstellung sicherer Programme und Webseiten, denen die Benutzer ihre sensiblen persönlichen Daten anvertrauen können. Entgegen der landläufigen Meinung suchen Hacker nicht aktiv nach bestimmten Webseiten, um sie zu hacken, weshalb selbst kleine Webseiten anfällig für Angriffe sind.

Insgesamt ist WordPress im Allgemeinen sicher, aber es hilft, zusätzliche Vorkehrungen zu treffen, um deine Webseite vor Angriffen zu schützen.

Hier sind einige der besten Praktiken für die Webseitensicherheit:

• Besorge dir ein SSL-Zertifikat, was besonders wichtig für Webseiten ist, die sich mit Zahlungen und persönlichen Daten befassen. Das SSL-Zertifikat verschlüsselt Informationen, die über Netzwerke verschickt werden, so dass Hacker sie nur schwer wieder entschlüsseln können. Außerdem ist es ein Industriestandard. Chrome warnt Besucher, wenn die von ihnen besuchte Webseite kein SSL-Zertifikat besitzt. Darüber hinaus verwirft Chrome jetzt auch ältere TLS-Versionen und zeigt zusätzliche Warnungen
• Die Aktivierung von HTTPS (Teil der Installation eines SSL-Zertifikats) ist auch ein offizieller Google-Ranking-Faktor.
• Bewahre deine Anmeldeinformationen sicher auf. Mehrere Angriffe werden durch Hacker verursacht, die versuchen, sich gewaltsam Zugang zu einer Webseite zu verschaffen. Es hilft, eine separate/versteckte Anmeldeseite zu haben (verwende das WP Hide Login-Plugin) um die Anzahl der Anmeldeversuche zu begrenzen. Verwende das Plugin Login LockDown, das die IP-Adresse und den Zeitstempel jedes fehlgeschlagenen Anmeldeversuchs aufzeichnet und die Anmeldefunktion sperrt, wenn die Anzahl der fehlgeschlagenen Versuche aus dem gleichen IP-Bereich in kurzer Zeit erreicht wird. Erstelle außerdem ein sicheres Passwort, das mehr als 6 Zeichen lang ist und aus einer Mischung aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen besteht. Ändere dein Passwort häufig. Du kannst auch eine Zwei-Faktor-Authentifizierung für die Anmeldung verwenden, wenn du nach zusätzlicher Sicherheit suchst.
• Halte den WordPress-Kern, die Plugins und Themes auf dem neuesten Stand. Vergesse nicht, Plugins oder Themes von einer seriösen Quelle herunterzuladen. Ein gutes Zeichen ist, wenn das Plugin/Thema mehrere Installationen hat und kürzlich aktualisiert wurde. Du solltest auch Rezensionen lesen, um selbst zu entscheiden, ob das Plugin vertrauenswürdig ist (überprüfe unbedingt die hier aufgeführten). In diesem Zusammenhang solltest du ein WordPress-Sicherheits-Plugin wie Wordfence, Sucuri oder Defender herunterladen, da 73,2% der beliebtesten WordPress-Installationen, die anfällig sind, mit kostenlosen automatischen Tools erkannt werden können. Hier findest du eine ausführlichere Liste der besten Sicherheits-Plugins.
• Verwende einen sicheren Web-Host. Für diejenigen, die es nicht wissen, mag es nicht so aussehen, als hätte dein Webhost etwas mit der Sicherheit der Webseite zu tun, aber 41% der Angriffe erfolgen durch eine Sicherheitslücke auf der Hosting-Plattform. Suche nach einem Hosting-Provider, der über Funktionen verfügt wie: serverseitige Firewall und Verschlüsselung, NGINX- oder Apache-Webserver, Antiviren- und Anti-Malware-Software, Sicherheitssysteme vor Ort sowie die Verfügbarkeit von SSL-Zertifikaten und eines CDN.

Weitere Informationen über die Sicherheit von WordPress findest du in unserer umfassenden Ressource über die Sicherheit deiner WordPress-Seite.

Seitengeschwindigkeit

Etwa die Hälfte der Benutzer erwartet, dass eine Webseite in 2 Sekunden oder weniger geladen wird, und wenn es länger dauert, zögern 40 % der Leute nicht, die Seite zu verlassen, und kehren (wahrscheinlich) nie wieder zurück.

Neben dem Besuch der Webseite ist die Geschwindigkeit der Seite wichtig, da sie sich auch auf die Konversion und die Einnahmen auswirkt. Für jede Sekunde, in der die Ladegeschwindigkeit der Seite erhöht wird, sinken die Verkäufe um bis zu 27%. Eine Erhöhung der Webseiten-Geschwindigkeit kann den Verlust von 7% der möglichen Konversionen verhindern.

Hier sind einige Möglichkeiten, wie du deine Webseiten schneller laden kannst:

• Verwende ein Content-Delivery-Netzwerk (CDN), das statische Dateien wie Bilder, CSS und JavaScript auf den Servern ausliefert, die dem physischen Standort des Benutzers am nächsten liegen.
• Überlege, wie du Bilder verwendest. Eine durchschnittliche Webseite verwendet 1,8 MB an Bildern, was 60 % der Größe einer Webseite Um dir dabei zu helfen, überdenke die Gestaltung deiner Webseite. Wenn du die Geschwindigkeit der Seite hoch halten willst, versuche, die Anzahl der großen Bilder, die in deinem Design verwendet werden, zu reduzieren, und stelle sicher, dass sie optimiert werden.
• Wenn deine Webseite viele große Bilder verwenden muss, verwende Plugins, die Funktionen zur GZIP-Komprimierung, zum Caching oder zur Bildoptimierung enthalten, wie z.B. WP Rocket und Imagify. Du kannst deine Dateien kleiner machen (ohne Qualitätseinbußen), damit sie schneller geladen werden.
• Denke an die Anzahl der Plugins und Dateien, die du in deiner WordPress-Datenbank aufbewahrst, da sie auch die Ladegeschwindigkeit der Seiten beeinflussen können. Bereinige diejenigen, die du nicht verwendest. Wenn du schon dabei bist, halte deine PHP-, WordPress-Kern- und Plugins auf dem neuesten Stand.

Informiere dich über unsere umfassende Seite zur Optimierung der Webseiten-Geschwindigkeit.

Zugänglichkeits-Standards

Das Internet wurde so konzipiert, dass es für alle Menschen funktioniert, unabhängig von der spezifischen Hardware, Software, Sprache, die sie sprechen, ihren Fähigkeiten oder ihrem Standort. Viele opfern jedoch die Zugänglichkeit für ein schönes Design.

Barrierefreiheit bezieht sich auf die Praxis, deine Webseite für jeden nutzbar zu machen.

Neben denjenigen mit Behinderungen, die den Zugang beeinträchtigen, sagt W3, dass die Zugänglichkeit der Webseite auch für andere von Vorteil ist:

• Diejenigen, die Geräte mit kleinen Bildschirmen, verschiedenen Eingabemodi usw. verwenden.
• Ältere Menschen.
• Menschen mit „vorübergehenden Behinderungen“, einschließlich eines gebrochenen Beins, einer verlorenen Brille oder einer Krankheit.
• Benutzer mit „situationsbedingten Einschränkungen“, wie z.B. diejenigen, die mit Geräten in hellem Sonnenlicht oder in einer Umgebung, in der sie kein Audio hören können, wie z.B. in öffentlichen Verkehrsmitteln, auf das Internet zugreifen.
• Personen mit einer langsamen Internetverbindung.

Die Zugänglichkeit sollte allen ein Anliegen sein, da wir alle in irgendeiner Weise davon betroffen sind.

Gründe deine Webseite zugänglich zu machen

Du bist dir immer noch nicht sicher, ob es sich lohnt, deine Zeit in dieser Diskussion über die besten Praktiken im Webdesign auf die Zugänglichkeit zu verwenden?

Bedenke diese Gründe:

• Es ist eine ADA-Anforderung. Das Gesetz für Amerikaner mit Behinderungen (Americans with Disabilities Act, ADA) wurde 1990 verabschiedet, um die Bürgerrechte von Menschen mit Behinderungen vor Diskriminierung zu schützen. Es deckt Dinge wie Transport, Telekommunikation, Beschäftigung und sogar Bauvorschriften ab. Da dieses Gesetz fast 30 Jahre zuvor verabschiedet wurde – zu einer Zeit, als das Internet noch nicht so allgegenwärtig war – versuchen die Gesetzgeber, es zu ändern.
• Es fördert die Inklusivität. Eine Umfrage des Pew Research Centers zeigt, dass Menschen mit Behinderungen dreimal seltener online gehen als ihre Kollegen ohne Behinderungen, was eine Schande ist, da die Statistiken zeigen, dass etwa 30% der Fachkräfte eine Behinderung haben, wobei 62% der Behinderten aus Angst vor negativen Vorurteilen „unter dem Radar fliegen“.
• Es wird dir helfen, mehr Aufträge zu erhalten. Wenn du dich stärker eingliederst, bringst du ein Netzwerk von Menschen mit Behinderungen ein, das ein verfügbares Einkommen von 7 Billionen Dollar darstellt.

SEO-Vorteile. Suchmaschinen belohnen Webseiten, die die Anforderungen der Zugänglichkeit erfüllen, um mehr Webseiten zugänglich zu machen

Wie macht man seine Webseite zugänglicher?

Eine einfache Möglichkeit, die Zugänglichkeit deiner Webseite zu verbessern, ist die Installation des WP-Zugänglichkeits-Plugins, das unter anderem Zugänglichkeitsfunktionen hinzufügt:

• Eine Symbolleiste, in der Benutzer die Größe der Schriftarten ändern und die Webseite in hohem Kontrast und in Graustufen anzeigen können.
• Ein Vergleich des Farbkontrastes, um zu prüfen, ob er dem Standard der ADA entspricht.
• Entfernen von Titelattributen aus Bildern, die in den Inhalt eingefügt wurden. Die meisten Bildschirmleseprogramme sind nicht in der Lage, dies zu erkennen und lesen stattdessen den Anker-Text.
• Aktivieren von Skip-Links, d.h. internen Seitenlinks, die es Benutzern ermöglichen, direkt zum Inhalt zu springen, was für Personen, die Bildschirmleseprogramme verwenden, nützlich ist.

Ein paar zusätzliche Schritte sind zu unternehmen:

• Füge Untertitel oder eine Abschrift hinzu, wenn deine Webseite Medien wie Audio, Hörbücher, Videos, Podcasts produziert, um Gehörlosen/Stummen zu helfen, sowie Menschen, die deine Inhalte konsumieren möchten, aber keine Medien in der Öffentlichkeit konsumieren können.
• Erstelle über die Tastatur zugängliche Links und Menüs für Menschen mit motorischen Behinderungen, die nur mit der Tastatur (nicht mit der Maus) auf deiner Webseite navigieren können. Von Dropdown-Menüs wird abgeraten, aber du kannst dem Abhilfe schaffen, indem du für jedes Dropdown-Element Tastenkombinationen zuweist (z.B.: Drücke „1“ für die Startseite, „2“ für die Info-Seite usw.).
• Teste schließlich deine Webseite auf die Zugänglichkeit der Webseite. Die Web Accessibility Initiative befürwortet kein spezielles Tool, sondern bietet stattdessen eine Liste von Tools an, mit denen man seine Bemühungen überprüfen kann.

Abschließende Bemerkungen: Best Practices für Webdesign für dein nächstes Webseiten-Projekt

Gute Webseiten sollten nicht durch objektiv gutes Design definiert werden. Genauso wichtig ist die Benutzerfreundlichkeit der Webseite, die einfache Navigation und die Zugänglichkeit. Mit diesen Best Practices für Webdesign hast du alles, was du brauchst, um etwas zu schaffen, das gut aussieht und funktioniert.

Denke einfach daran, dass dies die besten Praktiken des Webdesigns sind. Es ist wahrscheinlich, dass du nicht in der Lage sein wirst, jede einzelne davon genau zu befolgen, abhängig von der Art deiner Webseite. Aber bevor du die Regeln brechen kannst, ist es hilfreich, sich zumindest bewusst zu machen, warum sie existieren.

Haben wir etwas Wichtiges vergessen? Teile uns in den untenstehenden Kommentaren deine besten Praktiken im Webdesign mit!

Empfohlene Lektüre: Beste Web Design Kurse Online