In diesem Blogbeitrag möchte ich auf die Grundlagen von Webseiten eingehen, damit du mitreden kannst – auch falls du eine Seite von einem Profi gestalten lässt – was ich dir ohnehin empfehlen würde. Solltest du aber Ambitionen haben, die Webseite selbst zu basteln, ist das natürlich auch keine Hexerei! Auf einige Dinge solltest du aber jedenfalls achten, da sich die BesucherInnen deiner Seite innerhalb von Sekunden entscheiden, ob sie auf der Seite bleiben oder diese sofort wieder verlassen.
Der wichtigste Faktor – und Ärgernis Nummer 1 – ist (noch immer) die Ladezeit. Wenn es länger als drei Sekunden dauert, bis die Seite aufgebaut ist, springen die User ab. Das Schnelle Laden einer Seite ist insbesondere auch dann wichtig, wenn mit dem Smartphone auf die Seite zugegriffen wird und man vielleicht auch noch das Highspeed-Datenvolumen gegen Ende des Monats bereits aufgebraucht hat. Um die Ladezeit deiner Website zu optimieren, solltest du jedenfalls einen schnellen Server nutzen, das Browser-Cashing verwenden sowie Bilder und Grafiken immer weboptimiert speichern.
Content is King, das ist klar! Aber selbst eine inhaltlich noch so hochwertige Webseite kann durch schlechtes Webdesign Besucher sofort wieder vertreiben. Sämtliche Informationen sollten logisch (Anordnung der Bedienelemente) aufgebaut und für die jeweilige Zielgruppe aufbereitet sein. Eine erfolgreiche Webseite muss sowohl gut gestaltet sein (visuell und funktional) sowie die technischen Anforderungen erfüllen (kurze Ladezeit, Verfügbarkeit in verschiedenen Browsern und auf unterschiedlichen Endgeräten, Barrierefreiheit). Nachfolgend findest du einige Tipps, die du beim Aufbau deiner Website beachten solltest:
Das Grundgerüst – HTML und CSS
Das Grundgerüst einer Website besteht aus HTML- und CSS-Code, der für den Aufbau/Inhalt bzw. das Styling/Layout der Seite verantwortlich ist. Es ist wichtig, dass der Code semantisch fehlerfrei aufgebaut ist. Semantisch bedeutet, dass das HTML-Dokument logisch aufgebaut sein muss und z.B. Überschriften mit dem Tag <h1>, <h2>, etc. gekennzeichnet sind. Damit eine Seite nach den Validatoren des W3C (World Wide Web Consortium: Gremium zur Standardisierung der Techniken im World Wide Web) als valide gilt, müssen deren vorgegebenen Standards eingehalten werden. Hier kannst du online überprüfen, ob eine Website korrekt programmiert wurde. Besonders wichtig ist die Struktur einer Webseite, damit die verschiedenen Browser den Code richtig interpretieren können. Auch wenn es um den Einsatz von z.B. Screenreadern geht ist eine valide Struktur essentiell, da sonst die Inhalte nicht korrekt interpretiert werden können.
Während früher Webseiten in Tabellen erstellt wurden, greift man inzwischen auf das CSS-Box-Modell zurück, dessen vorrangiger Sinn es ist, Inhalt (HTML) und Layout (CSS) zu trennen. Das hat zum einen den Vorteil, dass man den Code einfacher editieren kann, zum anderen wird die Website schneller geladen, da die CSS-Datei im HTML-Header aufgerufen und aus dem Cache geladen wird, sobald man eine zweite Seite anklickt.
Ich möchte hier aber nicht genauer auf den technischen Aufbau einer Website eingehen (mache ich vielleicht noch in einem anderen Blog-Artikel ;)), da ich in diesem Fall davon ausgehe, dass du deine Website mit Hilfe eines Online-Tools wie WordPress oder Joomla, etc. erstellst, so wie ich das auch tue. Aus meiner Sicht hat dies den großen Vorteil, dass man sich nicht um den Programmcode kümmern muss, der u.a. aufgrund der in den letzten Jahren gestiegenen Vielzahl an mobilen Endgeräten immer umfangreicher geworden ist. Verwendet man für die Website z.B. WordPress, ist die Seite mit dem richtigen Theme ohne weiteren Programmieraufwand responsive – das heißt, sie wird auf allen gängigen (mobilen) Endgeräten schön, korrekt und benutzerfreundlich dargestellt. Das ist auch essentiell heutzutage, da fast mehr als die Hälfte aller Suchanfragen bei Google auf mobilen Endgeräten getätigt werden. Ob Grafiken und Texte auch mobil korrekt und bildschirmfüllend dargestellt werden – sowohl im Portrait- oder Landscape-Modus (Smartphone hochkant oder quer gehalten) – solltest du aber auch bei fertigen Responsive-Themes testen.
Der erste Eindruck
Natürlich sollte der Inhalt auf deiner Webseite die größte Rolle spielen, aber den ersten Eindruck macht die Optik. Das Design kommuniziert die Identität eines Projekts oder Unternehmens und es transportiert das (gewünschte) Image. Aus diesem Grund ist es sehr wichtig, dass das verwendete Layout und die Designelemente dem Vorhaben und der Zielgruppe entsprechen, einen professionellen Eindruck machen und sich durch die ganze Website (inkl. aller Unterseiten) ziehen.
Farben und Kontrast
Informationen werden von uns am besten verarbeitet, wenn sie mit Emotionen verbunden sind. Das erreicht man am Schnellsten durch den Einsatz von Farben oder Bildern. Aber auch diese sollten unbedingt auf das Unternehmen oder das Projekt abgestimmt sein. Selbstverständlich ist der Einsatz von verschiedenen Farben auf deiner Website Geschmacksache, aber es gibt trotzdem einige Regeln die du beachten solltest. Insbesondere der Kontrast bzw. das Verhältnis von Vorder- und Hintergrund sollte im Fokus stehen. Optimal lesbar ist wie auch in der analogen Welt schwarzer Text auf weißem Hintergrund. Bei weniger Text kann man selbstverständlich auch andere Farben verwenden, aber die Schriftfarbe sollte sich jedenfalls gut vom Hintergrund abheben. Wenn du mit WordPress-Themes arbeitest, sind Farbschemen ohnehin vorgegeben, solltest du aber andere Farben wünschen, kann ich das Adobe Color Wheel empfehlen. Hierbei handelt es sich um ein Online-Tool, das passende Farben zu einer angegebenen Farbe sucht bzw. Vorschläge für Farbkombinationen macht.
Usability / Struktur
Design bezieht sich nicht nur auf die Farben und Bilder deiner Website – es geht des Weiteren darum, dass erkennbare und klare Strukturen geschaffen werden, damit die BesucherInnen nicht lange nach den gewünschten Inhalten suchen müssen. Die mühsame Suche nach z.B. den Kontaktdaten ist nach einer zu langen Ladezeit der Seite das zweitgrößte Ärgernis deiner BesucherInnen – du kennst das mit Sicherheit auch! Deshalb solltest du dafür sorgen, dass die Inhalte und auch Ansprechpartner so schnell und einfach wie möglich gefunden werden können.
Die benutzerfreundliche Darstellung einer Website sollte an oberster Stelle stehen, um die Inhalte so gut wie möglich vermitteln zu können. Eine klare Seitenstruktur ist nötig, damit sich deine BesucherInnen auf deiner Seite zurechtfinden. Informationen können besser verarbeitet werden, wenn sie eine bekannte Struktur aufweisen. Die Navigation befindet sich z.B. meistens oben oder links auf einer Website. Buttons und Links sollten ebenfalls schnell als solche erkennbar sein.
Webseiten sowie Bücher oder Zeitungen werden laut Eye-Tracking-Studien immer nach dem gleichen „Schema-F“ gelesen. Wir beginnen in der linken oberen Ecke, bewegen uns horizontal in die rechte obere Ecke und schwenken dann nach links, wo wir unsere Augen schließlich wieder nach rechts bewegen.
Deshalb solltest du folgendes beachten:
– Navigation, Logos und besonders wichtige Inhalte am oberen Bildschirmrand platzieren
– Aussagekräftige Überschriften / Titel sowie markante Keywords (Schlagworte) verwenden, um Aufmerksamkeit zu wecken
– Zusammenfassungen und wichtige Aussagen an den Beginn von längeren Texten stellen
– Inhalten logische aufteilen, was zu einer besseren Lesbarkeit führt
Informationen auf Webseiten sollten stark gefiltert werden – wenn man z.B. den Inhalt einer Unternehmenspräsentation auf eine Website überträgt sollte man diesen drastisch kürzen, um durch Abstraktion der geringen Aufnahmefähigkeit der BesucherInnen entgegenzuwirken. Es wird geschätzt, dass online nur etwa ein Viertel des Textes gelesen wird – die Inhalte am Bildschirm werden häufig nur überflogen und nicht komplett gelesen, deshalb sollte man auf möglichst kurze Texte und eine gute Strukturierung achten.
Typografie
Der Hauptteil der Informationen auf einer Website besteht aus Text – deshalb solltest du Wert darauf legen, dass dieser deine Seitenbesucher zum Lesen einlädt. Insbesondere für längere Texte sollte eine Schrift gewählt werden, die gut lesbar ist. Achte darauf, dass die Schriftgröße nicht kleiner als 14 Pixel ist und der Zeilenabstand groß genug ist, damit der Text besser lesbar ist. Für Überschriften kannst du natürlich auch eine etwas künstlerische Schrift verwenden. Hier ist aber zu beachten, dass man TTF-Fonts, die zu tausenden von diversen Seiten runtergeladen werden können, zwar verwendet könnte, aber die BesucherInnen der Website bei Besuch ebendieser aufgefordert werden würden, diese zu installieren, sobald diese nicht auf dem Rechner installiert ist. Ich rate daher zur Verwendung von Standard-Systemschriften wie Arial, Helvetica, etc. oder zur Verwendung von google Fonts. Hier verlängert sich zwar die Seitenladedauer ein wenig, aber wenn diese nur für Headlines verwendet werden ist dieser Nachteil vernachlässigbar.
Solltest du Fragen, Wünsche, Anregungen zu diesem Artikel haben, freue ich mich sehr über einen Kommentar und/oder Feedback von dir!
Liebe Grüße,
grafikarin
PS: Melde dich hier zu meinem Newsletter an, damit du immer auf dem Laufenden bleibst sobald es etwas Neues gibt.
Neueste Kommentare