Was auf Papier toll aussieht, sieht am Bildschirm noch lange nicht automatisch gut aus!

Du hast ein Blog am Laufen? Fein! Du willst, dass es gut und gerne gelesen wird? Sehr schön, dann solltest du etwas dafür tun, um deinen Lesern dies zu erleichtern. Vor allem aber solltest du den Grundsatz beherzigen, dass das, was auf Papier gut aussieht auf dem Monitor noch lange nicht automatisch ebenfalls gut ist - und umgekehrt.

Was ich damit meine? Nun, folgende Punkte:

Vermeide Blocksatz!
Text kann entweder links- oder rechtsbündig formatiert sein. Ist er beides gleichzeitig, dann spricht man vom sog. Blocksatz, d.h. durch Erweiterung der Wortzwischenräume sind alle Zeilen gleich breit. Auf Papier ist das eine gute Sache, und jede Tageszeitung arbeitet damit. Im Webbrowser aber ist es einfach nur furchtbar: erstens beherrschen sie keine Silbentrennung, so dass die Zeilen oft extrem unharmonisch wirken und auch sonst ist das Schriftbild dann extrem unausgewogen. Nutze statt dessen den normalen Flattersatz, also linksbündig, das kommt bedeutend besser.

Mache Absätze, die auch als solche erkennbar sind!
Es erleichtert den Lesefluss ungemein, wenn Absätze auf den ersten Blick als solche durch einen größeren, vertikalen Freiraum erkennbar sind. Wenn aber Absätze Zeile an Zeile kleben wie normaler Text, dann wird es sehr schwer lesbar.

Schwarz auf Weiß liest sich Schrift immer noch am Besten!
Die Zeit, in der man irgendwelche obskuren Grafiken als Hintergrund für seine Texte nutzte und so seine Leser am einfachen Entziffern des Inhalts hinderte, ist spätestens seit Ende des letzten Jahrtausends vorbei. Nicht ohne Grund nutzen alle erfolgreichen Onlinepublikationen fast zu 98% das gute, alte Schwarz auf Weiß.

Mach keine Silbentrennung per Hand!
Denn das geht nur schief, denn wenn man sich die Seite auf einem Desktop-PC ansieht, sieht sie mitunter ganz anders als auf einem Tablet aus.

Nutze JPEG für Bilder, wo es nur geht!
Die schnelleren Ladezeiten im Vergleich zu PNG sind nunmal das, was ein schöneres Leseerlebnis ausmacht.

Nutze unbedingt ein Layout mit fester Breite, das nicht den ganzen Monitor ausreizt!
Die Bildschirme werden immer breiter, und damit machen heutzutage Designs, in denen eine Textzeile  über die gesamte Breite des Monitors geht, keinen Sinn mehr. Das Auge liest nunmal ermüdungsfreier, wenn eine zu lesende Zeile nicht zu lange ist. Diese einfache Tatsache ist im Zeitungsdruck übrigens ein alter Hut, denn nicht umsonst gibt es dort den Spaltensatz als Standard.

Im Zweifelsfall gilt: weniger ist mehr!
Die Mehrheit der Besucher kommt nicht, um ständig durch irgendwelches, nerviges Geblinke unterhalten zu werden noch ausgefuchste Grafikdesigns anzusehen, sie kommt wegen der Inhalte, und Inhalt ist meistens eben Text. Schlimmer ist nur noch, wenn eine Seite unaufgefordert Töne oder Musikstücke abspielt, das kommt immer schlecht!

Und wer wissen will, wie denn nun ein Webdesign des Grauens ausseht, bei dem man alleine durch das Anschauen vor dem Monitor eine schöne Gesichtsbräune bekommt, der schaue sich doch einfach mal die Homepage von Karl Fritsch an.

