Bilder im Blog-Layout optimieren - Abstand und Rhythmus

Bilder im Blog-Layout optimieren - Abstand und RhythmusIch will diesen Artikel nicht mit dem abgedroschenen “Ein Bild sagt mehr als tausend Worte” einleiten. Daher sage ich mal: Bilder können einen großen Mehrwert erzeugen – wenn man sie lässt. Nicht selten werden Bilder jedoch in Blogartikeln so eingesetzt, das sie eher als Störfaktor denn als Gewinn wahrgenommen werden. Eines der wesentlichen Prinzipien beim Design ist der Abstand zwischen den Dingen. Das gilt natürlich auch für Bilder. Ein zu geringer Abstand können Bilder in ihrer Wirkung empfindlich stören. In diesem Artikel werden ein paar Standard-Regeln beschrieben, wie man Blogartikel so layoutet, dass Bilder ihre Kraft auch entfalten können.

Text sollte kleine Bilder umfliessen

Mittlerweile hat es sich schon fast überall herumgesprochen: Bilder, die kleiner sind als die Hälfte der Textbreite, sollten “umflossen” werden. Die meisten Blog-Systeme bieten diese Option beim Einfügen von Bildern an. Der Abstand zwischen Text und Bild ist dabei nicht selten nur suboptimal gewählt. In der folgenden Grafik ist rechts ein Zustand abgebildet, den man leider häufig sieht: viel zu wenig Platz für das Bild. Das stört nicht nur das Bild, sondern auch den Text bzw. den Lesefluss.

Abb. 1:Text sollte Bilder umfließen - dabei Abstand beachten
Abb. 1: Text sollte Bilder umfließen - dabei Abstand beachten

Abstand zwischen Bild und Text

Ein Bild in einem Text braucht in der horizontalen immer mehr Platz als in der vertikalen. Das hängt mit dem horizontalen Lesefluss zusammen. Als Richtwert sollte man in der horizontale ca. 35 – 50% der Bildbreite kalkulieren. Wenn man einen statischen Wert setzt – was ja meistens der Fall ist -, sollte der nicht unter 40 Pixeln liegen. Das Ganze hängt natürlich von der Breite der “Content-Spalte ab. Je breiter diese Spalte ist, um so mehr Luft sollte man dem Bild gönnen. In der horizontalen genügt weniger Abstand. Hier sind ca. 20% der Bildhöhe bzw. mindestens 20 Pixel oft ausreichend ( wenn man keine Bildunterschrift hat ). In Abhängigkeit zur Zeilenhöhe vergrößert sich dieser Wert dann meistens etwas.

Abstand zwischen Bild und Text
Abb. 2: Abstand zwischen Bild und Text

Breiten Bildern im Layout Platz geben

Das Gesagte gilt für Bilder, deren Breite geringer ist als die Hälfte der Content-Spalte. Wenn die Bilder breiter sind, sollte man sie mittig im Text platzieren. Wenn der Text das Bild umfließt, entstehen in aller Regel durch die geringe Textbreite sehr unschöne Lücken, die den Textfluss stören und viel optische Unruhe schaffen.

Eines der wesentlichen Prinzipien beim Design ist der Abstand zwischen den Dingen. Das gilt natürlich auch für Bilder

Aber auch, wenn die Bilder einen eigenen Absatz erhalten, bringen sie häufig das Gesamtbild ins Ungleichgewicht – das Layout “kippt”. Am sichersten ist es, breite Bilder mittig zu platzieren. Wenn man die Möglichkeit hat, sollte man sie so groß erstellen, dass sie die gesamte Content-Breite einnehmen. Der Betrachter hat dann einfach mehr davon.

Abb. 1:Text sollte Bilder umfließen - dabei Abstand beachten
Abb. 3: Umgang mit breiten Bildern im Layout

Raum zur Entfaltung – Bilder-Rhythmus

Ein Artikel hat oft mehrere Bilder. Dann sollte man darauf achten, den Bilder nicht nur genug Platz zum Text, sondern auch untereinander zu lassen. In der Grafik kann man erkennen, dass das Gesamtbild erheblich aufgelockert wird, wenn man Bilder abwechselnd links- und rechtsbündig setzt bzw. umgekehrt. Dabei sollte die Höhe des Absatzes möglichst mindestens so hoch sein wie die Bildhöhe. Falls das nicht der Fall ist, können wieder zu schmale Textblöcke entstehen, die Lücken aufweisen und unleserlich sind.

Abb. 4: Bilder-Layout - Rhythmus
Abb. 4: Bilder-Layout - Rhythmus

Umgang mit Bildunterschriften

