Typographie für Websites

[Gast C. M. S.]

Hallo,

ich überdenke gerade meine Homepage zu überarbeiten. Sie ist zwar ohnehin noch sehr klein und nicht all zu alt, aber ich denke, aus typographischer Sicht noch definitiv Verbesserungswürdig.

Wie ist das also mit der Typographie für Websites. Was sollte man beachten? Hab zum Beispiel gelesen, man sollte eher Serifenlose schriften verwenden?!

Die Homepage heißt http://www.blockfolio.de. Ich würde euch bitten mal drauf zu schauen und mir zu sagen, was ihr für Verbesserungswürig haltet und warum. Besonders interessiert mich auch, ob ich es eurer meinung nach lieber bei den zwei Spalten belassen soll oder bei einer. Ich tendiere nämlich gerade dazu auf eine Spalte zu gehen, der einfachkeit halber.

Ich wäre euch dankbar, wenn ihr mir mit eurem Wissen ein wenig unter die Arme greifen würdet. Eigentlich will ich ja nur Tipps, denn wies am Ende ausschaut will ich natüröich selbst entscheiden.

Dank im Vorraus.

Grüße,

Christoph

[RobertMichael]

wenn man ohne scrollen auskommt würde ich diese

zwei spalten so lassen, vorallem wenn du das layout

so lässt – es soll ja an eine zeitung erinnern.

wenn du es umbaust und man erst 3 meter scrollen muss,

dann würde ich auf die zwei spalten verzichten sonst

ist man nur am hin und her scrollen.

vorallem solltest du dir mal gedanken über deine umlaute

machen, die erscheinen bei mir nämlich nicht zur arbeit

und werden von lauter fragezeichen gedoubelt.

ansonsten ist gegen serifenschriften nichts zu sagen, ggf.

könnte man mehr zeilendurchschuss einbauen.

[Ralf Herrmann]

vorallem solltest du dir mal gedanken über deine umlaute

machen, die erscheinen bei mir nämlich nicht zur arbeit

und werden von lauter fragezeichen gedoubelt.

Was daran liegt, dass keine Zeichenkodierung angegeben ist. Sowas zum Beispiel:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Im Übrigen würde ich den Blocksatz weglassen, das klappt bei so kurzen Zeilen einfach nicht – Zeitungs-Look hin oder her.

Ralf

[Christoph Schröer]

Löchrigen Blocksatz würde ich überarbeiten bzw. Flattersatz vorziehen.

[Christoph Schröer]

zwei Dumme ein Gedanke

[Gast C. M. S.]

Hallo,

das mit dem Scrollen ist so eine Sache. Hängt, wie mir grade aufgefallen ist enorm von der Auflösung des Bildschirms ab. Ich hab hier (nicht mein Haupt-PC) eine auflösung von 1024x768 und da ist das ganze sogar zu breit. Werds wohl ein bisschen stauchen müssen. Und scrollen muss man bei so einer kleinen Auflösung bei den Texten auch. Hängt ja immer von der Textlänge ab, wie weit die Seite nach unten geht. Letztlich werden sich die Texte aber immer etwa in einer Länge bewegen, wie die beiden bisherigen Kolumnen.

Ja, mit dem Blocksatz mögt ihr wohl Recht haben. Hätte eigentlich gern einen, aber das mit Trennzeichen klappt nicht, weil es je nach Schriftgrößeneinstellung im Browser und ggf. Betriebssystem dann falsch kommt. Schade, dass es keine automatische Silbentrennung im Internet gibt :(

Gruß,

Christoph

[Proedie]

Hallo Christoph,

meine zwei Cent: Eine Verknüpfung auf die Hauptseite wäre vielleicht noch ganz nett und natürlich fehlen meiner Meinung noch die Hinweise auf korrektes HTML und CSS.

Der Rest wurde schon gesagt, Blocksatz, zwei Spalten und Scrollen ... Ich würde eine Spalte nehmen und die breite ein wenig begrenzen, damit bei hohen Auflösungen die Zeilen nicht zu lang werden.

Oh, und mir fällt gerade auf, dass du deine E-Mail-Adresse im Impressum als mailto angegeben hast. Das ist zwar sehr praktisch, aber es besteht die Gefahr, dass so ein verdammter Bot sich deine Adresse merkt und du jede Menge Frühstücksfleisch bekommst.

Ich weiß, das ist jetzt wenig typografisch, aber alles typografische das mir so auffällt wurde ja schon erwähnt ... He, halt Moment! Wieso beginnst du die erste Zeile des ersten Absatzes eines Artikels mit einem Einzug? Uuuuund deine Gedankenstriche! Du schreibst z. B.:

Leere - und Staub

Korrekt wäre natürlich:

Leere– und Staub.

Ha, das war sogar microtypografisch! Na ja. Ansonsten gefällt mir die Seite eigentlich sehr gut. Angenehm schlicht.

Es grüßt

Proedie

[Sebastian Nagel]

Im grunde die gleichen Fragen stellen wie bei Typografie für andere Medien.

Wer soll das wie lesen, und dann ensprechend gestalten.

Serifen oder nicht? Schau dir dieses Forum an: ist es angenehm zu lesen? Geht auch mit Serifenschriften, die ich dir zu deiner "Zeitungs"-Seite sogar empfehlen würde (Georgia, eventuell Cambria alternativ anbieten?)

Eine oder zwei Spalten? Zwei sind im Web extrem umständlich... Ich würde der Einfachheit für dich selbst halber auf eine umstellen. Du schränkst dich sonst inhaltlich unbewusst ein, weil es dich nervt das auf zwei Spalten hinzubiegen.

Mache den Zeilenabstand der Zeilenlänge entsprechend groß genug, und übertreib es mit der Zeilenlänge nicht. Bedenke: Du hast im Web nach unten unbegrenzt Platz, du musst kein Papier sparen, Seiten einhalten, etc., und der Nutzer ist es im Internet gewohnt zu scrollen, er empfindet das nicht als negativ.

Blocksatz: mit derzeitigen HTML/CSS-Möglichkeiten nicht wirklich machbar. Trennungen sind extrem aufwendig und unzuverlässig (minimal andere Interpretation des Codes, andere Version der Schrift --> Umbruch versaut. Das kannst du nicht mal kontrollieren, außer du hast viele verschiedene Systeme verschiedenen Alters zur Verfügung).

Mach linksbündigen Satz, das ist genauso gut.

Zeitungscharakter: Wie schon gesagt: bildschirm-optimierte Serifenschriften sind da der Bringer. Schau dir die 6 Cleartype-Schriften von Windows Vista an. Sie sind zwar noch nicht so weit verbreitet, aber es wird kommen. Als Alternative/Fallback bleibt dir fast nur Georgia und Times New Roman. Da ist die Georgia auf jeden Fall die bessere Wahl.

Und: Schau dir die Schriften in verschiedenen Größen an. Ich find es immer wieder erstaunlich wie gut/unterschiedlich manche Schriften am Schirm wirken, wenn man die Größe ändert. Wenn du dir das für die Headlines zunutze machst, kannst du auch mit einer "Standardschrift" eindruck schinden, nur weil du sie anders einsetzt als viele andere.

[Gast C. M. S.]

Hallo Proedie,

blöde Frage, was genau meinst du mit den Hinweisen auf korrektes HTML und CSS?

Zur E-Mail Adresse, die hab ich nur kodiert im Quelltext. Bisher von einer Firma (!) hin und wieder die selbe Spammail. Heißt: Bots finden sie nicht. bisher zumindest.

Und erste Zeile erster Absatz hast du recht. Wird notiert.

Zur Sache mit dem Gedankenstrich: Das ist doch das gleiche wie bei den Umlauten, oder hab ich nicht aufgepasst und der Gedankenstrich den du gemacht hast ist ein spezieller (längerer?)

Danke für die Tipps, auch den anderen natürlich.

Hm, und wie ich das mit den Spalten mach, ob ich das wirklich in eine machen soll. Ich schwanke grade. Jemand ausdrücklich der Meinung zwei Spalten sollten bleiben? Mit einer geht halt irgendwie auch das Design verloren.

Noch was zur Hintergrundfarbe. Empfindet Ihr das weiß als zu aggressiv für die augen? Also wäre ein Beige oder so nicht evtl. Leserfreundlicher?

Gruß,

Christoph

[BuchStabe]

Hallo Christoph,

die zwei Spalten in der aufgeräumten Umgebung gefallen mir ausgesprochen gut! Vor allem weil Du Dich damit von der üblichen blog-form absetzt. Und die Beschränkung auf eine bestimmte Textlänge halte ich eher für eine Herausforderung beim Schreiben denn als eine Einschränkung. Ich mag im web eh keine seitenlange Romane lesen.

Mich stört allerdings wie das »folio«-f das G kitzelt. Planst Du da noch eine Änderung?

Grüße

Helmut

[Proedie]

was genau meinst du mit den Hinweisen auf korrektes HTML und CSS?

Hallo Christoph,

wenn du deine Seite korrekt geschrieben hast, ist die Wahrscheinlichkeit, dass die Seite auf anderen Browsern als mit dem du so testest anders aussieht relativ gering. Damit du sichergehst, dass dein Quelltext korrekt ist, wäre es gut ihn zu testen; damit andere auf auf den Trichter kommen, wäre ein Hinweis dass die Seite korrekt ist wünschenswert.

HTML-Validator

CSS-Validator

Der HTML-Validator würde dir z. B. sagen, dass die Angabe der verwendeten Kodierung fehlt, was der Grund für Roberts Fragezeichen ist.

Bots finden sie nicht. bisher zumindest.

Bisher ist das Stichwort.

Zur Sache mit dem Gedankenstrich: Das ist doch das gleiche wie bei den Umlauten, oder hab ich nicht aufgepasst und der Gedankenstrich den du gemacht hast ist ein spezieller (längerer?)

Jupp, ist es. Du benutzt den Bindestrich. Der Gedankenstrich ist der Halbgevierstrich, englisch N-Dash - weil er die breite des kleinen Buchstaben n hat (und ja, ich benutze hier auch den Bindestrich, aber in einem Forum erlaube ich mir das typografische Gegenstück zum Plauderton). In Latex wäre das übrigens:

Leere~-- und Staub

Aber das nur nebenbei.

Noch was zur Hintergrundfarbe. Empfindet Ihr das weiß als zu aggressiv für die augen? Also wäre ein Beige oder so nicht evtl. Leserfreundlicher?

Das schon, aber wie viele Leute (außer mir bei der Arbeit) müssen schon noch an flimmernden Monitoren arbeiten? Und wenn du zu gelb wirst, sieht das ganze unglaublich billig aus. Die Farbe hier im Forum kommt bei mir ganz gut an und auch grau kann ganz gut wirken, aber wenn du nicht gerade die Financial Times nachbauen möchtest ist weiß meiner Meinung nach auch völlig in Ordnung - mehr Farbe schadet aber auch nicht. Schwere Entscheidung. Was bin ich froh, dass ich keine Website habe. ;)

