Ein Webdesign Standard hilft eine moderne, funktionale und nutzerfreundliche Website zu erstellen. Ein Trend kann diese optimieren oder das Gegenteil bewirken.
Lesezeit: ca. 26 Minuten
INHALT
- Was ist ein Webdesign Standard?
- Was ist ein Webdesign Trend?
- Ist Barrierefreiheit heute ein Standard?
- Welcher Standard gilt für die Navigation?
- Sind Seitenleisten noch zeitgemäß?
- Gibt einen Standard für Bilder?
- Sind Animationen ein Trend oder schon Standard?
- Liegt der Dark Mode im Trend?
- Webdesign Standard oder Trend – Fazit
Was ist ein Webdesign Standard?
Ein Standard ist eine Richtlinien, nach der beispielsweise eine Website technisch aufgebaut werden sollte. Webdesign Standards beziehen sich somit auf die einer Website zugrundeliegende Programmierung.
„Sie sorgen dafür, dass Webseiten in verschiedenen Browsern und auf unterschiedlichen Geräten korrekt angezeigt werden. Diese Standards werden von Organisationen wie dem World Wide Web Consortium (W3C) entwickelt.“
Quelle: › WEBDESIGNRATGEBER
Die drei Säulen sind HTML als Auszeichungssprache, CSS für das Design und Layout sowie JavaScript für reaktive Elemente wie Buttons oder » Animationen. Ein entsprechend sauberer Code spielt zudem eine wichtige Rolle bei der Optimierung für Suchmaschinen (SEO) und die Ladezeit. Darüber hinaus sollten selbstverständlich alle Websites verschlüsselt sein.
Die Einhaltung dieser Richtlinien ist für die Funktion und Aufrufbarkeit von Websites absolut notwendig und bietet aktuell keinen Raum für Experimente.
Gibt es auch Standards für die Gestaltung?
Ja. Abgesehen von den technischen Webdesign Standards, gibt es weitere, die das Layout und die Struktur einer Website betreffen. Zwar sind dies keine „festgeschriebenen“ Regeln, sie haben sich aber aus Gründen der SEO sowie der Nutzungsgewohnheiten und der Erwartung der Website-Besucher allgemein etabliert.
In erster Linie gehören dazu die Gliederung einer Seite in drei Hauptbereiche (Header, Inhalt und Footer), die Positon der Menüs, die Struktur des eigentlichen Inhalts sowie die Barrierefreiheit. Obwohl strenggenommen eher technisch, zählt dazu auch das responsive Design für kleinere Bildschirme.
Im Gegensatz zu Veränderungen an einem technischen Webdesign Standard macht eine Modifizierung der Gestaltung die Website nicht gleich unbrauchbar. Deshalb kannst du relativ gefahrlos Neues auszuprobieren und damit vielleicht sogar einen neue Webdesign Trend initiieren.
Was ist ein Webdesign Trend?
Hierbei handelt es sich um eine kreative Idee, die überwiegend das Erscheinungsbild einzelner Telbereiche einer Website verändert. Dies kann sowohl das reine Aussehen als auch die Funktionsweise betreffen.
„Webdesign-Trends prägen die Gestaltung von Websites maßgeblich. Sie beeinflussen Layout, Nutzererfahrung und ästhetische Ansprüche. Die Definition von Webdesign-Trends umfasst viele Aspekte, die die Entwicklung von Websites formen. […] Elemente wie Benutzeroberfläche (UI) und Benutzererfahrung (UX). Diese Begriffe sorgen dafür, dass Websites ansprechend und funktional sind. Kriterien wie Benutzerfreundlichkeit, Zugänglichkeit und Leistung sind unerlässlich.“
Quelle: › Toolmaster
Dementsprechend haben die aktuellen Gestaltungs-Standards im Prinzip auch einmal als Trend begonnen. Da jedoch mancher aktuelle Trend sehr experimentell ist, folgen ihm oft nur wenige, spezielle Websites wie beispielsweise solche von Künstlern oder Webdesignern. Nicht alle Trends haben das Potenzial, sich zu einem Webdesign Standard zu entwickeln.
Gründe dafür sind einerseits, dass Menschen „Gewohnheitstiere“ sind und sich schwer tun, größere Veränderungen zu akzeptieren. Andererseits wirken sich einige Trends nicht nur auf die Nutzerfreundlichkeit negativ aus, sondern auch auf die » Performance einer Website.
Verbessern Trends eine Website immer?
Nicht unbedingt. Wenn du beim Erstellen deiner Website die oben beschriebenen Standards für Webdesign und Gestaltung umsetzt, erhältst du eine Website, die technisch funktioniert und ein modernes Erscheinungsbild hat. Folgst du zusätzlich noch dem einen oder anderen Webdesign Trend, wirkt sie vielleicht in deinen Augen noch moderner. Das bedeutet aber nicht, dass sie insgesamt auch tatsächlich besser geworden wäre.
Welche Standards und Trends haben Zukunft?
Wie bereits erwähnt, sind die heutigen Gestaltungs-Standards nicht in Stein gemeißelt, sondern könn(t)en sich verändern. So gibt es Elemente, die nicht nur aufgrund der technischen Weiterentwicklung unter Umständen nicht mehr zeitgemäß sind. Deshalb haben manche Webdesign Trends durchaus das Potenzial, zu einem neuen Standard zu werden.
Im Folgenden stelle ich einige Trends den Standards gegenüber und erläutere aus Sicht einer Webdesignerin und Internet-Nutzerin,
- wo sie sinnvoll eingesetzt werden können,
- welche Vor- und Nachteile mit ihnen verbunden sind,
- bei welchen es sich nur um eine Spielerei handelt
- und wie deren Zukunftsaussichten sind.
Die auf einigen Abbildungen gezeigten Ausschnitte von Websites dienen nur der Veranschaulichung. Die jeweils im Text gemachten Anmerkungen sollen weder die Website als Ganzes, noch deren Inhalt und Angebot bewerten.
Ist die Barrierefreiheit heute ein Webdesign Standard?
Barrierefreiheit ist inzwischen zu einem sehr wichtigen Standard geworden. Zwar sollte es eigentlich selbstverständlich sein, dass eine Website auch von Menschen mit körperlichen Einschränkungen genutzt werden kann, ist es aber bis heute leider nicht. Einerseits gibt es für die Barrierefreiheit technische Anforderung wie
- vollständige Bedienbarkeit per Tastatur – nicht nur mit der Maus,
- semantisches HTML,
- Zoombarkeit sowie
- Nutzbarkeit auf allen Geräten und mit allen Browsern.
Andererseits muss auch die Gestaltung der Websites entsprechend angepasst sein:
- Ausreichende Farbkontraste zwischen Text und Hintergrund,
- keine Informationen allein über Farbe transportieren,
- saubere Überschriften-Struktur, leicht verständliche Texte,
- aussagekräftige Alternativtexte für Bilder,
- Untertitel bei Videos, Transkripte bei Audio sowie
- klar beschriftete Formularfelder und verständliche Fehlermeldungen.
Quellen: › Webmaster Studios – › Gründerplattform
Quellen: › Dezeen – › Mama Papa Ich
Woran mangelt es am häufigsten?
Am Kontrast. Nicht nur ältere, ungepflegte Websites weisen Mängel bei der Barrierefreiheit auf, wie die Beispiele in Abbildung 1 zeigen. Bei beiden ist der Kontrast zum Hintergrund nicht ausreichend. Außerdem sind im oberen Beispiel Links nur an der, zudem sehr blassen Farbe zu erkennen. Beim Beispiel unten kannst du sowohl die Buttons selbst als auch deren Beschriftung nur erahnen.
Einerseits ist dieses Problem vor allem auf „femininen“ Websites zu beobachten, da diese sehr häufig auf Pastelltöne und einen weißen Hintergrund setzen. Andererseits spielt auch das Corporate Design eine Rolle, da sich die für das Branding verwendeten Farben natürlich nicht an der Eignung für eine Website orientieren. Sie können folglich nicht eins-zu-eins übernommen werden beziehungsweise müssen auf der Website, je nach Hintergrund, um einige Nuancen heller / dunkler eingesetzt werden.
Leider wird die Barrierefreiheit auch auf innovativ gestalteten Websites selten berücksichtigt, sondern nur auf ein kreatives Design geachtet. Beispiele dafür siehst du auf Abbildung 2. Links oben sind die Menüpunkte fast nicht lesbar und rechts ist ebenfalls der Kontrast zwischen Schriftfarbe und Hintergrund grenzwertig.
Derzeit sind laut Gesetz (noch) private, nicht gewerbliche Hobby-Websites, solche von Kleinstunternehmen und solche mit reinen B2B-Angeboten von der Verpflichtung zur Barrierefreiheit ausgenommen. Das bedeutet aber nicht, dass sie nicht trotzdem, aus Rücksicht auf alle Besuchergruppen, barrierefrei gestaltet werden sollten.
Welcher Standard gilt für die Navigation?
Für eine Website sind zwei Navigationsmenüs Standard: Das Hauptmenü am Kopf der Seiten und ein Menü im Footer. Diese sollen es dem Nutzer ermöglichen, sich auf der Website zurechtzufinden. Bei älteren Websites findet die Navigation häufig über ein Menü in der Seitenleiste statt – mehr dazu unter » Seitenleisten. Das Footer-Menü bietet vor allem Links zu rechtlich vorgeschriebenen oder sonstigen allgemeinen Informationsseiten an. Zu diesen gehören
- das Impressum,
- die Datenschutz- und ggf. Barrierefreiheitserklärung,
- Kontakt, Hilfe und Support,
- AGB oder Nutzungsbedingungen sowie
- weitere unternehmensbezogene Info-Seiten.
Bisher sind mir keine Bestrebungen bekannt, an diesem Footer-Element etwas zu ändern. Anders sieht es beim Hauptmenü aus, das Links zu website-spezifischen Inhalten enthält. Als Standard anerkannt und nach wie vor am weitesten verbreitet ist die Darstellung als eigene Zeile am Kopf der Seiten:
- Auf Desktops über die gesamte Breite oder die des Textes: Wichtige Menüpunkte in einer Reihe nebeneinander, deren Unterpunkte jeweils in einem ausklappbaren Menü.
- Auf kleineren Bildschirmen: Ein Symbol für das Hamburger-Menü (drei Linien untereinander) links, rechts oder mittig in der Kopfleiste der Seiten; ein Klick öffnet eine Hauptmenü-Seite, die sich dann über die angezeigte Webseite legt.
Bei sehr umfangreichen Websites ist eine gelegentlich verwendete Variante, dass ein Klick auf einen Haupt-Menüpunkt nicht nur eine einfache Liste der Unterpunkte öffnet. Stattdessen erscheint ein Megamenü, in dem die Unterpunkte in mehreren Spalten nebeneinander dargestellt sind.
Zwar ist es kein Webdesign Standard, aber in den letzten Jahren üblich geworden, dass die Zeile mit dem Hauptmenü auch nach dem Scrollen erreichbar bleibt. Aus Sicht der Nutzer ist dies sinnvoll, um schnell zwischen einzelnen Seiten wechseln zu können. Ob die Menüleiste dauerhaft angeheftet bleibt oder durch eine leichte Bewegung auf dem Bildschirm bei Bedarf erneut erscheint, ist eine individuelle Entscheidung des Designers.
Hat eine innovative Navigation eine Chance?
Die Chance, dass eine neue Darstellungsweise für die Navigation zum Webdesign Standard wird, ist eher gering. Da Menüs eines der essenziellen Elemente jeder Website sind, sollten sie möglichst intuitiv nutzbar sein. Besucher einer Website sollten sich schnell und unkompliziert über die Inhalte einer Website informieren können. Dazu gehört, dass sie nicht nach Menüs suchen müssen, sondern direkt wissen, wo sie sich befinden und wie sie funktionieren.
Dennoch gibt es natürlich immer wieder neue Ansätze. Einer davon ist, generell nur Hamburger-Menüs zu verwenden – manchmal sogar zusätzlich zum Standard-Hauptmenü. Zwar ist es nicht mehr so ungewöhnlich, das Hauptmenü auch auf Desktops hinter dem Hamburger-Symbol zu verbergen, dennoch verwirrt es viele Besucher. Sie erwarten zumindest auf größeren Bildschirmen eine schnelle Übersicht ohne einen zusätzlichen Klick. Beide Darstellungsweisen parallel einzusetzen, macht es noch unübersichtlicher. Davon ist folglich abzuraten.
Ein weiterer Trend ist, nicht das Hamburger-Symbol, sondern einen Button mit Beschriftung oder einem beliebigen Symbol in die Menüleiste zu integrieren. Das Hauptmenü erscheint ebenfalls erst nach einem Klick auf diese Schaltfläche. Auch diese Darstellungsweisen mögen zwar modern wirken, sind jedoch nicht sehr nutzerfreundlich.
Noch mehr an einem innovativen Design und weniger an der Nutzerfreundlichkeit orientiert sind Menüs, die als Text oder Symbole über das Header-Bild gelegt und oft noch animiert sind. Derart eingefügte Menüs verschwinden aus dem Sichtfeld, sobald du weiter scrollst und zum Wechseln der Seite bedeutet das immer „Zurück nach oben“.
Selbst Websites, die gar kein Menü anzeigen, sind zwar die große Ausnahme, aber sie existieren. Wenn du dich dort über einen bestimmtes Thema informieren möchtest, musst du durch die gesamte Seite scrollen, ohne zu wissen, ob und wo du das findest, wonach du suchst. Alternativ werden dir Pfeile angezeigt, die jedoch keine Beschriftung haben, wodurch Suchmaschinen / die KI sie nicht interpretieren können. Beim Beispiel auf Abb. 2 rechts baut sich zudem der Text erst langsam auf, verschwindet wieder und ein neuer Text erscheint.
Noch verwirrender ist es, wenn sich der Cursor in einen Ring oder Punkt verwandelt. Aufgrund der, wenn zum Teil auch nur minimalen, Reaktionsverzögerung wird ein genaues Klicken deutlich erschwert (siehe Abb. 2 unten, links unterhalb des Textes).
Quellen: › Josselin – › ILAB Solutions – › Erik Zuuring
Ein weiterer Nachteil dieser kreativen Websites ist, dass sie durchweg sehr lange Ladezeiten haben, die nicht nur auf die Größe des Header-Bilds, sondern oft auf die darin eingebundenen Animationen zurückzuführen sind. Alle diese zuletzt genannten Ansätze werden sich wohl kaum zu Standards entwickeln, sondern Exoten bleiben.
Welche Vor- oder Nachteile hat Infinite Scrolling?
Websites mit innovativer Navigation setzen häufig auch Infinite Scrolling ein. Dieses erfolgt entweder manuell durch das Weiterbewegen der Inhalte per Cursor oder Wischen oder mittels eines Klicks auf Pfeile unterhalb einzelner Seiten-Abschnitte.
„Infinite Scrolling, zu Deutsch „endloses Scrollen“, ist eine Website– und App-Navigationstechnik, bei der der Nutzer unendlich durch Inhalte scrollen kann, ohne auf verschiedene Seiten oder Bildschirme wechseln zu müssen. Dadurch wird ein nahtloses und unterbrechungsfreies Erkunden von Inhalten ermöglicht.“
Quelle: › KONEX Marketing
Im Prinzip ist das endlose Scrollen keine neue Idee. So bedienen sich vor allem soziale Medien schon seit langem dieser Funktion, bei der mit jeder Scroll-Bewegung automatisch weitere Inhalte nachgeladen werden. Auch bei Shops, Nachrichten-Portalen und für Blog-Archive wird diese Technik manchmal eingesetzt. Die Betreiber der Websites erhoffen sich dadurch, dass die Besucher länger auf der Website bleiben und mehr Inhalte sehen. Einen Mehrwert gegenüber dem Erstellen mehrerer Seiten mit wenig Inhalt kann das bei kleineren Websites, den sogenannten One-Pagern, bieten.
Allerdings gibt es auch Nachteile. Einerseits erspart es den Nutzern mobiler Geräte das Klicken auf kleine Schaltflächen. Andererseits kann das Infinite Scrolling dort auch ermüdend sein. Denn aufgrund des schmaleren Bildschirms passen nur wenige Wörter in eine Zeile und die Anzahl der Zeilen pro Abschnitt ist deutlich höher als auf Desktops. Das endlose Scrollen, dass natürlich irgendwann zum Seitenende führt, wird als ewiges Scrollen ohne sichtbares Ende empfunden.
Wesentlich gravierende Nachteile sind
- schwierige Orientierung aufgrund einer fehlenden Seiten- und Menüstruktur,
- Probleme für Suchmaschinen, da nicht alle Inhalte indiziert werden
- sowie eine längere Ladezeit, weil alle Inhalte auf einmal geladen werden müssen.
Infinite Scrolling kann auf Informations-Websites sinnvoll sein, …
wenn du eine kleine Website mit wenig Inhalt aus einem Themenbereich betreibst. Des Weiteren käme es noch für nicht allzu umfangreiche Blog-Archive in Betracht. Ansonsten überwiegen eher die Nachteile.
Sind Seitenleisten noch zeitgemäß?
Seitenleisten waren lange Zeit ein Webdesign Standard. Seit das responsive Design zum Webdesign Standard wurde, ist diese Lösung nicht mehr optimal. Der Grund liegt darin, dass Seitenleisten auf kleineren Bildschirmen normalerweise erst nach dem Inhalt einer Seite angezeigt werden. Unter anderem diente die linke Seitenleiste oft zur Darstellung des Hauptmenüs. Dieses ist heute auf Smartphones folglich erst zugänglich, wenn du ganz nach unten gescrollt hast. Damit ist der eigentlich Zweck des Hauptmenüs, die schnelle Orientierung über die Website-Inhalte, verfehlt.
Zumindest Menüs in Seitenleisten sind ein Beispiel dafür, dass der Trend zu dessen Darstellung am Kopf der Seite einen alten Webdesign Standard abgelöst hat. Seitenleisten sind zwar noch nicht ganz verschwunden, sollten aber nicht mehr für essenzielle Informationen genutzt werden. Die Verwendung für eine Newsletter-Anmeldung, eine Liste der neuesten Beiträge und Kommentare, Werbeanzeigen oder Ähnliches wäre akzeptabel. In diesen Fällen würde trotz des Verschiebens an das Seitenende noch der Zweck ihres Inhalts erfüllt.
Nicht zuletzt benötigen Seitenleisten natürlich auch Platz. Das führt dazu, dass der Textbereich, insbesondere bei der Verwendung von zwei Seitenleisten, sehr schmal ausfällt und Abbildungen ebenfalls entsprechend verkleinert angezeigt werden.
Lösungsansätze dafür, dass das der Inhalt der Seitenleisten auch auf kleinen Bildschirmen am Anfang der Seiten erscheint, gibt es. Allerdings ist dafür eine aufwendigere Programmierung notwendig, die die meisten Themes und Design-Vorlagen nicht mitbringen. Insbesondere auf „selbsterstellten“ oder preiswerten Websites wird das wohl in absehbarer Zeit kein Standard werden.
Gibt es einen Standard für Bilder?
Im Prinzip ja, zumindest was die Vorbereitung von Bildern und Grafiken betrifft gibt es Regeln. Diese können als Webdesign Standard angesehen werden, da deren Einhaltung insbesondere für die Ladezeit und SEO von großer Bedeutung ist:
- Eine gute Bildqualität,
- an die Breite der Website / die gewünschte Darstellungsgröße angepasste Bildmaße,
- eine ausreichende Komprimierung,
- beschreibende Alternativ-Texte sowie
- eine automatische Anpassung an unterschiedliche Bildschirmgrößen.
In Deutschland muss außerdem noch der Urheber (Fotograf, Grafiker) direkt beim Bild angegeben werden.
Wohin geht der Trend bei Abbildungen?
Ein Trend ist die Verwendung großformatiger Abbildungen, die zumindest für Header- und Beitragsbilder fast schon Standard sind. Allerdings bedeutet je größer nicht unbedingt desto besser. Spätestens wenn selbst die Größe eines Desktop-Bildschirms nicht mehr ausreicht, um das komplette Bild zu sehen, ist eine Grenze erreicht.
Darüber hinaus sollten Bilder Texte nicht komplett ersetzen, sondern diese ergänzen und zum Thema passen. Eine Ausnahme wären reine Kunst- oder Foto-Webseiten. Ob in den Textbereich integrierte Abbildungen die gesamte Breite des Textblocks ausnutzen oder nur die Hälfte / ein Drittel, hängt von deren Funktion ab. Minibildchen, wie sie noch auf älteren Websites zu sehen sind, gehören, sofern es sich nicht um Piktogramme, Icons oder Logos handelt, definitiv der Vergangenheit an.
Was die Herkunft der Abbildungen betrifft, sind Stockfotos von Online-Foto- oder Grafik-Portalen nach wie vor sehr beliebt. Sie haben den Vorteil, dass du dir normalerweise um deren Qualität wenig Sorgen machen musst, da sie für den Einsatz im Netz erstellt wurden. Darüber hinaus sind KI-generierte Abbildungen im Vormarsch. Allerdings haben beide auch Nachteile. Einerseits sind sie aufgrund ihres „Stils“ relativ leicht zu erkennen. Andererseits findest du immer wieder dieselben oder zumindest sehr ähnliche Stockfotos auf vielen Websites derselben Branche. Es mangelt ihnen somit nicht nur an Individualität, sondern sagt auch wenig über das betreffende Unternehmen aus.
Aus diesem Grund geht der Trend eher in Richtung authentischer Fotos. Sie sollten reale Szenen aus dem Unternehmen zeigen. Anstelle der eigenen Mitarbeiter wäre im Einzelfall der Einsatz von Models ein noch akzeptabler Kompromiss, wenn zumindest die Umgebung echt ist. Insbesondere Betreiber kleinerer Websites haben jedoch oft nicht das Budget, Fotos von Profis erstellen zu lassen oder selbst professionelle Foto zu machen. In diesen Fällen ist es unter Umständen besser, qualitativ hochwertigere Stockfotos oder KI-Bilder zu verwenden als laienhaft gemachte eigene Bilder und Grafiken.
Sind Slider noch im Trend?
Slider mit mehreren Bildern, von denen du zunächst nur das erste siehst und dann automatisch oder nach einem Klick das folgende erscheint, waren einmal im Trend. Zumindest waren viele Webdesigner der Ansicht, diese auf einer Website einbauen zu müssen. Inzwischen hat sich die Meinung dazu jedoch geändert, auch wenn Slider nicht endgültig verschwunden sind.
Die Intension zum Erstellen eines Sliders war, den Besuchern mehrere Aspekte eines Themas, Ansichten aus einem Unternehmen oder Produkte zu zeigen. Die Bilder sollten einerseits nicht zu klein sein, andererseits nicht zu viel Platz auf der Seite beanspruchen. Ein Slider schaffte die Möglichkeit, mehrere größere Bilder in einer Reihe so unterzubringen, dass diese nur den sichtbaren Platz für ein Bild einnahmen. Der Bildwechsel kann durch einen Klick ausgelöst werden oder nach einer zuvor festgelegten Anzeigedauer automatisch erfolgen.
Was an sich gut gedacht war, hat sich jedoch im Hinblick auf das Nutzerverhalten als wenig zielführend erwiesen. Online-Suche bedeutet für die meisten Menschen, möglichst schnell und unkompliziert an Informationen zu gelangen. Mehr als zwei Klicks sind oft schon zu viel. Dementsprechend nehmen sich die wenigsten Besucher einer Website die Zeit, auf zahlreiche Bilder zu klicken oder auf einen mehrfachen Bildwechsel zu warten. Zudem wirkt sich auch ein automatisierter Slider vor allem im Header auf die » Performance der Website aus.
Erstelle eine Galerie, …
wenn du anhand mehrerer Abbildungen einen Einblick in dein Unternehmen ermöglichen und so das Vertrauen potenzieller Kunden gewinnen möchtest. Dann wissen Interessenten auf einen Blick, was sie erwartet und müssen nicht erst selbst aktiv werden.
Wie aktuell ist der Parallax-Effekt?
Vor einigen Jahren gehörte die Verwendung eines Blocks mit Parallax-Effekt irgendwie dazu, sollte eine Website modern wirken. Ein Webdesign Standard war er jedoch nie. Ein Text wurde über einem Bild, dass die gesamte Breite der Seite einnahm, angezeigt. Beim Scrollen bewegte sich der Text entweder mit dem Bild oder das Bild blieb statisch und der Text glitt darüber hinweg. Gewissermaßen war das der Beginn der » Animationen auf Websites.
Inzwischen wird dieser Effekt auf neueren Websites deutlich seltener eingesetzt. Ein Grund dafür ist, dass es, wie bespielsweise auch bei den « Seitenleisten, zu Konflikten bei der Anpassung an kleinere Bildschirme kommt. Abhängig vom Gerät erscheint das Hintergrundbild einerseits unscharf oder verzerrt, andererseits bleiben sowohl das Bild als auch der Text oft statisch. Der eigentlich beabsichtigte Scroll-Effekt entfällt.
Nicht zuletzt ermöglicht der technische Fortschritt heute wesentlich mehr unterschiedliche und komplexere Animationsmethoden, so dass der „einfache“ Parallax-Effekt nicht mehr als besonders modern und kreativ angesehen wird.
Sind Animationen ein Trend oder schon Standard?
Grundsätzlich sind Animationen auf Websites kein Webdesign Standard – mit einer Einschränkung: Links und Buttons. Bei beiden hat sich eine Reaktion bei Berührung, meistens in Form eines Farbwechsels, inzwischen zu einem Webdesign Standard entwickelt. Alle anderen Animationen werden aber sicher kein allgemein gültiger Standard werden. In den meisten Fällen sind sie eher als – manchmal ganz nette – Spielerei ohne einen direkten Nutzen anzusehen.
Wenn sich fast alles, unter Umständen auch noch in unterschiedliche Richtungen bewegt sowie hinein oder heraus zoomt, entsteht Unruhe. Die Wahrnehmung der Inhalte, auf die es in erster Linie ankommt, wird deutlich erschwert. Besonders auffällig ist, dass ein Übermaß an Animationen vor allem auf Websites zu finden ist, die mit Page Buildern erstellt wurden. Offensichtlich meinen die Ersteller, dass alles was möglich ist, auch Standard und somit zu integrieren ist. Aber auch bei manchen Profis geht es wohl gefühlt eher darum, ihre Programmierkenntnisse vorzuführen, als sich am Zweck der Website und der Nutzerfreundlichkeit zu orientieren.
Animationen sollen Aufmerksamkeit erregen. Die diskrete Animation einer Überschrift oder eines Slogans auf der Startseite wären Beispiele dafür. Ebenso lockert das sanfte Animieren von Bildern zwischen Textblöcken eine Seite auf und ist deshalb akzeptabel. Am besten erstellst du für den Einsatz von Animationen ebenso ein Konzept wie für die Farbgestaltung:
- Animiere Bilder oder Hinweis-Symbole jeweils immer auf dieselbe Weise,
- aber keine Texte / Textblöcke mit wichtigen Informationen.
Wiederum geht auch die innovative Gestaltung mittels Animationen gleich welcher Art zulasten der » Performance. Ad absurdum wird der Einsatz von Animationen dann geführt, wenn sie die Ladezeit so sehr beeinträchtigen, dass wiederum eine weitere Animation eingesetzt wird, um die Besucher auf der Website zu halten. Die Darstellung des Ladefortschritts soll ihnen dann zeigen, dass dort noch etwas kommt und wann sie die Seite komplett sehen können.
Ein Zuviel wirkt eher störend als interessant
Eine Website dient primär der Vermittlung von Informationen und nicht der Selbstdarstellung derjenigen, die sie erstellt haben. Eine gewisse Ausnahme bilden Websites von Webdesignern und Webentwicklern, die damit natürlich ihre Leistungen darstellen wollen.
Wirken sich aktuelle Trends auf die Performance aus?
Ja, vor allem die Verwendung von Animationen jeglicher Art sowie sehr großer, nicht ausreichend angepasster Bilder wirken sich negativ auf die Performance einer Website aus. Schon allein deshalb werden viele der kreative Ideen und Trends kaum zum allgemeinen Webdesign Standard werden. Ablesbar ist diese negative Wirkung zunächst schon an der Gesamtbewertung der Website, den Core Web Vitals von Google. Ein grüner Kreis bedeutet „gut“, ein oranger „mäßig“.
Abbildung 3 zeigt die Gesamtbewertung von drei mit PageSpeed Insights von Google getesteten Websites. Beispiel 1 ist eine Website mit einem Slider am Kopf der Startseite, die Beispiele 2 und 3 sind Websites mit sehr großem Header-Bild und zahlreichen, unterschiedlichen Animationen auf der Startseite. Der Maximalwert läge bei 100. Eine gut gemachte Website sollte zumindest einen Wert über 90 erreichen. Bei den Tests lag die Leistung der beiden stark animierten Websites 2 und 3 auf mobilen Geräten nur zwischen 50 und 60, auf Desktops zwischen 70 und 80. Zwar war die Leistung der „Slider-Website 1“ mit knapp 70 (mobil) und 80 (Desktop) etwas besser, dennoch wurde sie unter Berücksichtigung aller Testparameter als „durchgefallen“ gekennzeichnet.
Diese Tests sollen nur zeigen, wie groß der Einfluss auf die Gesamtleistung ist und niemanden an den Pranger stellen. Deshalb nenne ich in diesem Fall keine Namen.
Wie sehen die Werte für Rendern und Ladezeit aus?
Noch deutlicher wird der negative Einfluss bei einem Blick auf die Einzelwerte für das Rendering und die Ladezeit.
„Rendering ist ein in der Webentwicklung verwendeter Prozess, der den Code einer Website in interaktive Seiten umwandelt, die Usern bei ihrem Besuch angezeigt werden. Der Begriff bezieht sich im Allgemeinen auf die Nutzung von HTML, CSS und JavaScript-Code.“Quelle: › seobility
Als Beispiele dienen wiederum die bereits oben verwendeten Websites (B1, B2 und B3). Gemessen wurden die Dauer für das Rendern des ersten Bildes (FCP) und des größten Blocks (LCP) sowie die Ladezeit (LZ) – jeweils in Sekunden. Zur Einordnung der erzielten Werte sind jeweils die Grenzwerte (G) von Google angegeben.
Mobile Geräte
| Parameter (G) | schnell (grün) | mäßig (rosé) | langsam (rot) |
|---|---|---|---|
| FCP | 0 – 1,8 | 1,8 – 3 | über 3 |
| LCP | 0 – 2,5 | 2,5 – 4 | über 4 |
| LZ | 0 – 3,4 | 3,4 – 5,8 | über 5,8 |
FCP – B1: 1,4
FCP – B2: 3,9
FCP – B3: 3,2
LCP – B1: 5,6
LCP – B2: 5,9
LCP – B3: 9,5
LZ – B1: 11,8
LZ – B2: 14,2
LZ – B3: 5,8
Desktop
| Parameter (G) | schnell (grün) | mäßig (rosé) | langsam (rot) |
|---|---|---|---|
| FCP | 0 – 0,9 | 0,9 – 1,6 | über 1,6 |
| LCP | 0 – 1,2 | 1,2 – 2,4 | über 2,4 |
| LZ | 0 – 1,3 | 1,3 – 2,3 | über 2,3 |
FCP – B1: 0,3
FCP – B2: 0,9
FCP – B3: 0,6
LCP – B1: 0,9
LCP – B2: 3,9
LCP – B3: 0,9
LZ – B1: 4,7
LZ – B2: 2,8
LZ – B3: 1,4
Besonders auffällig sind die schlechten Werte auf mobilen Geräten. Da heute der Anteil der Verwendung von Smartphones zum Aufrufen von Websites etwa genauso hoch ist wie der von Desktops, stellt sich ein übertriebener Einsatz von kreativem Design als wenig nutzerfreundlich heraus.
Liegt der Dark Mode im Trend?
Ja, zumindest bei Betriebssystemen, Apps und Programmen – bei Websites nur mit Einschränkungen. Dark Mode, auch Dunkelmodus, dunkler Modus oder Nachtmodus genannt, ist …
„[…] ein alternatives Farbschema für Benutzeroberflächen, das dunkle Hintergrundfarben mit heller Schrift kombiniert. Was als Nischenfeature begann, ist heute ein Standard, den Nutzer auf Websites und in Apps erwarten.“
Quelle: › PAKU media
Betriebssysteme sowie viele Apps und Programme sind heute von vorneherein so programmiert, dass der Nutzer mit einem Klick vom hellen zum dunklen Modus wechseln kann. Das gesamte Farbschema wird dadurch konsistent umgestellt. Der weiße Hintergrund wird dunkelgrau bis schwarz und der Text hell. Auch bei alle anderen verwendeten Farben erfolgt automatisch die Umstellung von einem dunklen zu einem helleren Ton derselben Farbe, um einen ausreichenden Kontrast zu gewährleisten.
Zwar gibt es auch bei Websites einen gewissen Trend in Richtung Dark Mode, jedoch ist die Option, selbst zwischen Hell und Dunkel zu wählen noch die Ausnahme. Websites mit dunklem Hintergrund und hellem Text sind überwiegend nur als dunkle Website konzipiert. Eine helle Variante existiert nicht, weshalb es sich um einen Dark Mode mit Einschränkung handelt.
Darüber hinaus gibt es noch einen weiteren Grund dafür, dass der Dark Mode bei Websites bisher ein Trend aber noch kein Standard ist. Dieser bezieht sich auf die Art der Website. Was bei Informations-Websites (Nachrichten, Blogs, etc.) gut funktioniert, kommt bei Shops eher weniger an. Insbesondere für die Präsentation vielfarbiger Abbildungen von Produkten und Produktdetails ist ein weißer Hintergrund aufgrund des besseren Kontrasts nach wie vor der Standard.
Kein zu starker Kontrast
Unabhängig davon, ob es sich um einen echten Dark Mode oder nur eine Website mit dunklem Hintergrund handelt, sollte dieser nicht tiefschwarz mit rein weißer Schrift sein. Besser geeignet sind ein dunkler Grauton für den Hintergrund und sehr helles Grau für den Text.
Hat der dunkle Modus Vorteile?
Grundsätzlich ja, aber nicht nur. Natürlich müssen auch dunkle Websites barrierefrei sein. Das heißt, es muss ein ausreichend starker Kontrast zwischen Hintergrund und Text bestehen. Eine relativ dunkle Schriftfarbe ist bei einem dunklen Hintergrund genauso ungeeignet, wie eine Schrift in Pastelltönen auf hellem Hintergrund. Vorausgesetzt, die Barrierefreiheit ist gegeben, hat der Dark Mode folgende Vorteile (Quelle: › TechBone):
- Angenehmer für die Augen, vor allem abends sowie bei manchen Sehbeeinträchtigung (hohe Lichtempfindlichkeit),
- weniger Blendung in dunkler Umgebung sowie
- geringerer Akkuverbrauch bei (AM)OLED-Displays.
Allerdings können manche Menschen die Lesbarkeit bei einem zu starken Kontrast (Schwarz-Weiß) und sehr heller Umgebung auch als schwieriger als bei einer hellen Website empfinden.
Webdesign Standard oder Trend – Fazit
Während die Einhaltung vor allem der technischen Webdesign Standards unerlässlich ist, kannst du einzelnen Trends folgen, musst es aber nicht. Ein Standard stellt sicher, dass deine Website so programmiert ist, dass sie von überall, mit allen Geräten, über alle Browser und von allen Interessenten aufgerufen werden kann. Darüber hinaus haben sich einige Gestaltungselemente so bewährt, dass sie als Standard anzusehen sind. Dazu gehören beispielsweise
- die Navigation,
- die Struktur sowohl der Website als Ganzes als auch der einzelnen Seiten
- sowie die Funktionsweise und Kennzeichnung von Schaltflächen.
Unter Berücksichtigung dieser Regeln erhältst du eine moderne, funktionale, suchmaschinen- und nutzerfreundliche Website.
Ob und welchen Trends du außerdem noch folgst, hängt maßgeblich davon ab, um welche Art Website es sich handelt und welche Zielgruppe du ansprechen möchtest. Manche Trends sind nach einiger Zeit auf zahlreichen Websites zu finden, andere bleiben Randerscheinungen oder verschwinden relativ schnell wieder. Letzten Endes sollen ja die Informationen das Interesse an deinem Angebot wecken und die Besucher sollen nicht nur deine Website als solche bewundern. Frage dich vor dem Einsatz eines sehr kreativen Designs immer:
- Was und wen will ich mit meiner Website erreichen,
- passt die Gestaltung zu mir und meinem Unternehmen,
- werden meine Inhalte optimal dargestellt oder
- handelt es sich nur um eine Spielerei, die eher stört als nützt?
Das Umsetzen eines oder mehrerer Trends ist keinesfalls ein Muss und macht eine Website nicht automatisch besser oder moderner. Im Gegenteil, mancher Trend mag zwar optisch ein „Wow“ hervorrufen, beeinträchtigt jedoch die Funktionalität, die Performance und / oder die Nutzerfreundlichkeit so stark, dass von der Verwendung abzuraten ist.
FAQ
Muss ich mich an technische Standards halten?
Ja, HTML, CSS und JavaScript sowie responsive Design und eine Verschlüsselung sind heute essenzielle Standards für jede Website.
An welche Gestaltungs-Standards sollte ich mich halten?
Seitenübergreifende Unterteilung in Kopf-, Inhalts- und Footer-Bereich, Hauptmenü am Kopf und rechtliche Informationen am Fuß sowie einheitliche Strukturierung der gesamten Website.
Können Trends Standards ersetzen?
Ja, jedoch nur dann, wenn sie tatsächlich einen Mehrwert bieten und nicht zu Einbußen bei der Performance, SEO oder Nutzerfreundlichkeit führen.
Welche Trends haben Zukunft?
Fotos über die Breite des Textblocks; authentische Fotos; gezielt eingesetzte, dezente Animationen; Barrierefreiheit; Dark Mode (nicht bei Shops); SEO, GEO, kurze Ladezeit.
Muss ich jedem Trend folgen, damit meine Website modern ist?
Nein. Aktuelle Technik, die Einhaltung rechtlicher Vorgaben sowie Nutzerfreundlichkeit stehen immer an erster Stelle. Alles andere kann, muss aber nicht.
© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.
