Online Profiler

  • PROFIL
  • LEISTUNGEN
  • PREISE
  • PORTFOLIO
  • FACHWISSEN
  • KONTAKT
breadcrumbs
Design Pattern ✷ Breadcrumbs

Breadcrumbs

In dieser Artikelreihe „Design Pattern“ stelle ich den Einsatz und Nutzen von einzelne Elementen oder Funktionen einer Website vor. Heute schauen wir uns Breadcrumbs mal genauer an. Bei Breadcrumbs handelt es sich um ein Navigationselement, welches aus dem Bereich UX (User Experience) Design kommt und dem Nutzer aber auch Suchmaschinen (Breadcrumb SEO) die Orientierung innerhalb einer Website vereinfachen soll. Wie eine Breadcrumb Navigation aufgebaut ist und dargestellt wird erfahren Sie in diesem Artikel.

Breadcrumbs als Navigationshilfe für bessere Usability

Heute geht es um das Thema: Breadcrumbs
Doch zuerst möchte ich kurz erläutern, warum die Breadcrumb-Navigation unter dem Fachwissen Thema Design Pattern zu finden ist.

Sie benötigen eine SEO optimierte Webseite?

Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.

Angebote im Überblick

Was sind Design Pattern?

Design Pattern sind einzelne Elemente oder Funktionen einer Website. Sie bilden sozusagen einen Homepage Baukasten, der je nach Bedürfnis der jeweiligen Zielgruppe individuell konfiguriert werden kann. Die Artikelreihe stellt einzelne Elemente wie auch Funktionen einer Website vor und gibt Einblick in guten Tipps und Tricks zur Integration und zur richtigen Nutzung.

Doch kommen wir endlich zum Thema: Breadcrumb
 

Was ist eine Breadcrumb?

Breadcrumbs (dt. Brotkrümmel) werden als Navigationshilfe innerhalb der Benutzeroberflächen UI (User Interface) eingesetzt.

Sie ermöglicht dem Nutzern einer Webseite Überblick über seinen aktuellen Standort zu behalten.

Der Name stammt aus dem Märchen “Hänsel und Gretel”, die auf dem Weg durch den Wald eine Spur aus Brotkümmeln hinterlassen haben, um später den Weg nach Hause wiederzufinden.

Breadcrumb Design: Wie werden Breadcrumbs dargestellt?

Die Breadcrumb Navigation wird wie ein Navigationspfad mit Verlinkungen zu den einzelnen Ordners bzw. den einzelnen Struktur Elementen einer Webseite und deren Hierarchie (Aufbau) dargestellt.

Das Breadcrumb Design: Eine Breadcrumb Navigation kann bspw. folgendes Aussehen haben…

Sie sind hier: Startseite → Blog → Kategorie → Beitrag

Jedes dieser einzelnen Elemente ist verlinkt, sodass der Nutzer leicht wieder zurück zur Ausgangsposition findet.

Breadcrumb Usability: Warum ist die Integration von Breadcrumbs wichtig?

Die Integration von Breadcrumbs ist insofern wichtig, da der Nutzer einer Webseite immer genau aufgezeigt bekommt, wo er sich aktuell befinden und auch wie er wieder zurück zu Seiten wie z.B. der Home Page gelangen kann.

Breadcrumb SEO: Warum ist die Breadcrumb für die Suchmaschinen wichtig?

Breadcrumb SEO bedeutet, daß neben den Nutzern auch die Suchmaschinen eine Orientierung mit Hilfe der Breadcrumb Navigation erhalten. Und so ist die Breadcrumb Navigation ein wichtiges Element für erfolgreiche Suchmaschinenoptimierung geworden.

Breadcrumb WordPress: Gutes Breadcrumb SEO mit WorPress

Bei WordPress Webseiten sind die einzelnen Breadcrumb-Navigaitonselemente bspw. Kategorien, Beiträge oder eben die einzelnen Seiten einer Internetpräsenz. Mit WordPress Breadcrumb einzusetzen ist übrigens sehr leicht möglich! Oft sind Breadcrumbs schon in WordPress Themes integriert und bilden einen absoluten Mehrwert, wenn diese auch aktiviert werden. Ich benutze am liebsten das Genesis Framework, da dieses von Haus aus schon mit Breadcrumbs SEO optimiert ist und durch die saubere Programmierung auch von Suchmaschinen geliebt wird. Im Genesis Framework wie auch in Genesis Childthemes sind Breadcrumbs fester Bestandteil.

Weblinks:

Zum Thema Design Pattern gibt es ganz viel gute Artikel in englischer Sprache. Hier eine kleine Übersicht:

UI Design – Pattern Breadcrumbs
UI Design – Pattern Breadcrumbs Beispiele
Artikel von Smashing Magazine: Breadcrumbs in Web Design

Link Juice:

Kategorie: Design Pattern, Fachwissen

Silke Hohgardt ✷ Digitale Medien Profil Schleiferin

Silke Hohgardt • Online Profiler
Gründerin von Online Profiler ✷ Werkstatt für WordPress Webseiten ✷
Digital Media Studio ✷ COWORKER . SPACE ✷ begeistert von Responsive Web Design, Typographie, Fotografie und Storytelling ✷ arbeite mit WordPress, Genesis Framework, Bootstrap ✷ liebe Ragdolls, Tai Chi, italienische & asiatische Küche und essen bei wagamama
✷ Twitter @onlineprofiler ✷ mehr über mich im → Profil

GEBEN SIE IHREM DIAMANTEN SCHLIFF!

Mit einer neuen Webseite von Online Profiler.
So funktioniert es

FACHWISSEN & THEMEN

→ Web Design
→ Design Pattern
→ Web Development
→ WordPress
→ Genesis
→ Online Marketing
→ SEO
→ Content Marketing
→ Internetrecht
Webdesign : Professionelle Homepage erstellen
Neu: Webdesign Simmern und VHS Kurse
 
Responsive Web Design :
Mobile Optimierung für Websites

 
Suchmaschinen Optimierung :
OnPage SEO Grundlagen
Off Page SEO Grundlagen
Online Profiler
Internet & Webdesign Agentur
Ihre Werkstatt für WordPress Webseiten

Ernst-Siegel-Str. 14
55469 Simmern / Hunsrück
Deutschland

+49 6761 8305 189
Kontakt

Wordpress Logo
genesis framework logo
StudioPress

 
 

  • Bloglovin
  • Facebook
  • Google+
  • Instagram
  • LinkedIn
  • RSS
  • Twitter
  • IMPRESSUM
  • DATENSCHUTZ