Es grüßt

Proedie

[Gast C. M. S.]

Mich stört allerdings wie das »folio«-f das G kitzelt. Planst Du da noch eine Änderung?

Ehrlichgesagt eigentlich nicht. Ich finde auch leider die Font vom folio nicht mehr (ich Held...). Ich hab mir das auch schon immer gedacht, aber ich hab einfach keine bessere lösung gefunden. Der Untertitel muss meiner meinung nach irgendwie da hin. Blöd.

Der HTML-Validator würde dir z. B. sagen, dass die Angabe der verwendeten Kodierung fehlt, was der Grund für Roberts Fragezeichen ist.

Gut, werde ich mal machen. Danke!

Schau dir die 6 Cleartype-Schriften von Windows Vista an.

Weshalb ich eben sowas eigentlich nciht machen will, ist, dass ich gerne so gestalten würde, wie es auch beim Großteil der Nutzer ankommt. Deshalb werde ich glaube ich bei der Georgia bleiben.

die zwei Spalten in der aufgeräumten Umgebung gefallen mir ausgesprochen gut! Vor allem weil Du Dich damit von der üblichen blog-form absetzt.

Das war das Stichwort. Wenn ichs so lasse, muss ich aber engere Spalten machen (oder engere Ränder), damit das auch auf einem schelchte Bilschirm noch nach was ausschaut. Und mal eine ernst gemeinte Frage: Stört das eigentlich so enorm, wenn man beim lesen ein einziges Mal wieder ein Stückchen hochscrollen muss?

Vielen Danke Euch allen, auch wenn Ihr mich mit Eurer Hilfe vom Logiklernen abhaltet. :D

Gruß,

Christoph

[RobertMichael]

wie wärs den mit horizontalem scrollen?

also von mir aus mehrere textspalten nebeneinander ...

oder ist das von der usability her nicht so toll?

[Proedie]

Schau dir die 6 Cleartype-Schriften von Windows Vista an.

Weshalb ich eben sowas eigentlich nciht machen will, ist, dass ich gerne so gestalten würde, wie es auch beim Großteil der Nutzer ankommt. Deshalb werde ich glaube ich bei der Georgia bleiben.[/quote:1drx29m1]

Hallo,

{font-family:vistawichs, georgia, "dejavu serif", serif;}

Stört das eigentlich so enorm, wenn man beim lesen ein einziges Mal wieder ein Stückchen hochscrollen muss?

Einmal stört das nicht, aber auf jeder (oder fast jeder) Seite, kann das doch ganz schön nervig sein.

wie wärs den mit horizontalem scrollen?

also von mir aus mehrere textspalten nebeneinander ...

Hm, guter Gedanke, aber wie bestimmt man die Höhe der Spalten? Es wäre nicht so gut, wenn man auf kleinen Bildschirmen dann in beide Richtungen Scrollen muss, oder?

Viel Glück bei deinem Kolinahr wünscht

Proedie

[Gast C. M. S.]

Hallo,

ich überlege gerade die Spalten doch zu verwerfen und eine zu machen, die etwas schmaler ist als beide zusammen. Oder Blocksatz und ein bisschen enger sehen die Spalten nämlich Sch**** (tschuldigung) aus. Ich spiel mich mal ein wenig. Die mehreren Horizontalen spalten machen glaube ich das Zeitungslayout total hinüber. Habs aber noch nicht probiert.

Dank und Gruß,

Christoph

PS: Ich spiel mich grade mal mit einer Spalte. Das mag mir auch nicht gefallen...

PPS: Zur verdeutlichng lade ich mal ein Beispielbild hoch. Es mag mir so einfach nicht gefallen. Und das mit dem Blocksatz ist eben in vielen Fällen echt blöd. Langsam überlege ich ein neues, eben nicht Zeitungsartiges Design zu entwerfen.

[RobertMichael]

wie wärs den mit horizontalem scrollen?

also von mir aus mehrere textspalten nebeneinander ...

Hm, guter Gedanke, aber wie bestimmt man die Höhe der Spalten? Es wäre nicht so gut, wenn man auf kleinen Bildschirmen dann in beide Richtungen Scrollen muss, oder?

naja, bei der notwendigst, kleinen auflösung von sagen wir mal 800 x 600

kannst du die spalten locker 400 px hoch machen. viele nutzen ja auch diese

widescreen-displays, was diese dann richtig ausnutzen würde. gerade im web

sind ja widescreen-display nicht gerade sinnvoll.

--

eine einspaltige lösung finde ich wie gesagt bei viel text nicht so toll, vorallem

wenn es zu schmal wird, dann bist du nur am scrollen. dannkannst du auch gleich

ein blog aus der webseite machen.

[Gast C. M. S.]

Was daran liegt, dass keine Zeichenkodierung angegeben ist. Sowas zum Beispiel:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Wie sähe der denn für mich aus. Ich schätze ich brauche das charset=UTF-8, aber was heißt der Rest?

Gruß,

Christoph

[Ralf Herrmann]

Wie sähe der denn für mich aus. Ich schätze ich brauche das charset=UTF-8, aber was heißt der Rest?

Du brauchst den kompletten Tag. Der sagt dem Browser, wie die betreffende Webseite kodiert ist. Welche Kodierung eingesetzt wurde, kannst nur du wissen. Das kann UTF8 sein, ISO 8859-1, Mac Roman oder was auch immer.

Alternativ bzw. zusätzlich kannst du die nicht-ASCII-Zeichen auch Maskieren. Ein Eszett wäre dann z.B. ß

Ralf

[Proedie]

Was daran liegt, dass keine Zeichenkodierung angegeben ist. Sowas zum Beispiel:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Wie sähe der denn für mich aus. Ich schätze ich brauche das charset=UTF-8, aber was heißt der Rest?[/quote:21eeb9y9]

Hallo,

der Rest ist identisch. Das http-equiv="content-type" heißt einfach, dass das "Inhalt" für Browser ist, content="text/html; charset=utf-8" sagt dann was das für Inhalt ist, also Text oder HTML in der Kodierung UTF-8.

Proedie

[Gast C. M. S.]

Super, danke euch. Ich dachte, evtl. müsste auch CSS rein, aber der Text ist ja nur in HTML. Klingt also logisch, dass es weg muss.

Grüße,

Christoph

[Gast C. M. S.]

Hallo nochmal!

So, jetzt hab ichs mal verändert, eine Rezension hinzugefügt und das ganze hochgeladen. Hab die Zeilenabstände so gemacht, wie ichs am schönsten fand, hab das ganze etwas schmäler gemacht, damits auch für kleinere Bildschirmauflösungen gut aussieht und ich hab den Blocksatz entfernt, Linksbündig schin mir doch die bessere Lösung. Und ich habe beschlossen bei zwei Spalten zu bleiben. Ist zwar Leserunfreundlicher (was eigentlich ziemlich blöd ist), aber ich wollte mein Design beibehalten. Ohne Spalten wars einfach öde, weil der Zeitungsflair gefehlt hat.

Würd mich freuen wenn Ihr euch mal durchklickt (und vielleicht auch die Rezension lest, der ein oder andere hat doch sicher Kinder im passenden Alter) und mir evtl. noch sachen sagt die euch auffallen. Und ganz besonders wichtig, ob die Umlaute richtig angezeigt werden.

Vielen, vielen Dank nochmal!

Gruß,

Christoph

PS: Und jetzt wird wieder Logik gelernt...

[Gast C. M. S.]

Doch noch keine Logik.

Hab grad noch die HTML-Korrektheit überprüfen lassen und ich bekomm immer für bilder die ich iengefügt hab folgende Fehlermeldungen:

<img src=impressum.gif> 
E-Mail: <a href="mailto

?

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Weiß damit jemand was anzufangen?

Grüße,

Christoph

[Ralf Herrmann]

Also ich bekomm nur diesen Fehler: required attribute "ALT" not specified

Was bedeutet, du sollst für jedes Bild einen Alternativtext bestimmen:

[img=meinbild.gif]

[Gast C. M. S.]

Ah, vielen Dank!

Gruß,

Christoph

[Proedie]

Hallo,

nur eine Kleinigkeit vielleicht: In deiner Rezession benutzt du einmal typografische Anführungszeichen und sonst nur Zollzeichen.

Es grüßt

Proedie

PS

SaBine? Das allein wäre mir einen Boykott des Buches wert, sagt ProeDie.