[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • www.waldorfschule-wandsbek.de
Seite 1 von 1

www.waldorfschule-wandsbek.de

Verfasst: 8. Jun 2009, 16:04
von Peter.Bickel
http://www.waldorfschule-wandsbek.de
Die kommende Schule meiner Tochter.

Es existiert noch einiger Kram, den man so nicht sieht, zum Beispiel monatlich wechselnde Zitate auf der Startseite, eine per jQuery eingeblendete Modalbox, wenn es dringende Hinweise / Veranstaltungen gibt, etc.
Und einen eigenen Login-Bereich für jede Klasse gibt's auch noch.

Schöne Grüße,
Peter.

Verfasst: 8. Jun 2009, 16:17
von Xong
Technisch ist die Seite sehr gut gelungen. Da habe ich fast nichts aussetzen. [1]

Ich habe vom Design her keine großen Ansprüche und finde es auch wirklich ansprechend. Das einzige, was mich stört, ist diese aggressive Hintergrundfarbe. Da fällt es mir echt schwer, mich auf den Text zu konzentrieren. Etwas weniger grell, wäre in dem Falle schön.

LG,
Xong

[1] Fast deshalb, weil man an der Semantik immer schrauben kann. Aber jeder professionelle Webdesigner weiß auch, wie schwer das bei dynamisch generierten Inhalten ist.

Verfasst: 8. Jun 2009, 16:21
von Peter.Bickel
Hallo Xong,

mich interessiert Deine Anmerkung zur Semantik, weil mir das Layout und die Farben ja vorgegeben waren. Was hast Du an der Semantik auszusetzen?

Danke,
Peter.

Verfasst: 8. Jun 2009, 16:40
von Gregor.Harlan
Hallo Peter,

die Seite gefällt mir richtig gut!! Wenn ich da an die Website meiner ehemaligen Waldorfschule denke...

Ich habe sie mal im IE6 getestet: Unter Termine gibts Probleme.
Edit: Unter Sitemap auch (zu große Abstände).

Gruß, Gregor

Verfasst: 8. Jun 2009, 16:49
von Peter.Bickel
Hallo Gregor,

ja, auch die Waldorfschulen lernen dazu ... ;-)
Sie haben aber auch einen Profi-Designer im Elternkreis gehabt, der besonders im CI / Printbereich viel Erfahrung hat.

Danke für den Hinweis mit dem IE6, gebe ich gleich an meine Kollegin weiter, die die Termine-Rubrik aufgebaut hat.

Schöne Grüße,
Peter.

Verfasst: 8. Jun 2009, 16:50
von Xong
Peter.Bickel hat geschrieben:mich interessiert Deine Anmerkung zur Semantik, weil mir das Layout und die Farben ja vorgegeben waren. Was hast Du an der Semantik auszusetzen?
Um dich gleich vorzuwarnen: Meine Vorschläge sind nicht das Non-Plus-Ultra. Desweiteren kann eine Diskussion zur Semantik (damit sind die Möglichkeiten von HTML, Hypertextelemente auszuzeichnen, gemeint) schnell ins Philosophische abrutschen.
Dazu kommt, dass die folgenden Ratschläge schwer umzusätzen sind, da solche Sachen schon bei der Konzeption wohl überlegt werden müssen.
Last but not least werden meine Anmerkungen keinesfalls vollständig sein, da ich mich selbst noch in einem Lernprozess befinde.

Ich fasse meine Ideen einfach mal als ungeordnete Liste zusammen. Hinter den Stichpunkten schreibe ich CSS-Selektoren, die zeigen, wo u. a. noch verbessert werden könnte.
  • Navigationen sollten als Listen ausgezeichnet werden. (#meta_nav)
  • Wozu brauchst du ein Extra-Element, um die Navigation anzuspringen? (#navigation)
  • Einige Div-Elemente sind für das Layout nicht nötig und könnten weggelassen werden. (#nav_sub,#nav_main, einige umschließende Divs)
  • IDs und Klassen sollten sprechende Namen haben. (#nid2,#nid3,...,#col1_content, u. a.)
  • Javascript-Bereiche sollten als CDATA gekennzeichnet werden.
  • Die Seiten liefern keinen Last-Modified-Header mit.
  • Ich empfehle für CSS-Weichen stets Hacks, nie Conditional Comments.
  • Es fehlen Print-CSS. (Schau dir die Seiten mal in der Druckvorschau an. Man könnte die Navigation z. B. ausblenden.)
  • Die aktive Seite sollte in der Navigation nicht anklickbar sein.
  • Texte sollten durch hierarchische Überschriften gegliedert sein.
Wie gesagt, die Liste ist nicht vollständig. Außerdem kann man das als Meckern auf sehr hohem Niveau bezeichnen. :D

Insgesamt finde ich die Seite sehr gelungen. Sie ist ein tolles Beispiel für gutes Webdesign.

Edit:
Alle Punkte, die ich angesprochen habe, habe ich für die Seite meiner Firma versucht zu lösen. Ich kann nicht behaupten, dass mir das immer optimal gelungen ist. Allerdings kann sie dir vielleicht als Inspiration dienen: http://www.fuhrpark-software.de

Vom Design her ist sie sicher eher schlicht, aber die technische Umsetzung ist mir hoffentlich zufriedenstellend gelungen.

Manche Dinge könnte man sicher auch dort bemängeln. Deswegen schrieb ich ja auch schon, dass ich auch beständig lerne und versuche meine Fehler glattzubügeln.

LG,
Xong

Verfasst: 8. Jun 2009, 16:57
von Gregor.Harlan
Hallo Peter,

Ja, bei den Waldorfschulen hängt viel von dem Engagement der Eltern ab (nicht negativ gemeint).

Ich habe oben noch ein "Edit" hinzugefügt (Sitemap im IE6).
Außerdem gibts unter Fachbereich -> Eurythmie beim ersten Bild einen "Testuntertitel".

Grüße, Gregor

Verfasst: 8. Jun 2009, 17:27
von Richard.Laing
hallo peter
die seite gefällt mir auch sehr gut (farben ok ist vorgaben von da her nix zu machen)

umsetzung supi weiter so.
gruß richy

Verfasst: 8. Jun 2009, 17:43
von Peter.Bickel
Hallo Xong,

ich finde solche Diskussionen ja immer sehr spannend und beschäftige mich auch viel mit dieser Problematik ...

Ich gehe jetzt nicht auf alle Punkte ein, aber einige Anmerkungen will ich loswerden:
Xong hat geschrieben:[*]Navigationen sollten als Listen ausgezeichnet werden. (#meta_nav)
Sehe ich selbst ja nicht so streng. Vom Grundprinzip gebe ich Dir völlig recht, bestimmt 95% aller Navis mache ich auch als li-Listen. Bei ner kleinen Meta-Navi leiste ich mir ab und zu mal ne Ausnahme, wenn es so einfach aus bestimmten Gründen praktischer ist.
Xong hat geschrieben:[*]Einige Div-Elemente sind für das Layout nicht nötig und könnten weggelassen werden. (#nav_sub,#nav_main, einige umschließende Divs)
Ich weiß jetzt nicht mehr, ob es hier auch so war, aber manchmal ist es tatsächlich nötig, ein Div als "Haken" zu verwenden und nicht das ul-Element.
Und beim Content finde ich es zum Festlegen der Ränder / Abstände einfach ungemein praktisch, mit zwei verschachtelten DIVs zu arbeiten, wo der innere die Paddings bekommt statt der äußere die margins. Dann muss man (trotz display: inline) nicht immer so mühsam wegen des IE6 bugfixen; alles wird etwas leichter zu warten. Den Trick habe ich aus dem YAML.
Aber prinzipiell hast Du recht, dass man das Markup so reduziert wi möglich halten sollte.
Xong hat geschrieben:[*]IDs und Klassen sollten sprechende Namen haben. (#nid2,#nid3,...,#col1_content, u. a.)
Gut, hier ist es z.T. das CMS, das so etwas vorgibt. Klar könnte man über Metadaten die IDs der Navipunkte hübscher benennen, aber hier so viel Mühe auf die Semantik zu legen, halte ich selbst für etwas übertrieben.
Xong hat geschrieben:[*]Javascript-Bereiche sollten als CDATA gekennzeichnet werden.
Da hast Du recht. Die sollen aber eh noch in eine externe JS-Datei ausgelagert werden.
Xong hat geschrieben:[*]Ich empfehle für CSS-Weichen stets Hacks, nie Conditional Comments.
Da scheiden sich aber die Meinungen. Es gibt viele (u.a. auch Microsoft selbst), die Comments empfehlen. Ich finde das auch sympathischer.
Xong hat geschrieben:[*]Es fehlen Print-CSS. (Schau dir die Seiten mal in der Druckvorschau an. Man könnte die Navigation z. B. ausblenden.)
Erwischt. Das Print-CSS ist auch noch nicht ganz fertig. Die linke Spalte hab ich eben mal ausgeblendet. Einige Seiten haben aber wichtigen Content in der linken Spalte, dort muss ich das dann wieder auflösen. Kommt noch.
Xong hat geschrieben:[*]Die aktive Seite sollte in der Navigation nicht anklickbar sein.
Ich weiß, dass etliche Leute das gern so handhaben. Ich selbst mag es aber immer ganz gern, dass das klickbar ist. Einfach, weil es dann schöner anfühlt, wenn man mit der Maus die Navi überstreicht. Und ich kenne Leute, die auf den aktiven Navipunkt klicken, wenn Sie die Seite neu laden wollen statt auf den Reload-Button. Das dürfen sie bei mir ... ;-)
Xong hat geschrieben:[*]Texte sollten durch hierarchische Überschriften gegliedert sein.[/list]
Ja, da sollten die Redakteure hie und da noch etwas dran arbeiten. Es gibt aber auch Seiten, wo das der Fall ist. Vermutlich einfach Geschmackssache. Ich mag es auch gern, wenn es oft und viele Zwischenüberschriften gibt.

Danke jedenfalls für die Anmerkungen.
Beste Grüße,
Peter.

P.S: Dank an Gregor für den Hinweis IE6 / Sitemap.

Verfasst: 8. Jun 2009, 18:28
von Xong
Hallo Peter!

Wie gesagt, Vieles geht schon in die Philosophie des Webdesigns.
Und bei einigen Punkte gibt es auch geteilte Meinungen. Deshalb habe ich meine Standpunkte ja auch als das dargestellt, was sie sind: meine Standpunkte! :D
Peter.Bickel hat geschrieben:
Xong hat geschrieben:[*]Ich empfehle für CSS-Weichen stets Hacks, nie Conditional Comments.
Da scheiden sich aber die Meinungen. Es gibt viele (u.a. auch Microsoft selbst), die Comments empfehlen. Ich finde das auch sympathischer.
Klar empfiehlt Microsoft sie. Die haben sie ja auch erfunden.
Ich finde es aber ungemein praktisch, alle CSS-Angaben in einer Datei zu haben. So muss ich mich nicht durch mehere Dateien durchklicken. Außerdem erlaubt es bei dynamisch generierten Stylesheets eine wesentlich höhere Flexibilität.

Dass es da gerade auch unter den Profis zwei Lager gibt, zeigt doch nur, dass beide Seiten ihren Weg können und trotzdem (erfolgreich) zum Ziel kommen.

LG,
Xong

Verfasst: 8. Jun 2009, 19:15
von TInKim
Sehr gelungen!

Mich stört allerdings die nichtbeschriftete Navigation am Seitenfuß auf der Startseite. Ansonsten: Richtig schöne Website!

Verfasst: 9. Jun 2009, 00:41
von Peter.Bickel
Hallo Xong,
Xong hat geschrieben:Klar empfiehlt Microsoft sie. Die haben sie ja auch erfunden.
Ja, ich weiß. Aber das ist doch kein Grund, sie nicht zu benutzen ... ;-)
Im Ernst: Was ich an den CC schätze ist, dass man diese Krücken superschnell über Bord werfen kann, wenn man sie mal nicht mehr braucht und dass man so auch die CSS-Datei valide hinbekommt.

@TInKim: Zu dem Footer muss ich erklären, dass der vom Designer eigentlich nur als grafisches Element gedacht war. Da ich aber Vorschaltseiten nicht sonderlich mag und - wenn der dringende Hinweis aktiviert ist - es sogar noch einen Klickschritt mehr gibt, bis man auf die eigentliche Seite kommt, habe ich einfach diese Farben verlinkt. Sozusagen ein »Cheat entry« für mich und alle Leute, die schon mal da waren und das Farbschema kennen.

Schönen Abend
Peter.

Verfasst: 9. Jun 2009, 09:19
von Xong
Peter.Bickel hat geschrieben:Hallo Xong,
Xong hat geschrieben:Klar empfiehlt Microsoft sie. Die haben sie ja auch erfunden.
Ja, ich weiß. Aber das ist doch kein Grund, sie nicht zu benutzen ... ;-)
Der Grund der meiner Meinung dagegen spricht, ist die getrennte Haltung semantisch zusammengehörender CSS-Anweisungen. Das kann in einem Team nur funktionieren, wenn sich auf ein einheitliches Vorgehen geeinigt wurde. CSS-Hacks erlauben hingegen das schnellere Einarbeiten in fremden Code.

Generell: CSS-Hacks halten die Anweisungen zusammen, die für ein bestimmtes HTML-Element gedacht sind und trennen nach Browsern.
CCs trennen nur nach Browsern.
Peter.Bickel hat geschrieben:Im Ernst: Was ich an den CC schätze ist, dass man diese Krücken superschnell über Bord werfen kann, wenn man sie mal nicht mehr braucht und dass man so auch die CSS-Datei valide hinbekommt.
Dazu könnte dich folgender Artikel interessieren: Warum man CSS nicht validieren kann

LG,
Xong

Verfasst: 9. Jun 2009, 09:42
von Peter.Bickel
Das mit der Teamarbeit ist nur Gewohnheitssache. Das muss man halt vorher besprechen. Ich persönlich empfinde eine mit Hacks durchsetzte CSS-Datei als sehr viel unleserlicher.
Die CCs entsprechen dagegen meinem Vorgehen beim Website-Aufbau: Erst das Layout im standardkonformen Browser aufbauen und dann am letzten Tag vor der Online-Schaltung noch rasch die IEs in ein oder zwei separaten Dateien fixen.
Und einen nicht unwesentlichen Grund hab ich noch nicht erwähnt: So müssen die standardkonformen Browser keine "Krücken" laden, die ihrer "unwürdig" sind.
So vom Gefühl her hab ich den Eindruck, dass die mesiten Webentwickler CCs statt Hacks empfehlen, aber das kann man ja nicht quantifizieren und ist ja auch kein Argument. Ich persönlich empfinde sie jedoch einfach als zeitgemäßer und moderner. Letztlich wohl einfach Geschmack.

Der CSS-Artikel betreibt m.E. etwas Haarspalterei. Ich meine, da sind wir uns ja alle einig, dass Standards und deren Einhaltung (=Validität) sinnvoll sind. Und dass nicht jeder valide Code per se gut und sinnvoll ist.

Schönen Tag noch allerseits!
Peter.

Verfasst: 9. Jun 2009, 19:27
von stuttgarter
Super Seite...

Nur der Kontrast der Hintergrundfarbe zu Schriftfarbe der unbterschiedlichen Links ist störend...


Super ist auch die bildergalerie

Grüßle Stutti

Verfasst: 10. Jun 2009, 14:04
von Heidi
Ist es denn gewollt das man auf der Startseite nur durch einen Klick der bunten Felder im Footer weiterkommt?

Ich denke mal da steigen viele User wegen "Überforderung" aus.

Verfasst: 10. Jun 2009, 14:06
von Peter.Bickel
Heidi hat geschrieben:Ist es denn gewollt das man auf der Startseite nur durch einen Klick der bunten Felder im Footer weiterkommt?
Es gibt doch diesen großen roten Button "weiter"?

Die bunten Felder sind wie gesagt der "Geheimzugang" für die Kundigen ...

CCs vs. Hacks

Verfasst: 10. Jun 2009, 22:58
von Gregor.Harlan
Zum Thema CCs vs. Hacks:

Ich stimme da Peter in allen Punkten zu. Ich finde es auch "schöner" mit CCs, vorallem da die anderen Browser gar nicht mit den zusätzlichen Angaben "belastet" werden. Finde es auch übersichtlicher, eine Datei für die wirklich benötigten Angaben, eine für die zusätzlichen für den IE. In der ie.css verwende ich dann allerdings Hacks, um zwischen den verschiedenen IE-Versionen zu unterscheiden.
Denke auch, dass die Meisten CCs verwenden (was allerdings nichts heißen muss).

Grüße, Gregor

PS: Solche Diskussionen finde ich ja immer sehr spannend!

Verfasst: 11. Jun 2009, 10:27
von Heidi
Peter.Bickel hat geschrieben:
Heidi hat geschrieben:Ist es denn gewollt das man auf der Startseite nur durch einen Klick der bunten Felder im Footer weiterkommt?
Es gibt doch diesen großen roten Button "weiter"?

Die bunten Felder sind wie gesagt der "Geheimzugang" für die Kundigen ...
Ha, siehst du. Button völlig übersehen. Mach mal ein paar Usability Tests, es werden bestimmt einige User davon "ausgesperrt".

Bei meinem Monitor (22Zoll) sieht man die ganze Seite inkl. der bunten Felder im Footer, die stechen einfach mehr ins Auge wie dein "großer weiter Button" und sind dann noch nicht beschriftet...

Verfasst: 11. Jun 2009, 10:35
von Peter.Bickel
Wie schon gesagt - die bunten Felder sollten eigentlich überhaupt nicht klickbar sein, das hab ich mehr oder weniger im Alleingang gemacht. Und ich hätte das mit dem Weiter-Button wohl so auch nicht gemacht, sondern dem Unser gleich die Hauptnavi angeboten ...

Kennst Du das Procedere an einer Waldorfschule, wo es keinen Schulleiter gibt und 150 Lehrer über das Design / Konzept einer Website zusammen finden müssen, inkl. der Ausschüsse von Kunstlehrern, die zusammen mit dem Designer das Layout erarbeiten? Da ist es ein Wunder, dass diese Website überhaupt fertig gestellt wurde!

Verfasst: 11. Jun 2009, 10:47
von Gregor.Harlan
Meiner Meinung nach wäre es sinnvoll diese wechselnden Bilder komplett zu verlinken. Da ging jedenfalls als erstes meine Maus hin. Als ich gemerkt hab, dass es da nichts zu klicken gibt, habe ich aber auch recht schnell den "Weiter"-Button entdeckt. Die versteckten Menüpunkte unten habe ich viel später entdeckt, aber noch bevor ich es hier gelesen habe.

Gruß, Gregor

Verfasst: 11. Jun 2009, 10:48
von Peter.Bickel
Gregor.Harlan hat geschrieben:Meiner Meinung nach wäre es sinnvoll diese wechselnden Bilder komplett zu verlinken.
Hab ich auch grade überlegt, als ich den vorigen Post gescheiben habe. Werde das dem Dsigner vorschlagen ...
Danke.