Essentielle und beliebte Website Elemente – Tipps & Beispiele

Eine erfolgreiche Website besteht aus vielen einzelnen Elementen, die sorgfältig ausgewählt und gestaltet werden müssen, um Deine Website-Ziele zu erreichen. Dabei ist es völlig egal, ob Du über Deine Website Dein neues Unternehmen bekannt geben, einen Online-Shop betreiben oder eine starke Community aufbauen willst.

Jedes dieser Elemente trägt zur Gesamterfahrung des Besuchers bei und kann den Unterschied zwischen einem flüchtigen Klick und einem loyalen Kunden ausmachen.

In diesem Artikel gehen wir daher gezielt darauf ein, welche Elemente für eine Website bedeutsam sind, welche Auswirkung jedes Element haben kann und welche Best Practices Du hinsichtlich des Designs, der Inhalte und Funktionalität der Elemente beachten solltest.

Welche Arten von Website-Elementen gibt es?

Je nachdem, mit wem Du über Website-Elemente sprichst, kannst Du feststellen, dass unterschiedliche Elemente im Vordergrund stehen. Während Grafiker und Webdesigner eher an gestalterische Elemente denken, wie Farben, Typografie und Animationen, stehen für Webentwickler eher die technischen Aspekte einer Website im Fokus, wie z.B. Menü, Slider und Footer.

Letzteres gibt einer Website auch die grundlegende Struktur und ist daher die Basis für alle anderen Elemente. Klassischerweise sind daher auch eher die technischen Elemente einer Website gemeint, wenn man von Website-Elementen spricht.

In den folgenden Abschnitten des Artikels legen wir daher den Fokus hierauf und haben den gestalterischen Aspekten einen eigenen Beitrag gewidmet, den wir Dir gerne ergänzend hierzu empfehlen:

Modernes Webdesign: 12 elementare Grundlagen für Dein Webprojekt →

Header

Header bedeutet so viel wie Kopfzeile und ist der oberste Bereich Deiner Website. Er nimmt eine strategische Schlüsselrolle im Rahmen der Websiteerstellung ein, da er oft das erste ist, was Besucher sehen und typischerweise auf allen Seiten einer Website gleich ist.

Er enthält daher wichtige Elemente, wie z.B.:

• Logo
• Menü
• CTA-Button
• Suche
• Warenkorb
• Login-Bereich
• Hilfefunktion
• Eilmitteilung
• Spracheinstellungen
• Helligkeitseinstellungen (Light oder Dark Mode)
• Links zu Social Media Profilen

Nicht alle diese Elemente sind für Deine Website relevant. Vielmehr gilt es, die Elemente zu wählen, die zur Erreichung Deiner Website-Ziele wichtig sind, und alle anderen bewusst wegzulassen oder an anderer Stelle zu positionieren. Weniger ist hier mehr, um das, was wirklich relevant ist, zu betonen und die Besucher nicht durch zu viele Entscheidungsmöglichkeiten zu irritieren.

Best Practices für den Header

Über die Jahre haben sich weltweit ein paar Best Practices für den Header herauskristallisiert, die dazu führen, dass man sich selbst auf Websites, deren Sprache man nicht versteht, sehr schnell zurechtfindet. Hierzu zählen:

Header – Höhe und Lesbarkeit

Der Header ist wichtig, jedoch sollte er nicht die Sicht auf die weiteren Inhalte Deiner Website versperren. Achte daher darauf, dass er:

• nur die wirklich wesentlichen Informationen enthält
• nicht zu viel Höhe einnimmt oder in Form eines sogenannten Sticky Headers beim Runterscrollen ausgeblendet wird, aber beim Hochscrollen direkt wieder sichtbar ist
• und dass die darin enthaltenen Informationen trotzdem gut lesbar sind. Beispielsweise, indem die Schriftfarbe je nach Scrollposition angepasst wird oder der Header farbig hinterlegt wird.

Logo – Größe, Positionierung & Verlinkung

• Als visuelles Aushängeschild Deines Unternehmens repräsentiert Dein Logo Deine Marke und sollte prominent platziert werden, um Besuchern gleich zu zeigen, dass sie auf Deiner Website sind. Hierfür befindet es sich typischerweise in der linken oberen Ecke des Headers, da dies die erste Stelle ist, die die meisten Nutzer beim Laden einer Website sehen.
• Achte jedoch darauf, dass das Logo weder zu groß noch zu klein ist. Es sollte ins Auge fallen, ohne den Rest des Headers zu dominieren.
• Heute erwarten Website-Besucher, dass das Logo auf die Startseite verlinkt. Daher ist es sehr zu empfehlen, Dein Logo entsprechend zu verlinken, um ein gutes Benutzererlebnis zu gewährleisten.

 

Menü – Fokus & Klarheit

Das Menü stellt die Hauptnavigation dar und sollte genauso gut positioniert sein wie Dein Logo und darüber hinaus klar und intuitiv, sodass Deine Besucher schnell die gewünschten Informationen finden. Hierfür sollte Dein Menü idealerweise:

• die Links zu den wichtigsten Seiten Deiner Website enthalten, wie „Über uns“, „Produkte oder Dienstleistungen“ und „Kontakt“
• Dropdown-Menüs enthalten, wenn Deine Website viele Unterseiten hat, um die Navigation übersichtlicher zu gestalten. Halte die Navigation jedoch so einfach wie möglich, da zu viele Menüpunkte überwältigend sein können
• ein Hamburger-Menü oder schöne sprechende Alternativen hierzu verwenden, um auf mobilen Geräten eine gute Navigation zu bieten

Weitere Tipps zum Header findest Du in unserem Artikel:

Was ist ein Header? Definition, Gestaltung, Elemente und Best Practices

CTA-Button

Call-To-Action-Buttons gehören zu den beliebtesten Website-Elementen von Marketing- und Vertriebsprofis. Hierbei handelt es sich um ein Element, das Deine Website-Besucher zu einer bestimmten Aktion auffordert – wie beispielsweise Kontakt aufzunehmen, ein Angebot anzufordern oder ein Produkt zu bestellen.

Ein CTA-Button macht häufig den Unterschied aus, ob ein passiver Interessent zu einem aktiven, neuen Kunden wird und Du damit Deine Website-Ziele erreichst. Ganz egal, ob es sich hierbei um die Steigerung Deines Umsatzes, Newsletter-Anmeldungen oder eine engagierte Community handelt.

Best Practices für CTA-Buttons

Im Vergleich zu allen anderen Buttons und Links auf Deiner Website müssen CTA-Buttons auffälliger in ihrer Gestaltung und Platzierung sein – und sich trotzdem harmonisch in Dein Webdesign fügen. Hierfür haben sich z.B.:

• Akzentfarben bewährt, die zum Farbschema passen, aber nur für CTAs verwendet werden, sodass sie sich visuell abheben.
• Eine Platzierung direkt dort, wo Deine Besucher die Entscheidung treffen, z.B. am Ende einer Produktbeschreibung.

Darüber hinaus sollten für CTAs ganz kurze und eindeutige Texte verwendet werden (Micortexte). Denn nur, wenn Deinen Besuchern schnell klar ist, was sie per Klick auf den Button erwartet, werden sie bereit sein zu klicken.

Suchfunktion

Je umfangreicher Deine Website ist, umso sinnvoller ist eine websiteinterne Suche. Mit ihr kannst Du Deinen Besuchern ermöglichen, schnell und gezielt nach spezifischen Informationen zu suchen, ohne dass sie sich durch mehrere Menüs oder Seiten klicken müssen und so erheblich zur Zufriedenheit Deiner Besucher beitragen.

Doch damit das auch so ist, gilt es, ein paar Punkte zu beachten:

