Webseitenkritik...

[Severin Kacianka]

Hallo,

Ich erstelle gerade eine Webseite, für die (CD-) Präsentation von mehreren Duzend wissenschaftlichen Texten. Die Webseite ist im Moment nur zu 1/6 mit Inhlate gefüllt, da ich die HTML-Seite halbautomatisch erzeuge, oft einiges Nachzuarbeiten ist und ich Änderungen am Design nur an so wenig Seiten wie möglich durchführen will.

Der URL: http://imst3.uni-klu.ac.at/severin/innovations_cd/index.html
Im Moment ist nur "Schwerpunkt 5" mit Inhalt gefüllt. Direkter Link:
http://imst3.uni-klu.ac.at/severin/innovations_cd/s5/index.html

Soweit ich das getestet habe, sieht die Seite in allen "großen" Browsern ähnlich aus und ist natürlich valide.

Mich würde interessieren, wie euch das Design gefällt und ob ihr es für die Zielgruppe von älteren Menschen, besonders Lehrern, angemessen ist.
Auf der technischen Seite bin ich für jeden Hinweis dankbar. Dies ist mein erstes wirkliches XHTML/CSS Projekt und ich bin mir sicher, dass ihr mir den einen oder anderen Trick zeigen könnt :)

Eine konkrete Frage habe ich auch noch:
Wenn der div "innovationsLinks" zu viel Inhalte hat, fällt er aus dem ihn umgebenden div "content" "heraus". Gibt es eine Möglichkeit "content" dynamisch wachsen zu lassen? Als Workaround kann ich einfach die minimale Höhe von "content" vergrößern. Das gefällt mir  aber nicht, und ist auch wirkungslos, wenn der Benutzer die Schrift im Browser vergrößert. Leider habe ich die Seite mit dem Bug gelöscht, es reicht aber einfach ein paar mehr <li>'s in "innovationsLinks" einzufügen und man sieht was ich meine.

Vielen Dank für Eure Zeit und liebe Grüße,
Severin

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Ich erstelle gerade eine Webseite, für die (CD-) Präsentation von mehreren Duzend wissenschaftlichen Texten. Die Webseite ist im Moment nur zu 1/6 mit Inhlate gefüllt, da ich die HTML-Seite halbautomatisch erzeuge, oft einiges Nachzuarbeiten ist und ich Änderungen am Design nur an so wenig Seiten wie möglich durchführen will.

Änderungen am Design werden im CSS durchgeführt.
Wo ist also das Problem?

Mich würde interessieren, wie euch das Design gefällt und ob ihr es für die Zielgruppe von älteren Menschen, besonders Lehrern, angemessen ist.

Ich finde schon.

Was mir aber gar nicht gefällt: Link-Texte und title-Attribute.
Die würde ich vertauschen, mit den Namen kann ich nämlich gar nichts
anfangen, möchte aber sofort sehen, was potentiell interessant ist
und was nicht - im Moment ist nichts potentiell interessant.

Gruß
Alexander Brock

[Severin Kacianka]

Hallo,

Änderungen am Design werden im CSS durchgeführt.
Wo ist also das Problem?

Ab und an muss(te) ich noch kleinere Änderungen am HTML-Gerüst vornehmen.

Was mir aber gar nicht gefällt: Link-Texte und title-Attribute.

Das Problem ist, dass die Titel sehr lang sind. Es ist schwierig ganze Sätze als Linktext in einer Seitennavigation zu verwenden. Als Kompromiss habe ich den JavaScript (oder title) -Tooltip geschrieben, sowie ein "vollständiges" Inhaltsverzeichnis auf der Startseite des Schwerpunktes angegeben. Viele der Titel sind leider auch kaum kürzbar.
Im übrigen wäre dies eine der Änderungen, bei der froh wäre, nur einen "Schwerpunkt" neu machen zu müssen.

Gruß,
Severin

[alfie]

Hallo Severin!

Mich würde interessieren, wie euch das Design gefällt und ob ihr es für die Zielgruppe von älteren Menschen, besonders Lehrern, angemessen ist.

