Webseiten-Beurteilung

[Julian von Mendel]

Hallo Welt,

ich habe hier eine Internetseite. Sie kennt noch niemand. Sie ist dafür gedacht, primär durch persönliche Gespräche oder für Leute die man trifft, die weitere Infos wünschen, angegeben zu werden. Sie soll deshalb gut verwendbar, übersichtlich, problemlos sein. Der Inhalt ist das Wichtigste. Das Design sollte nicht total daneben sein, aber es ist nicht das Hauptthema. Sie soll unser Projekt gut präsentieren, aber insbesondere eben dieses erklären, und die Dokumentation verfügbar machen.
Ich bitte euch darum, mir konstruktive Kritik bzgl. allem zu geben, was es da so gibt: Inhalt, Design, Code, Konzept an sich. Bitte alles kritisieren, was euch auffällt - das Ziel dieses Postings ist, die Website noch verbessern zu können, bevor wir sie brauchen. Vielen Dank!

URL: http://lighttraffic.de

Schöne Grüße
Julian

[Eternius]

Hallo,

hmm, mit einem roten submit button im Kontakt assoziiere ich doch eher, dass ich es nicht abschicken soll :D

gruss

[Julian von Mendel]

Hi,

hmm, mit einem roten submit button im Kontakt assoziiere ich doch eher, dass ich es nicht abschicken soll :D

da es nur einen Button gibt, kann man ihn zumindest nicht mit "Löschen" verwechseln ;) Danke für den Hinweis.

Schöne Grüße
Julian

[Ulrich]

Hallo,

Ich habe mir beide angesehen- Ampel und Dein eigenes Ding.
Mir gefallen beide extrem gut. Ich wüßte ehrlich nicht was es (ausser einem roten "Abschicken" button) zu verbessern gäbe.
Hab's mir mit FF und IE angeschaut und bin ehrlich beeindruckt. Das kann mbMn direkt online. Neben dem was man sonst im Netz findet ist das devinitiv ein sehr positives Beispiel.

[Was ich allerdings nicht überprüft habe ist ob jedes bild ein alt attribut hat usw. Aber davon kann man sicherlich ausgehen.]

Orange ist nicht meine beliebteste Farbe, aber dafür kannst Du nichts ;)

Ansonsten SEHR schön!

mfG
Ulrich

[Julian von Mendel]

Hi,

Ich habe mir beide angesehen- Ampel und Dein eigenes Ding.
Mir gefallen beide extrem gut. Ich wüßte ehrlich nicht was es (ausser einem roten "Abschicken" button) zu verbessern gäbe.

den habe ich mittlerweile ersetzt.

Hab's mir mit FF und IE angeschaut und bin ehrlich beeindruckt. Das kann mbMn direkt online. Neben dem was man sonst im Netz findet ist das devinitiv ein sehr positives Beispiel.

Danke!

[Was ich allerdings nicht überprüft habe ist ob jedes bild ein alt attribut hat usw. Aber davon kann man sicherlich ausgehen.]

In der Bildergalerie haben sie kein sehr aussagekräftiges Alt-Attribut. In der Doku haben die vielen Einzel-Bilder ein Alt-Attribut, das den Wert der Bildunterschrift hat, was durchaus sinnvoll ist, denke ich.

Schöne Grüße
Julian

[Gunnar Bittersmann]

Hello out there!

Bevor ich aushole, schließ ich micht erstmal dem Lob an. :-)

In der Doku haben die vielen Einzel-Bilder ein Alt-Attribut, das den Wert der Bildunterschrift hat, was durchaus sinnvoll ist, denke ich.

Denke ich nicht. Ohne Bildanzeige sieht (hört) man denselben Text zweimal. Wenn ein Bild eine aussagekräftige Bildunterschrift hat, ist ein Alternativtext wohl nicht notwendig.

Typographie:
  falsch: 2005 - 2006
  richtig: 2005–2006 (Halbgeviert ohne Leerzeichen, besser noch – U+2013 anstatt der Entityreferenz) [Wikipedia: Gedankenstrich]

Mir erschließt sich auch nicht der Sinn, warum du im Impressum eine Mailadresse angibst _und_ ein Kontaktformular anbietest. Ein Kontaktformular macht Sinn, wenn man seine Mailadresse nicht preisgeben möchte; tut man dies doch, kommt der Nutzer wohl besser mit seinem eigenen Mailclient klar als mit einem fremden Kontaktformular.

See ya up the road,
Gunnar

[Julian von Mendel]

Hi,

Bevor ich aushole, schließ ich micht erstmal dem Lob an. :-)

danke!

In der Doku haben die vielen Einzel-Bilder ein Alt-Attribut, das den Wert der Bildunterschrift hat, was durchaus sinnvoll ist, denke ich.

Denke ich nicht. Ohne Bildanzeige sieht (hört) man denselben Text zweimal. Wenn ein Bild eine aussagekräftige Bildunterschrift hat, ist ein Alternativtext wohl nicht notwendig.

ein alt-Attribut ist Pflicht. Soll ich alt="" setzen? Deine Argumentation stimmt schon.

Typographie:
  falsch: 2005 - 2006
  richtig: 2005–2006 (Halbgeviert ohne Leerzeichen, besser noch – U+2013 anstatt der Entityreferenz) [Wikipedia: Gedankenstrich]

Ich kenne den Unterschied. Danke für den Hinweis. Korrigiere ich gleich.

Mir erschließt sich auch nicht der Sinn, warum du im Impressum eine Mailadresse angibst _und_ ein Kontaktformular anbietest. Ein Kontaktformular macht Sinn, wenn man seine Mailadresse nicht preisgeben möchte; tut man dies doch, kommt der Nutzer wohl besser mit seinem eigenen Mailclient klar als mit einem fremden Kontaktformular.

Viele Leute verwenden keinen E-Mail-Client, sondern Webmail. Sie tun sich deutlich leichter, wenn sie Mails direkt über ein Kontaktformular schicken können.

Schöne Grüße
Julian

[Gunnar Bittersmann]

Hello out there!

[…] ist ein Alternativtext wohl nicht notwendig.
ein alt-Attribut ist Pflicht.

Ich sagte ja auch „Alternativtext“, nicht „alt-Attribut“. ;-)

Soll ich alt="" setzen?

Ja, würd ich machen.

Viele Leute verwenden keinen E-Mail-Client, sondern Webmail. Sie tun sich deutlich leichter, wenn sie Mails direkt über ein Kontaktformular schicken können.

Hm, da könnte was dran sein.

See ya up the road,
Gunnar

[Julian von Mendel]

Hi,

Soll ich alt="" setzen?

Ja, würd ich machen.

erledigt.

Viele Leute verwenden keinen E-Mail-Client, sondern Webmail. Sie tun sich deutlich leichter, wenn sie Mails direkt über ein Kontaktformular schicken können.

Hm, da könnte was dran sein.

Unabhängig davon kann es zumindest nicht schaden.

Vorschläge bzgl. des Inhalts/des Projekts an sich?

Schöne Grüße
Julian

[Ingo Turski]

Hi,

Viele Leute verwenden keinen E-Mail-Client, sondern Webmail. Sie tun sich deutlich leichter, wenn sie Mails direkt über ein Kontaktformular schicken können.

Hm, da könnte was dran sein.

Unabhängig davon kann es zumindest nicht schaden.

und ist schließlich auch gesetzlich vorgeschrieben. Abgesehen davon nutze ich zuhause oft lieber mein E-Mail-Programm und ansonsten lieber ein Formular. Beidesanzubieten ist daher äußerst benutzrfreundlich.

Was mich allerdings extrem bei den Seiten stört ist der zu meiner eingestellten Schriftfarbe Rot absolut nicht passende Hintergrund.

Dann habe ich mir die Seite auch noch im IE angesehen. Warum fixierst Du das Menü nicht oder gibst hier wenigstens eine Hintergrundfarbe an? Über dem Hintergrundbild gescrollt ist es kaum noch nutzbar. Außerdem sind die Breiten hier merkwürdig uneinheitlich und nur die Linktexte anklickbar - auch der hover-Effekt läßt zu wünschen übrig. Und schließlich ist im IE die Schriftgradeinstellung buggy - font-size:100.1% statt 1em könnte das vermeiden.

Apropos Schriftgrad: die Breite der Mini-Navigation solltest Du besser in em angeben, damit die Linktexte nicht aus dem Rahmen fallen können.
Und eine max-width in em für den Inhalt wäre auch nicht schlecht.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

und ist schließlich auch gesetzlich vorgeschrieben.

?? Die Möglichkeit der Kontaktaufnahme ist (bei bestimmten Sites) vorgeschrieben. Das sollte durch die Angabe E-Mailadresse ODER ein Kontaktformular erfüllt sein.

See ya up the road,
Gunnar

[Ingo Turski]

Hi,

?? Die Möglichkeit der Kontaktaufnahme ist (bei bestimmten Sites) vorgeschrieben.

was unter "bestimmten" Seiten zu verstehen ist, wird unterschiedlich gesehen. Meine enge Interpretation ist: jede Seite, die zur _Nutzung_ und nicht nur zum Test ins Netz gestellt wird.

Das sollte durch die Angabe E-Mailadresse ODER ein Kontaktformular erfüllt sein.

Auch das wird unterschiedlich gesehen. Für mich bezeichnet "die Adresse der elektronischen Post" allerdings unmißverständlich eine E-Mail-Asresse. Welchen Sinn hätte dieser Zusatz denn sonst?

freundliche Grüße
Ingo

[Julian von Mendel]

Hi Ingo,

Dann habe ich mir die Seite auch noch im IE angesehen. Warum fixierst Du das Menü nicht oder gibst hier wenigstens eine Hintergrundfarbe an? Über dem Hintergrundbild gescrollt ist es kaum noch nutzbar. Außerdem sind die Breiten hier merkwürdig uneinheitlich und nur die Linktexte anklickbar - auch der hover-Effekt läßt zu wünschen übrig.

wie fixiere ich das Menü im InternetExplorer ohne Javascript? Wird der Rahmen anklickbar, wenn ich den Rahmen dem "a" statt dem "li" zuweise? Daran habe ich nicht gedacht. Dann müsste auch der hover-Effekt aufs "a" angewendet werden - beim "li" ging das ja nicht, weil der IE nur a:hover kann.

Apropos Schriftgrad: die Breite der Mini-Navigation solltest Du besser in em angeben, damit die Linktexte nicht aus dem Rahmen fallen können.

Der Abstand des Inhalts und des Menüs wird von links in px angegeben. Mache ich die Größe des absolut positionierten Menüs relativ statt absolut, weiß ich nicht, wie ich den Abstand des Inhalts von links so angebe, dass der Inhalt immer gleich weit vom Menü entfernt ist. Kannst du mir da einen Tipp geben?

Schöne Grüße
Julian

[Ingo Turski]

Hi,

wie fixiere ich das Menü im InternetExplorer ohne Javascript?

z.B. so: http://de.selfhtml.org/css/layouts/anzeige/fixiert_ie.htm.

Wird der Rahmen anklickbar, wenn ich den Rahmen dem "a" statt dem "li" zuweise?

Ja. Mit Breitenangabe und display:block für a sogar im IE.

Der Abstand des Inhalts und des Menüs wird von links in px angegeben. Mache ich die Größe des absolut positionierten Menüs relativ statt absolut, weiß ich nicht, wie ich den Abstand des Inhalts von links so angebe, dass der Inhalt immer gleich weit vom Menü entfernt ist. Kannst du mir da einen Tipp geben?

Entweder Du läßt genügend Platz dazwischen oder Du positionierst über float und margin oder Du positionierst den Inhaltsbereich left:Xpx und gibst ihm margin-left:Xem.

freundliche Grüße
Ingo

[Der fette Mo]

Guten Tag allerseits,

Mein Respekt (auch wenn er nicht viel zählt xD) für eine akzeptable Darstellung in Netscape 4. Das nenne ich mal barrierefrei!!! Der Valligator hat auch nichts auszusetzen... Layout ist gut und schlicht... Was willst du mehr?

Gruß,
Der fette Mo

[Julian von Mendel]

Hi,

Mein Respekt (auch wenn er nicht viel zählt xD) für eine akzeptable Darstellung in Netscape 4. Das nenne ich mal barrierefrei!!! Der Valligator hat auch nichts auszusetzen... Layout ist gut und schlicht... Was willst du mehr?

guten Inhalt ;) Ja ne - das es im Netscape 4 geht ist keine Kunst - durch validen Code ergibt sich das automatisch. Aber danke :)

Schöne Grüße
Julian

[Der fette Mo]

Guten Tag allerseits,

|Ja ne - das es im Netscape 4 geht ist keine Kunst - durch validen Code ergibt sich das automatisch. Aber danke :)

Genau das mein ich ja :) Valider Code ist nämlich leider immer noch recht selten...
Wüsste echt nicht, was man am Layout aussetzen könnte...

Gruß,
Der fette Mo

[Thomas J.S.]

Hallo,

Ich bitte euch darum, mir konstruktive Kritik bzgl. allem zu geben, was es da so gibt:
Inhalt,

Da der mich nicht tangiert, kann ich dazu nichts agen.

Design,

Das orange des Hintergrunds ist mir zu kräftig, vor allem bei Seiten deren Inhaltsbreich kurz ist.
Ich finde den Rahmen beim Datum in den News auch unnötig und eher störend, weil dadaurch die Seite so zerstückelt wirkt.

Code,

Ich kann es wirklich nicht ausstehen, wenn überschriften hoovern.
Wenn es keinen zwingen Grund für: <h2><a name="a6" id="a6">6. ...</a></h2> gibt, sollte <h2 id="a6">6. ... </h2> vollkommen ausreichen (oder wenn du meinst darauf bestehen zu müssen, definiere in deinem CSS entsprechnde Regel dafür bzw. dagegen)
Validität: auch in xhmtl ist kein <div> im <p> erlaubt (http://lighttraffic.de/pages/doku).

Konzept an sich.

Da der Inhalt mich nicht tangiert, kann ich dazu nichts agen.

Grüße
Thomas

[Mathias Bigge]

Hi Julian,

ich finde den linken Bereich grafisch nicht so gelungen.

1. Navigation
Hier hast Du als zusätzliches Merkzeichen für den aktiven Link die Breite des Unterstrichs. Dieses Schema funktioniert aber nicht richtig, weil der Punkt Kontakt immer rechts herausragt. Vielleicht könntest Du allen Punkten etwas mehr Platz gewähren.

2. Logo
Das wirkt unprofessionell und verpixelt. Könntest Du m.E. sauberer neu bauen. (eventuell vor dem Export ins Webformat in höherer Auflösung arbeiten)

3. Rand links
Ich würde die wenig schöne Farbe des linken Streifens und die dadurch entstehenden Schatten einfach weglassen. Das wirkt unruhig. Vielleicht kannst Du dann die Navigation etwas weiter nach unten ziehen.

4. Schriften
Sorry, aber gepünktelte Linien auf CSS-Seiten kann ich inzwischen nicht mehr sehen, das wirkt auf mich fast wie ein geheimes Bekenntnis für die Anhänger der reinen Lehre ;-) Der Schriftkontrast zum Hintergrund ist definitiv zu klein.

Viele Grüße
Mathias Bigge

[Længlich]

Ola!

Die Seite gefällt mir echt gut - an wirklichen Kritikpunkten habe ich also erstmal nix beizutragen. Nur eine winzige Kleinigkeit: Schmeiß' mal beim Adam-Kraft-Gymnasisum auf der Startseite das zweite 's' raus.
                       ^

Viele Grüße vom Længlich

[Julian von Mendel]

Hi,

Die Seite gefällt mir echt gut - an wirklichen Kritikpunkten habe ich also erstmal nix beizutragen. Nur eine winzige Kleinigkeit: Schmeiß' mal beim Adam-Kraft-Gymnasisum auf der Startseite das zweite 's' raus.

danke! Ist korrigiert.

Schöne Grüße
Julian

[Julian von Mendel]

Hi,

Zusammenfassung der kritisierten und noch nicht korrigierten Punkte:

• Gepunkelte Linien um Überschriften durch durchgezogene ersetzen, Linien um h3 ganz entfernen
• Farbkontrast bei Überschriften verbessern
• Linken Streifen (mit Schatten) entfernen
• Hintergrundbild anständig exportieren (stand eh' schon auf der Todo-Liste...)
• Mehr Platz für Navi, die außerdem etwas weiter nach unten sollte
• Zu kräftiges Orange: Kaum änderbar, das ist auch schon auf unserem Plakat so drauf gewesen.
• Kein hover für Überschriften; div nicht in p. (Klar. Wurde in Zusammenhang mit meinem CMS automatisch generiert - werde mich drum kümmern, dass sowas nicht mehr vorkommt.)
• Alle Schrift- und Hintergrundfarben angeben, damit Leute, die absichtlich ein Standard-CSS einstellen, mit dem viele Seiten blöd aussehen, keine blöd aussehende Website bekommen
• Schriftgröße auf 100.1% statt 1em setzen
• max-width für Menüpunkte
• 3 weitere Punkte, bzgl. denen ich erst noch mit Ingo reden muss

Hab ich was vergessen/falsch interpretiert? Sonst noch Kritikpunkte?

Schöne Grüße
Julian

[Julian von Mendel]

Hi,

die Todo-Liste ist geschrumpft:

• Menü fixieren (?)
• Breite der Menüpunkte in em (?)

Was haltet ihr von dem momentanen Hintergrundbild?
http://lighttraffic.de
Zum Vergleich:
 - das alte: http://lighttraffic.de/lt2/
 - ganz ohne Streifen: http://lighttraffic.de/lt3/
Die Schrift im Logo ist jetzt außerdem etwas schärfer, da ich jetzt ein gif verwende.

Schöne Grüße
Julian

[Mathias Bigge]

Hi Julian,

Was haltet ihr von dem momentanen Hintergrundbild?
http://lighttraffic.de

Sieht besser aus, von den dargebotenen Alternativen die beste.

Die Schrift im Logo ist jetzt außerdem etwas schärfer, da ich jetzt ein gif verwende.

Das Logo könntest Du m.E. noch verbessern.

Vielleicht probierst Du mal, den Überschriftentext schwarz zu färben.

Viele Grüße
Mathias Bigge

[Mathias Bigge]

Hi Mathias,

Die Schrift im Logo ist jetzt außerdem etwas schärfer, da ich jetzt ein gif verwende.
Das Logo könntest Du m.E. noch verbessern.

Irgendetwas machst Du beim Antialiasing/Schattenwurf der Schriften falsch, die gegen einen anderen Hintergrund bearbeitet werden als den des Logos, hier solltest Du identische Farben verwenden.

Viele Grüße
Mathias Bigge

[Julian von Mendel]

Hey Mathias,

Was haltet ihr von dem momentanen Hintergrundbild?
http://lighttraffic.de
Sieht besser aus, von den dargebotenen Alternativen die beste.

Die Schrift im Logo ist jetzt außerdem etwas schärfer, da ich jetzt ein gif verwende.
Das Logo könntest Du m.E. noch verbessern.

Vielleicht probierst Du mal, den Überschriftentext schwarz zu färben.

du hast schon Recht. Ich werde mich nächste Woche mal drum kümmern. Abgesehen vom Hintergrundbild und der Menügröße in em habe ich jetzt alle kritisieren Punkte abgearbeitet.

Schöne Grüße
Julian

[Thomas J.S.]

Hallo,

Was haltet ihr von dem momentanen Hintergrundbild?
http://lighttraffic.de

Abstand.

So wirk das sehr unmotiviert und hingekritzelt, so nach: "ich wusste halt nicht was ich da tun soll", bzw. ich fragte mich beim betrachten der Seite, was dieser Linie wohl sagen soll.
Eigentlich gefällt _mir_ ohne den Schatteneffekt noch am besten, nur dort sollten die Faben zusammenpassen (Hintergrundfarbe des Ampels ist nicht gleich mit der vom body)

Grüße
Thomas

[Julian von Mendel]

Hi,

Was haltet ihr von dem momentanen Hintergrundbild?
http://lighttraffic.de

Abstand.

So wirk das sehr unmotiviert und hingekritzelt, so nach: "ich wusste halt nicht was ich da tun soll", bzw. ich fragte mich beim betrachten der Seite, was dieser Linie wohl sagen soll.
Eigentlich gefällt _mir_ ohne den Schatteneffekt noch am besten, nur dort sollten die Faben zusammenpassen (Hintergrundfarbe des Ampels ist nicht gleich mit der vom body)

ganz ohne Schatteneffekt finde ich, dass das Menü depositioniert aussieht. Ich bin halt kein Designer...

Schöne Grüße
Julian

[Thomas J.S.]

Hallo,

ganz ohne Schatteneffekt finde ich, dass das Menü depositioniert aussieht. Ich bin halt kein Designer...

Deshalb sagte ich ja, dass es mir ohne besser gefällt. Aber wenn dann lieber eine gerade Linie, als dieser "Theatervorhang" ;-)

Grüße
Thomas