{"id":32877,"date":"2020-03-06T02:46:22","date_gmt":"2020-03-06T10:46:22","guid":{"rendered":"https:\/\/kinsta.com\/?p=63976"},"modified":"2023-07-27T13:57:33","modified_gmt":"2023-07-27T12:57:33","slug":"best-practices-fur-webdesign","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/","title":{"rendered":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt"},"content":{"rendered":"<p>Was verursacht die gro\u00dfe Diskrepanz zwischen dem, was einige <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-website-kosten\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Entwickler im Vergleich zu anderen verlangen<\/a>? Die Beantwortung dieser Frage erfordert eine \u00dcberlegung, warum man \u00fcberhaupt eine Webseite haben m\u00f6chte.<\/p>\n<p>Einige Entwickler konzentrieren sich auf das buchst\u00e4bliche Endprodukt: die Kombination von Code, die zu einem ausreichend angenehmen Webseite-Design f\u00fchrt.<\/p>\n<p>Aber Entwickler mit Marketingkenntnissen k\u00fcmmern sich um mehr als nur darum, etwas zu bauen, das gut aussieht. Sie fungieren als Berater f\u00fcr Kunden, die mit ihren Webseiten bestimmte Ziele erreichen wollen.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/webdesign-geschaftszielen.jpg\" alt=\"Webdesign ist eng mit deinen Gesch\u00e4ftszielen verbunden\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Webdesign ist eng mit deinen Gesch\u00e4ftszielen verbunden<\/figcaption><\/figure>\n<p>In diesem Sinne ist es eine <strong>schlechte Idee<\/strong>, jemanden mit dem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-entwickler-engagiert\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aufbau einer Webseite zu beauftragen<\/a>, der nicht daran interessiert zu sein scheint und keine Fragen zu deinen Zielen stellt. Es ist wichtig, die Tatsache hervorzuheben, dass selbst das sch\u00f6nste Webdesign m\u00f6glicherweise nicht ideal ist, wenn es darum geht, Besucher zu Kunden zu machen.<\/p>\n<p>Dennoch beurteilen 94% der Menschen die <a href=\"https:\/\/www.business.com\/articles\/tyler-horvath-responsive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Glaubw\u00fcrdigkeit<\/a> der Webseite auf der Grundlage des Webdesigns.<\/p>\n<p>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 \u00fcberhaupt erst besuchen, und sie gleichzeitig zu zielgerichteten <a href=\"https:\/\/kinsta.com\/de\/blog\/conversion-tracking\/\" target=\"_blank\" rel=\"noopener noreferrer\">Conversion-Aktivit\u00e4ten<\/a> f\u00fchren.<\/p>\n<p>Diese Best Practices f\u00fcr Webdesign konzentrieren sich auf die Schnittmenge zwischen der Erstellung einer sch\u00f6nen Webseite und einer Webseite, die deinem Gesch\u00e4ft dient.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3><strong>Prefer to watch the <a href=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\" target=\"_blank\" rel=\"noopener noreferrer\">video version<\/a>?<\/strong><\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\"><\/kinsta-video>\n<h2>Was definiert die Best Practices im Webdesign?<\/h2>\n<p>Sicherlich hat jeder irgendeine Meinung dar\u00fcber, was eine gut gestaltete Webseite ausmacht.<\/p>\n\n<p>Aber z\u00fcgeln wir die Meinungen aller, indem wir uns auf die Experten konzentrieren.<\/p>\n<p>Laut <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">Orbit Media<\/a> kannst du die besten Praktiken im Webdesign in diese drei grundlegenden Kategorien von Standards einordnen:<\/p>\n<ul>\n<li><strong>Brandstandards<\/strong>: Vielleicht ist es f\u00fcr dich vertrauter, dasselbe Konzept als &#8222;Branding&#8220;, &#8222;Styleguides&#8220; oder &#8222;Moodboards&#8220; zu bezeichnen. Diese Standards umfassen alles, was mit dem Aussehen einer Webseite zu tun hat und die Verwendung von Farben, Typografie und gesch\u00e4ftsspezifischen Elementen beinhaltet.<\/li>\n<li><strong>Kodierungsstandards:<\/strong> Webseiten sollten gem\u00e4\u00df den <a href=\"http:\/\/www.w3.org\/standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">Programmierstandards<\/a> erstellt werden, die vom W3C, der internationalen Gemeinschaft, die gemeinsam an der Entwicklung von Webstandards arbeitet, vereinbart wurden.<\/li>\n<li><strong>Zug\u00e4nglichkeitsstandards<\/strong>: Der Zugang zu Informationen ist ein grundlegendes Menschenrecht, das in der UN-Konvention \u00fcber die Rechte von Menschen mit Behinderungen anerkannt wurde. Dar\u00fcber hinaus hat die Zug\u00e4nglichkeit deiner Webseite <a href=\"https:\/\/www.searchenginejournal.com\/accessibility-seo-and-sales\/281899\/\" target=\"_blank\" rel=\"noopener noreferrer\">positive Auswirkungen<\/a> &#8211; nicht nur auf den Verkauf, sondern auch auf die <a href=\"https:\/\/kinsta.com\/de\/blog\/wofur-steht-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">Suchmaschinenoptimierung<\/a>. Das W3C teilt eine grundlegende Liste von Standards, die du befolgen musst, um eine <a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\" target=\"_blank\" rel=\"noopener noreferrer\">zug\u00e4ngliche Webseite zu gestalten<\/a>. Wir werden sp\u00e4ter in diesem Artikel weitere verwandte Best Practices f\u00fcr Webdesign im Detail beschreiben.<\/li>\n<\/ul>\n<p>Schauen wir uns an, wie man Webdesign-Praktiken entwickelt, die auf jedem dieser Standards basieren:<\/p>\n<h2>Brand Standards<\/h2>\n<p>Webseiten, denen ein konsistentes Branding fehlt, k\u00f6nnen nervig sein und zu Verwirrung f\u00fchren. Daher sollte es nicht \u00fcberraschen, dass etwa 38% der Besucher gesagt haben, dass sie sich <a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">nicht mehr mit einer Webseite besch\u00e4ftigen werden<\/a>, wenn der Inhalt oder das Layout unattraktiv ist.<\/p>\n<p>Wenn man bedenkt, dass das Aussehen nicht <em>alles<\/em> ist, sind hier einige grundlegende Designprinzipien aufgef\u00fchrt, die man bei der Erstellung einer Webseite, die die Leute benutzen wollen, beachten sollte:<\/p>\n<h2>Balance<\/h2>\n<p>Das Prinzip der <em>Ausgewogenheit<\/em> ist ein Gestaltungsprinzip, das vorschreibt, wie visuelle Elemente effektiv verteilt werden k\u00f6nnen. Im Allgemeinen sieht ein ausgewogenes Design sauber und nat\u00fcrlich aus und hat eine gute Symmetrie (obwohl das <a href=\"https:\/\/wpamelia.com\/visual-design-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">nicht unbedingt eine <em>Bedingung f\u00fcr Ausgewogenheit<\/em> ist<\/a>).<\/p>\n<p>Man kann die Ausgewogenheit in das Webdesign im Hinblick auf das Seitenlayout einbeziehen.<\/p>\n<p>Das Zentrieren von Text oder anderen Elementen auf der Seite ist eine einfache M\u00f6glichkeit, dies zu tun. Im Allgemeinen sind Webseiten auf einem Rastersystem aufgebaut, das eine Form der Ausgewogenheit schafft. Du kannst die CSS-<em>Float<\/em>-Eigenschaft verwenden, um Elemente zu positionieren und sie \u00fcber die Seite auszubalancieren.<\/p>\n<p>Das Gleichgewicht kann auf 3 Arten erreicht werden:<\/p>\n<h4>1. Symmetrisches Design<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/symmetrischen-aufbau.jpg\" alt=\"Beispiel f\u00fcr symmetrischen Aufbau\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr symmetrischen Aufbau<\/figcaption><\/figure>\n<p>Gleichm\u00e4\u00dfige 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\u00e4hnt, ist die Zentrierung die einfachste M\u00f6glichkeit, Symmetrie zu erreichen, aber sie kann manchmal flach oder langweilig wirken.<\/p>\n<p>Um zu vermeiden, dass die Seite monoton aussieht, kannst du mit verschiedenen Elementen ein Gleichgewicht schaffen, z.B. ein gro\u00dfes Bild mit einem Textblock ausgleichen. Es gibt auch eine Art von symmetrischem Gleichgewicht, das als <em>Radialbalance<\/em> bezeichnet wird, bei dem die Objekte von einem zentralen Punkt aus strahlen.<\/p>\n<h4>2. Asymmetrischer Aufbau<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/asymmetrisches-webdesign.jpg\" alt=\"Beispiel f\u00fcr ein asymmetrisches Design\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr ein asymmetrisches Design<\/figcaption><\/figure>\n<p>Eine gr\u00f6\u00dfere Herausforderung ist die ungleichm\u00e4\u00dfige Verteilung der Elemente auf einer Seite, wenn es darum geht, ein gutes, asymmetrisches Design zu erreichen. Beispielsweise kann ein gro\u00dfes Element in der Mitte liegen, das durch ein kleineres, weiter entferntes Element ausgeglichen wird.<\/p>\n<p>Man kann andere Gestaltungselemente wie Farbe oder Textur verwenden, um ein asymmetrisches Design auszugleichen.<\/p>\n<h4>3. Nicht ausgeglichene Balance<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/nicht-ausgeglichenes-webesign .jpg\" alt=\"Beispiel f\u00fcr ein nicht ausgeglichenes Design \" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr ein nicht ausgeglichenes Design<\/figcaption><\/figure>\n<p>Diese Art von Entw\u00fcrfen suggerieren Bewegung und Handlung, was bei den Menschen Unbehagen ausl\u00f6sen kann. Wenn die Webseite zum Nachdenken anregen soll, dann ist ein Nicht ausgeglichenes Design das Richtige f\u00fcr dich.<\/p>\n<h3>Komposition<\/h3>\n<p>Der Begriff <em>Komposition<\/em> bezieht sich auf die Platzierung und Organisation von Gestaltungselementen.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/komposition.jpg\" alt=\"Komposition\" width=\"1320\" height=\"883\"><figcaption class=\"wp-caption-text\">Komposition<\/figcaption><\/figure>\n<p>Die <a href=\"https:\/\/www.photographymad.com\/pages\/view\/rule-of-thirds\" target=\"_blank\" rel=\"noopener noreferrer\">Drittelregel<\/a> wird h\u00e4ufig verwendet, um eine ausgewogene Komposition zu erreichen, insbesondere bei Fotos.<\/p>\n<h3>Abst\u00e4nde<\/h3>\n<p>Die Elemente sollten in gleichm\u00e4\u00dfigen Abst\u00e4nden angeordnet sein, damit die Benutzer Abschnitte oder Bl\u00f6cke unterscheiden k\u00f6nnen.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/abstands-im-webdesign.jpg\" alt=\"Die Rolle des Abstands im Webdesign\" width=\"1321\" height=\"684\"><figcaption class=\"wp-caption-text\">Die Rolle des Abstands im Webdesign<\/figcaption><\/figure>\n<p>Du solltest auch einen negativen Raum oder den Raum zwischen und um das Thema eines Bildes herum einf\u00fchren. Negativer Raum kann visuelles Rauschen reduzieren, die Lesbarkeit erh\u00f6hen und ein Gleichgewicht herstellen.<\/p>\n<p>Du kannst negativen Raum einf\u00fchren, indem du R\u00e4nder und Polster um deine Designelemente herum anbringst.<\/p>\n<h3>Schwerpunkt<\/h3>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/webdesign-schwerpunkt.jpg\" alt=\"Die Aufmerksamkeit auf ein Element lenken\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Die Aufmerksamkeit auf ein Element lenken<\/figcaption><\/figure>\n<p>Schaffe einen Schwerpunktbereich, auf den du die Aufmerksamkeit lenken m\u00f6chtest. Es sollte der wichtigste Teil deiner Seite sein, und idealerweise sollte sich jede Seite nur auf einen Schwerpunkt konzentrieren.<\/p>\n<h3>Farbe<\/h3>\n<p><em>Farbe<\/em> ist ein wichtiges Gestaltungselement, wenn es um die Markenbildung geht. Im Idealfall kommt man in den Webdesignprozess mit einem Verst\u00e4ndnis der Farben, die man mit seiner Marke assoziieren m\u00f6chte.<\/p>\n<p>Speziell beim Webdesign hilft es, mit einem Moodboard f\u00fcr die Marke zu beginnen.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/farbpalette-beispiel.jpg\" alt=\"Beispiel f\u00fcr die Farbpalette von Kinsta\" width=\"1320\" height=\"443\"><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr die Farbpalette von Kinsta<\/figcaption><\/figure>\n<p>W\u00e4hle eine Prim\u00e4r- und eine Sekund\u00e4rfarbe (die Sekund\u00e4rfarbe kann die Prim\u00e4rfarbe <em>erg\u00e4nzen oder kontrastieren<\/em>) sowie einen helleren und einen dunkleren Farbton f\u00fcr jede Farbe. Schr\u00e4nke die Verwendung von Farbe ein, damit verschiedene Akzente nicht zum Schandfleck werden.<\/p>\n<p><a href=\"https:\/\/color.adobe.com\/create\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Color<\/a> bietet ein ausgezeichnetes kostenloses Tool zum Testen verschiedener Farbkombinationen, um eine Arbeitspalette f\u00fcr Webseite-Elemente zu erstellen.<\/p>\n<p>Au\u00dferdem ist es wichtig, bei der Entscheidung f\u00fcr eine Farbe diejenigen zu ber\u00fccksichtigen, die farbenblind sind, was bis zu <a href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\" target=\"_blank\" rel=\"noopener noreferrer\">4,5% der Weltbev\u00f6lkerung einschlie\u00dft<\/a>.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/webdesign-fur-farbenblinde.jpg\" alt=\"Beispiel daf\u00fcr, wie ein normales Design f\u00fcr farbenblinde Benutzer aussehen w\u00fcrde\" width=\"1320\" height=\"441\"><figcaption class=\"wp-caption-text\">Beispiel daf\u00fcr, wie ein normales Design f\u00fcr farbenblinde Benutzer aussehen w\u00fcrde<\/figcaption><\/figure>\n<p>Beispiel daf\u00fcr, wie ein normales Design f\u00fcr farbenblinde Benutzer aussehen w\u00fcrde<\/p>\n<p>Es gibt drei Arten von Farbenblindheit (v\u00f6llige Farbenblindheit, zweifarbiges Sehen und mangelhaftes Farbsehen). Stelle also sicher, dass dein Entwurf auch f\u00fcr diejenigen, die vielleicht nicht in der Lage sind, Farben zu unterscheiden, noch brauchbar ist.<\/p>\n<h4>Kontrast<\/h4>\n<p>Bei der Wahl der Farbe ist es wichtig, sich der Farbverh\u00e4ltnisse und des <strong>Kontrasts<\/strong> bewusst zu sein.<\/p>\n<p>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 &#8211; wie schwarzen Text auf wei\u00dfem Hintergrund -, um deine Webseite lesbar zu machen.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/webdesign-kontrast.jpg\" alt=\"Schlechter Kontrast kann problematisch sein\" width=\"1320\" height=\"1299\"><figcaption class=\"wp-caption-text\">Schlechter Kontrast kann problematisch sein<\/figcaption><\/figure>\n<p>Das <em>Kontrastverh\u00e4ltnis<\/em> ist der numerische Wert, der dem Kontrastunterschied zwischen den Seitenelementen zugeordnet wird.<\/p>\n<p>Die <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener noreferrer\">World Content Accessibility Guidelines (WCAG) 2.0<\/a> empfehlen ein Kontrastverh\u00e4ltnis von 4,5:1 f\u00fcr normalen Text. WebAIM verwendet einige <a href=\"https:\/\/webaim.org\/articles\/contrast\/#ratio\" target=\"_blank\" rel=\"noopener noreferrer\">vorgegebene Kombinationen<\/a>, die dem idealen Kontrastverh\u00e4ltnis entsprechen, um dir bei der Visualisierung dieser bew\u00e4hrten Webdesign-Methode zu helfen.<\/p>\n<p>Um die Navigation mit diesem Verh\u00e4ltnis zu erleichtern, stelle sicher, dass du bei der Gestaltung deiner Webseite alle Zielgruppen (einschlie\u00dflich derjenigen mit Zug\u00e4nglichkeitsproblemen) ber\u00fccksichtigst. Dies ist einfacher als die Planung, diese Probleme im Nachhinein anzugehen.<\/p>\n<p>Ber\u00fccksichtige alle Aspekte der Webseite, mit denen die Benutzer interagieren werden, einschlie\u00dflich <a href=\"https:\/\/kinsta.com\/de\/blog\/code-wordpress-header-footer-hinzufugt\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kopf- und Fu\u00dfzeilen<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">Men\u00fcs<\/a> &#8211; die alle leicht sichtbar sein m\u00fcssen, um nutzbar zu sein.<\/p>\n<p>Einige Tools, die du verwenden kannst, um die Farbkontrastverh\u00e4ltnisse zu \u00fcberpr\u00fcfen, sind:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.levelaccess.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Farbkontrast-Checker<\/a> nach Level Access.<\/li>\n<li><a href=\"https:\/\/contrast-ratio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kontrastverh\u00e4ltnis.<\/a>.<\/li>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.0 AA &#038; AAA Farbkontrast-Checker-Tool<\/a>, das auf den WCAG 2.0-Richtlinien basiert.<\/li>\n<\/ul>\n<h3>Typographie<\/h3>\n<p>Die Typografie der Website ist ein weiterer wichtiger Aspekt der Markenbildung.<\/p>\n<p>Es gibt zwar viele verschiedene Quellen f\u00fcr <a href=\"https:\/\/kinsta.com\/de\/blog\/moderne-schriften\/\">die Suche nach potenziellen Schriftarten<\/a>, die du auf deiner Webseite verwenden kannst, aber du solltest zun\u00e4chst die Optionen in Betracht ziehen, die unabh\u00e4ngig davon, welche Schriftarten der Endbenutzer auf seinem Computer installiert hat, konsistent angezeigt werden.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fonts\/#google-fonts\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> bietet eine gro\u00dfe Auswahl an kostenlosen websicheren Schriftarten, auf deren korrekte Anzeige du dich verlassen kannst, unabh\u00e4ngig von den installierten Schriftarten\/Programmen des Nutzers. Stelle sicher, dass du Schriften in dein Moodboard einbaust, um zu sehen, ob sie deiner Farb\u00e4sthetik entsprechen.<\/p>\n<p>Wenn du Probleme hast, Kombinationen zu finden, kann Google Fonts dir beliebte Schriftpaare vorschlagen. Du kannst auch eine Webseite wie <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">FontPair<\/a> verwenden, um Vorschl\u00e4ge zu erhalten.<\/p>\n<p>Versuche, die verwendeten Schriftst\u00e4rken zu begrenzen, da das Laden von zu vielen Dateien zu einer langsamen Seitengeschwindigkeit beitragen kann. Ziehe in diesem Zusammenhang in Betracht, <a href=\"https:\/\/kinsta.com\/de\/blog\/lokaler-schriftarten\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts lokal zu hosten<\/a>, um zus\u00e4tzliche Leistungsvorteile zu erzielen.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/webdesign-typographie-1.jpg\" alt=\"Schlechte Typografie vs. ideale Typografie\" width=\"1320\" height=\"386\"><figcaption class=\"wp-caption-text\">Schlechte Typografie vs. ideale Typografie<\/figcaption><\/figure>\n<p>Wenn es um die Auswahl typografischer Elemente auf der Grundlage von Best Practices f\u00fcr das Webdesign geht, sollten als allgemeine Faustregel <a href=\"https:\/\/www.invisionapp.com\/inside-design\/best-practices-pairing-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">serifenlose Schriftarten f\u00fcr \u00dcberschriften<\/a> und Serifenschriften f\u00fcr den Inhalt verwendet werden. Verwende zumindest keine dekorativen Schriftarten f\u00fcr den Inhalt, da dieser schwer zu lesen sein wird.<\/p>\n<p>Lasse dich auch nicht dazu verleiten, auf deiner Webseite eine gro\u00dfe Auswahl an verschiedenen Schriftarten zu verwenden. Eine gute Faustregel ist es, eine Schriftart f\u00fcr dein Logo, eine andere f\u00fcr deine Men\u00fcs\/\u00dcberschriften und eine weitere f\u00fcr den Inhalt zu verwenden. Versuche in diesem Zusammenhang, Schriftarten zu kombinieren, die sich gegenseitig erg\u00e4nzen, z.B. aus derselben Schriftfamilie.<\/p>\n<h3>Elementhierarchie<\/h3>\n<p><em>Hierarchie<\/em> bezieht sich auf die Anordnung von Designelementen, die die relative Bedeutung darstellen. Dies wird durch die Manipulation von Elementen wie visuellem Kontrast, Gr\u00f6\u00dfe und Platzierung erreicht, um die Aufmerksamkeit auf sich zu lenken.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/beispiel-einer-elementhierarchie.jpg\" alt=\"Beispiel einer Elementhierarchie\" width=\"1321\" height=\"1177\"><figcaption class=\"wp-caption-text\">Beispiel einer Elementhierarchie<\/figcaption><\/figure>\n<p>So muss der <a href=\"https:\/\/kinsta.com\/de\/blog\/bounce-rate-reduzieren\/#14-structure-your-content-wisely\">Inhalt beispielsweise in logische Bl\u00f6cke zerlegt werden<\/a>, damit die Benutzer die Abschnitte voneinander unterscheiden k\u00f6nnen.<\/p>\n<p>Dies kann durch die Verwendung von <strong>Inhalts\u00fcberschriften<\/strong> erreicht werden, die es den Benutzern nicht nur erleichtern, zu den Teilen zu springen, die sie lesen m\u00f6chten, sondern auch gro\u00dfe Textmengen in lesbare Bl\u00f6cke aufteilen, so dass Screenreader den Kontext jedes Abschnitts bestimmen kann.<\/p>\n<p>Wenn du nach einigen hilfreichen visuellen Illustrationen dieser Designkonzepte und mehr suchst, deckt der Blog von Tilda Publishing einige der <a href=\"http:\/\/blog-en.tilda.cc\/articles-website-design-mistakes\" target=\"_blank\" rel=\"noopener noreferrer\">h\u00e4ufigsten Webseitengestaltungsfehler<\/a> und deren Behebung ab.<\/p>\n<h2>Bestes Web-Design\/Formatierungspraktiken<\/h2>\n<p>Laut einer <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">Untersuchung von Orbit Media<\/a> gibt es einige gemeinsame Webdesign-Standards, die in den Top 50 Marketing-Webseiten eingehalten werden sollten.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/webdesign-standards.jpg\" alt=\"Webdesign-Standards\" width=\"1320\" height=\"1158\"><figcaption class=\"wp-caption-text\">Webdesign-Standards<\/figcaption><\/figure>\n<p>Mit &#8222;Standards&#8220; meinen sie, dass 80% der Webseiten einen \u00e4hnlichen Design-Ansatz verwenden:<\/p>\n<ul>\n<li>Logo in der linken oberen Ecke.<\/li>\n<li>Horizontale Hauptnavigation \u00fcber den oberen Rand jeder Seite.<\/li>\n<li>Wert-Angebot hoch auf der Homepage &#8222;above the fold&#8220;. Beachte, dass die meisten Webdesigner dir sagen werden, dass es keine Standardpixelh\u00f6he f\u00fcr Browser gibt und technisch gesehen auch keine &#8222;fold&#8220;. Aber im Allgemeinen sollten wichtige Designelemente auf Seiten, die f\u00fcr die Mehrheit der Besucher sichtbar sind, auch ohne Scrollen erscheinen.<\/li>\n<\/ul>\n<p>Hier sind einige bew\u00e4hrte Verfahren f\u00fcr Webdesign f\u00fcr gemeinsame Webseitenelemente:<\/p>\n<h3>Bilder<\/h3>\n<p>Die besten Praktiken f\u00fcr die <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">Verwendung von Bildern<\/a> im Webdesign k\u00f6nnten viele B\u00e4nde von Ratgebern inspirieren, aber konzentrieren wir uns in dieser Diskussion \u00fcber die besten Praktiken im Webdesign auf das absolute Minimum:<\/p>\n<ul>\n<li><strong>Hinzuf\u00fcgen von ALT-Text<\/strong>. Bilder k\u00f6nnen nicht mit Bildschirmleseprogrammen verarbeitet werden, wenn kein ALT-Text verwendet wird. Das Hinzuf\u00fcgen von <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-seo\/#9-image-alt-text\" target=\"_blank\" rel=\"noopener noreferrer\">ALT-Text tr\u00e4gt auch zur Suchmaschinenoptimierung bei<\/a>, aber einige Leute verwenden ALT-Text nur zur Erg\u00e4nzung ihrer Keyword-Strategie. Eine hilfreichere Verwendung von ALT-Text w\u00e4re die Beschreibung des Bildes &#8211; obwohl man mit dem richtigen Ansatz sicherlich Spiders und Screenreader gleichzeitig zufrieden stellen k\u00f6nnte.<\/li>\n<li><strong>Die Verwendung von Bildern mit menschlichen Gesichtern<\/strong> ist in der Regel effektiver als andere Grafiken oder Animationen. Es erh\u00f6ht die Wahrscheinlichkeit, dass sich die Menschen mit dem Bild besch\u00e4ftigen, da sie von dem angezogen werden, was sie als echte Empathie und Emotionen wahrnehmen.<\/li>\n<li><strong>Verwende responsive Bilder<\/strong>, die je nach Browsergr\u00f6\u00dfe wachsen oder schrumpfen. Dies hilft sowohl bei der Geschwindigkeit der Webseite als auch bei der SEO.<\/li>\n<li><strong>Vergiss niemals die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-favicon\/\">Favicons<\/a>.<\/strong> 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.<\/li>\n<\/ul>\n<h3>Websiten-Navigation<\/h3>\n<p>Die Benutzer erwarten, dass sie die gesuchten Inhalte auf einer Webseite leicht finden k\u00f6nnen. Daher ist es wichtig, dass die Navigation auf einer Webseite einfach und unkompliziert ist.<\/p>\n<p>Webseiten-Navigation ist ein allgemeiner Begriff, der sich auf die <a href=\"https:\/\/kinsta.com\/de\/blog\/google-sitelinks\/#6-build-internal-links\" target=\"_blank\" rel=\"noopener noreferrer\">interne Link-Architektur einer Webseite<\/a> bezieht. Vergiss nicht, dass der Hauptzweck der Navigation darin besteht, den Benutzern zu helfen, relevante Inhalte auf deiner Webseite leicht zu finden.<\/p>\n<p>Die interne Link-Architektur deiner Webseite bildet die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sitemap\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grundlage deiner Sitemap<\/a>, 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\u00e4lt, positiv beeinflusst (zusammen mit einer h\u00f6heren Chance, <a href=\"https:\/\/kinsta.com\/de\/blog\/google-sitelinks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Sitelinks<\/a> zu erhalten).<\/p>\n<h3>Men\u00fc-Navigation<\/h3>\n<p>Es gibt mehrere Aspekte, die die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menue\/\" target=\"_blank\" rel=\"noopener noreferrer\">Navigation auf der Webseite<\/a> ausmachen, aber das Hauptmen\u00fc sollte ein Hauptschwerpunkt sein, da es eines der ersten Dinge ist, mit denen die Benutzer beim Besuch deiner Webseite interagieren.<\/p>\n<p>Es gibt verschiedene Webseiten-Men\u00fc-Design-Heuristiken, aber die beliebtesten sind:<\/p>\n<h4>Navigationsmen\u00fc<\/h4>\n<p>Im Idealfall befindet sich dieser am Anfang und in der Mitte einer Webseite. Bei mehreren Kategorien kann dies die <a href=\"https:\/\/kinsta.com\/de\/blog\/dropdown-menu-wordpress\/\">Verwendung eines Dropdown-Men\u00fcs beinhalten<\/a>. Dropdown-Men\u00fcs werden jedoch <a href=\"https:\/\/www.websaucestudio.com\/website-navigation-best-practices-and-seo-value\/\">nicht empfohlen<\/a>, insbesondere wenn es um technisches SEO geht (sie sind schwerer zu durchsuchen). Au\u00dferdem hat sich herausgestellt, dass die meisten Menschen <a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\">Dropdown-Men\u00fcs nicht m\u00f6gen<\/a>.<\/p>\n<p>Das liegt daran, dass das menschliche Auge schneller arbeitet als die Hand, und so empfinden es die Menschen als st\u00f6rend, wenn sie bereits entschieden haben, worauf sie klicken wollen, und etwas anderes herunterf\u00e4llt &#8211; was zu einem R\u00fcckgang der Seitenbesuche f\u00fchren kann.<\/p>\n<h4>Hamburger-Men\u00fc<\/h4>\n<p>Ein Hamburger-Men\u00fc, das in erster Linie ein f\u00fcr 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 <a href=\"https:\/\/speckyboy.com\/analyzing-effectiveness-hamburger-menus-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">verachten jedoch das Hamburger-Men\u00fc<\/a>, was Webentwickler dazu inspiriert hat, \u00fcber neue M\u00f6glichkeiten nachzudenken, um die Navigation auf mobilen Webseiten unterhaltsam und funktional zu gestalten.<\/p>\n<p>Hier sind ein paar Tipps f\u00fcr die Gestaltung der Navigation auf der Grundlage der besten Praktiken des Webdesigns:<\/p>\n<ul>\n<li><strong>F\u00fcge eine Suchleiste hinzu<\/strong>, um den Benutzern das Auffinden von Inhalten zu erleichtern (hier erf\u00e4hrst du, wie du die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-suche\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Suchfunktionalit\u00e4t verbessern kannst<\/a>). Dies ist besonders n\u00fctzlich f\u00fcr Webseiten, die viel Inhalt haben, wie z.B. ein Nachrichten-Blog.<\/li>\n<li>Gestalte deine Webseite nach der <strong>Drei-Klick-Regel<\/strong>, die besagt, dass Benutzer die gew\u00fcnschten Informationen mit nicht mehr als drei Mausklicks finden k\u00f6nnen sollten. Dies liegt daran, dass die Benutzer es eigentlich vorziehen, durch eine <a href=\"https:\/\/www.cludo.com\/blog\/search-vs-navigate-people-behave-websites-search-navigate\/\" target=\"_blank\" rel=\"noopener noreferrer\">Webseite zu navigieren<\/a>, anstatt sich die Suchergebnisse anzusehen, wenn dies m\u00f6glich ist.<\/li>\n<li><strong>Gestalte dein Men\u00fctitel beschreibend<\/strong> (unter Ber\u00fccksichtigung von Schl\u00fcsselw\u00f6rtern), was den Benutzern das Auffinden von Elementen erleichtert und auch einen positiven Beitrag zur Suchmaschinenoptimierung (SEO) leistet.<\/li>\n<li><strong>Die Position der Men\u00fcpunkte ist wichtig<\/strong>. Stelle die wichtigsten Seiten in den Vordergrund deines Men\u00fcs, damit sie leicht zug\u00e4nglich sind.<\/li>\n<li><strong>Halte die Men\u00fcpunkte auf maximal 7<\/strong>, nicht nur, um das Design der Webseite sauber zu halten, sondern auch, weil zu viele Kategorien von Men\u00fcpunkten deine M\u00f6glichkeiten, bei der Suche ein Ranking zu erreichen, beeintr\u00e4chtigen k\u00f6nnen. Google kann diese scheinbar nicht zusammenh\u00e4ngenden Kategorien als ein Zeichen daf\u00fcr interpretieren, dass sich deine Webseite nicht f\u00fcr eine bestimmte Nische entschieden hat.<\/li>\n<\/ul>\n<p>F\u00fcr ein bequemeres Format gibt es hier eine praktische Infografik:<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/webdesign-menu-navigation.jpg\" alt=\"Best Practices f\u00fcr Webdesign bei der Men\u00fc-Navigation\" width=\"1320\" height=\"1802\"><figcaption class=\"wp-caption-text\">Best Practices f\u00fcr Webdesign bei der Men\u00fc-Navigation<\/figcaption><\/figure>\n<h2>Kodierungsstandards<\/h2>\n<p>Bei so vielen Webseiten, die weltweit erstellt und genutzt werden, besteht sicherlich Bedarf an einem standardisierten Kodierungsprinzipien. Einige Aspekte dieser Web-Standards umfassen:<\/p>\n<h3>SEO<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wofur-steht-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a> kann verwendet werden, um die Anzahl der Besucher deiner Webseite <em>organisch<\/em> (ohne den Einsatz von Anzeigen) zu erh\u00f6hen. Da es zu kompliziert ist, sich in einem kleinen Unterabschnitt eines Artikels angemessen mit SEO zu befassen, lese unsere <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO-Checkliste<\/a> und unsere Tipps f\u00fcr die <a href=\"https:\/\/kinsta.com\/de\/blog\/beste-seo-plugins-fur-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">besten SEO-Plugins f\u00fcr WordPress<\/a>, um dich mit diesem Aspekt der Best Practices im Webdesign vertraut zu machen.<\/p>\n<p>Beachte, dass die folgenden Tipps zu den Kodierungsstandards Hand in Hand mit SEO gehen.<\/p>\n<h3>Mobile Responsiveness<\/h3>\n<p>Bei der <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/#make-sure-your-site-is-responsive\" target=\"_blank\" rel=\"noopener noreferrer\">responsiven Gestaltung<\/a> geht es darum, ein gro\u00dfartiges Benutzererlebnis zu schaffen, unabh\u00e4ngig davon, welches Ger\u00e4t oder welcher Browser f\u00fcr den Zugriff auf deine Webseite verwendet wird.<\/p>\n<p>Es ist heute wichtiger denn je, deine Webseite so zu gestalten, dass sie responsive ist, da mehr als 60 % der Internetnutzer \u00fcber ihr <a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mobiltelefon auf das Internet zugreifen<\/a> und die <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\" target=\"_blank\" rel=\"noopener noreferrer\">H\u00e4lfte der E-Commerce-Transaktionen<\/a> \u00fcber mobile Plattformen abgewickelt werden. Hinzu kommt, dass der neue Suchalgorithmus von Google auch <a href=\"https:\/\/www.businessnewsdaily.com\/7808-google-search-ranking-mobile.html\" target=\"_blank\" rel=\"noopener noreferrer\">mobil-freundliche Webseiten priorisiert<\/a>.<\/p>\n<figure style=\"width: 210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/beispiel-fur-responsive-design.jpg\" alt=\"Beispiel f\u00fcr responsive Design\" width=\"210\" height=\"365\"><figcaption class=\"wp-caption-text\">Beispiel f\u00fcr responsive Design<\/figcaption><\/figure>\n<p>Eine responsive Webseite erleichtert den Benutzern nicht nur die Navigation auf deiner Webseite, sondern tr\u00e4gt auch zu mehr Engagement und Conversions bei. Die <a href=\"https:\/\/www.thinkwithgoogle.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nutzer empfehlen Marken<\/a>, mit denen sie eine positive Erfahrung mit einer mobil responsive Webseite haben, und w\u00fcrden umgekehrt nicht nur den <a href=\"https:\/\/www.socpub.com\/articles\/the-5-mobile-marketing-mistakes-infographic-14849\" target=\"_blank\" rel=\"noopener noreferrer\">Kauf von Marken mit einer schlechten Erfahrung<\/a> mit einer mobilen Website stoppen, sondern auch andere aktiv davon abhalten, dies zu tun.<\/p>\n<p>Trotz der Nachfrage nach einer responsive Webseite verf\u00fcgen jedoch sch\u00e4tzungsweise <a href=\"https:\/\/bpstudios.com\/Blog\/March-2017\/15-Web-Design-Statistics-You-Should-Know\" target=\"_blank\" rel=\"noopener noreferrer\">91% der kleinen Unternehmen nicht \u00fcber eine solche<\/a>. Das sollten sie auch &#8211; denn die Gestaltung einer Webseite, die auf Mobiltelefone passt, zahlt sich sicherlich aus. 62% der Unternehmen haben von einer <a href=\"https:\/\/econsultancy.com\/blog\/11044-more-companies-are-designing-their-sites-for-tablet-and-mobile-stats\/\" target=\"_blank\" rel=\"noopener noreferrer\">Umsatzsteigerung berichtet<\/a>, nachdem sie eine auf Mobile-Responsive-Webseite konzipiert hatten.<\/p>\n<p>Informiere dich auf Kinsta&#8217;s Ressource, wie du deine Webseite <a href=\"https:\/\/kinsta.com\/de\/blog\/google-mobile-first-index\/\" target=\"_blank\" rel=\"noopener noreferrer\">mobilfreundlicher<\/a> gestalten kannst, die Liste der besten <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-mobile-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Plugins f\u00fcr Mobiltelefone<\/a> zum Herunterladen enth\u00e4lt, und sieh dir diese kuratierte <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">Liste der besten WordPress-Themes<\/a> an, in der du durch viele ansprechende Themes st\u00f6bern kannst.<\/p>\n<p>Google bietet auch einige Tipps f\u00fcr die <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gestaltung einer ansprechenden Webseite<\/a>.<\/p>\n<h3>Sicherheit der Website<\/h3>\n<p>Eine weitere wichtige Kodierungspraxis? Die Erstellung sicherer Programme und Webseiten, denen die Benutzer ihre sensiblen pers\u00f6nlichen Daten anvertrauen k\u00f6nnen. Entgegen der landl\u00e4ufigen Meinung suchen Hacker nicht aktiv nach <em>bestimmten<\/em> Webseiten, um sie zu hacken, weshalb selbst kleine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-gehacked\/\" target=\"_blank\" rel=\"noopener noreferrer\">Webseiten anf\u00e4llig f\u00fcr Angriffe<\/a> sind.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kinsta bietet mit jedem Plan ein <a href=\"https:\/\/kinsta.com\/de\/docs\/service-information\/malware-entfernung\/\">Malware-Sicherheitsversprechen<\/a> an und falls etwas Schlimmes passiert, werden Sicherheitsspezialisten deine Seite reparieren<\/p>\n<\/aside>\n\n<p>Insgesamt ist WordPress im <a href=\"https:\/\/kinsta.com\/de\/blog\/ist-wordpress-sicher\/\" target=\"_blank\" rel=\"noopener noreferrer\">Allgemeinen sicher<\/a>, aber es hilft, zus\u00e4tzliche Vorkehrungen zu treffen, um deine Webseite vor Angriffen zu sch\u00fctzen.<\/p>\n<p>Hier sind einige der besten Praktiken f\u00fcr die Webseitensicherheit:<\/p>\n<ul>\n<li><strong>Besorge dir ein SSL-Zertifikat<\/strong>, was besonders wichtig f\u00fcr Webseiten ist, die sich mit Zahlungen und pers\u00f6nlichen Daten befassen. Das <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-ssl-funktioniert\/\" target=\"_blank\" rel=\"noopener noreferrer\">SSL-Zertifikat<\/a> verschl\u00fcsselt Informationen, die \u00fcber Netzwerke verschickt werden, so dass Hacker sie nur schwer wieder entschl\u00fcsseln k\u00f6nnen. Au\u00dferdem ist es ein Industriestandard. Chrome warnt Besucher, wenn die von ihnen besuchte Webseite kein SSL-Zertifikat besitzt. Dar\u00fcber hinaus verwirft Chrome jetzt auch \u00e4ltere <a href=\"https:\/\/kinsta.com\/de\/blog\/err_ssl_obsolete_version\/\" target=\"_blank\" rel=\"noopener noreferrer\">TLS-Versionen und zeigt zus\u00e4tzliche Warnungen<\/a><\/li>\n<li>Die <a href=\"https:\/\/kinsta.com\/de\/blog\/http-zu-https\/\" target=\"_blank\" rel=\"noopener noreferrer\">Aktivierung von HTTPS<\/a> (Teil der Installation eines SSL-Zertifikats) ist auch ein offizieller Google-Ranking-Faktor.<\/li>\n<li><strong>Bewahre deine Anmeldeinformationen sicher auf<\/strong>. Mehrere Angriffe werden durch Hacker verursacht, die versuchen, sich gewaltsam Zugang zu einer Webseite zu verschaffen. Es hilft, eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-url-loggst\/\" target=\"_blank\" rel=\"noopener noreferrer\">separate\/versteckte Anmeldeseite<\/a> zu haben (verwende das <a href=\"https:\/\/wordpress.org\/plugins\/wps-hide-login\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Hide Login<\/a>-Plugin) um die Anzahl der Anmeldeversuche zu begrenzen. Verwende das Plugin <a href=\"https:\/\/wordpress.org\/plugins\/login-lockdown\/\" target=\"_blank\" rel=\"noopener noreferrer\">Login LockDown<\/a>, 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\u00dferdem ein sicheres Passwort, das mehr als 6 Zeichen lang ist und aus einer Mischung aus Gro\u00df- und Kleinbuchstaben, Zahlen und Sonderzeichen besteht. \u00c4ndere dein Passwort h\u00e4ufig. Du kannst auch eine Zwei-Faktor-Authentifizierung f\u00fcr die Anmeldung verwenden, wenn du nach zus\u00e4tzlicher Sicherheit suchst.<\/li>\n<li><strong>Halte den WordPress-Kern, die Plugins und Themes auf dem neuesten Stand<\/strong>. Vergesse nicht, Plugins oder Themes von einer seri\u00f6sen Quelle herunterzuladen. Ein gutes Zeichen ist, wenn das Plugin\/Thema mehrere Installationen hat und k\u00fcrzlich aktualisiert wurde. Du solltest auch Rezensionen lesen, um selbst zu entscheiden, ob das Plugin vertrauensw\u00fcrdig ist (\u00fcberpr\u00fcfe <a href=\"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">unbedingt die hier aufgef\u00fchrten<\/a>). In diesem Zusammenhang solltest du ein WordPress-Sicherheits-Plugin wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sicherheits-plugin\/#wordfence-security\" target=\"_blank\" rel=\"noopener noreferrer\">Wordfence<\/a>, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sicherheits-plugin\/#sucuri\" target=\"_blank\" rel=\"noopener noreferrer\">Sucuri<\/a> oder <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sicherheits-plugin\/#defender\" target=\"_blank\" rel=\"noopener noreferrer\">Defender<\/a> herunterladen, da 73,2% der beliebtesten WordPress-Installationen, die anf\u00e4llig sind, mit <a href=\"https:\/\/www.wpwhitesecurity.com\/wordpress-security-news-updates\/statistics-70-percent-wordpress-installations-vulnerable\/\" target=\"_blank\" rel=\"noopener noreferrer\">kostenlosen automatischen Tools<\/a> erkannt werden k\u00f6nnen. Hier findest du eine ausf\u00fchrlichere Liste der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sicherheits-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">besten Sicherheits-Plugins<\/a>.<\/li>\n<li><strong>Verwende einen sicheren Web-Host<\/strong>. F\u00fcr diejenigen, die es nicht wissen, mag es nicht so aussehen, als h\u00e4tte dein Webhost etwas mit der Sicherheit der Webseite zu tun, aber <a href=\"https:\/\/www.wpwhitesecurity.com\/state-of-security-of-wordpress-blogs-and-websites\/\" target=\"_blank\" rel=\"noopener noreferrer\">41% der Angriffe<\/a> erfolgen durch eine Sicherheitsl\u00fccke auf der Hosting-Plattform. Suche nach einem Hosting-Provider, der \u00fcber Funktionen verf\u00fcgt wie: serverseitige Firewall und Verschl\u00fcsselung, <a href=\"https:\/\/kinsta.com\/de\/blog\/nginx-vs-apache\/\" target=\"_blank\" rel=\"noopener noreferrer\">NGINX- oder Apache-Webserver<\/a>, Antiviren- und Anti-Malware-Software, Sicherheitssysteme vor Ort sowie die Verf\u00fcgbarkeit von SSL-Zertifikaten und eines CDN.<\/li>\n<\/ul>\n<p>Weitere Informationen \u00fcber die Sicherheit von WordPress findest du in unserer umfassenden Ressource \u00fcber die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-sicherheit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sicherheit deiner WordPress-Seite.<\/a><\/p>\n<h3>Seitengeschwindigkeit<\/h3>\n<p>Etwa die H\u00e4lfte der Benutzer erwartet, dass eine Webseite in <a href=\"https:\/\/www.bluecorona.com\/blog\/20-web-design-facts-small-business-owners\/\" target=\"_blank\" rel=\"noopener noreferrer\">2 Sekunden oder weniger<\/a> geladen wird, und wenn es l\u00e4nger dauert, z\u00f6gern 40 % der Leute nicht, die Seite zu verlassen, und kehren (wahrscheinlich) nie wieder zur\u00fcck.<\/p>\n<p>Neben dem Besuch der Webseite ist die Geschwindigkeit der Seite wichtig, da sie sich auch auf die Konversion und die Einnahmen auswirkt. F\u00fcr jede Sekunde, in der die Ladegeschwindigkeit der Seite erh\u00f6ht wird, sinken die Verk\u00e4ufe <a href=\"https:\/\/www.lyfemarketing.com\/blog\/web-design-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">um bis zu 27%<\/a>. Eine Erh\u00f6hung der Webseiten-Geschwindigkeit kann den Verlust von <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\" target=\"_blank\" rel=\"noopener noreferrer\">7% der m\u00f6glichen Konversionen<\/a> verhindern.<\/p>\n<p>Hier sind einige M\u00f6glichkeiten, wie du deine Webseiten schneller laden kannst:<\/p>\n<ul>\n<li>Verwende ein <strong>Content-Delivery-Netzwerk (CDN)<\/strong>, das statische Dateien wie Bilder, CSS und JavaScript auf den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\" target=\"_blank\" rel=\"noopener noreferrer\">Servern ausliefert, die dem physischen Standort des Benutzers am n\u00e4chsten liegen<\/a>.<\/li>\n<li><strong>\u00dcberlege, wie du Bilder verwendest<\/strong>. Eine durchschnittliche Webseite verwendet 1,8 MB an Bildern, was <a href=\"https:\/\/speedcurve.com\/blog\/web-performance-page-bloat\/\" target=\"_blank\" rel=\"noopener noreferrer\">60 % der Gr\u00f6\u00dfe einer Webseite<\/a> Um dir dabei zu helfen, \u00fcberdenke die Gestaltung deiner Webseite. Wenn du die Geschwindigkeit der Seite hoch halten willst, versuche, die Anzahl der gro\u00dfen Bilder, die in deinem Design verwendet werden, zu reduzieren, und stelle sicher, <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">dass sie optimiert werden<\/a>.<\/li>\n<li>Wenn deine Webseite viele gro\u00dfe Bilder verwenden muss, <strong>verwende Plugins<\/strong>, die Funktionen zur <a href=\"https:\/\/kinsta.com\/de\/blog\/gzip-komprimierung-aktivieren\/\" target=\"_blank\" rel=\"noopener noreferrer\">GZIP-Komprimierung<\/a>, zum Caching oder zur Bildoptimierung enthalten, wie z.B. <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Rocket<\/a> und <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a>. Du kannst deine Dateien kleiner machen (ohne Qualit\u00e4tseinbu\u00dfen), damit sie schneller geladen werden.<\/li>\n<li><strong>Denke an die Anzahl der Plugins und Dateien, die du in deiner WordPress-Datenbank aufbewahrst<\/strong>, da sie auch die Ladegeschwindigkeit der Seiten beeinflussen k\u00f6nnen. Bereinige diejenigen, die du nicht verwendest. Wenn du schon dabei bist, halte deine PHP-, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-wartung\/#keeping-your-wordpress-site-updated\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-Kern- und Plugins auf dem neuesten Stand<\/a>.<\/li>\n<\/ul>\n<p>Informiere dich \u00fcber unsere umfassende Seite zur <a href=\"https:\/\/kinsta.com\/de\/lernen\/website-geschwindigkeit\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimierung der Webseiten-Geschwindigkeit<\/a>.<\/p>\n<h2>Zug\u00e4nglichkeits-Standards<\/h2>\n<p>Das Internet wurde so konzipiert, dass es f\u00fcr alle Menschen funktioniert, unabh\u00e4ngig von der spezifischen Hardware, Software, Sprache, die sie sprechen, ihren F\u00e4higkeiten oder ihrem Standort. Viele opfern jedoch die Zug\u00e4nglichkeit f\u00fcr ein sch\u00f6nes Design.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/zuganglichkeit.jpg\" alt=\"Zug\u00e4nglichkeit ist der Schl\u00fcssel f\u00fcr jede Website\" width=\"1320\" height=\"732\"><figcaption class=\"wp-caption-text\">Zug\u00e4nglichkeit ist der Schl\u00fcssel f\u00fcr jede Website<\/figcaption><\/figure>\n<p><em>Barrierefreiheit<\/em> bezieht sich auf die Praxis, deine Webseite f\u00fcr <em>jeden<\/em> nutzbar zu machen.<\/p>\n<p>Neben denjenigen mit Behinderungen, die den Zugang beeintr\u00e4chtigen, sagt W3, dass die Zug\u00e4nglichkeit der Webseite auch f\u00fcr andere von Vorteil ist:<\/p>\n<ul>\n<li>Diejenigen, die Ger\u00e4te mit kleinen Bildschirmen, verschiedenen Eingabemodi usw. verwenden.<\/li>\n<li>\u00c4ltere Menschen.<\/li>\n<li>Menschen mit &#8222;vor\u00fcbergehenden Behinderungen&#8220;, einschlie\u00dflich eines gebrochenen Beins, einer verlorenen Brille oder einer Krankheit.<\/li>\n<li>Benutzer mit &#8222;situationsbedingten Einschr\u00e4nkungen&#8220;, wie z.B. diejenigen, die mit Ger\u00e4ten in hellem Sonnenlicht oder in einer Umgebung, in der sie kein Audio h\u00f6ren k\u00f6nnen, wie z.B. in \u00f6ffentlichen Verkehrsmitteln, auf das Internet zugreifen.<\/li>\n<li>Personen mit einer langsamen Internetverbindung.<\/li>\n<\/ul>\n<p>Die Zug\u00e4nglichkeit sollte allen ein Anliegen sein, da wir alle in irgendeiner Weise davon betroffen sind.<\/p>\n<h3>Gr\u00fcnde deine Webseite zug\u00e4nglich zu machen<\/h3>\n<p>Du bist dir immer noch nicht sicher, ob es sich lohnt, deine Zeit in dieser Diskussion \u00fcber die besten Praktiken im Webdesign auf die Zug\u00e4nglichkeit zu verwenden?<\/p>\n<p>Bedenke diese Gr\u00fcnde:<\/p>\n<ul>\n<li><strong>Es ist eine ADA-Anforderung<\/strong>. Das Gesetz f\u00fcr Amerikaner mit Behinderungen (Americans with Disabilities Act, ADA) wurde 1990 verabschiedet, um die B\u00fcrgerrechte von Menschen mit Behinderungen vor Diskriminierung zu sch\u00fctzen. Es deckt Dinge wie Transport, Telekommunikation, Besch\u00e4ftigung und sogar Bauvorschriften ab. Da dieses Gesetz fast 30 Jahre zuvor verabschiedet wurde &#8211; zu einer Zeit, als das Internet noch nicht so allgegenw\u00e4rtig war &#8211; <a href=\"https:\/\/www.ada.gov\/anprm2010\/web%20anprm_2010.htm\" target=\"_blank\" rel=\"noopener noreferrer\">versuchen die Gesetzgeber, es zu \u00e4ndern<\/a>.<\/li>\n<li><strong>Es f\u00f6rdert die Inklusivit\u00e4t<\/strong>. Eine Umfrage des Pew Research Centers zeigt, dass Menschen mit Behinderungen <a href=\"http:\/\/www.pewresearch.org\/fact-tank\/2017\/04\/07\/disabled-americans-are-less-likely-to-use-technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">dreimal seltener online gehen<\/a> als ihre Kollegen ohne Behinderungen, was eine Schande ist, da die Statistiken zeigen, dass etwa <a href=\"http:\/\/www.talentinnovation.org\/_private\/assets\/DisabilitiesInclusion_PressRelease.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">30% der Fachkr\u00e4fte<\/a> eine Behinderung haben, wobei 62% der Behinderten aus Angst vor negativen Vorurteilen &#8222;unter dem Radar fliegen&#8220;.<\/li>\n<li><strong>Es wird dir helfen, mehr Auftr\u00e4ge zu erhalten<\/strong>. Wenn du dich st\u00e4rker eingliederst, bringst du ein Netzwerk von Menschen mit Behinderungen ein, das ein verf\u00fcgbares Einkommen von <a href=\"https:\/\/www.boia.org\/blog\/how-to-prevent-a-web-accessibility-lawsuit\" target=\"_blank\" rel=\"noopener noreferrer\">7 Billionen Dollar darstellt<\/a>.<\/li>\n<\/ul>\n<p><strong>SEO-Vorteile<\/strong>. Suchmaschinen belohnen Webseiten, die die Anforderungen der Zug\u00e4nglichkeit erf\u00fcllen, um mehr Webseiten zug\u00e4nglich zu machen<\/p>\n<h3>Wie macht man seine Webseite zug\u00e4nglicher?<\/h3>\n<p>Eine einfache M\u00f6glichkeit, die Zug\u00e4nglichkeit deiner Webseite zu verbessern, ist die Installation des <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP-Zug\u00e4nglichkeits<\/a>-Plugins, das unter anderem Zug\u00e4nglichkeitsfunktionen hinzuf\u00fcgt:<\/p>\n<ul>\n<li>Eine Symbolleiste, in der Benutzer die Gr\u00f6\u00dfe der Schriftarten \u00e4ndern und die Webseite in hohem Kontrast und in Graustufen anzeigen k\u00f6nnen.<\/li>\n<li>Ein Vergleich des Farbkontrastes, um zu pr\u00fcfen, ob er dem Standard der ADA entspricht.<\/li>\n<li>Entfernen von Titelattributen aus Bildern, die in den Inhalt eingef\u00fcgt wurden. Die meisten Bildschirmleseprogramme sind nicht in der Lage, dies zu erkennen und lesen stattdessen den Anker-Text.<\/li>\n<li>Aktivieren von Skip-Links, d.h. internen Seitenlinks, die es Benutzern erm\u00f6glichen, direkt zum Inhalt zu springen, was f\u00fcr Personen, die Bildschirmleseprogramme verwenden, n\u00fctzlich ist.<\/li>\n<\/ul>\n<p>Ein paar zus\u00e4tzliche Schritte sind zu unternehmen:<\/p>\n<ul>\n<li><strong>F\u00fcge Untertitel oder eine Abschrift hinzu<\/strong>, wenn deine Webseite Medien wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-audiospieler\/\" target=\"_blank\" rel=\"noopener noreferrer\">Audio, H\u00f6rb\u00fccher, Videos, Podcasts<\/a> produziert, um Geh\u00f6rlosen\/Stummen zu helfen, sowie Menschen, die deine Inhalte konsumieren m\u00f6chten, aber keine Medien in der \u00d6ffentlichkeit konsumieren k\u00f6nnen.<\/li>\n<li><strong>Erstelle \u00fcber die Tastatur zug\u00e4ngliche Links und Men\u00fcs<\/strong> f\u00fcr Menschen mit motorischen Behinderungen, die nur mit der Tastatur (nicht mit der Maus) auf deiner Webseite navigieren k\u00f6nnen. Von Dropdown-Men\u00fcs wird abgeraten, aber du kannst dem Abhilfe schaffen, indem du f\u00fcr jedes Dropdown-Element Tastenkombinationen zuweist (z.B.: Dr\u00fccke &#8222;1&#8220; f\u00fcr die Startseite, &#8222;2&#8220; f\u00fcr die Info-Seite usw.).<\/li>\n<li><strong>Teste schlie\u00dflich deine Webseite auf die Zug\u00e4nglichkeit<\/strong> der Webseite. Die Web Accessibility Initiative bef\u00fcrwortet kein spezielles Tool, sondern bietet stattdessen eine <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">Liste von Tools<\/a> an, mit denen man seine Bem\u00fchungen \u00fcberpr\u00fcfen kann.<\/li>\n<\/ul>\n<h2>Abschlie\u00dfende Bemerkungen: Best Practices f\u00fcr Webdesign f\u00fcr dein n\u00e4chstes Webseiten-Projekt<\/h2>\n<p>Gute Webseiten sollten nicht durch objektiv gutes Design definiert werden. Genauso wichtig ist die Benutzerfreundlichkeit der Webseite, die einfache Navigation und die Zug\u00e4nglichkeit. Mit diesen Best Practices f\u00fcr Webdesign hast du alles, was du brauchst, <strong>um etwas zu schaffen, das gut aussieht und funktioniert<\/strong>.<\/p>\n\n<p>Denke einfach daran, dass dies die <em>besten Praktiken<\/em> des Webdesigns sind. Es ist wahrscheinlich, dass du nicht in der Lage sein wirst, jede einzelne davon genau zu befolgen, abh\u00e4ngig von der Art deiner Webseite. Aber bevor du die Regeln brechen kannst, ist es hilfreich, sich zumindest bewusst zu machen, warum sie existieren.<\/p>\n<p>Haben wir etwas Wichtiges vergessen? Teile uns in den untenstehenden Kommentaren deine besten Praktiken im Webdesign mit!<\/p>\n<p>Empfohlene Lekt\u00fcre: <a href=\"https:\/\/kinsta.com\/de\/blog\/web-design-kurse\/\">Beste Web Design Kurse Online<\/a><\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was verursacht die gro\u00dfe Diskrepanz zwischen dem, was einige WordPress-Entwickler im Vergleich zu anderen verlangen? Die Beantwortung dieser Frage erfordert eine \u00dcberlegung, warum man \u00fcberhaupt eine &#8230;<\/p>\n","protected":false},"author":48,"featured_media":32899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[305,75],"topic":[988,992,1012],"class_list":["post-32877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-accessibility","tag-webdesign","topic-webdesign","topic-website-branding","topic-wordpress-website-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt<\/title>\n<meta name=\"description\" content=\"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation &amp; Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt\" \/>\n<meta property=\"og:description\" content=\"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation &amp; Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-06T10:46:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T12:57:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maddy Osman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation &amp; Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@maddyosman\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maddy Osman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\"},\"author\":{\"name\":\"Maddy Osman\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\"},\"headline\":\"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt\",\"datePublished\":\"2020-03-06T10:46:22+00:00\",\"dateModified\":\"2023-07-27T12:57:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\"},\"wordCount\":4934,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\",\"keywords\":[\"accessibility\",\"webdesign\"],\"articleSection\":[\"WordPress Entwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\",\"name\":\"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\",\"datePublished\":\"2020-03-06T10:46:22+00:00\",\"dateModified\":\"2023-07-27T12:57:33+00:00\",\"description\":\"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation & Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Best Practices f\u00fcr Webdesign\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website-Branding\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/website-branding\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\",\"name\":\"Maddy Osman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"caption\":\"Maddy Osman\"},\"description\":\"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.\",\"sameAs\":[\"http:\/\/www.the-blogsmith.com\",\"https:\/\/x.com\/maddyosman\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/maddy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt","description":"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation & Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/","og_locale":"de_DE","og_type":"article","og_title":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt","og_description":"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation & Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.","og_url":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2020-03-06T10:46:22+00:00","article_modified_time":"2023-07-27T12:57:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","type":"image\/jpeg"}],"author":"Maddy Osman","twitter_card":"summary_large_image","twitter_description":"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation & Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","twitter_creator":"@maddyosman","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Maddy Osman","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/"},"author":{"name":"Maddy Osman","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89"},"headline":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt","datePublished":"2020-03-06T10:46:22+00:00","dateModified":"2023-07-27T12:57:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/"},"wordCount":4934,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","keywords":["accessibility","webdesign"],"articleSection":["WordPress Entwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/","url":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/","name":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","datePublished":"2020-03-06T10:46:22+00:00","dateModified":"2023-07-27T12:57:33+00:00","description":"Gutes Design ist nicht nur eine Frage der \u00c4sthetik. Genauso wichtig sind: Benutzerfreundlichkeit der Website, einfache Navigation & Zug\u00e4nglichkeit. Erfahre mehr \u00fcber bew\u00e4hrte Verfahren im Webdesign.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/best-practices-fur-webdesign.jpg","width":1460,"height":730,"caption":"Best Practices f\u00fcr Webdesign"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/best-practices-fur-webdesign\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Website-Branding","item":"https:\/\/kinsta.com\/de\/thema\/website-branding\/"},{"@type":"ListItem","position":3,"name":"Best Practices f\u00fcr dein n\u00e4chstes Webdesign-Projekt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89","name":"Maddy Osman","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","caption":"Maddy Osman"},"description":"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.","sameAs":["http:\/\/www.the-blogsmith.com","https:\/\/x.com\/maddyosman"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/maddy\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=32877"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32877\/revisions"}],"predecessor-version":[{"id":53254,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32877\/revisions\/53254"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32877\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/32899"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=32877"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=32877"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=32877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}