Design, Code und Inhalt bewerten [EDITOR]

[francesco]

Hallo!

Habe vor kurzem folgende Website erstellt und wollte mal ein paar Meinungen einholen, was man noch verbessern könnte, was euch auffällt, etc.

Das Design ist eher schlicht gehalten (oder besser: nicht vorhanden), da ich mich bis jetzt mehr mit dem Code beschäftigt habe.

Bin für alle Beiträge mehr als dankbar!

 

[Efchen]

Du könntest mir eine Frage dazu beantworten: Warum muss man in HTML5 die Textabsätze nicht mehr schließen? Wo ist definiert, wo ein Textabsatz endet?

 

[francesco]

Efchen:
Laut HTML 5 Spezifikation:

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, datagrid, dialog, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hr, menu, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

Übrigens schon seit HTML 4.

 

[Efchen]

Interessant zu wissen. Auch wenn ich keinen Grund sehe, sich das so anzueignen, weil es mit Endetag IMHO übersichtlicher ist.

Zu Deiner Site fällt mir übrigens nix ein. Sieht gut aus, hat Semantik, die Schriftgröße lässt sich verändern ohne dass was passiert, nur wenn der Viewport klein ist, ist es ungünstig, dass die Dekoration (Bilder) links stehen und der Text rechts. Da beim ANklicken eines Links der Scrollbalken immer wieder nach ganz links wandert (auf der neuen Seite) muss man immer scrollen. Bei umgekehrter Anordnung würde man irgendwann einfach nicht mehr rechts gucken, weil da nur das Bild steht.

Also kurzum, ne richtig langweilige ;-) Site, wenns nix zu bemängeln gibt ;-)

 

[francesco]

Efchen:
Wieso übersichtlicher? Man weiß doch immer, dass da wo ein <p> steht ein neuer Absatz anfängt und der vorherige geendet hat. Finde ich nachvollziehbar und logisch.

Vielen Dank für den Hinweis mit dem zu kleinen Viewport. Die Breite des content-div-Containers hat in der Tat eine quasi-fixe Breite (60em). Hmm, muss mal schaun wie ich das ändern könnte. Wird schwierig.

Beim letzten Satz hast du mir ein Schmunzeln in's Gesicht gezaubert. :-)

 

[ingoS]

Ich finde die Seite ebenfalls sehr schön anzusehen, hätte allerdings zwei Punkte zu bemängeln:
1.: Die Hervorhebung der aktuellen Seite in der Navigation ist ziemlich öde. Ein Reiter würde sich einfach perfekt eignen, denke ich mir so, als ich den ersten Navigationslink anklicke, und dann ist es nur eine andere Schriftfarbe. Nicht sehr nett von dir. ;)
2.: Die Content-Schriftart wirkt "gediegen" und klassisch, was ja auch ganz gut passt, aber es springt sofort ins Auge, dass sich die Futura aus dem Logo nirgendwo sonst auf der Seite wiederfindet. Nicht nur Farben können sich beißen, bei mir geht das auch mit Schriftarten. ;ugl
Versuch mal, etwas wie

font-family: futura, helvetica, arial, sans-serif;

z.B. für die Navigation und/oder die Überschriften unterzubringen. Dann hätte ich auch nichts mehr zu meckern. ;)

 

[Efchen]

Lachen ist halt gesund :-)

Und es soll doch niemand sagen können, ich kann nur an allem immer rummeckern und so gute Websites, wie ich sie mir vorstelle gibts nicht.

Mit ein bisschen Willen und Arbeitseifer gehts halt doch - und das muss ich dann halt auch mal zugeben. Sollen sich andere ein Stück bei Dir abschneiden - ist genug dran an Dir? ;-)

Mir fällt grad noch was auf: Das Bild auf der Titelseite, was auf den ersten Blick aussieht wie drei Bilder, gefällt mir sehr gut. Denn wenn man es genau ansieht, merkt man ja, dass es nur ein einziges ist. Aber dieser Effekt mit den drei Bilderrahmen gefällt mir sehr gut! Ich find das bewundernswert...*schmacht* ;-) Hätt ich ne Liste der ansehnlichsten Websites, ich würde die mit drauf setzen :-)

Okay...reicht schon wieder...genug des Lobs...irgendwo muss doch noch was sein, was man bemängeln kann...*kram*such*

 

[francesco]

ingoS:

zu 1: Eine andere Schriftfarbe und der Link ist dann kein Link mehr. Also wenn das nicht ausreicht...nein im Ernst: Hast Recht, ist verbesserungswürdig.
zu 2: Guter Tipp und gut erkannt. :-) Darüber muss ich auf jeden Fall noch nachdenken, danke dir! :grin:


Efchen:

:lol:

Das Einzige, was mich codemäßig noch unheimlich aufregt, ist die Ausgabe der einzelnen News und der Formulare. Ist CMS-bedingt und leider etwas schwierig auszubügeln. :(

 

[francesco]

ingoS:
Hab die Navigation und die Headings mal mit font-family: helvetica, arial, sans-serif; ausgestattet. Muss sagen, sieht (zumindest auf meiner Maschine) sehr viel besser aus.

Futura hab ich auch ausprobiert, die ist allerdings sehr schlecht lesbar und die meisten Menschen da draußen haben's sowieso nicht installiert, also wird man die auch in Zukunft nur im Logo bewundern können. :-)

 

[ingoS]

Musst ja jetzt nicht vor Freude schon den einen Websitecheck-Doppelpost aufbrauchen *Zaun*.

Zu den Änderungen: Was die Navigation angeht, auf alle Fälle Daumen hoch.
Die Überschriften wirken jetzt leider, im Gegensatz zu vorher, ziemlich klotzig. Versuch es mal ein bisschen kleiner und/oder heller, #666 bietet sich da an (das wirkt enorm!).

 

[francesco]

Habe jetzt mal Musikbeispiele hinzugefügt, und zwar unter der Rubrik "Band" und dann unter Repertoire. Funktioniert leider nicht im Internet Explorer. Weiß jemand, wie ich das Problem beheben könnte bzw. wie würdet ihr Audio-Files in eine Website einbinden? Danke schonmal! :-)

 

[ingoS]

Beheben lässt es sich, indem du einfach neben <embed...> auch noch <object...> verwendest. Ob das jetzt natürlich mit irgendeiner semantischen oder syntaktischen Verstiegenheit kollidiert, kann ich nicht beurteilen.
Ansonsten finde ich die aktuelle Form der Einbindung sehr angenehm. Direktlinks zu den Dateien für Leute ohne Flash wären natürlich noch besser.

EDIT: Schade, dass du die Überschriften wieder in Georgia zurückgeändert hast...

 

[francesco]

Öhm, wie meinst du das jetzt genau mit dem <object>? Hab ein paar Varianten ausprobiert, aber nichts hat funktioniert.

Die Download-Links habe ich hinzugefügt. Gute Idee! ;-)

Ja, das mit der Schrift is so 'ne Sache. Muss mich daran einfach gewöhnen. Hab's jetz nochmal umgestellt und ich lass es jetz eine Zeit lang so. Mal schaun ob's mir gefällt. :-)

 

[neuroleptika]

..
Ja, das mit der Schrift is so 'ne Sache. Muss mich daran einfach gewöhnen. Hab's jetz nochmal umgestellt und ich lass es jetz eine Zeit lang so. Mal schaun ob's mir gefällt. :-)

Georgia finde ich bei größeren Schriften schön.
Für Überschriften nehme ich die auch gerne. Helvetica wirkt so modern / nüchtern.

 

[ingoS]

Georgia finde ich bei größeren Schriften schön.
Für Überschriften nehme ich die auch gerne.

Rein typografisch ist es ja eher umgekehrt angebrachter, aber fürs Web gelten sowieso wieder andere Regeln. Das bedeutet allerdings nicht, dass die "traditionellen" Druck-Regeln damit ihre Gültigkeit verlieren. Immerhin ist Georgia auf Bildschirm-Leserlichkeit optimiert -- und ich persönlich finde, sie macht sich im Fließtext sehr gut. ;)

Helvetica wirkt so modern / nüchtern.

Ich sehe es eigentlich eher positiv, dass sie mit über 50 (oder auch über 100, wenn man die Vorbilder hinzuzählt) noch modern und nüchtern wirkt.

Meine Meinung ist immer noch, die Überschriften-Schrift sollte serifenlos und in einem passenden Grauton wie #666 oder so gehalten sein.

EDIT: @ccisco: Der Klassiker zur Flash-Einbindung ist ja eigentlich der hier: SELFHTML: HTML/XHTML / Multimedia / Objekte einbinden
Es gibt allerdings auch eine Methode, die noch etwas besser ist. Die Gründe habe ich allerdings wieder vergessen (ich weiß nur noch, dass sie sich einleuchtend lasen :mrgreen:) und leider finde ich auch den entsprechenden Artikel nicht mehr. Er war auf irgendeiner dieser Seiten zu finden, die regelmäßig zum Thema HTML/CSS/Webdesign publizieren...
EDIT2: Ach, da ist es ja, war sogar auf SelfHtml verlinkt -- ich Idiot... :roll:
A List Apart: Articles: Flash Satay: Embedding Flash While Supporting Standards

 

[francesco]

ingoS, juhu, danke für den Link!

Hmmm, wird auf jeden Fall eine schwierige Entscheidung. Georgia vs. Helvetica, serif vs. sans-serif, good vs. evil...:lol:

 

[neuroleptika]

Georgia vs. Helvetica, serif vs. sans-serif, good vs. evil...:lol:

Bei der Schriftgröße verträgt das Design beide Schriften gut.
In den Überschriften finde ich Gorgia gut.

und ich persönlich finde, sie macht sich im Fließtext sehr gut. ;)

Und Ich finde es kommt auf die Schriftgröße an.
Auf cciscos Seite stimmt das.
Bei engen, längeren Fließtext finde ich das überhaupt nicht schön.
Georgia:

Verdana:

Bei noch kleinerer Schrift würden die Serifen von Georgia verklumpen.
Manche Ziffern tanzen in Georgia aus der Reihe. In kurzen Übrschriften oder Hervorhebungen sieht das gut aus.
In längeren Fließtexten wirkt das nur komisch.

 

[ingoS]

ingoS, juhu, danke für den Link!

Kein Problem; hätte ja nicht gedacht, dass ich einem, der hier mit HTML5 ankommt und bei dem sogar Efchen nichts zum Kritisieren findet, noch irgendwie behilflich sein kann. :mrgreen:

Hmmm, wird auf jeden Fall eine schwierige Entscheidung. Georgia vs. Helvetica, serif vs. sans-serif, good vs. evil...:lol:

Danke, dass mein Vorschlag evil sein darf.

@neuroleptika: Hmm, ich habe das wohl alles ein bisschen ungeschickt formuliert. Eigentlich wollte ich ausdrücken, dass ich Georgia im Fließtext sehr schön finde und dass sie, zusätzlich bemerkt, für Lesbarkeit am Bildschirm optimiert wurde (oder umgekehrt -- oder was weiß ich, was ich sagen wollte^^). Was die Schriftgröße angeht, hast du natürlich recht, da stand ich wohl unter dem Einfluss des gelungenen Einsatzes auf der zu bewertenden Seite.
Ich wollte auch gar nicht sagen "Nehmt alle Georgia für Fließtexte auf euren Seiten", das steht mir selbstverständlich nicht zu und ist auch überhaupt nicht meine Überzeugung.
Mit Verdana wiederum kann ich mich nicht so sonderlich gut anfreunden, obwohl man sie in der Tat gut lesen kann, auch besser als Georgia, das räume ich ein. Irgendwie finde ich sie einfach langweilig, und im Druck -- na ja, da ist sie sogar hässlich (besonders im Gegensatz zu Georgia). ;ugl

Ein bisschen ärgern wolltest du mich aber schon mit deinen Beispielen, oder? ;)
Ich sehe bei dem Georgia-Beispiel schon noch ein bisschen Verbesserungspotential, besonders in Richtung line-height und eventuell letter-spacing.
Keine Verbesserung braucht übrigens der Kursivschnitt, der ist doch einfach wunderschön, oder? *freak*

Manche Ziffern tanzen in Georgia aus der Reihe.

Äähm... Ja... Das hatte ich ganz vergessen.
Mich stört das zwar nicht so sehr (ist ja auch bei vielen im Druck eingesetzten Schriften nicht anders -- oh je, jetzt fang ich schon wieder damit an^^), aber irgendwie ist es schon komisch, dass man ausgerechnet Minuskelziffern für eine (angebliche?) Bildschirm-Serifenschrift gewählt hat.
Vielleicht soll das dem Auge beim Lesen helfen und unsere wollen einfach nur nicht geholfen werden.

Ich weiß, ich mach hier mal wieder einen auf Off-Topic, aber wenns den Threadersteller schon bei der Konkurrenz nicht gestört hat und er die Seite da auch noch über eine halbe Stunde (!!!) vorher vorgestellt hat, dann gibt es logischerweise auch keinen Grund zur Beschwerde. :mrgreen:

 

[neuroleptika]

Ein bisschen ärgern wolltest du mich aber schon mit deinen Beispielen, oder? ;)
...

Nein Alexander, ich wollte nur zeigen wie misslungen Georgia in vielen Fließtexten aussehen kann. Das ich ausgerechnet deinen Text verwendet habe fand ich eher witzig.

Ich weiß, ich mach hier mal wieder einen auf Off-Topic, aber wenns den Threadersteller schon bei der Konkurrenz nicht gestört hat und er die Seite da auch noch über eine halbe Stunde (!!!) vorher vorgestellt hat, dann gibt es logischerweise auch keinen Grund zur Beschwerde. :mrgreen:

Ich finde deine Off-Topic Einlagen Nett.
In dem anderen Forum gibt es daß in fast jedem thread. Mich stört es weder dort noch hier.

 

[ingoS]

Nein, das mit dem Ärgern bezog sich darauf, dass du die Georgia mit verbesserten line-height- und eventuell letter-spacing-Werten besser aussehen lassen können hättest (...sollten wir diese merkwürdige deutsche Sprache nicht irgendwann mal abschaffen? ;ugl)
Off-Topic finde ich auch immer nett, solange es ccisco nicht stört und mir kein anderer Mod aufs Dach steigt. :mrgreen: