Vorstellung: Die40.de

[tim-peters]

Hey,
ich möchte euch die Klassenwebseite meiner Klasse vorstellen, an der ich seit nun fast einem Jahr, immer mal wieder arbeite.

Am Anfang ging es nur darum Inhalt zu vermitteln, ohne besonderen Wert auf Design zu legen. Siehe hier.
Doch nach völliger Überarbeitung ist davon jetzt nichts mehr zu sehen. Selbst Kleinigkeiten wie impressum oder error-404-page sind liebevoll gestaltet..doch seht selbst auf Die40 - Freie Waldorfschule Frankfurt am Main.

Da die Bildergallery nur mit Login sichtbar wird, hier ein Screenshot.

Ich bin auf eure Kritik gespannt!

 

[Maxi]

Diese Linke Hand nervt mich mal total.
Erst liegt sie so blöd über dem Text, dass man den nicht lesen kann, dann bewegt die sich auch noch...

Warum hat das Impressum ein anderes Design bekommen und nicht einfach das gleiche?

 

[ingoS]

Eins kann man auf alle Fälle positiv festhalten: Die Seite fegt, sobald sie geladen ist, augenblicklich jedes Waldorf-Klischee weg, das der Besucher eventuell noch haben könnte. ;)
Überhaupt finde ich das Design sehr angenehm und die Serifenschrift gelungen eingesetzt (auch wenn mir da mal wieder viele widersprechen werden, ist mir egal, mir gefällts :mrgreen:).

Die Hand finde ich allerdings auch ziemlich irritierend. Dass dieses Bewege-Feature dazu gedacht ist, dass man den Text vollständig lesen kann, habe ich erst ziemlich spät verstanden (Maxi anscheinend gar nicht ); auf Anhieb kommt auf alle Fälle kein Mensch damit klar, weil es leider überhaupt nicht selbsterklärend ist, wie das Ding funktioniert. Es ist auch nicht ersichtlich, dass man es einfach wegklicken kann (was an sich ja sehr nützlich ist -- aber nur, wenn man auch darauf kommt, es auszuprobieren).
An sich finde ich die Idee mit den beiden Händen ganz witzig, aber vielleicht sollte die linke Hand entweder gar nicht erst über dem Text hängen oder aber vollständig den Blick auf den Text freigeben, wenn man mit der Maus drübergeht -- und irgendeine Art optischer Hinweis darauf, dass man sie wegklicken kann, wäre auch nicht schlecht.

Dass der Schriftzug "Die40" einen MouseOver-Effekt hat, ist ja ganz nett, aber dann sollte auch irgendetwas passieren, wenn man draufklickt -- zum Beispiel, dass man wieder auf die Startseite kommt, denn eine solche Funktion erfüllt ein Header eigentlich auf ziemlich vielen Seiten.
Den superschmalen violetten Streifen ganz oben finde ich etwas seltsam und schmucklos; vielleicht sollte er durch eine kleine grafische Spielerei, einen Brush oder so etwas, ersetzt werden. Überhaupt könnte man darüber streiten, ob nicht ein bisschen mehr Violett auf der Seite, ohne dass man mit der Maus über etwas gehen muss, besser wäre -- z.B. durch Vertauschen von Mouseover- und Mouseout-Zustand beim Header-Bild.

Kritik zum Code füge ich diesem Beitrag später noch hinzu.

 

[Maxi]

Die Hand finde ich allerdings auch ziemlich irritierend. Dass dieses Bewege-Feature dazu gedacht ist, dass man den Text vollständig lesen kann, habe ich erst ziemlich spät verstanden (Maxi anscheinend gar nicht );

Doch, ich habs schon so verstanden, aber zum ausprobieren bin ich nicht mehr gekommen, weil ich die Seite geschlossen habe, bevor ich dazugekommen wäre...

 

[Lenchen]

Also ich hab das mit der hand erst garnicht verstanden. Ich dachte, das wär mal wieder eine Seite, für die mein Bildschirm zu klein istund sich die Elemente verschoben haben, so dass die Hand jetzt überm Text liegt. Da man den Text auch so versteht habe ich auch gar nicht erst versucht diesen Zustand zu ändern, sondern den Text gelesen und die Seite wieder verlassen, da ich davon ausgegangen bin, dass es auf den andern Unterseiten genauso ist und dort vielleicht ein Text ist, den ich nicht erraten kann. Dieser Eindruck hat sich durch das Login-Feld noch verstärkt, denn dieses wirkt für mich auch etwas aus dem Design verschoben. Ansich finde ich das Design sehr gelungen. Aber diese Hand überm Text in Verbindung mit dem Login haben mich einfach zu dem Eindruck bewegt, dass das Design verschoben ist.

 

[_Thor_]

Die Hand finde ich auch sehr irritierend, zum Code als erstes [Invalid] Markup Validation of http://die40.de/ - W3C Markup Validator
53 Fehler alleine auf der Startseite!

Mit deaktiviertem Javascript lässt sich die Hand nicht verschieben und verdeckt dadurch den Inhalt, das ist sicher nicht so gewollt.

Das ganze Inline-CSS sollte noch in eine eigene Datei ausgelagert werden.

Warum hat die Navigation noch ein <div> um sich? Dort wird nichts gruppiert und du kannst die <ul> genau so formatieren, wie das <div>.

 

[Loon3y]

AUch wenn es von Schülern gemacht wurde, die anscheinend noch etwas jünger sind, die Seite gefällt mir absolut nicht. Total unübersichtlich, wenige Informationen wonach man sogar suchen muss...und wenn man die Schriftgröße vergrößert, wandert alles aus den Container raus.

Der Quelltext ist auch nicht so gut, irgendwie wirr warr und vermischt mit zich unnötigen sachen :(

Grundgedanke ist zwar da und auch toll, aber muss noch viel dran verbessert werden damit es anschaulich ist.

Gruß
Loon3y

 

[Efchen]

Mir gefällt die Site optisch eigentlich sehr gut.
Das mit der Hand ist zwar eine schöne Spielerei, wenn mans verstanden hat, aber bis dahin wirst Du damit den ein oder anderen zufälligen Besucher verlieren.

Haarig wirds nur in den Details. Die Site ist leider in keiner Weise dynamisch. Wenn man nicht mit den selben Einstellungen wie bei Dir kommt, hat man schon verloren. Bei Schriftgrößenänderung geht sämtlicher Inhalt überall hin, nur nicht dahin, wo er soll. Die untere Menüleiste (die sich farblich übrigens nicht gut genug abhebt, um darin das Impressum zu finden, und die überdies noch viel zu kleine Schrift hat) kommt nach oben in den Content-Bereich, im Impressum geht die Schrift aus ihren vorgegebenen Boxen hinaus. Also entweder ändert sich die Größe der Boxen mit (Einheit "em" benutzen!) oder aber es gibt einen Scrollbalken (overflow:auto in Verbindung mit einer fixen Größe). So aber gehts gar nicht.

Fatal ist die unsachgemäße horizontale Zentrierung (richtig wäre "margin:0 auto"). Bei dieser Methode verschwindet der Inhalt bei zu kleinem Viewport links aus dem Browser raus und kann dort nicht wieder zurück geholt werden - die Site wird unbenutzbar!

Schlecht umgesetzt auch der mailto-Link (JavaScript-FFQ / Mailto:-Formulare).

Der Überschrift fehlt der Alternativtext, weswegen die Site bei abgeschalteten Images keine Überschrift hat und man sich etwas verloren vorkommt.

HTML ist nicht perfekt umgesetzt, <big> und <small> sind keine Tags mit semantischer Bedeutung. Trennung von Inhalt und Layout ist auch nicht, was zu höheren Ladezeiten führt (weil nicht alles in einem externen Stylesheet steht und somit gecached werden kann) und die Wartbarkeit der Website nicht gerade erleichtert.

Und gerade erkenne ich noch etwas, was ich vorher nicht habe lesen können und daher übersehen habe:

Optimiert für Firefox ab 1.0 / Internet Explorer ab 5.0 / Safari ab 1.0 / Opera 9 - bei min.1024x768 Pixel. JavaScript & Cookies muss aktiviert sein!

Das ist ja wohl ein Schlag ins Gesicht!
Unverschämter gehts nicht, oder? Dieser Satz lässt eine Reaktion aufkommen: Muss ich also für das nicht ausreichende Wissen des Webmasters aufkommen? Muss ich mich dem Webmaster anpassen?
Best Viewed with / Optimiert für ... Webdesign und Usability

Fazit: Ein paar Nachbesserungen in Sachen Benutzerfreundlichkeit und Usability sind ganz dringend zu machen, aber ansonsten eine durchaus gelungene Site. Aber auf gar keinen Fall auf dieser Bewertung ausruhen, sondern die großen Probleme schnell beseitigen. Sonst ist die gesamte Site wertlos.

Grüße,
-Efchen