Sowohl für die Leser als auch für Suchmaschinen ist es hilfreich, wenn ein Bild eine Bildunterschrift bekommt. Bei Bildunterschriften sollte man stets darauf achten, dass die Texte unter dem Bild nicht breiter sind als das Bild selber. Da die Bilder auch schmal sein können, wird eine Bildunterschrift daher häufig in einer kleineren Schriftgröße dargestellt.

Bei Bildunterschrift auch Abstand beachten
Abb. 5: Bei Bildunterschrift auch Abstand beachten

Fazit: Bilder brauchen Platz zum Atmen!

Regeln sind dazu da, um gebrochen zu werden. Aber solche Ausnahmen machen in aller Regel optisch nur dann Sinn, wenn sie – im Sinne des Gesamt-Layouts – visuell begründet sind. Wer sich also bei der Gestaltung seines Blogs unsicher ist, sollte besser nicht viel experimentieren, sondern lieber erst mal auf Nummer sicher gehen.

Nachtrag zum Gastbeitrag

Schon seit langen habe ich vor, den Webstandard-Blog und Heiko im besonderen zu danken. Er hat mir in der Startphase meines tagSeoBlog zu Anfang des Jahres 2009 durch eine Reihe von Erwähnungen und Tipps sehr geholfen. Durch seine Edge-of-Links-Artikel, in denen ich mehrfach Erwähnung fand, kamen schon frühzeitig viele Besucher auf meinen Blog. In einem Jahr, in dem viel über Linkgeiz diskutiert wurde, ist das bemerkenswert und beispielhaft. Ich bin froh, dass ich mich beim Webstandard-Blog nun mit diesem Artikel dafür revanchieren kann.

Autor: Der Verfasser dieses Artikels Martin Mißfeldt, ist Betreiber der bereits erwähnten Webseite tagSeoBlog. Nicht minder sehenswert und informativ als diese, ist neben seiner Firmenwebseite www.duplicon.de ( Dienstleister für Webdesign, Multimedia und Trickfilm Animation ), auch seine Webseite www.martin-missfeldt.de. Diese beschäftigt sich mit Kunst, Malerei und Gemälden, wobei ich jedem Leser einen Besuch im Bereich Speedpainting nur wärmstens empfehlen kann!