• Platzierung: Eine Suchfunktion sollte schnell zu finden sein. Hierfür eignet sich z.B. eine Suchleiste innerhalb des Headers, in der Nähe oder innerhalb Deiner Hauptnavigation. Alternativ bietet sich auch ein Suchfeld direkt in der Startsequenz der Startseite an – so wie es auch Google hat.
• Design: Die Suche sollte klar erkennbar sein, entweder über den Begriff Suche oder ein bekanntes Symbol hierfür wie eine Lupe.
• Funktionalität: Eine Suche ist nur gut, wenn sie auch die gewünschten Suchergebnisse liefert. Stelle daher sicher, dass sie schnell und präzise arbeitet. Hierbei haben sich Autovervollständigungsfunktionen bewährt, um die Benutzerfreundlichkeit zu erhöhen.

Hero-Section

Die Hero-Section ist ganz oben auf der Website platziert und enthält den „Helden“. Mit Held ist hierbei jedoch nicht unbedingt eine Person gemeint. Vielmehr kommt der Begriff aus der Werbebranche, wo mit Hero das Hauptbild oder -video gemeint ist, das die Aufmerksamkeit des Nutzers auf sich ziehen soll. Es ist der „Held“ der Seite, der im Mittelpunkt steht und die wichtigste Botschaft vermittelt.

Best Practices für die Hero-Section

Neben dem Header ist die Hero-Section typischerweise das Erste, was Deine Besucher sehen. Es hat sich daher bewährt, gerade hier besonders auf die Qualität Deines Hero-Images oder Videos zu achten. Gleichzeitig muss die Website aber auch schnell geladen werden, damit Besucher nicht die Website verlassen, bevor die Hero-Section überhaupt sichtbar ist. Hierbei helfen z.B. Web-optimierte Bild- und Videoformate.

Darüber hinaus ist es gute Praxis, in dieser Sequenz die Besucher visuell anzusprechen, den Text kurz und präzise zu halten und einen CTA hinzuzufügen.

Formulare

Webformulare sind interaktive Elemente auf Deiner Website, die Deinen Besuchern eine weithin anerkannte und akzeptierte Möglichkeit bieten, ihre Daten einzugeben und zu übermitteln. Die Daten können dabei über verschiedene Methoden wie E-Mail, Datenbanken oder CRM-Systeme verarbeitet werden und Dir zur Verfügung stehen.

Sie sind das digitale Pendant zu den Papierformularen und können weit mehr. Beispielsweise per Klick zusätzliche Informationen bereitstellen, die das Ausfüllen erleichtern, Daten direkt an den richtigen Ansprechpartner schicken oder im Online-Shop eine Bestellung auslösen. Falls Du skeptisch gegenüber Formularen wie Kontaktformularen bist, findest Du hier gute Gründe, warum Du doch eins haben solltest.

Tipps für Formulare

Halte Deine Formulare so einfach und übersichtlich wie möglich, um die Benutzerfreundlichkeit zu erhöhen und damit die Chance, dass Deine Besucher das Formular komplett ausfüllen und abschicken. Hierfür hat es sich z.B. bewährt, jedes Feld klar und präzise zu beschriften und Platzhalter zu verwenden, die einen Hinweis geben, was in das jeweilige Feld eingetragen werden soll.

Darüber hinaus solltest Du eine Echtzeit-Validierung implementieren, um Nutzern sofort ein Feedback geben zu können, ob der Versand erfolgreich war oder ob eine Eingabe fehlt oder fehlerhaft ist.

Was zudem nicht fehlen darf, ist ein Bestätigungsfeld, dass die eingegebenen Daten erhoben und verarbeitet werden dürfen, sowie je nach Art und Zweck des Formulars die Zustimmung zu den AGBs Deines Unternehmens. Achte hierbei darauf, dass das Feld nicht vorangeklickt ist, da dies je nach Gesetzgebung nicht erlaubt ist.

Als Beispiel für ein aufeinander abgestimmtes, mehrstufiges Formular kann ich Dir unser Planungstool empfehlen.