Als älterer Mensch (47a) ist die Schriftgröße (12px) für mich auf meinem Monitor (20" 1600x1200, Browser 1024x768) zwar gerade noch gut lesbar, der IE macht natürlich die einfachen Variante bei "px" im CSS zur Schriftvergrößerung nicht mit. Ob "Extras-Internetoptionen-Eingabehilfen-Schriftgradangaben auf Websiten ignorieren" verbreitet bekannt ist, wage ich zu bezweifeln ;-)

Wenn ich die Schriften in "richtigen" Browsern vergößere, treten zwei weitere Probleme auf:
1. Die "line-height" skaliert nicht gerade gut mit der Schriftgröße, d.h., die Zeilen stehen sehr eng.
2. Bei manchen Seiten kommt es durch den Blocksatz zum typographischen "Zahnlücken-Effekt", d.h., Zeilen mit mehreren langen Wörter haben unschöne Wortabstände.

Vielleicht überlegst du dir nocheinmal die Verwendung von "em" für Schriftgröße und linksbündig statt Blocksatz.

Überlegenswert wäre auch noch die Verwendung von CSS-Tooltips anstelle von JavaScript.

mfg Alfie

[Severin Kacianka]

Hallo,

Vielleicht überlegst du dir nocheinmal die Verwendung von "em" für Schriftgröße und linksbündig statt Blocksatz.

Ich würde 12px gerne als "Standardvorschlag" haben. Jeder soll die größe verwenden, die er am liebsten hat, und im Zweifel 12px. Wie kann ich das am besten machen?

Überlegenswert wäre auch noch die Verwendung von CSS-Tooltips anstelle von JavaScript.

Wie könnte ich einen solchen realisieren? Ich habe sowas noch nie gesehen.

Gruß,
Severin

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Überlegenswert wäre auch noch die Verwendung von CSS-Tooltips anstelle von JavaScript.

Wie könnte ich einen solchen realisieren? Ich habe sowas noch nie gesehen.

Ingo beschreibt das sehr schön.

Gruß
Alexander Brock

[Længlich]

Ola!

Vielleicht überlegst du dir nocheinmal die Verwendung von "em" für Schriftgröße und linksbündig statt Blocksatz.

Ich würde 12px gerne als "Standardvorschlag" haben. Jeder soll die größe verwenden, die er am liebsten hat, und im Zweifel 12px. Wie kann ich das am besten machen?

Für so was nehme ich immer 1em. Das entspricht bei vielen Leuten 12px; und wenn jemand das verstellt hat, unterstelle ich, daß das Absicht war und er/sie es größer/kleiner haben will.

Viele Grüße vom Længlich

[Struppi]

Der URL: http://imst3.uni-klu.ac.at/severin/innovations_cd/index.html
Im Moment ist nur "Schwerpunkt 5" mit Inhalt gefüllt. Direkter Link:
http://imst3.uni-klu.ac.at/severin/innovations_cd/s5/index.html

Dein toolitip Skript funktioniert nicht ganz richtig. Wenn du scrollst ist das Tootltipp an der falschen Stelle.

Du musst noch die Scrollposition dazu addieren:

function LayerPosition (Ereignis)  
{  
    if(!Ereignis) Ereignis = window.event;  
    var left = evt.clientX;  
    var top = evt.clientY;  
    var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat")  
? window.document.documentElement : window.document.body || null;  
if (b)  
{  
        left += b.scrollLeft;  
        top += b.scrollTop;  
}  
document.getElementById("tooltip").style.left = (left+15)+ "px";  
    document.getElementById("tooltip").style.top = top + "px";  
}  

Struppi.

[Severin Kacianka]

Hallo,

Dein toolitip Skript funktioniert nicht ganz richtig. Wenn du scrollst ist das Tootltipp an der falschen Stelle.

Danke. Ich werde deine Lösung in der Endfassung einbauen.

Gruß,
Severin

[Martin Hölter]

HI!

Ich würde das Banner neu machen.  Der Foto-Teil ist ziemlich unscharf, im Textteil sind Artefakte zu erkenne. Evtl. mal anderes Format probieren (zb. PNG).

Gruß aus Iserlohn

Martin

[Severin Kacianka]

Hallo,

Ich würde das Banner neu machen.  Der Foto-Teil ist ziemlich unscharf, im Textteil sind Artefakte zu erkenne. Evtl. mal anderes Format probieren (zb. PNG).

Das Problem ist, dass mein Ausgangsmaterial nur in dieser Qualität vorhanden war. Ich werde versuchen bessers Material anzuforden.

Gruß,
Severin

[Candid Dauth]

Heißa, Severin,

Im Moment ist nur "Schwerpunkt 5" mit Inhalt gefüllt. Direkter Link:
http://imst3.uni-klu.ac.at/severin/innovations_cd/s5/index.html

Was mir grad nur beim Überfliegen auffällt, ist der Punkt
„Hauptschüler experimentieren mit Volksschülern“

Das hört sich etwas makaber an, ich würde das noch mal umformulieren. ;-)

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Severin Kacianka]

