WebStyleBoard

lustiges menu, aber imho nich sonderlich produktiv

http://hornominator.de/misc/howtodo.de.png

opera 7.5

Soooo.....

Dann will ich mal...


Testsystem:

FF 1.0
IE 6
Opera 7.23

1.280 x 1.024


Also das Design der Seite empfinde ich als ausgesprochen ansprechend. Etwas stylish und verspielt, aber dank der Grautöne wirkt das Ganze nicht störend. Der grüne "Button" mit dem Fragezeichen setzt einen Blickfang, der das Auge quasi direkt zu den Begriffen PHP und MySQL lenkt, also zu den Kernthemen der Seite.

Was sehr positiv auffällt ist die Tatsache, dass der Header den ganzen, zu Verfügung stehenden Raum nutzt, und nicht 776 Pixel oder was auch immer. Gerade bei einem TFT-Bildschirm mit 1.280er Auflösung ist diese eine angenehme Erscheinung.

Bei Fenstergrößenveränderungen reagiert das Layout sehr gelassen und schmiegt sich bis hinab nach 800 x 600 in das Fenster, ohne sich unschön zu überlagern oder horizontale Scrollbalken zu erzeugen.

Dabei bauen sich die äußeren Bereiche des Headers immer schön mit auf und ab, so dass das Layout eigentlich immer ein rundes Bild abgibt. Dies gehört klar in die Kategorie "Warum ich Tabellen liebe und auch weiterhin nutze"...

Kleiner Wermutstopfen: Das Layout hat zwei Problembereiche bei Schriftvergrößerungen. Zwar bleibt das Layout als solches erhalten, doch neigt die horizontale Navigation sehr dazu, sich zu zerlegen. Allerdings ist eine horizontale Navigation, die Grafiken verwendet, nicht ohne weiteres skalierbar zu machen.

Eher möglich ist dies - nein, eher erwartet habe ich dies bei den beiden Infoboxen links neben dem Inhalt. Diese skalieren auch nicht mit, was in der unteren Box schnell zu Überschneidungen führt. Dies lässt sich vermeiden.

Was in Sachen Layout auch noch auffällt ist die Anzahl der verwendeten Schriften.

Du verwendest eine sehr passende, hochlaufende Schrift für den Header und die Überschriften der Boxen. Diese Schrift gefällt mir sehr gut; sie passt gut zum Gesamtkonzept.

Des Weiteren verwendest Du fünf (!) weitere Schriftarten, eindeutig zu viel... Eine gute Faustregel ist: Zwei Schriften / -familien, eine dekorative für Überschriften, eine gut lesbare für den Fließtext.

Eine Schrift für die Überschriften hast Du ja schon gefunden. Leg' Dich einfach auf eine Schrift für den Fließtext fest, und ich bin glücklich...

In Deinem speziellen Fall wäre sogar eine dritte Schrift zu vertreten, und zwar für die Code-Beispiele...

So, mehr fällt mir im Moment nicht ein. Sollte sich dies noch ändern, melde ich mich...

[q=mrhappiness]Hatte eigentlich nur Trebuchet MS, Georgia und Courier New/monospace, was ja nur 4 sind Augenzwinkern
Hab's jetzt mal geändert, die Schrift ist jetzt einheitlich bis auf die Code-Beispiele, da ist es monospace.[/q]
In der Tat, 4. Ich habe die Überschrift "Willkommen" und die horizontale Navigation für zwei verschiedene Schriften gehalten...

Aber einheitlich sieht das ganze noch nicht aus, denn bei mir sind es immer noch vier verschiedene... ?!?

[q=mrhappiness]Ich hatte das dort bewusst "ausgebaut", da die "Boxüberschriften" .nav und .stats ein Bild sind, dass sich in der Größe auch anpassen müsste.
Die Navigation lässt sich jetzt skalieren, die Statistik nicht, wo kommt es denn bei letzterer zu Überschneidungen?

Werde es, wenn es sich nicht vermeiden lässt, wohl so machen wie bei .content, wobei mir der kleine Rand um die "Boxüberschriften" ans Herz gewachsen ist[/q]
Zu Überscheidungen kommt es bei beiden Boxen, da sie nach unten skalieren, nicht aber nach rechts...

Und von dem Rand, den Du ja so lieb gewonnen hast, musst Du Dich auch nicht trennen. Wieso plazierst Du das Bild nicht einfach direkt in der Box, als Vordergrundgrafik, inklusive des Randes.

Das Bild kannst Du dann rechts ausrichten. Zusätzlich definierst Du für die Box eine Hintergrundgrafik, und zwar nur die Linien-Schraffur aus dem Hintergrund der Überschrift. Diese wird in Richtung der X-Achse wiederholt...

Nun möchte ich auch noch mal meinen Brei zu der Seite abgeben ...

Test-Browser:

• Firefox 1.0.4
  
• Opera 7.54
  
• Konqueror 3.4.0
  
• Epiphany 1.2.5
  
• links 2.1 (Textbrowser)
  

Bei 1600x1280 Bildpunkten und Pinguin-System.

Und los geht's ...

Der erste Eindruck ist gut. Die Seite sieht in allen Browsern (bis auf links ... welch ein Wunder :-) ) gleich aus.

Das Design ist persönlich nicht so mein Fall, es erinnert mich eher an eine Clan-Seite als an eine Seite über PHP und mySQL. Bei einer Seite über PHP und mySQL erwarte ich eher ein flacheres, nicht ganz so "technisches" Design ... aber gut, du fällst damit, meiner Ansicht nach, aus dem Rahmen von PHP-Seiten, aber das hat auch seinen Vorteil: es fällt auf.

Die Farben sind mir persönlich etwas zu blass, es fehlt meiner Ansicht nach ein großer "Farbfleck". Du hast es zwar mit dem Fragezeichen im grünen Button probiert, aber der wirkt durch die starke Reflexion schon wieder zu blass. Ich würde mich also über etwas mehr farbe freuen .

Die Horizontale-Navigation gefällt mir, auch wenn man diese nicht direkt sieht. (Nur mal so zwischen durch: Ein hoch auf den "Füller" ... ) Im Konqueror ist die Schrift allerdings nicht sichtbar. Warum das so ist, weiß ich leider selber nicht, dafür müsste ich dein CSS durchgehen.

Was mir negativ auffällt ist die Anmelde-Box über der Inhalts-Box: dort steht nirgendswo, was diese beiden Felder zu bedeuten haben. Bei den Grafischen-Browsern war dies zu verkraften - gehört halt irgendwie zum Design . Aber im Textbrowser habe ich mich erst einmal gewundert, wo die beiden Eingabefelder und der Button über dem Menü herkommen ...
Wäre schön, wenn du irgendwie davor schreiben könntest "Anmeldung:" (o.ä.).

In allen Grafischen-Browsern bis auf Firefox ist die Schrift im Menü links fast doppelt so groß, wie im Firefox. Liegt das an meinem Firefox oder ist das beabschtigt/ein Fehler?

Mir fällt auch auf, das du auf deiner Seite "viele" Schriften verwendet hast und teile Stefans Meinung. Ich finde auch, dass die Überschrift 1. Grades vielleicht keine Serifen-Schrift sein sollte und das diese auch noch ein bisschen größer sein könnte.
Was mir im Bezug auf die Schriften und Überschriftena noch auffällt: Die Überschriften 2. Grades haben alle ihre Textausrichtung rechts. Das mag zwar kann hybsch sein, aber bei meiner großen Auflösung ist es doch schwer, die Unterüberschriften direkt erfassen zu könnten. Besser wäre es, wenn diese auch links wären. Vielleich vor den Text dann einen Einzug via padding von 10-15 Pixeln.

Zum Schluß noch etwas aufbauendes Lob: Das Menü mit den Verschachtelungen finde ich sehr gut gelöst und gemacht. Wie die einzellnen Untermenüs in ein ander verschachteltwerden: klasse!

MfG Arne .