Galerien

Galerien stellen eine wunderschöne Möglichkeit dar, Dein Team, Deine Werke und Projekte visuell ansprechend und interaktiv zu präsentieren. Je nach Galerie-Art handelt es sich dabei um eine Sammlung von Fotos, Grafiken, Videos, Texten oder einer Kombination hiervon.

Best Practices für Galerien

Wähle für Galerien ein klares Design, um die Inhalte in den Vordergrund zu stellen, und achte hierbei darauf, eine Galerie-Art zu wählen, die das jeweilige Format am besten berücksichtigt. Beispielsweise eignen sich bestimmte Galerien besser für Medien im Hochformat und andere für Medien im Querformat.

Bei Bilder- und Videogalerien empfiehlt es sich zudem, die Medien fürs Web zu optimieren und Dateiformate wie avif, webp und webv zu verwenden. Zur Optimierung zählt auch die Ergänzung von Alt-Texten für Bilder, um die Barrierefreiheit zu gewährleisten.

Beliebt sind darüber hinaus interaktive Elemente der Galerien, wie die Ergänzung einer Zoom-Funktion, Vollbildansicht, Diashow-Modus und natürlich Play/Pause-Buttons, die bei Videos einfach zur guten UI gehören.

Cards

Cards sind modulare Design-Elemente, die auf Websites verwendet werden, um Informationen kompakt und visuell ansprechend darzustellen.

Jede einzelne Card zeichnet sich typischerweise dadurch aus, dass sie ausschließlich zusammengehörige Inhalte beinhaltet, wie z.B. Informationen zu einer bestimmten Person oder einem Produkt, wohingegen für unterschiedliche Personen oder Produkte separate Cards verwendet werden.

Zu den beliebtesten Inhalten einer Card zählt hierbei eine Kombination aus Text, Bild und CTA-Button.

Best Practices für Cards

Wenn Du Cards für Deine Website verwendest, achte darauf, sie nicht zu überfrachten. Sie sind für kurze, präzise Informationen gedacht und entfalten nur dann ihre volle Wirkung.

Sorge zudem dafür, dass Cards innerhalb einer Galerie einerseits einheitlich gestaltet sind, um ein stimmiges Gesamtbild zu gewährleisten, und andererseits genügend Abstand zueinander haben, sodass die einzelnen inhaltlichen Einheiten nicht verschwimmen.

Nutze darüber hinaus Hovereffekte, um auf die Klickbarkeit der jeweiligen Card oder des darin enthaltenen CTA-Buttons hinzuweisen.

Slider

Slider sind interaktive Website-Elemente, die es ermöglichen, mehrere Inhalte (wie Bilder, Texte oder Videos) in einem begrenzten Bereich nacheinander anzuzeigen. Die Inhalte können dabei wahlweise horizontal oder vertikal geslidet werden und erinnern gerade in der horizontalen Variante oft an ein Karussell oder eine Diashow.

Best Practices für Slider

Slider können für einheitliche Inhalte gemacht sein, wie z.B. Bilder- oder Videoslider, oder auch für verschiedene Inhalte geeignet sein und sowohl einzelne Slides mit Texten als auch mit Bildern oder Ähnlichem beinhalten.

Achte insbesondere bei Slidern mit unterschiedlichen Inhaltstypen darauf, dass die einzelnen Slides thematisch stimmig zueinander sind – ähnlich wie bei einer Geschichte, die erzählt wird – und ein konsistentes Design verwendet wird.

Darüber hinaus haben sich folgende Tipps bewährt:

• Fokussiert und relevant: Achte darauf, dass der Slider nicht zu viele Slides beinhaltet und jeder Slide nur wenige, dafür aber relevante und hochwertige Inhalte enthält, um die Aufmerksamkeit Deiner Website-Besucher nicht zu verlieren.
• Übergänge: Nutze sanfte Übergänge und Animationen, um die unterschiedlichen Inhalte fließend ineinander übergehen zu lassen.
• Navigationshinweise: Verwende klare Navigationshinweise wie z.B. Pfeile oder Punkte, um Deinen Besuchern zu helfen, sich innerhalb des Sliders zurechtzufinden und zu navigieren. • Autoplay: Biete die Option zur automatischen Wiedergabe an, aber lasse Deinen Besuchern die Kontrolle behalten, indem sie z.B. den Slider anhalten oder manuell navigieren können.
• Timing: Denk daran, dass Deine Besucher unterschiedliche Lesegeschwindigkeiten haben und setze passend dazu die Rotationsgeschwindigkeit und die Anzeigedauer der Slides so, dass sie für die Nutzer angenehm und gut lesbar sind, ohne dass das Gefühl aufkommt, dass es nicht weitergeht.

Share-Buttons

Share-Buttons sind interaktive Elemente auf einer Website, die es Deinen Besuchern ermöglichen, Inhalte schnell und einfach über verschiedene soziale Netzwerke wie LinkedIn, X und Facebook oder Kommunikationskanäle wie E-Mail zu teilen und sich mit anderen darüber auszutauschen. Dadurch kannst Du Deine Reichweite erhöhen und das Vertrauen neuer Besucher stärken, da geteilte Inhalte Deine Vertrauenswürdigkeit erhöhen.

Die Share-Buttons sind in der Regel mit den Icons oder Namen der jeweiligen Plattformen versehen und leiten die Nutzer direkt zur Freigabefunktion der ausgewählten Plattform weiter.

Best Practices für Share-Buttons

Es hat sich bewährt, dass Share-Buttons unterhalb des Artikels oder seitlich, mitlaufend zum Artikel platziert sind, sodass Deine Leser den Artikel schnell teilen können, wenn sie wissen, dass er gut ist.

Achte zudem auf eine einheitliche Gestaltung der einzelnen Share-Buttons, die stimmig zu Deinem gesamten Designkonzept Deiner Website ist. Hierfür kann es sinnvoll sein, dass die Icons der Share-Buttons in einer einheitlichen Farbe dargestellt werden.

Last but not least: Die Share-Buttons sollten den Anforderungen der DSGVO entsprechen. Das heißt für Dich, dass entweder eine eigene Zwei-Klick-Lösung integriert werden muss oder z.B. eine Lösung von externen Dritten wie Shariff von heise online, die es auch als WordPress-Plugin gibt. Hierbei wird die Verbindung zu den sozialen Netzwerken erst nach einem Klick aktiviert, um die Übertragung von Daten zu verhindern, bevor der Nutzer zustimmt.

Video-Player

Videos zählen zu den beliebtesten Inhalten einer Website und können Informationen auf eine emotionalere, interessantere und verständlichere Art vermitteln.

Wenn Du selbst auch planst, Videos auf Deiner Website zu integrieren und direkt dort abzuspielen, kommst Du an einem Video-Player nicht vorbei. Dabei kannst Du entweder einen eigenen Video-Player entwickeln oder den Video-Player eines externen Anbieters wie YouTube oder Vimeo nutzen.

Best Practices für Video-Player

So schön Videos auch sein können, damit der richtige Gesamteindruck von Deinem Unternehmen über Deine Website vermittelt wird, gibt es einiges zu beachten. Hier kommen daher die wichtigsten Aspekte:

Achte darauf, dass das Design des Video-Players im Einklang mit Deinem Webdesign ist und ein stimmiges Vorschaubild oder ein schöner farbiger Platzhalter gewählt wird, der zum Abspielen des Videos einlädt. Selbst wenn Du das Video so einstellst, dass es automatisch abgespielt wird, solltest Du immer ein Video-Poster ergänzen, für Geräte, die ein automatisches Abspielen verbieten – was bei mobilen Geräten oft der Fall ist.

Extern eingebundene Video-Player bieten hier oft nur begrenzte Möglichkeiten zur Anpassung und im Fall von YouTube-Videos ist zudem damit zu rechnen, dass nicht nur das gewünschte Video, sondern auch Werbung ausgespielt wird. Die meisten Nutzer sind das gewöhnt und die Einbindung über YouTube ist sehr einfach. Trotzdem solltest Du das in Deiner Überlegung für oder gegen einen externen Video-Player berücksichtigen.

Für den ersten Eindruck und zur Gewährleistung der DSGVO-konformen Integration von YouTube kann ich Dir unser YouTube DSGVO Plugin für WordPress empfehlen. Hierbei hast Du die Möglichkeit, einen farblich und textlich stimmigen Platzhalter zu wählen, der zu Deinem Webdesign passt und Deine Besucher darüber informiert, dass erst nach deren Zustimmung eine Weitergabe der Daten an YouTube erfolgt (Opt-In).

* Mit Klick auf einen YouTube-Button akzeptierst Du die Datenschutzbestimmungen von YouTube

Abgesehen von Videos, die direkt in der Startsequenz einer Website zu sehen sind, hat es sich bewährt, den Website-Besuchern die Kontrolle über die Videosteuerung zu geben. Sorge daher dafür, dass eindeutige Steuerelemente integriert sind, wie Play-/Pause-Tasten, Lautstärkeregler, Vollbildmodus und Fortschrittsbalken. Das erhöht die Nutzerzufriedenheit hinsichtlich der Videonutzung und des gesamten Website-Besuchs.

Achte zudem gerade bei Videos darauf, dass sie fürs Web optimiert sind, um schnelle Ladezeiten zu gewährleisten. Hierzu gehören passende Video-Formate, Komprimierungen der Dateigröße oder auch die Nutzung spezieller Hosting-Dienste, um die Serverbelastung zu reduzieren.

Zum Schluss möchte ich noch gerne auf einen Trend für Videos hinweisen, der für Dich interessant sein kann: Interaktive Videos. Hiervon spricht man, wenn mitten im Video oder am Ende Buttons oder Links integriert werden, die den Besuchern die Wahl lassen, was sie als Nächstes ansehen möchten. Dies kann z.B. bei Lernvideos interessant sein, um den Schülern die Möglichkeit zu geben, je nach Wissensstand Inhalte zu überspringen oder in ihrer eigenen Reihenfolge zu lernen.

Breadcrumbs

Breadcrumbs (Brotkrümelnavigation) sind wichtige Website-Elemente, die als sekundäres Navigationssystem den Website-Besuchern helfen, die Navigation auf Deiner Website zu verstehen und sich leicht zurechtzufinden.

Sie zeigen den Besuchern an, wo sie sich auf der Website befinden und bestehen typischerweise aus einer Reihe von Links, die durch Trennzeichen wie „>“ getrennt sind und den Pfad zur aktuellen Seite darstellen.

Tipps für Breadcrumbs

• Vermeidung von Überladung: Zeige nur relevante Hierarchieebenen an, um die Breadcrumbs nicht zu überladen. Bei tief verschachtelten Strukturen kann es sinnvoll sein, nur die wichtigsten Ebenen anzuzeigen.
• Trennzeichen: Verwende Trennzeichen (z.B. „>“, „/“, „|“), um die einzelnen Ebenen klar voneinander zu trennen.
• Klickbarkeit: Jeder Link in den Breadcrumbs sollte anklickbar sein, außer dem letzten Element, das die aktuelle Seite repräsentiert.
• Barrierefreiheit: Achte darauf, dass die Breadcrumbs auch für Nutzer mit Behinderungen zugänglich sind, indem Du semantisch korrekte HTML-Elemente verwendest (z.B. <nav> mit aria-label=“breadcrumb“).
• SEO-Optimierung: Nutze strukturierte Daten (Schema Markup), um den Breadcrumbs zusätzliche Bedeutung für Suchmaschinen zu geben.

Ein Beispiel wie Breadcrumps aussehen und funktionieren können, findest Du oben, oberhalb dieses Artikels.

Fortschrittsanzeigen

 

Fortschrittsanzeigen werden auch als Progress Bars oder Ladebalken bezeichnet und sind effektive, visuelle Elemente auf Deiner Website, die den Fortschritt eines Prozesses oder einer Aufgabe darstellen.

Sie werden häufig verwendet, um den Nutzern anzuzeigen, wie weit sie in einem Prozess sind, wie viel von einer Seite schon gelesen wurde oder wie viel von einer Aufgabe bereits erledigt ist.

Durch sorgfältiges Design und Implementierung der Fortschrittsanzeige kannst Du Unsicherheit reduzieren, Motivation steigern und sofortiges Feedback bieten, was das Benutzererlebnis verbessert und je nach Anwendungsfall der Progress Bar die Time on Page sowie Deinen Umsatz erhöht.

Best Practices für Fortschrittsanzeigen

Fortschrittsanzeigen machen nur dann Sinn, wenn sie gut sichtbar, verständlich und aktuell sind. Achte daher darauf, dass Du eindeutige Symbole oder Texte verwendest, um den Fortschritt anzuzeigen, und den Fortschritt in Echtzeit aktualisierst.

Darüber hinaus eignen sich besonders flüssige Animationen, um den Fortschritt anzuzeigen und die Benutzererfahrung zu verbessern.

Favicon

Favicon ist die Abkürzung für „Favorites Icon“ und ein kleines, quadratisches Symbol, das Deine Website repräsentiert. Deine Website-Besucher können es in der Regel in den Browser-Tabs, Lesezeichen und Adressleisten finden und so Deine Website schnell erkennen – auch wenn sie viele Tabs offen haben. Hierdurch trägt es zu wiederkehrenden Besuchern und zum professionellen Gesamteindruck von Dir bei.

Best Practices für Favicons

Favicons sind sehr klein, achte daher darauf, ein Symbol zu wählen, das auch in Mini leicht erkennbar ist und zur Wiedererkennung Deiner Website und Deines Unternehmens geeignet ist.

Es hat sich bewährt, mehrere Größen (16×16, 32×32, 48×48, 64×64, 128×128) und Formate (.ico, .png, .svg) für Favicons bereitzustellen, um eine optimale Kompatibilität zu gewährleisten. So ist es beispielsweise möglich, mit SVGs sehr kleine, aber hochauflösende Grafiken bereitzustellen – jedoch wird dieses Format aktuell nicht von Microsoft Edge unterstützt, ICO und PNG jedoch schon.

Footer

Der Footer stellt das Gegenstück zum Header dar – die Fußzeile. Er befindet sich entsprechend am unteren Ende Deiner Website und enthält oft wichtige Informationen, die auf jeder Seite leicht zugänglich sein sollten oder müssen, aber nicht in die Hauptnavigation des Headers sollen.

Hierzu zählen z.B.:

• Kontaktinformation
• Links zu Social Media Profilen
• Links zu Partnerseiten oder Subdomains
• Auszeichnungen / Awards
• Anmeldungsmöglichkeit zum Newsletter
• Sowie die Links zum Impressum, Datenschutz und den AGBs

Best Practices für den Footer

Für den Footer sind vor allem zwei Aspekte wichtig:

• Links zu rechtlichen Pflichtseiten: Wie in Deutschland so ist es in vielen Ländern gesetzlich vorgeschrieben, dass Besucher schnell zum Impressum und zur Datenschutzerklärung (sowie zu den AGBs) gelangen. In der Regel will man diese beiden Seiten jedoch nicht im Hauptmenü haben, da dort aus unternehmerischer Sicht wichtigere Seiten verlinkt sein sollten. Die Verlinkung aus dem Footer heraus hat sich daher als gute Praxis bewährt und wird inzwischen hierzulande erwartet.
• Platzierung: Der Footer sollte tatsächlich unten platziert sein. Bei Seiten, die wenig Inhalte aufweisen und auf großen Bildschirmen betrachtet werden, kann es vorkommen, dass der Footer zu weit nach oben rutscht. Damit das nicht passiert, kannst Du z.B. die CSS-Eigenschaft min-height für den Hauptinhalt verwenden, sodass der Footer immer am unteren Rand des Bildschirms bleibt, selbst wenn der Inhalt nicht ausreicht, um die gesamte Höhe zu füllen. Eine weitere Möglichkeit ist die Verwendung von Flexbox, um den Footer an das Ende der Seite zu setzen.

SEO-Elemente

SEO-Elemente sind Website-Elemente, die dafür da sind, in den Suchergebnissen von Google, Bing & Co. besser angezeigt und platziert zu werden, um die Sichtbarkeit Deines Unternehmens zu erhöhen und Besucher auf Deine Website zu bringen.

Sie können schnell vergessen werden, da eine Website auch so fertig aussieht, ohne dass die SEO-Elemente integriert sind. Auf die wichtigsten Website-Elemente für die Suchmaschinenoptimierung möchte ich daher hier kurz eingehen.

Best Practices für die SEO-Elemente

Verwende Meta-Tags (Title-Tag, Meta-Description) für Deine Webseiten. Da es sich hierbei um kurze Informationen handelt, die in den Suchergebnissen angezeigt werden und beeinflussen, ob Interessenten auf den Link zu Deiner Website klicken, sollten sie präzise und relevant sein – und darüber hinaus die passende Länge aufweisen. Plugins wie Yoast und Tools wie das Google Title & Description Preview Tool können Dir hierbei helfen.

Achte darauf, Deine Bilder mit Alt-Tags auszustatten, um Suchmaschinen zu helfen, den Inhalt Deiner Bilder zu verstehen und gleichzeitig die Barrierefreiheit zu verbessern.

Und zu guter Letzt: Optimiere Deine URLs. Wenn Du ein CMS wie WordPress nutzt, werden die URLs automatisch erstellt. Das kann dazu führen, dass sie zu lang werden. Passe sie daher so an, dass sie klar, kurz und verständlich sind und den Inhalt der jeweiligen Seite widerspiegeln.

Weitere SEO-Tipps findest Du hier:

• SEO-Grundlagen: Ein umfassender Leitfaden für bessere Sichtbarkeit
• Onpage Analyse – essenzielle SEO-Optimierungen in 9 Schritten

Fazit – Website-Elemente

Die einzelnen Website-Elemente beeinflussen, wie Deine Website-Besucher Dich wahrnehmen, ob sie die gewünschten Informationen finden, Spaß an der Interaktion mit Deiner Website haben und schließlich, ob sie mit Dir Kontakt aufnehmen oder ein Produkt bestellen. Doch erst die stimmige Auswahl, Kombination, Gestaltung und bestmögliche Integration der Elemente führen zu einer optimalen Benutzererfahrung und einem erfolgreichen Online-Auftritt.

Daher ist es wichtig, die Elemente einer Website sorgfältig zu planen, mittels Design Tools und Ressourcen zu gestalten und dank Prototypen frühzeitig zu testen. Wir hoffen, Dir mit diesem Artikel die Wahl Deiner Website-Elemente zu erleichtern und sie effektiv für Dich zu nutzen.

Natürlich sind die Website-Elemente nur ein Teil der Website-Planung und Erstellung. Aber keine Sorge, wir gehen in den nächsten Beiträgen auf die einzelnen, relevanten Aspekte für Deine neue Website ein.

Du wünschst Dir professionelle Hilfe für die Planung und Entwicklung Deiner neuen Website? Dann nimm gerne mit uns Kontakt auf. Als erfahrene Webdesigner und Entwickler unterstützen wir Dich voller Knowhow, Kreativität und Freude bei der Realisierung Deines neuen Webauftritts.

Kontakt