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.

Hero Image: Die Oberfläche ist tief

Ein Bild erregt augenblicklich Aufmerksamkeit. In Sekundenbruchteilen werden Informationen vermittelt und Assoziationen geweckt. Die Kraft der Bilder im Webdesign einzusetzen, bietet jede Menge Möglichkeiten, Interesse zu wecken und den Besucher zu einem bestimmten Verhalten zu bewegen. Ein gutes Bild verleiht der Fläche des Bildschirms Tiefe und leitet gleichsam in die Tiefe des Contents. Kein Wunder also, dass der Trend zu Hero Images - großflächigen und bildschirmfüllenden Bildern - ungebrochen anhält.

Was bezeichnet “Hero Image” genau und welche Formen gibt es?

In der Regel werden Bilder als “Hero Images” bezeichnet, die den gesamten Bildschirm füllen. Klassisch befinden sie sich dort, wo die meisten Webseitenbesuche ihren Anfang nehmen: Ganz oben auf der Startseite. Manchmal findet man die Bezeichnung “Hero Image” auch bei Bildern, die einfach größer sind als die üblichen 60.000-Pixel-Bilder. Einsetzen kann man sie natürlich überall auf einer Webseite, auch auf Unterseiten, beispielsweise als Hintergrund von Text oder mit Parallax-Effekt.

hero image grafik

Es muss nicht immer ein Foto sein - Hero Image von august.com.au

Statisches und dynamisches Hero Image

Sie können ein einzelnes Bild einsetzen; Sie können aber genauso einen Slider mit mehreren Bildern verwenden: ein dynamisches Hero Image. Eine besondere Form des dynamischen Hero Images ist die Verwendung von Videos - eine Form die eindeutig auf dem Vormarsch ist.

Attribute

Hero Images stellen Kombinationen aus Bild und Text dar. Viel Bild, wenig Text - um es genau zu sagen. Es kann außerdem das Menü eingefügt werden: Entweder als klassische Navigationsleiste oder in Form eines Hamburger Menüs. Besonders beliebt ist auch ein Call-to-action Button im Hero Image. Aber der Fantasie des Webdesigners sind wie immer kaum Grenzen gesetzt. Eingebettet werden auch Videos und andere Medien und alle Elemente, die man auf Webseiten sonst noch finden kann.hero image mit video

Hero Image mit eingebettetem Video - mirkawagner.de

Umgebung

Es gibt Webseiten mit Hero Image, die nicht scrollbar sind. Hier muss also alles Wichtige im Hero Image integriert werden, um den Besucher weiter in die Tiefe der Seite zu führen. Wichtig ist hier, dass das Hero Image dennoch nicht grafisch überfrachtet wird. Wer eine scrollbare Webseite verwendet, macht es sich generell leichter.

Übrigens: Wegen der Erhöhung der Ladezeit durch großflächige Bilder braucht sich heutzutage niemand mehr Sorgen zu machen: Datenkomprimierung und schnelles Internet haben dazu beigetragen, dass Hero Images ihr heldenhaftes Dasein voll ausspielen können.

Welche Qualitäten müssen Hero Images aufweisen?

Qualität ist das Stichwort. Selbstverständlich müssen Hero Images kristallklar, gestochen scharf - es sei denn, man spielt mit dem Blur-Effekt - und kontrastreich sein. Wer eine Fotografie verwenden möchte, der kommt kaum daran vorbei, eine professionelle Arbeit zu wählen. Ein kostenloses Stockfoto zu verwenden, ist nicht ratsam. Ein richtiger Hero Shot sollte möglichst einzigartig sein und nicht an allem möglichen Ecken des Internets auftauchen. Fotos werden übrigens am häufigsten als Hero Image verwendet. Sie sprechen Betrachter am stärksten an, weil sie wie kein anderes Medium in der Lage sind, Emotionen zu transportieren und Geschichten zu erzählen.

Bildauswahl

Besonders gerne werden Fotos von Menschen gewählt: Der bereits erwähnte emotionale und narrative Bezug zum Betrachter prädestiniert Fotos dieser Art. Wählen Sie jedoch niemals unpersönliche Bilder à la “Schüttelnde Hände”, “lächelnde Gesichter”, “Daumen hoch” und ähnliches.

Fotos von Menschen können auch zur gezielten Lenkung der Aufmerksamkeit eingesetzt werden. Betrachter folgen automatisch dem Blick oder der Geste einer Person und “finden” dadurch schneller Elemente wie Call-to-action Buttons und ähnliches.

TIPP: Menschen, die den Betrachter genau anschauen, ziehen am meisten Aufmerksamkeit auf sich. Der direkte Blick - selbst in einem Foto - signalisiert Kontaktaufnahme ergo Kommunikation.

hero image  - portrait

Hero Image von matterofform.com

Hero Images müssen aber mitnichten Fotos sein. Verwendung finden ebenfalls Grafiken, Illustrationen und sogar Gemälde. Die Bildauswahl ist selbstverständlich von der Branche abhängig. Dabei müssen Bilder nicht zwangsläufig einen thematischen Bezug zum Inhalt der Internetseite, zum angebotenen Produkt oder der beworbenen Dienstleistung besitzen. Oft ist ein assoziativer Bezug sogar besser. Unter Umständen kann man mit dem Bild eines prächtigen Blaubeerkuchens riskante Aktien verkaufen…

Bildkomposition

Hero Image als Publikumsliebling trifft auf einen anderen Liebling des Internets: die großzügige und schön gestaltete Typografie. Bei der Komposition beider Elemente müssen Akzente gesetzt werden. Das Hero Image darf auf keinen Fall überfrachtet wirken; hier wie andernorts ist heut- und sicher auch morgenzutage minimalistisches Design angesagt. Die verschiedenen grafischen und textlichen Elemente dürfen optisch nicht gleichwertig erscheinen, ansonsten ruft selbst ein Hero Image Langeweile hervor.

hero image buttons

Hero Image mit integrierten Buttons, Text und Hamburger Menü von matterofform.com

Bildkontrast

Bilder, die besonders interessant wirken, haben eines gemeinsam: Sie bieten ausreichende Kontraste. Selbstverständlich muss zwischen Hintergrundbild und Schrift ein ausreichender Kontrast bestehen, damit die Schrift gut lesbar ist und ihr gutes Aussehen hinreichend Betonung findet. Aus diesem Grund kann nur selten schwarze Schrift verwendet werden: Sie kann nur dann zum Einsatz kommen, wenn das Hintergrundbild sehr hell ist. Wer den Kontrast erhöhen möchte, kann die Schrift wahlweise mit einem farbigen Feld hinterlegen oder das Bild selbst an den entsprechenden Stellen aufhellen oder nachdunkeln. Das Bild selbst muss natürlich ebenfalls hinreichend kontrastreich sein - sonst wirkt es flach und leblos.

Wer sich viele Webseiten anschaut, die auf Hero Image setzen, wird schnell feststellen: State of the webdesign art ist im Moment der Gebrauch von kontrastreichen Fotos in Kombination mit weißer Schrift.

Hamburger Menü im Webdesign

Seit das Zeitalter der mobilen Endgeräte angebrochen ist, ist ein Symbol präsenter denn je: Das Hamburger Menü. Drei horizontale Balken - gesehen haben es sicher die meisten schon mal, aber nicht jeder kennt es beim Namen.

Was genau verbirgt sich dahinter? Die Funktion der drei symmetrischen Striche erschließt sich sicherlich nicht sofort, aber sobald man die Anwendung dahinter einmal verstanden hat, ist es eindeutig, oder nicht? Das kleine Icon teilt die Webdesigner in zwei Lager.

Entstehung des Hamburger Menüs

Nur was für Kenner?

Wer technisch versiert ist, kann sich denken welche Funktion hinter dem Icon steckt und klickt drauf. Das Symbol mit den drei horizontalen Strichen dient dazu das Navigationsmenü aus- bzw. einzuklappen. Wer jedoch nicht so routiniert im Internet unterwegs ist, klickt nur auf Buttons, die er kennt oder sucht zunächst nach einer mitgelieferten Erklärung.

Bei der Erstellung einer Website ist es daher wichtig, dass das Hamburger Menü stets präsent und nie außerhalb des Sichtfeldes des Users ist. Denn hier gilt: Aus den Augen aus dem Sinn. Sobald die drei Striche dauerhaft sichtbar sind, liegt es quasi auf der Hand, dass sich dahinter das Seitenmenü verstecken muss.

Hamburger Menü für mobile Webauftritte

Ähnlich wie die Lupe für eine Suchfunktion steht oder sich hinter der Weltkugel eine Sprachauswahl verbirgt, wird auch das ausklappbare Hamburger Menü in der digitalen Welt als Standard angesehen, sobald es einmal als Menü-Icon erkannt wurde.

Inzwischen nutzen nicht nur Webseiten die drei horizontalen Striche als Symbol für ein ausklappbares Menü, sondern auch in Apps, Online-Tools oder auf mancher Fernbedienung ist es zu finden.

Hamburger Menü auf YouTube

Die rasante Ausbreitung des Hamburger Menüs im Webdesign ist ein deutliches Zeichen für dessen Funktionalität. Gerade beim Aufruf über mobile Endgeräte kann durch die Verwendung einer versteckten Navigation Platz gespart werden. Für ein Responsive Webdesign ist das Hamburger Menü eine ideale Alternative für den mobilen Auftritt einer Website.

Nicht immer die beste Wahl

Gerade für die mobile Version einer Website ist das Hamburger Menü die optimale Lösung für ein platzsparendes und übersichtliches Design. Für die klassische Desktop-Version empfiehlt sich jedoch weiterhin ein gut strukturiertes offenes Menü, das schnell einen Überblick über die Seiteninhalte bietet.

Für Websites wie Google+ oder zum Beispiel Pinterest, bei denen sich User durch den Content einer großen Hauptseite scrollen und sich typischerweise nicht über einzelne Menüpunkte navigieren lassen, kann die Navigation problemlos versteckt bzw. eingeklappt werden, da sie für den Besucher nicht essentiell ist.

Hamburger Menü bei Google+

Bevor Sie sich im Webdesign für ein Hamburger Menü entscheiden und dadurch für eine versteckte Navigation, sollten Sie immer prüfen, ob ihre Besucher trotzdem eindeutig zu den relevanten Inhalten navigiert werden.

Hamburger Webdesign

Bilder für Webseiten: Wo gibt's die besten Fotos?

Ein Bild sagt mehr als tausend Worte - diese Phrase bestätigt sich auch im Webdesign. Denn bei der Gestaltung der eigenen Webseiten kommt es immer darauf an, dem Betrachter ein bestimmtes Gefühl zu vermitteln. Bilder als Stimmungsträger sind optimal geeignet, um Ihre Besucher in die gewünschte emotionale Richtung zu lenken.

Dabei können Bilder für Webseiten von A bis Z die unterschiedlichsten Gefühle vermitteln und eignen sich tatsächlich zur Verwendung in allen Branchen. Der seriöse Geschäftsmann, die mitfühlende Pflegerin oder der ausgelassene Kunde, der soeben ein tolles Produkt gekauft hat - innerhalb eines Sekundenbruchteils hat unser Hirn eine Stimmung mit dem Foto assoziiert. Machen Sie sich das zunutzen und positionieren Sie die passenden Bilder für Webseiten!

Woher bekomme ich stimmige Bilder?

Um Ihre Website mit Fotos auszustatten haben Sie verschiedene Möglichkeiten. Jede davon bietet ihre eigenen Vor- und Nachteile. Welche Variante Sie wählen, ist abhängig davon, wie viel Zeit Sie zur Erstellung der Bilder haben, welche Qualität diese haben sollen und wie viel Geld Sie investieren können und möchten.

(1) Eigene Bilder erstellen

Authentisch und überzeugend: Fotos, welche Sie, Ihre Kollegen und Ihr Unternehmen selbst darstellen, wirken immer am besten. Sie geben dem Betrachter bereits einen Einblick in Ihre Arbeit und Sie können ab dem ersten Sichtkontakt Sympathiepunkte sammeln. Setzen Sie sich in Szene - am Arbeitsplatz oder Einsatzort, bei typischen Tätigkeiten Ihres Berufs oder auch im Kontakt mit Kunden. Die Kamera sollten aber nur diejenigen selbst in die Hand nehmen, die sich damit auskennen. Denn Fotos, die aussehen wie “will und kann nicht” vermitteln nichts als Unprofessionalität, die Ihre Besucher sicher nicht überzeugt.

Kontaktieren Sie lieber einen profesionellen Fotografen, der die nötige Erfahrung, Expertise und Ausstattung mitbringt. Er kann Sie beraten zur Wirkung von Bildaufbau und Farbwahl - passend zu den Farben, die Sie auf Ihrer Website verwenden möchten.

Selbstverständlich ist dies eine sehr kostenintensive Variante - man zahlt hier allerdings auch für die kreative Leistung des Fotografen, die Beratung und besonders hochwertige Bilder in bester Qualität. Die professionellen Bilder können Sie dann nicht nur für Ihre Website, sondern auch im Print-Bereich für Broschüren oder Visitenkarten verwenden.

Grundsätzlich empfehlen wir als Firma für Webdesign in Berlin diese Alternative zu wählen. Wenn Sie eigene Bilder für Webseiten verwenden, ist Ihnen der einzigartige Auftritt gesichert.

(2) Bilder einkaufen

Im Internet bieten Fotografen Ihre Bilder zu guten Preisen an. Auf den sogenannten Stock-Seiten können Sie mithilfe von Schlagworten die Bilder suchen, die Ihren Vorstellungen entsprechen. Oft wird der Preis in Credits oder Points angegeben, von denen Sie im Vornherein ein bestimmtes Budget buchen. Falls Ihnen ein Restbetrag bleibt, können Sie sich diesen einfach für später aufbewahren - Bilder werden immer gebraucht, zum Beispiel in einem Blog.

Ein großer Nachteil dieser kostengünstigeren Variante: Sie sind höchstwahrscheinlich nicht die einzige Person, die diese Bilder für Webseiten verwendet. Um unangenehme Überraschungen oder Verwechslungen zu vermeiden, können Sie sich vorher typische Webseiten aus der Branche ansehen.

Die Website iStockPhoto ist wohl der bekannteste Anbieter in diesem Bereich - schauen Sie sich um, vielleicht ist das richtige für Sie dabei!

(3) Kostenlose Bilder nutzen

Wer für den Geldbeutel die beste Alternative wählt, muss sich dafür an anderen Stellen eingrenzen. Im Web gibt es zahlreiche Anbieter für kostenlose und lizenzfreie Bilder, aus deren Repertoire Sie wählen können. Auch hier gilt: Wer sich vorher auf ein paar Websites der Konkurrenz umsieht, vermeidet es, die gleichen Bilder zu verwenden. Es lohnt sich außerdem, ausreichend Zeit in die Suche zu investieren.

Hier finden Sie ein paar Anbieter, bei denen Sie Bilder für Webseiten finden:

  • Pixabay, der Klassiker mit vielen Illustrationen, Bildern und und Vektorgrafiken
  • Unsplash, hier finden Sie wundervolle Stillleben, Fotos mit Menschen, Tieren und Landschaften
  • Splitshire sortiert die Bilder bereits in Kategorien für SIe und macht die Suche noch einfacher
  • Jay Mantri stellt Ihnen beeindruckende, sehr stimmungsvolle und teils künstlerische Fotos zur Verfügung
  • Bei Gratisography finden Sie alles von bunt und schrill über witzig und skurril bis hin zu einfach wunderschön und stimmungsvoll
  • Ganz besonders sind die Bilder im Vintage-Stil von New Old Stock
  • Fotos von Lebensmitteln und leckerem Essen finden Sie bei Foodiesfeed

Diese Liste könnte noch um unzählige Seiten ergänzt werden - schauen Sie sich einfach um!

Wie kann ich Bilder auf meiner Website einbeziehen?

Mit Fotos können Sie Ihr Unternehmen präsentieren, Ihre Arbeit für Interessenten transparenter machen oder eben Stimmungen transportieren. Besonders auf der Startseite ist letzteres angebracht, um den Beuschern ab der erstenSekunde einen Eindruck zu vermitteln.

Der Klassiker sind Slideshows mit großen Bildern im oberen Bereich (above the fold) der Startseite. Auf den Bildern können auch kurze Texte oder Schlagworte eingeblendet werden. Generell sind Bilder im Querformat im oberen Teil der Startseite sehr beliebt.

 

Last but not least: Hinweise für Bilder auf Webseiten

Wenn Sie im Begriff sind, eine neue Website zu erstellen oder erstellen zu lassen, benötigen Sie in jedem Fall Bilder. Bereiten Sie sich darauf vor und überlegen Sie sich bereits zu Beginn des Design- und Programmierprozesses, woher Sie die Bilder für die Website nehmen möchten! So vermeiden Sie unnötigen Leerlauf in der Entwicklung und unterstützen die Arbeit Ihrer Webdesigner optimal. Dieser sollte Sie außerdem zeitig genug darauf hinweisen, wann er die Bilder benötigt und welchen Anforderungen Sie gerecht werden müssen.

Beziehen Sie außerdem in die Auswahl der Fotos unbedingt eine zweite Meinung ein! Ob Fotograf, Webdesigner oder einfach nur Kollegen - derjenige muss (nicht unbedingt) fundiertes Wissen aus dem gestalterischen Bereich haben. Erkundigen Sie sich einfach, wie die von Ihnen bereits vorausgewählte Bilder auf denjenigen wirken.

 

Blocksatz oder Flattersatz: Responsive Design ist ausschlaggebend

Blocksatz oder Flattersatz im Webdesign - das ist hier die Frage! Und unter erfahrenen Webdesignern herrscht Einigkeit: Der Blocksatz hat im Webdesign nichts zu suchen, wenn das Ergebnis optisch ansprechend sein soll und einen Webseitenbesuch zu einem gelungenen Gesamterlebnis machen soll.

Wer sich auf seiner Website, Facebook-Seite oder für ein Mailing dennoch an die vermeintlich strukturiertere, übersichtlichere Textausrichtung wagt, sollte über ausreichend Erfahrung und Fingerspitzengefühl verfügen - denn schon im Print-Bereich muss der Blocksatz händisch in der Regel noch nachbearbeitet werden. Die Möglichkeiten, die es diesbezüglich für Druckerzeugnisse gibt, z.B. das Kerning, gibt es im Webdesign nicht bzw. nur bedingt und erfordern dann einen sehr hohen zeitlichen und technischen Aufwand, weshalb der Flattersatz für Digitales gänzlich ungeeignet ist.

Aber es gibt noch einen anderen gewichtigen Grund, weshalb der Flattersatz als Sieger aus dem ewigen Duell der beiden Textausrichtungsvarianten hervorgeht.

Responsive Design: Kein Mut zur Lücke im Webdesign

Immer mehr Suchanfragen stellen die User mittlerweile über ihre mobilen Endgeräte. Wer mit seinem Angebot auch auf Smartphone und Tablet conversionnah auftreten will, muss über kurz oder lang auf responsive Webdesign umstellen. Nur so werden Inhalte endgerätunabhängig einheitlich und benutzerfreundlich angezeigt.

Wer dabei aber den Webdesign-Fehler macht, seine Texte im Blocksatz zu gestalten, muss sich darauf gefasst machen, dass seine Texte von unschönen Lücken zersetzt werden. Diese werden umso größer, je kleiner der Bildschirm wird. Besonders Besitzer älterer iPhone-Modelle dürften wenig Spaß am “Lesen” von Blocksatz haben. Ungleichmäßig groß sind die Wortabstände obendrein, sodass Blocksatz-Texte nicht nur unansehnlich sind, sondern auch den Lesefluss erheblich stören.

Wenn dann auch noch die automatische Silbentrennung eingeschaltet ist, ist eine hohe Bounce Rate vorprogrammiert: Vor lauter Lücken und Bindestrichen ist an Leserlichkeit kaum mehr zu denken. Ihr potenzieller Kunde ist schnell unzufrieden und macht sich auf und davon. Conversion adé!

Leserführung auf ganzer Linie: Alternativen für optische Anker

Damit Ihr digitaler Text auch ohne Blocksatz möglichst leserfreundlich - in diesem Fall freundlich fürs Auge ist - können Sie auf verschiedene Hilfsmittel aus dem Bereich Webdesign zurückgreifen: Einzelne Sinnabschnitte grenzen Sie beispielsweise durch Trennlinien oder textumschließende Kästen voneinander ab. Auf diese Weise lässt effizient erreichen, was im Blocksatz nur mit sehr viel mehr Aufwand herbeigeführt werden kann.

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35