Wunderschönes Webdesign

mit Liebe zum Detail

und die Zielgruppe stets im Fokus.

kompetente & professionelle Kundenberatung

webdesign berlin agentur

 

Webdesign aus Berlin

Das Design einer Homepage ist ein wichtiger Faktor für die erfolgreiche Online-Strategie Ihres Unternehmens. Individuelle Gestaltung (CI) für einen unverwechselbaren Auftritt sind dabei ebenso wichtig wie Zielgruppenansprache und Usability.

Wir erstellen grundsätzlich maßgeschneiderte Lösungen für unsere Kunden in die wir unsere langjährige Erfahrung im Online-Bereich einfließen lassen.

Besuchen Sie unser Portfolio

CMS Programmierung

Der Einsatz moderner Content Management Systeme (CMS) ermöglicht es jedem Kunden, die eigene Website inhaltlich zu verwalten.

Eine einfache Administration hält Ihre Website dynamisch und up to date. Die Umsetzung der individuellen Webdesigns erfolgt bei uns mittels aktueller Content Management Systeme wie z.B. Joomla oder Wordpress und ermöglicht unseren Kunden vollen Zugriff auf Ihre Website.

Erfahren Sie mehr über CM Systeme

Responsive webdesign presentation

Breadcrumbs im Webdesign: Kleine Krümel, große Wirkung

In unserem heutigen Blogbeitrag möchten wir Ihnen ein Basic-Element aus dem Webdesign näher vorstellen, zu dem wir regelmäßig Fragen von unseren Kunden bekommen: Die Breadcrumbs. Wir möchten Ihnen erläutern, was es mit dem Navigations-Element mit dem literarischen Namen auf sich hat, welche unterschiedlichen Typen es gibt und inwiefern Sie von dessen Einbau profitieren können.

Was sind Breadcrumbs?

Als Breadcrumbs bezeichnet man die Bestandteile einer bestimmten “Second-Level-Navigation”, mit deren Hilfe sich die Besucher einer Website besser auf dieser zurechtfinden. In der Regel findet sich die Navigation im oberen Bereich der Seite und ermöglicht dem Nutzer einen guten Überblick über seinen derzeitigen “Standort” und ein leichtes Navigieren zu den höher liegenden Ebenen.

Ein Beispiel:

Breadcrumb bsp seonest

Woher kommt der Begriff?

HaenselGretel2

Der Name “Breadcrumbs” ist tatsächlich eine Anlehnung an das Märchen “Hänsel und Gretel”. Hier versuchen die beiden Kinder mithilfe von Brotkrumen den Weg aus einem dunklen, unübersichtlichen Wald zu finden. Im Deutschen findet sich daher auch die Bezeichnung “Brotkrumen-Navigation”.

 

WollknuelEine andere, ebenso mythische Bezeichnung für dieses Navigationselement ist “Ariadnepfad”, in Anlehnung an die griechische Mythologie. Theseus wird in der Geschichte von Daidalos in ein Labyrinth verbannt, dessen Ausweg er mithilfe eines Wollknäuels fand, das er von Ariadne erhielt.

 

Beide Geschichten fassen das Wesen der Breadcrumb-Navigation perfekt zusammen: Gerade auf Webseiten mit vielen, hierarchisch angeordneten Unterseiten bietet diese Form der Navigation den nötigen Halt, um die Orientierung “im dichten Wald” oder im “unüberschaubaren Labyrinth” der Inhalte behalten zu können.

Welche Arten der Breadcrumb-Navigation gibt es?

Grundsätzlich lässt sich sagen, dass eine Breadcrumb-Navigation i.d.R. horizontal angeordnet ist und anzeigt, wo sich der Lesende gerade befindet. Gleichzeitig enthält sie Links zu den jeweils darüber liegenden Verzeichnis-Ebenen. Zumeist sind die Breadcrumbs im oberen Bereich der Website zu finden, manchmal werden Sie auch unterhalb des Contents in Footer-Nähe eingebaut.

Location-BreadcrumbsSchild Location breadcrumb

Diese Art der Breadcrumbs zeigt die aktuelle Position des Seitenbesuchers ausgehend von der Hauptseite an. Hier kann der Nutzer also seinen aktuellen “Standort” in Relation zu den übergeordneten Kategorien ablesen und sich durch die Verlinkung auch schnell wieder nach oben navigieren.

Beispiel:

Startseite >> Kategorie 1 >> Unterkategorie 1.2 >> Unterkategorie 1.2.1

Path-Breadcrumbsarrow 686315 640

Das englische Wort “Path” bedeutet übersetzt “Pfad”. Diese Breadcrumbs zeigen dem Nutzer seinen aktuellen Klickpfad an, wodurch er sich innerhalb seiner eigenen Bewegung auf der Website schnell zurück navigieren kann.

Beispiel:

Kategorie 1 >> Startseite >> Kategorie 3 >> Unterkategorie 3.2

Attribute-BreadcrumbsAttribute breadcrumb

Diese letzte Art der Breadcrumbs nutzt für die Navigation eine semantische Herangehensweise. Gerade wenn Seiten sehr umfangreich sind, bietet sich diese Form der Second-Level-Navigation an. Hier werden dem Nutzer verschiedene Wege zu seinem Suchergebnis angezeigt, sodass er die Möglichkeit hat, sich auf unterschiedlichen semantischen Pfaden zu bewegen.

Beispiel:

Startseite >> Mode >> Kinder >> Schuhe >> Winterstiefel
Startseite >> Schuhe >> Winter >> Kinder >> Winterstiefel


Welche Art der Breadcrumb-Navigation Sie für Ihre Website wählen, sollten Sie auf jeden Fall anhand der Inhalte und der Architektur der Seite entscheiden. Breadcrumbs sind nur dann sinnvoll eingesetzt, wenn der Nutzer auch wirklich davon profitieren kann und diese Navigationspunkte nutzt.


Wie nützen Breadcrumbs meiner Website?

Breadcrumbs sollten in keinem Fall die Hauptnavigation der Website (z.B. über eine Menüleiste) ersetzen. Sie bieten als Second-Level-Navigation aber eine sehr benutzerfreundliche Möglichkeit der Bewegung auf der Website. Außerdem verdeutlichen Sie in der Regel die hierarchischen Strukturen der Seite deutlich besser als die Hauptnavigation vermag.

Nutzen für den User

Ohne viele Klicks können die Nutzer auf die nächsthöhere Ebene navigieren. Dies ist gerade auch in Bezug auf Erstbesucher Ihrer Seite interessant, die nicht über die Startseite, sondern eine Unterkategorie auf Ihre Inhalte stoßen. Breadcrumbs reduzieren hier die sog. Bounce-Rate, also das schnelle Verlassen der Website wegen unpassender Inhalte. Die Breadcrumb-Navigation lädt die Besucher quasi ein, ihre Recherche nicht durch Verlassen der Seite fortzuführen, sondern durch das Bewegen in den nächsthöheren Kategorie-Ebenen. Auf diese Weise können die Breadcrumbs auch das Interesse der Nutzer für bestimmte Inhalte auf Ihrer Seite wecken, das zuvor eventuell noch gar nicht vorhanden war.

Sie sehen: Der Nutzen für die Besucher ist vielseitig. Und durch die horizontale Ausrichtung benötigen die Breadcrumbs kaum Raum auf der Seite.

Nutzen für die Suchmaschinenoptimierung (SEO)

Auch für die Suchmaschinenoptimierung hat die Breadcrumb-Navigation einen nicht zu verkennenden Nutzen. Zunächst ist dabei das Offensichtliche zu nennen: Diese Navigationsform schafft eine gute Orientierung für den Nutzer auf der Seite - und wenn sich der Nutzer gut zurechtfindet, findet sich auch der Crawler der Suchmaschine gut zurecht.
Aber auch für die interne Verlinkung der Inhalte bieten die Breadcrumbs eine gute Möglichkeit. Schließlich ist jeder Navigationspunkt auch ein Link auf die entsprechende Seite.

Eine Besonderheit gibt es noch in Bezug auf die Suchmaschine Google zu nennen. Diese hat seit einige Zeit begonnen, korrekt kodierte Breadcrumbs auch als Teil der Suchergebnisse anzuzeigen. Auf diese Weise wird in den Google Suchergebnissen nicht nur Ihre Unterseite angezeigt, sondern auf den ersten Blick auch eine Übersicht über die weitere Struktur Ihrer Seite gegeben.

Ein Beispiel:

Breadcrumps Focus

Breadcrumbs auf der Internet-Seite des Fokus

 

Breadcrumps in search results

Darstellung der Breadcrumb-Elemente in den Google Suchergebnissen

Breadcrumbs und Webdesign: Wir beraten Sie gern

Sie haben noch Fragen oder möchten gern Breadcrumbs in Ihre Website einbauen lassen? Kontaktieren Sie uns gern. Als Agentur für Webdesign in Berlin haben Erfahrungen mit der optisch ansprechenden Erstellung und der optimalen Codierung von Breadcrumbs und stehen Ihnen gern mit Rat und Tat zur Seite. Natürlich beraten wir Sie auch gern zu anderen Themen aus dem Bereichen Webdesign und Usability, wie z.B. das Hamburger Menü für die mobile Darstellung Ihrer Website, Design Microsite oder Call-to-Action-Buttons.

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35

team firmennest

Internetagentur firmennest aus Berlin

Mit uns sind Sie im Internet gut aufgehoben.

Firmennest ist Ihr starker Partner im Online-Bereich. Angefangen bei einem individuellen Webdesign, das passgenau auf Ihre Bedürfnisse und die Ihrer Kunden ausgerichtet wird, bis hin zu der permanenten Suchmaschinenoptimierung für Ihre relevanten Keywords. Die Verwendung von modernen Content Management Systemen (CMS) bei der Erstellung der Websites ermöglicht…

Lernen Sie unser Team kennen