Hallo,

Was mir grad nur beim Überfliegen auffällt, ist der Punkt
„Hauptschüler experimentieren mit Volksschülern“

Das hört sich etwas makaber an, ich würde das noch mal umformulieren. ;-)

Das habe ich mir auch gedacht. Nur leider habe ich auf die Titel keinerlei Einfluss. Wenn ich einen kürzen oder gar ändern würde, würde ich wohl meinen Kopf verlieren ;)

Gruß,
Severin

[at]

Hallo.

Mich würde interessieren, wie euch das Design gefällt und ob ihr es für die Zielgruppe von älteren Menschen, besonders Lehrern, angemessen ist.

Dazu ein paar Anmerkungen:

• Die Schriftgröße empfinde ich als zu klein und der Zielgruppe unangemessen.
• Der Versalsatz innerhalb des Banners ist schwer lesbar, skaliert als Grafik meist nicht und verfügt über ungleichmäßige Abstände. Ich weiß ja, dass du die Grafik nicht selbst gestaltet hast, aber hier wäre sogar eine Umsetzung als Text sinnvoll.
• Die Fotografie ist technisch und inhaltlich mindestens grenzwertig. Auch die ist zwar nicht von dir, aber bis du eine bessere bekommst, wäre kein Foto die visuell attraktivere Variante.
• Der Banner dürfte gern als Verweis auf die Startseite dienen.
• Die Unterscheidung von "Startseite" und "Homepage" verwirrt.
• Über die Sinnhaftigkeit von durchnumerierten, jedoch unbenannten Schwerpunkten als Navigation lässt sich wohl streiten.
• Die Hauptnavigation wirkt grafisch äußerst plump. Die Originalseiten wirken da deutlich harmonischer.
• Die Überschriften der Startseite sollten als Verweise dienen.
• Die Verweise innerhalb der Autorenliste sollten auf die gesamte Fläche der Kästchen erweitert werden. Alternativ könnten natürlich auch die Kästchen einem einzigen großen Kasten oder einer vertikalen Linie weichen.
• Der hover-Effekt bei Verweisen sollte einheitlich umgesetzt werden -- und vorzugsweise nicht wie in der Autorenliste, da er dort fehlerhaft wirkt.
• Die Blautöne passen nicht zueinander und sollten vereinheitlicht werden, falls du daran etwas drehen darfst.
• Im Code habe ich mich über das Banner-<div> gewundert, das ausschließlich das Bild enthält, in dessen alt-Attribut übrigens der Trennstrich fehlt, der in der Grafik ein paar Pixel zu tief sitzt.
• Die Verwendung von <br /><span class="gross_fett"> an Stelle von <li><strong> konnte mich ebenfalls nicht überzeugen.
  Ansonsten ist das Layout ja recht klassisch -- was die Fußzeile meines Erachtens kaum weniger überflüssig macht -- und interessante Details habe ich leider nicht gefunden. Etwas mehr Raffinesse dürfte es schon sein.
  MfG, at