Werde auch du Gastautor im Webstandardblog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.

  1. Andreas
    21 Dez 2009, 12:08

    Gut geschriebener Artikel und vor allem prima dokumentiert.

    Was leider keine echte Berücksichtigung fand, war der Einfluss bzw. Wirkung der Sidebar auf das Blog Layout mit Bilder. Gerade da immer mehr Werbung in Blogs zu finden ist, wird aus meiner Sicht, auch das Artikel Layout erschwert. Je mehr Bilder, je mehr Ablenkung vom eigentlichen Inhalt. Das habe ich beispielsweise sehr gut beim lesen dieses Artikels bemerkt. Das obere drittel wurde von mir nicht so gut wahr genommen, da gibt es zu viel Ablenkung. Alles was danach kam war angenehmer. Vielleicht sollte man deswegen, je nach Sidebar Inhalt, die Bilder weiter unten im Artikel einbetten? Oder war das auch so gemeint mit “…im Sinne des Gesamt-Layouts”?

    Falls Ihr nicht genau versteht was ich meine, schaut Euch mal diesen Artikel auf einem Netbook an (1024x600). Da wird es richtig deutlich.

    Gruß,
    Andreas


  2. Mißfeldt
    21 Dez 2009, 12:21

    Hi Andreas,
    da hat Du völlig recht. Ich wollte mich erst mal auf die Abstände innerhalb des Artikels beschränken. Aber klar: in Blogs ist die Sitebar ein mächtiger visueller Haufen, oft zu mächtig. Man merkt aber gerade an der Sitebar, wie sich Standards weiterentwickeln. Da müssen sich die Design-Lösungen permanent anpassen...
    Gruß, Martin


  3. Webstandard-Team
    21 Dez 2009, 13:05

    @Andreas: Deine Bemerkung ist absolut nachzuvollziehen, allerdings ist eben vor allem der obere Bereich eines Artikels dazu da um den Leser beim Artikel zu halten und ihn nicht "zu verlieren". Ein Bild zu Auflockerung oder zusätzlichen Beschreibung der Inhalte, kann hier eher hilfreich.

    In diesem Beitrag fällt es aber auch ein wenig mehr ins Gewicht, da der Martin hier Gastautor ist und ich keines seiner Bilder außen vor lassen wollte. Bei Verkleinerungen der Grafiken, wäre die Information die diese Grafiken transportieren sollen eventuell verloren gegangen, daher haben sie hier die ursprünglichen von Martin verwendeten Ausmaße.


  4. Mißfeldt
    21 Dez 2009, 13:17

    @Heiko: stimmt. Unten funzt es besser. Habe ich nicht bedacht - Asche über und so weiter ;-) Aber das macht die Sache andererseits schön anschaulich...
    Gruß, Martin


  5. Webstandard-Team
    21 Dez 2009, 14:05

    @Martin: Nicht nur gut dokumentiert, sondern gleich noch ein Anschauungsbeispiel geliefert ;o)


  6. Oliver Rumpf
    21 Dez 2009, 18:48

    Hallo,

    ein toller Artikel!
    Die Tipps sind super erklärt, dadurch leicht nachvollziehbar und gut in der Umsetzung.
    Für mich war besonders der Abstand zwischen Bild und Text (40% / 20%) gut, neu und hilfreich.

    Weiter so...

    Viele Grüße
    Oliver Rumpf


  7. Robert
    21 Dez 2009, 20:42

    Finde Deinen Artikel sehr nützlich. Viele Blogs versuchen ja nur noch möglichst viele Textanzeigen auf die Website zu packen. Diese werden dann so gut es geht mit dem restlichen Content vermischt, so dass man wegen der verlorenen gegangenen Orientierung versehentlich darauf klickt. Gut, dass es auch Positivbeispiele gibt.


  8. Heiko
    22 Dez 2009, 19:37

    Hey,
    vielen lieben dank! dein beitrag hat mir super geholfen! ich will nämlich nen neuen blog erstellen und mein favorisiertes thema muss viel mit bildern unterstützt werden! super! danke! :-)


  9. André Nitz
    24 Dez 2009, 01:32

    Wieder einmal ein wirklich schöner und gut geschriebener Artikel zu diesem Thema - Danke!

    Viele Grüße aus Leipzig,

    André


  10. Matthias
    08 Jan 2010, 12:43

    Ein schöner Beitrag mit hilfreichen Tips zum Design. Die Tips kann man aber auch bei anderen Seiten gut anwenden, nicht nur bei Blogs.

    PS Die korrekte Übersetzung von Konfuzius Ausspruch lautet übrigens Zeichen und nicht Bild weil er die chinesischen Schriftzeichen betrifft.


  11. Rene
    18 Jan 2010, 10:07

    Wenn man - wie ich - aud dem Textbereich kommt, sind solche Artikel besonders wertvoll. Sie sensibilisieren, was ich dankbar wahrnehme und stärker als bisher zu berücksichtigen versuche.


  12. Caro
    26 Okt 2010, 10:21

    Super anschaulich! Vielen DanK!


  13. Markus 08 Apr 2011, 09:59

    Wie gut, dass es unterschiedliche Ansichten gibt. Prinzipiell ist der Artikel ok, aber einen horizontalen Bildabstand von 35-50% der Bildgröße zum Text kann ich absolut nicht nachvollziehen. Es stört zum einen den Lesefluß, zum anderen sieht es sehr seltsam aus und lenkt die Aufmerksamkeit vom Inhalt ab...

    So etwas findet man im Übrigen in keinem ordentlich gesetzen Blog/Magazin oder Zeitung.

    Viele Grüße,

    Markus


  14. Monika 19 Aug 2011, 22:30

    ich finde 35% der Bilfgröße ebenfalls als viel zu breit,
    das stört ganz massiv das Lesen,

    habe ich ein Bild, das eindeutig mehr mehr hoch als breit ist, ich es aber breit machen muss, weils einen Screenshot zeigt, der wichtig ist für das technische Tutorial,
    dann mache haltich mich soweit es irgend geht an die Regel 2/3 1/3
    weil ich ein 450-500px hohes Bild nicht zentrier, weils den Lesefluss stört.

    ich kenne eine Seite, die Reisen anzeigt, also Reiserouten und die bringen einige Bilder aber immer ganz rechts wie eine dritte Spalte,
    dies wirkt harmonisch

    immer 1 links 1 rechts sah dort einfach irr langweilig und doof aus...

    die Bilder werden aber nie vom Text umflossen, sondern sind eindeutig als "Bildspalte" erkennbar,

    daher find ich das "das muss so sein" -schwer nachvollziehbar und voallem nicht belegt,
    wer kam wann und wo auf die 35% Ratio etc....

    Monika
    von webdesign-in.de, die nun zum 8ten Mal versucht hier zu kommentieren und es einfach nie funktioniert,
    das ist nervtötend


  15. Frank 27 Jan 2013, 09:48

    Ein sehr guter Artikel zum Thema Bilder und Text auf Webseiten. Ich nehme viele Anregungen mit.

    Danke


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage