In diesem Blogbeitrag gehen wir auf die Grundlagen von Websites und Website-Design ein, damit Sie einen Überblick über die wichtigsten Definitionen haben. Denn auch, wenn Sie Ihre Seite von einem Profi gestalten lassen schadet es nicht, die Grundbegriffe zu kennen und zu wissen, welche Punkte Sie beim Aufbau und Design Ihrer Webseite im Blick behalten sollten.
Ladezeit
Der wichtigste Faktor in Bezug auf Websites 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. Da inzwischen mehr als die Hälfte der User die Webseiten mit einem mobilen Endgerät besuchen, ist das schnelle Laden auch heutzutage noch essenziell. Wenn mit dem Smartphone auf die Seite zugegriffen wird und vielleicht auch noch das Highspeed-Datenvolumen gegen Ende des Monats bereits aufgebraucht ist, stellt eine langsame Seite den Hauptgrund dar, warum Ihre Besucher die Seite gleich wieder verlassen. Aber was können Sie dagegen tun? Um die Ladezeit einer Website zu optimieren, sollten Sie jedenfalls einen schnellen Server nutzen und das Browser-Caching verwenden. Bilder und Grafiken sollten immer web optimiert und so klein wie möglich gespeichert werden.
Der erste Eindruck – Design
Natürlich sollte der Inhalt auf einer 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. Hier lautet die dringende Empfehlung, sich initial an einen erfahrenen Designer zu wenden, um mit einer passenden Corporate Identity die Unternehmenswerte gut zu transportieren.
Content is King, das ist klar! Aber selbst eine inhaltlich noch so hochwertige Website kann durch schlechtes Design die Besucher sofort wieder vertreiben. Sämtliche Informationen sollten logisch (z.B. übliche Anordnung der Bedienelemente) aufgebaut und für die jeweilige Zielgruppe aufbereitet sein. Eine erfolgreiche Website muss visuell und funktional gut gestaltet sein sowie die technischen Anforderungen erfüllen. Die Verfügbarkeit sollte in verschiedenen Browsern und auf unterschiedlichen Endgeräten gegeben und auch getestet sein. Weiteres sollte Augenmerk auf die Barrierefreiheit der Seite gelegt werden. Wenn Sie mit einer Agentur zusammenarbeiten, sollten Sie diese Dinge jedenfalls vor der Erstellung festlegen und kontrollieren, ob die Webseite nach diesen Vorgaben umgesetzt wurde.
Das Grundgerüst – HTML und CSS
Während früher Websites in Tabellen erstellt wurden, greift man seit einigen Jahren 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.
Das Grundgerüst einer Website besteht also aus HTML- und CSS-Code. HTML (Hypertext Markup Language) ist für den Aufbau bzw. den Inhalt verantwortlich und das CSS (Cascading Style Sheet) beinhaltet das Styling, also das Layout der Website. Es ist besonders wichtig, dass der Code semantisch fehlerfrei – also logisch korrekt – aufgebaut ist. Semantisch bedeutet, dass etwa Überschriften mit dem Tag <h1>, <h2> etc. gekennzeichnet sein müssen.
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 können Sie online überprüfen, ob eine Website korrekt programmiert wurde. Besonders wichtig ist die Struktur einer Webseite, damit die verschiedenen Browser und Endgeräte den Code richtig interpretieren können. Auch wenn es um den Einsatz von Screenreadern geht, ist eine valide Struktur essentiell, da sonst die Inhalte nicht korrekt ausgegeben werden können.
Hilfreiche Tools
Wir möchten in diesem Beitrag nicht tiefer in den technischen Aufbau einer Website eintauchen, da Websites heutzutage ohnehin häufiger mit Hilfe von Online-Tools wie WordPress, Joomla oder anderer Software erstellt werden. Das hat den großen Vorteil, dass man sich nicht um den Programmcode kümmern muss. Das ist eine große Hilfe, da dieser unter anderem 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 (einer Vorlage) ohne weiteren Programmieraufwand responsive – das heißt, sie wird auf allen gängigen (mobilen) Endgeräten schön, korrekt und benutzerfreundlich dargestellt. Das ist heutzutage essentiell, da inzwischen 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) – sollte aber auch bei fertigen Responsive-Themes vor Veröffentlichung der Webseite getestet werden.
Farben und Kontrast
Informationen werden von uns Menschen 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 einer Website subjektiv und Geschmacksache, aber es gibt trotzdem einige Regeln, die beachtet werden sollten. 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 und Headlines kann man selbstverständlich auch andere Farben verwenden, aber die Schriftfarbe sollte sich jedenfalls gut vom Hintergrund abheben.
Usability / Struktur
Design bezieht sich nicht nur auf die Farben und Bilder einer Website – es geht des Weiteren darum, dass erkennbare und klare Strukturen geschaffen werden, damit die Besucher nicht lange nach den gewünschten Inhalten suchen müssen. Die mühsame Suche nach den Kontaktdaten ist nach einer zu langen Ladezeit der Seite das zweitgrößte Ärgernis der User. Deshalb sollte dafür Sorge getragen werden, dass die Inhalte und 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 Besucher auf einer Seite zurechtfinden. Zudem können Informationen besser verarbeitet werden, wenn sie eine bekannte Struktur aufweisen. Die Navigation befindet sich etwa meistens oben und/oder oder links oder rechts auf einer Website und mit einem Klick auf das Logo ist man gewohnt, dass man wieder auf die Startseite zurückkehren kann. 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 sollte folgendes beachtet werden:
Wertvolle Gestaltungs-Tipps in Kürze
- 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
- Inhalte logisch aufteilen, was zu einer besseren Lesbarkeit führt
Sie planen ein Webprojekt und/oder benötigen Hilfe bei der Planung, Erstellung oder Optimierung Ihrer Webseite? Schreiben Sie uns – wir unterstützen Sie gerne! hello@projektmanege.com
Neueste Kommentare