12 thoughts on “Was auf Papier toll aussieht, sieht am Bildschirm noch lange nicht automatisch gut aus!

  1. Gerd

    Ach du Schei..... und die Homepage ist angeblich ausgezeichnet worden? Schaut für mich eher wie ein Fake aus und so buuuunt argh..... das tut meiner schwarzen Seele weh, geschweige denn in den Augen.

    Bart du musst da noch den Hinweis geben. Wer diese Homepage anschaut, macht das auf eigene Gefahr.

    Reply
      1. Gerd

        Bei allen Göttern, jetzt bin ich echt platt. Da fehlt trotzdem der Warnhinweis, in meinen Augen. Auf Zigaretten muss der ja auch drauf, weil die ja schädlich sein können. Diese Seite könnte ebenfalls für einen schädlich sein, wenn man die sich betrachtet.

        Reply
  2. Serena

    Lieber Bart, da möchte ich Dir in einigen Punkten widersprechen.
    Ich bin der Meinung das heutzutage Blogs und Homepages (oder korrekter auf Englisch "Sites") so unterschiedlichen Zwecken dienen, das man niemals verallgemeinern kann. Sicher sollte er gut lesbar sein egal worum es geht.
    Und natürlich macht ein mittig zentriertes Schriftbild ihn schwerer lesbar und Silbentrennung per Hand ist suboptimal. Sicher, sicher.

    Nur - fangen wir mal bei der Frage Bilder per jpg oder png an!
    Das hängt doch maßgeblich davon ab was ein User für Bilder ein stellt und warum er sie einstellt. Eine Seite über Medizin wird sich ein paar Fotos von Tabeletten die über eine Glasfläche verteilt sind von einer Stockagentur sichern und vielleicht mal ein Heilfplänzchen abbilden. Okay, locker mit .jpg
    Habe ich aber künstlerische Ambitionen an mein Blog oder stelle ich da Tutorials rein bei denen die Bilder sehr kleine wichtige Details enthalten, dann kann die heftig komprimierte .jpg Datei schon nicht mehr das Optimale sein. Nun kann man entgegnen "gut im Bilderblog eines Digitalkünstlers erwartet man lange Ladezeiten.".......
    nee muss nicht sein. Ein gescheiter Mensch der hochauflösende Bilder über sein Blog oder seine HP an den Besucher vermitteln möchte macht es vielleicht dadurch schnell, das er die Bilder hosten lässt, und statt der Bilder Thumbnails reinstellt die, wenn sie angeklickt werden das gehostete Bild von der Adresse des Hosts aus öffnen.
    Wie auch immer, was ich sagen will ist, das es nicht immer darum geht Schnelligkeit auf kosten der Bildqualität zu erhalten, da hat jeder seine eigenen Vorstellungen.
    Zweitens, das Besucher nur wegen der Inhalte kommen die meistens Text sind kann ich so nicht unterschreiben. Das ist vermutlich eine typisch männliche Sicht, da die Kommunikation des Mannes auf das Erhalten von Informationen ausgelegt ist. (im Gegensatz zur Kommunikation der Frau die darauf ausgerichtet ist, Nähe und Intimität herzustellen und Gefühle zu teilen). Ich als Frau geniesse es in der Tat ebenso, wenn der Text mit dem zu ergatternden Inhalt in einer grafisch wohlgefälligen Umgebung angesiedelt ist. Das bedeutet natürlich keine tausend Blings und transparenten Schriftboxen wo man vor lauter Hintergrund den Text nicht mehr lesen kann. Aber eine Seite die Beispielsweise einfach nur weiss auf hellgrau ist wie Deine, ist mir persönlich definitiv zu nüchtern und von der Helligkeit her recht erschlagend.)
    Also auch hier: Geschmackssache.
    Fakt ist wir können es nie allen Herren recht machen.
    Fakt ist auch: Die Geschmäcker und Absichten der Leute sind verschieden.
    Von daher würde ich mir wünschen das nicht so zu verallgemeinern.

    Ach ja, und wenn wir schon bei Tips für Blogs sind:
    Könntest Du mal dazu übergehen Deine Links so anzulegen das sie in einem neuen Tab geöffnet werden anstatt Deine Seite im gleichen Tab abzulösen? Denn nicht immer wenn man einen Link klickt will man Dich ja gleich verlassen.......... 🙂

    Reply
    1. Bartholomew Gallacher

      Serena, beim Aufbau einer Webseite ist Geschwindigkeit und gute Lesbarkeit Trumpf sowie das Gefühl, dass der Benutzer alles unter seiner Kontrolle hat, also die Seite nicht irgendwelchen Mist abzieht, der ihm mißfallen könnte.

      Schlechtes Verhalten einer Webseite ist z.B. Popup- oder Popunder-Werbung oder das ungefragte Öffnen von ausgehenden Links in neuen Fenstern. Nichts nervt mehr als genau das, wenn ausgehende Links standardmäßig in einem neuen Fenster geöffnet werden, zudem macht es die gute Bedienbarkeit des WWW kaputt, denn der Vor- und Zurück-Knopf des Browsers funktioniert damit nicht mehr.

      Daher werde ich meine Links so lassen, wie sie sind, wer einen Link in einem neuen Fenster öffnen will, der kann ja Strg drücken und dann die linke Maustaste nehmen, so öffnet sich ein Link in allen gängigen Browsern in einem neuen Tab.

      Dann zu PNG im Vergleich zu JPEG: ja, JPEG ist eine verlustbehaftete Komprimierung, allerdings gibt es keinerlei Entschuldigung, nicht JPEG zu verwenden. Man kann auch mit JPEG sehr wohl Bilder in einer Qualität speichern, dass kein nennenswerter Unterschied zu PNG sichtbar ist, aber das JPEG ist im Vergleich zum PNG immer noch um Längen kleiner. Damit also schneller ladbar, und auf die Geschwindigkeit kommt es nun einmal an.

      Ich sprach übrigens nicht von einem mittig zentrierten Schriftbild, sondern vom guten, alten Blocksatz. Der ist gut für totes Holz, sieht aber auf dem Bildschirm einfach nach wie vor meist Scheiße aus, auf Smartphones geht es noch gerade so. Das kommt bei Browsern einfach daher, dass deren Algorithmen fürs Rendering von Blocksatz unterentwickelt sind, sie keine passende, automatische Silbentrennung beherrschen, eine wirklich gescheite Schriftdarstellung da auch nicht stattfindet, und und und... In Wirklichkeit ist es so, dass selbst Textverarbeitungen wie Word in Sachen Blocksatz nach wie vor Entwicklungsland sind. Das Maß aller Dinge ist dabei für mich nach wie vor LaTeX.

      Zum Design: ich mag es so gerade, wie es hier ist und werde daran in Zukunft erst einmal kaum etwas ändern. Ja, es ist nüchtern dafür aber auch flott und gut lesbar, darauf kommt es mir nun einmal in erster Linie an.

      Reply
  3. Der Sleen

    Also auch hier: Geschmackssache.

    Nein Serena

    Es ist ein weit verbreiteter Irrtum, dass Webdesign was mit Geschmack zu tun hat. Ausserdem spricht Barth hier nicht von irgendwelchen Webseiten sondern von Blogs. Bñogs werden tatseachlich aufgrund Ihrer Inhalte gelesen. "Huebsches Design" ist nebensaechlich, ja meisst soger stoerend.

    Die Punkt die Barth auffuehrte sind ein paar Basis Regeln an die man sich halten sollte. Aber in einem Punkt gb ich Dir Recht: Barths Design template ist schon sehr nuechtern, das geht sicher besser.

    Der Sleen

    Reply
    1. Bartholomew Gallacher

      Mir gefällt es gerade so, wie es ist. Sicher gibt's Myriaden an Templates für WordPress, und auch viele die grafisch wesentlich mehr Schnickschnack bieten als nun Weaver-II, aber ich bin so zufrieden.

      Reply
  4. Der Sleen

    Barth

    Wie gesagt: Solange die Inhalte interessieren, ist Design nicht wirklich wichtig, solange man die von die aufgefuehrten Basics beherzigt.

    Der Sleen

    Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.