Artikelbewertung "Typographische Gestaltung und Layout mit CSS"
0 1 0
0 0 0 0
0 0 0 0
0 0 0 0 0 0 0 0 0 0
2 0
0 0 0 1 1 0 0
Hallo SELFHTML-Gemeinde,
Ich habe auf meiner Website einen Artikel zum Thema Typographische Gestaltung und Layout mit CSS verfasst. Ich würde mich freuen, wenn ihr ein paar Kommentare dazu abgeben würdet. Vor allem interessiert mich:
Gerne könnt ihr die Kommentare auch gleich auf meiner Seite am Ende des Artikels (Rubrik "Diskussion") abgeben.
Ciao,
David //aka DeWitt
Hallo,
Typographische Gestaltung und Layout mit CSS
- Ist der Artikel verständlich geschrieben?
ja, unbedingt.
- Sind die behandelten Aspekte korrekt dargestellt?
Ob korrekt, kann ich nicht beurteilen, aber zumindest verständlich und plausibel. Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.
- Fehlen wesentliche Dinge?
- Wie gefällt euch der Artikel?
Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.
Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)
Schönen Tag noch,
Martin
HI,
Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil.
Dass Serifen die Lesbarkeit verbessern ist eine Tatsache aus dem letzten (bzw. noch eher) Jahrhundert, als die Schriften noch nicht die Qualität von heute hatten und die Zeichen überall hingen, nur nicht in der Zeile. Leider setzt sich diese Erkenntnis nur langsam durch... Interessant ist, dass man anhand ein paar Arbeiten häufig schon das Alter des Gestalters plus/minus 30 Jahre abschätzen kann *g*
Auch eine Frutiger hat Schrifttransport; dafür ist die Rotis z. B. auch als herkömmliche Antiqua nicht lesbarer als die Sans Serif-Version (nichts gegen die Rotis, sieht ganz gut aus). Kommt halt immer auf die Schrift an.
Serifen verwende ich auch nur, wenns zum Thema/Design passt, ansonsten so oft wie möglich serifenlos. Sollte ich jemals irgendwann ein Buch rausbringen, dann besteh ich auf jeden Fall auf eine serifenlose Schrift (btw, Web 2.0-Logos verwenden normalerweise auch serifenlose Schriften, sieht einfach moderner aus)...
Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.
/sign.
Sie sind einfach lesbarer, leichter erfassbar, da weniger Verschörkselungen (= Serifen) und weniger Linien.
Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.
Dann kann man den gelben Text überhaupt nicht mehr entziffern, wenn der Hintergrund noch heller ist. Ist sowieso schon kaum Kontrast auf der Seite.
Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)
So lange da nicht Standart steht :)
e7
[...]
Sie sind einfach lesbarer, leichter erfassbar, da weniger Verschörkselungen (= Serifen) und weniger Linien.
Hmm, ich denke ich werde diesen Absatz in meinem Artikel bei Gelegenheit etwas umschreiben, so dass er die Kontroverse, die da anscheinend herrscht (und die sich hier ja auch schon fast abzeichnet), besser verdeutlicht ;).
Ciao,
David //aka DeWitt
[latex]Mae govannen![/latex]
- Ist der Artikel verständlich geschrieben?
ja, unbedingt.
Stmme zu
- Sind die behandelten Aspekte korrekt dargestellt?
Ob korrekt, kann ich nicht beurteilen, aber zumindest verständlich und plausibel. Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.
Ich hingegen bevorzuge sehr oft eine Serifenschrift. Möglich, daß das an der im Artikel angesprochenen browserspezifischen Darstellung liegt.
- Fehlen wesentliche Dinge?
- Wie gefällt euch der Artikel?
Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.
Sehe ich auch so. Ich kann den normalen Text ziemlich schlecht lesen, was ich vornehmlich an der Schriftfarme festmache. So ein dünner hellgelber Text auf dunklem Hintergrund ist für mich nicht so einfach.
Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)
Bei den heute fast überall anzutreffenden hochglänzenden Displays muß halt mal etwas mattes her ;)
Cü,
Kai
Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)
Oje oje, und ich hab mich immer als absolut sicher in der Rechtschreibung eingeschätzt *duck* - ist geändert :D
Hallo Martin,
Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.
Volle Zustimmung. Meine persönliche Präferenz sind auch serifenlose Schriftarten. Besonders lustig fand ich's, als sie vor einigen Jahren mal das Layout der c't geändert haben und plötzlich auch serifenlose Schriften verwendet haben - in den Leserbriefen gab's einen Aufschrei sondersgleichen und es wurde immer wieder die Aussage gebetsmühlenartig wiederholt, dass Serifen die Lesbarkeit erhöhen. Ich fand die neue (d.h. jetztige) Variante aber schon damals im direkten Vergleich besser als die vorige. Und offensichtlich ist der prophezeite Leserschwund nicht eingetreten, sonst hätten sie's inzwischen wieder zurückgestellt. ;-)
Viele Grüße,
Christian
Gudn!
[...] Besonders lustig fand ich's, als sie vor einigen Jahren mal das Layout der c't geändert haben und plötzlich auch serifenlose Schriften verwendet haben - in den Leserbriefen gab's einen Aufschrei sondersgleichen und es wurde immer wieder die Aussage gebetsmühlenartig wiederholt, dass Serifen die Lesbarkeit erhöhen. Ich fand die neue (d.h. jetztige) Variante aber schon damals im direkten Vergleich besser als die vorige. Und offensichtlich ist der prophezeite Leserschwund nicht eingetreten, sonst hätten sie's inzwischen wieder zurückgestellt. ;-)
Zum Glück! :)
Hab das damals auch "live" miterlebt und war/bin froh, dass sich der Heise-Verlag dazu entschlossen hatte!
Gruß aus Fürth in Mittelfranken,
Samoht
Ich habe eine blöde Frage.
Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?
mfg Beat
Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?
Hmm, was meinst du?
Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?
Hmm, was meinst du?
<ZITAT>
Typographie definiert
Doch was genau bezeichnen nun eigentlich die Begriffe "Typographie" bzw. "Layout"? Ralf Janaszek schreibt auf seiner Website typo-info.de:[[1]]
[Typographie steht für die] Lehre von
* den einzelnen Buchstaben,
* der Zusammenfügung einzelner Buchstaben,
* der Zusammenfügung von Buchstaben zu Wörtern und von Wörtern zu gliedernden Elementen wie Zeilen, Absätzen, Textblöcken, Spalten.
Gegenstand des Layouts sind [...] Aspekte wie etwa
* Satzspiegel,
* Positionierung von Texten, Bildern, Fotos, Illustrationen, Logos, Symbolen etc. auf der Seite.
</ZITAT>
[[1]] Das Ziel dieses Links ist die Seite auf welcher der ausführende Link steht.
mfg Beat
[[1]] Das Ziel dieses Links ist die Seite auf welcher der ausführende Link steht.
mfg Beat
Ah danke, da stand glatt ein leeres "href" ;)
Ciao,
David //aka DeWitt
- Wie gefällt euch der Artikel?
du missbrauchst gleich einleitend ein fieldset als gestalterisches element - dafür ist es nicht da - und wagst es dann von layout mit css zu sprechen? ;)
visuell ist er nicht sonderlich ansprechend, die schrift- und hintergrundkombination ist etwas unglücklich, dieses gelb auf lila wirkt nicht sehr seriös - aber das ist geschmackssache
ich selbst bevorzuge schlicht weiss mit schwarzer bzw sehr dunkelgrauer schrift
visuell ist er nicht sonderlich ansprechend, die schrift- und hintergrundkombination ist etwas unglücklich, dieses gelb auf lila wirkt nicht sehr seriös - aber das ist geschmackssache
Ist ja auch "nur" eine Hobbyseite, und das Design ist schon paar Jährchen alt. Würde ich inzwischen selbst so nicht mehr gestalten, aber ich wollte damals einfach mal was neues/originelles basteln. Abgesehen davon bezog sich meine Frage sowieso mehr auf den Artikel-Inhalt als auf das Design der Website, aber trotzdem danke für die ehrliche Meinung.
du missbrauchst gleich einleitend ein fieldset als gestalterisches element - dafür ist es nicht da - und wagst es dann von layout mit css zu sprechen? ;)
Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)
Ciao,
David //aka DeWitt
Ist ja auch "nur" eine Hobbyseite, und das Design ist schon paar Jährchen alt.
ist mir erst nachher aufgefallen, dass der artikel zur seite dazugehört und das design nicht artikelbezogen ist ;)
Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)
deine liste fürs inhaltsverzeichnis hast du ja schon - ein border hätte ja gereicht und die erste ebene der liste etwas negativ drüberschieben ;) - geht ohne viel murksen auch :D
Hallo suit!
Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)
Fieldset-Nachahmung-Variationen von Engin.
Viele Grüße aus Frankfurt/Main,
Patrick
Fieldset-Nachahmung-Variationen von Engin.
ich weiss ja wies funzt :D
btw: das hier gehört nicht ins html ;)
.......:::::::::::::.......
Hallo suit!
ich weiss ja wies funzt :D
Ups, ich hätte schwören können, dass ich auf DeWitts Beitrag antworte. Da war ich wohl etwas très Witt beim Posten ;)
btw: das hier gehört nicht ins html ;)
.......:::::::::::::.......
Hm, ins CSS? ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hm, ins CSS? ;)
idealerweise schon - aber zur not reicht ein schönes hintergrundbild ;)
der vollständigkeit halber:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
hi,
idealerweise schon - aber zur not reicht ein schönes hintergrundbild ;)
haben wir auch. :)
der vollständigkeit halber:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
Das ist aber jetzt ein schlechter Scherz? Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische, auf der anderen den vielleicht übersetzer ins Dürkische[1], und du verlinkst hier´n (fast) Basic....Tztztz....:)
grüße
[1] Dürkisch ist die kurzform für deutsch/türkisch, die Variante für halbtürke/halbdeutscher, die des türkischen nicht so mächtig sind
Hallo Malcolm!
Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische,
Zuviel der Ehre: Ich habe nur wenige Artikel übersetzt, Beispielkorrektur übernommen und auch so etwas Text Korrektur gelesen. Die Arbeit, zwei Versionen vollständig zu übersetzen, hatte sich Serge François gemacht.
Viele Grüße aus Frankfurt/Main,
Patrick
hi Patrick,
Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische,
Zuviel der Ehre: Ich habe nur wenige Artikel übersetzt, Beispielkorrektur übernommen und auch so etwas Text Korrektur gelesen. Die Arbeit, zwei Versionen vollständig zu übersetzen, hatte sich Serge François gemacht.
Das weiss ich, dennoch, du bist in die Materie[1] gesprungen und wieder lebend raus gekommen, das kann man ja erwähnen. :)
grüße
[1] SELFHTML
Das ist aber jetzt ein schlechter Scherz? Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische, auf der anderen den vielleicht übersetzer ins Dürkische[1], und du verlinkst hier´n (fast) Basic....Tztztz....:)
natürlich weiss ich, dass ihr halbwegs ahnung von dem habt, was ihr schreibt (zu viel soll man euch ja nicht zugestehen, sonst werdet ihr übermütigt :D) - der "vollständigkeit halber" war so gemeint:
wenn jemand mit der forumsuche den beitrag hier findet und vorfindet "es geht", ist er sicher frustriert, wenn die eigentliche antwort nicht dabei steht - darum verlinkt
geht mir permanent irgendwo, du findest in einem forum einen beitrag der sich mit exakt deinem problem beschäftigt und nach vielen antworten kommt dann "danke, habs gelöst, war einfach" ohne genau zu wissen, was jetzt eigentlich falsch war oder es wird gesagt: "das geht eigentlich anders" und als antwort eben: "ja ich weiss, sonst mach ichs richtig - war nur zum testen" oder ählich - aber das entscheidende WIE fehlt leider oft
hi,
natürlich weiss ich, dass ihr halbwegs ahnung von dem habt, was ihr schreibt (zu viel soll man euch ja nicht zugestehen, sonst werdet ihr übermütigt :D) - der "vollständigkeit halber" war so gemeint:
Darunter leide ich ja jetzt schon *G
wenn jemand mit der forumsuche den beitrag hier findet und vorfindet "es geht", ist er sicher frustriert, wenn die eigentliche antwort nicht dabei steht - darum verlinkt
geht mir permanent irgendwo, du findest in einem forum einen beitrag der sich mit exakt deinem problem beschäftigt und nach vielen antworten kommt dann "danke, habs gelöst, war einfach" ohne genau zu wissen, was jetzt eigentlich falsch war oder es wird gesagt: "das geht eigentlich anders" und als antwort eben: "ja ich weiss, sonst mach ichs richtig - war nur zum testen" oder ählich - aber das entscheidende WIE fehlt leider oft
FULL ACK! Du sprichst mir aus der Seele.
An sowas denk ich leider nie, vielleicht in Zukunft[1].
grüße
[1] Wenn ich ne neue Maus hab mach ich das auch! Mit meiner ist das Surfen derzeit ne Qual.
Hallo,
aus http://dh.drsnet.de/dh/v6/webdesign/article/typographie/4:
body {
font-size:87.5%;
}
Ich persönlich finde so etwas extrem unglücklich. Ohne mein Standard-User-CSS, das für body eine Schriftgröße von 100 % festlegt, wäre mir die Schriftgröße für Deine Fließtexte zu klein.
Viele Grüße
Carsten
Hallo.
Falls der Beitrag morgen abend noch verfügbar ist, werde ich mich zu Wort melden. Jetzt bin ich müde und muss morgen früh raus.
MfG, at
Hallo.
- Ist der Artikel verständlich geschrieben?
Im Großen und Ganzen sicher. Schwierig finde ich den fortwährenden Bezug auf Pixelgrößen, obwohl du ja eigentlich im em
arbeitest. Und ein Satz wie "Ein Absatz soll den Text visuell in semantische Absätze aufteilen." dürfte niemanden verständlich sein, der nicht bereits vorher wusste, was du meinst. Und den Absatz zur logischen Textauszeichnung verstehe ich nicht einmal, obwohl ich nicht gerade fachfremd bin.
Dem Verständlich zugute kommen natürlich sprechende Klassenamen, aber dabei sollte natürlich nicht unwähnt bleiben, dass "left" oder "right" besser nicht zu verwenden sind.
- Sind die behandelten Aspekte korrekt dargestellt?
- Fehlen wesentliche Dinge?
Auf diese Fragen würde ich gern ausführlicher eingehen. Daher dazu später mehr.
- Wie gefällt euch der Artikel?
Zunächst fallen mir einige formale Schwächen auf: So verwendest du leider keine sprechenden URI, und deine Vorliebe für überbordende Fußzeilen entspricht klar dem Gegenteil von guter Typographie. Nicht, dass das so wichtig wäre, aber es fällt eben auf jeder Seite aufs Neue unangenehem auf. Und zum sonstigen Layout deiner Seiten hast du dich ja bereits geäußert. Außerdem muss man sich kaum darum sorgen, denn du kennst ja offensichtlich das Handwerkszeug, um auch dort Abhilfe zu schaffen.
Interessant finde ich den Ansatz, ein vollständiges Dokument als Vorlage zu wählen und die bisherigen Arbeitsschritte jeweils am Seitenende zu resümieren.
Was von der Herangehensweise zu halten ist, sich aus vorhandenen Nachschlagewerken wesentliche Teile zusammen zu suchen, um sich daraus ein Best-of zu basteln, möge natürlich prinziell jeder für sich entscheiden, aber ich persönlich würde dann auch mehr Eigenleistung erwarten. Und damit meine ich natürlich nicht, den Text nur anders zu formulieren, sondern neue Aspekte aus dem Hut zu zaubern, die man nicht schon von den Seiten kennt, auf die du verweist. -- Nur um das nicht unerwähnt zu lassen: Dass du deine Quellen refenzierst, ist sehr anständig und leider nicht selbstverständlich. Danke dafür.
MfG, at
Hallo.
Ich stelle meinen Nachsatz besser gleich nach vorne, damit du die Kritik nicht in den falschen Hals bekommst: Ich halte deine Arbeit trotz ihrer Mängel für sehr gelungen. Sie wird dem Anspruch, ein Text eines interessierten Laien für andere interessierte Laien zu sein, in weiten Teilen gerecht. Überhaupt finde ich es schön, dass du dich für das Thema interessierst und sogar andere dafür gewinnen möchtest. Das verdient großen Respekt und das Ergebnis meinen Glückwunsch.
- Sind die behandelten Aspekte korrekt dargestellt?
Im Wesentlichen. Daher hier die aus meiner Sicht wichtigsten Ausnahmen:
<fieldset>
anderswo aussehen kann, wird wissen, was ich meine --, zum anderen werden hier bestimmte Werte eben nicht überschrieben -- unter anderem die Angabe für die Schriftart!@font-face
existiert übrigens.body { font-size:87.5%; }
" -- Für gute Lesbarkeit fehlen da mindestens 12,5 Prozentpunkte. Und von Pixel-Angaben für Schriftgrößen solltest du generell Abstand nehmen, ebenso wie von Umrechnungen der Einheiten. Könnte man sie so einfach umrechnen, bräuchte man sie ja gar nicht.­
sinnvoll einzusetzen.Hallo.
- Fehlen wesentliche Dinge?
Definitiv. Zum einen das große Ganze, zum anderen hunderte Kleinigkeiten, die die Typographie ausmachen. Und natürlich der Hinweis auf alternative Gestaltungsmöglichkeiten im Kontrast zu Konventionen sowie die Eigenheiten von CSS zur Gestaltung. Dazu nur jeweils ein, zwei Beispiele:
<abbr>
mit einer gepunkteten Linie zu unterstreichen ist gut. Aber was nutzt das, wenn gleichzeitig bei eine Abkürzung wie "z. B." oder "d. h." [sic!] nicht einmal der Zeilenumbruch ausgeschlossen wird? white-space: nowrap;
ist hier einfach Pflicht. Und ein verminderter Wortabstand ebenso. Wie gesagt: Nur ein Beispiel für unzählige, die du natürlich nicht vollständig anführen kannst, aber auch nicht gänzlich ignorieren solltest. Übrigens solltest du zumindest echte Gedankenstriche und Anführungszeichen verwenden.<strong>
innerhalb einer fett dargestellten Überschrift auch als fett oder <em>
innerhalb eines kursiv formatierten Zitatblockes auch als kursiv? Natürlich nicht. Und das fehlt.Sicher erwarte ich insgesamt sehr viel von dir, vielleicht auch zu viel. Aber wenn du einen bleibenden Wert schaffen willst, liegt noch ein wenig Arbeit vor dir.
MfG, at
Wow, danke für diesen wirklich ausführlichen Kommentar. Den möchte ich jetzt nicht nur so überfliegen, sondern mir wirklich bei Gelegenheit die Zeit nehmen und mich intensiv mit dem beschäftigen, was du angemerkt hast. In Kürze folgt also mehr ;)
Ciao,
David //aka DeWitt
Hallo.
Wow, danke für diesen wirklich ausführlichen Kommentar.
Ich freue mich, dass du dich freust. Ein wenig hatte ich ja schon befürchtet, dich vergrault zu haben, aber dazu wäre wahrscheinlich doch mehr nötig gewesen.
In Kürze folgt also mehr ;)
Prima. Wenn du zwischenzeitlich weitere Hilfe benötigst, weißt du ja, wo du sie bekommen kannst. Bei mir dauert das zwar immer ein Weilchen, weil ich ja hier nur den Keller betreue, aber ich bin ja auch nicht der einzige hier, der sich mit der Materie auskennt.
Ich wünsche dir weiterhin viel Spaß.
MfG, at