Wieder mal eure Meinung zu einer Seite

[Simon]

Hi,

mich würde wieder einmal eure Meinung zu dieser Seite interessieren:
test.heimgeistig.at/pimp

sowohl Design als auch xHTML und CSS, einfach alles was euch (nicht) gefällt.

Bin schon gespannt
MfG
Simon

[Matze]

Hallo Simon!

mich würde wieder einmal eure Meinung zu dieser Seite interessieren:

Was sagt denn der Validator?

Behebe doch erstmal diese Fehler.

Inline-CSS ist nicht die beste Wahl und sowas:

<div id="werbung">  
    <img src="images/werbung.png" alt="" />  
</div>

absolut überflüssig.

Inline Event-handler und sonstiges JavaScript sind auch suboptimal.
Idealer wäre auch, den Inhalt im Quelltext weiter oben zu positionieren und dann erst das Menü. Das ist aber Ansichtssache.

Die Ausrichtung des Menüs (rechtsbündig) ist schlecht gewählt.
Die Inhalte auf der rechten Seite sind meißt Werbung oder wie bei dir z.B.
das Login-Formular. Das Formular überlagert das Menü auch ein wenig.
Weniger Abstand nach oben und mehr nach unten würde da besser aussehen.

Das soll es erstmal gewesen sein. Das CSS hab ich mir jetzt nicht angeschaut.
Sonst sieht es doch alles ganz aufgeräumt aus.

Grüße, Matze

[Simon]

Was sagt denn der Validator?

Ahhhh, bei mir hat alles gepasst: W3C

Behebe doch erstmal diese Fehler.

Inline-CSS ist nicht die beste Wahl und sowas:

<div id="werbung">

<img src="images/werbung.png" alt="" />
</div>

> absolut überflüssig.  

Meinst du die Werbung? Ja ich weiß, nur wurde dass so verlangt von mir.  
  

> Inline Event-handler und sonstiges JavaScript sind auch suboptimal.  
> Idealer wäre auch, den Inhalt im Quelltext weiter oben zu positionieren und dann erst das Menü. Das ist aber Ansichtssache.  
>   
> Die Ausrichtung des Menüs (rechtsbündig) ist schlecht gewählt.  
> Die Inhalte auf der rechten Seite sind meißt Werbung oder wie bei dir z.B.  
> das Login-Formular. Das Formular überlagert das Menü auch ein wenig.  
> Weniger Abstand nach oben und mehr nach unten würde da besser aussehen.  
>   

Ok, kannst du mir vielleicht sagen welchen Browser du hast, ich hab ansich e in in allen getestet (in den neuen Versionen).  

> Das soll es erstmal gewesen sein. Das CSS hab ich mir jetzt nicht angeschaut.  
  
Danke  
Simon

[Matze]

Ahhhh, bei mir hat alles gepasst: W3C

Die Validatoren unterscheiden sich teilweise ein wenig.
Jetzt stimmt ja alles.

Inline-CSS ist nicht die beste Wahl und sowas:

Beispiel:<img src="images/gummibaerchen.jpg" height="150px" style="float: left; margin: 0px 10px 10px 0px;" alt="" />

Zum einen gehört CSS nicht inline und wenn du es schon benutzt, dann doch bitte durchgängig auch für die Höhe.

<div id="werbung">

<img src="images/werbung.png" alt="" />
</div>

> > absolut überflüssig.  
> Meinst du die Werbung? Ja ich weiß, nur wurde dass so verlangt von mir.  
  
Nein, ich meinte das Image welches zum Layout gehört und deshalb ein Hintergrundbild des Div sein will.  
  

> > Inline Event-handler und sonstiges JavaScript sind auch suboptimal.  
  
Beispiel: onfocus="this.value='';" onblur="if (this.value == '') { this.value = this.defaultValue; }"  
  

> Ok, kannst du mir vielleicht sagen welchen Browser du hast, ich hab ansich e in in allen getestet (in den neuen Versionen).  
  
Firefox Version 3.5.3 unter Windows XP  
  
Was ich grad noch gefunden habe...  
Du verwendest <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> trotzdem maskierst du Umlaute z.B. Gummib&auml;rchen.  
Da Umlaute keine HTML-eigenen Zeichen sind, müssen sie nicht maskiert werden.  
  
Grüße, Matze

[Simon]

Nein, ich meinte das Image welches zum Layout gehört und deshalb ein Hintergrundbild des Div sein will.

Aso, ja das Bild ist eigentlich nur so ein Testbild, das wird später sowieso durch die richtige Flashwerbung ersetzt.

[Beat]

mich würde wieder einmal eure Meinung zu dieser Seite interessieren:
<test.heimgeistig.at/pimp>
sowohl Design als auch xHTML und CSS, einfach alles was euch (nicht) gefällt.

Gut finde ich den Code zur Login Box.
Weniger gut finde ich, dass du zwar h2 Überschriften verwendest, in deinem Code aber nirgendwo eine h1 Überschrift vorkommt.

Hässlich finde ich deine Navigation.
Und über line-height solltest du auch nachdenken.

Zoomen: Mich würde das Verhalten nicht befriedigen. Auf zu breiten Viewports hast du eine hässliche Lücke.
Auf zu schmalen Viewports befindet sich deine Navigation im weissen Contentbereich.

mfg Beat

[Encoder]

Zum Layout:
Ich würde die über den Text setzen, nicht rechts orienteren. Vielleicht unterhalb dem Logo-Bereich? Da stechen sie etwas mehr hervor.
Login würd ich etwas kleiner machen und in den oberen Bereich einbinden? Dann ist das nicht so dominant im Weg, wenn man sich nicht anmelden will. Wenn nur ausgesuchte User sich anmelden sollen, würd ich das auf einer separaten Seite machen lassen, dann spielt dir schon keiner mit den Userdaten rum.
Die Lücken zwischen Text und rechter Spalte sieht komisch aus.
Zu den Farben weiß ich nicht ganz was ich sagen soll. Bisschen verwaschen? Andrerseits, es hat auch irgendwie was. Vielleicht machst du den Hintergrund der News und Login (falls du das da lässt) etwas weniger grau, oder den Verlauf nicht so linear damit mehr weiß mit drin ist.
Ein paar dezente andersfarbige Elemente wären ne Auflockerung.
Aber wie gesagt, auf ne gewisse Art ists schon cool!

[Encoder]

Ja ... die *Links* über den Text setzen mein ich natürlich.

[Simon]

Ok,
da das Menu bei einigen nicht richtig dargestellt wird:
so sollte es ausschauen:
test.heimgeistig.at/pimp/menu.jpg

Wenns anders dargestellt wird sagts mir bitte.

Danke
Simon

[Matze]

Ok,
da das Menu bei einigen nicht richtig dargestellt wird:
so sollte es ausschauen:
test.heimgeistig.at/pimp/menu.jpg
Wenns anders dargestellt wird sagts mir bitte.

Wie wär es, wenn du stattdessen selbst verschiedene Browser testest?

Grüße, Matze

[Simon]

Wie wär es, wenn du stattdessen selbst verschiedene Browser testest?

Mach ich sowieso, nur kann ich leider immer nur in einer Version Testen.

MfG
Simon

[Candid Dauth]

Heißa, Simon,

http://test.heimgeistig.at/pimp/menu.jpg]
Wenns anders dargestellt wird sagts mir bitte.

Das Bild oben neben dem Suchbutton wird bei mir darunter angezeigt. Ohne es jetzt genauer untersucht zu haben, nehme ich an, dass du die Dicke des Rahmens von #searchInput nicht festlegst und diese bei mir wohl zu breit ist.

Im Code habe ich beim groben Überfliegen außerdem folgende Merkwürdigkeiten festgestellt:

  
<a id="top"></a>  

Wozu dieses a-Element da ist, kann ich nicht verstehen. Um nach oben zu verlinken, kannst du auch die ID des bodys oder des headers oder eines anderen Elements verwenden, dieses hier halte ich für überflüssig.

  
<dl>  
<dt><label for="searchInput" ></label></dt>  
<dd><input type="text" name="search" id="searchInput" value="Suchbegriff eingeben" onfocus="this.value='';" onblur="if (this.value == '') { this.value = this.defaultValue; }" /><input type="submit" name="submit" value="" id="searchSubmit" /></dd>  
<dd>Gast | <a href="#">Login</a> | <a href="#">Jetzt registrieren!</a></dd>  
</dl>  

Das ist eine sehr merkwürdige Verwendung einer Definitionsliste. Erstens sollte im Label ein Text stehen. Wenn der dir nicht gefällt kannst du ihn per CSS auch wieder ausblenden. Wobei ich in diesem Falle ein Label in Anbetracht der Eindeutigkeit des Nutzens des Eingabefeldes gar für überflüssig halte. Ich würde stattdessen dem Eingabefeld ein geeignetes title-Attribut verpassen.
Der Submit-Button sollte auf jedenfall eine Beschriftung erhalten. Sonst weiß der Benutzer eines Browsers, der keine Grafiken oder kein CSS darstellt ja gar nicht, wozu der Button da ist.
In der Definitionsliste weist du dem Definitionsterm (dem noch nicht vorhandenen Label) gleich zwei Definitionsbeschreibungen zu. Das ist äußerst ungewöhnlich und in diesem Falle auch logisch falsch, denn die Anmeldedaten haben ja nichts mit dem Label zu tun.

In deinem CSS-Code bin ich auf viele Definitionen der folgenden Art gestoßen:

  
a {  
  font-family: Tahoma, Verdana, arial;  
  font-size: 14px;  
  color: #4096ee;  
}  

Du hast großes Glück, dass Tahoma durch Zufall die Schrift ist, die auf meinem System für mich am besten lesbar und deshalb schon voreingestellt ist. Stünde zum Beispiel Verdana an erster Stelle, dann würde ich das für eine große Frechheit halten, denn Verdana sieht bei mir eckig und kantig und allgemein nicht gut lesbar aus. Wenn du ohnehin schon solch „normale“ Schriftarten verwendest, kannst du auch gleich die im Browser voreingestellte stehen lassen, zum Beispiel durch font-family: sans-serif; oder gänzliches Weglassen der Definition (sofern du tolerieren willst, dass manchen Menschen Serifenschriftarten besser gefallen).

Anhand eines Screenshots der zweiten Version deiner Seite könnte ich feststellen, ob auch diese bei mir korrekt angezeigt wird, ich habe nämlich das Gefühl, dass da etwas falsch ist.

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

[Simon]

Anhand eines Screenshots der zweiten Version deiner Seite könnte ich feststellen, ob auch diese bei mir korrekt angezeigt wird, ich habe nämlich das Gefühl, dass da etwas falsch ist.

Hier mal der Screenshot:
Bild

MfG
Simon

[Candid Dauth]

Heißa, Simon,

Hier mal der Screenshot:
Bild

Okay, mittlerweile sieht es dann doch genau so aus, wenn man mal davon absieht, dass sowohl die linke Spalte als auch der rechte Werbebanner bei mir aufgrund des Begriffs „werbung“ von AdBlock Plus ausgeblendet wird.

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

[Simon]

Heißa, Simon,

Hier mal der Screenshot:
Bild

Okay, mittlerweile sieht es dann doch genau so aus, wenn man mal davon absieht, dass sowohl die linke Spalte als auch der rechte Werbebanner bei mir aufgrund des Begriffs „werbung“ von AdBlock Plus ausgeblendet wird.

Ok, danke.
Werde noch die ID der Linken Spalte ändern da sie ja jetzt keine Werbung mehr enthält.

MfG
Simon

[Simon]

So, hab jetzt mal das ganze ein bisschen geändert:
test.heimgeistig.at/pimp2

Wie findet ihr es jetzt?

[Gunnar Bittersmann]

@@Simon:

nuqneH

test.heimgeistig.at/pimp2
Wie findet ihr es jetzt?

Nicht, weil du die Seite nicht verlinkt hast.

Ich mach das mal für dich: test.heimgeistig.at/pimp2

Warum ist die aktuelle Seite im Menü verlinkt? (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Was soll das Sternenbanner da neben der Sprachauswahl „English“? Flaggen stehen nicht für Sprachen.

Qapla'

[Matze]

Hallo Gunnar!

Warum ist die aktuelle Seite im Menü verlinkt? (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])
Was soll das Sternenbanner da neben der Sprachauswahl „English“? Flaggen stehen nicht für Sprachen.

Du bist aber streng.
Die Diskussion, ob der Union Jack oder die US-Flagge die Englische Sprache symbolisieren ist z.B. überholt.
Die aktuelle Seite zu verlinken ist zwar nicht schön, stört aber eigentlich auch nicht.

Semantik hin und her aber man kann es auch übertreiben, oder?

Qapla'

[Der Martin]

Hi,

Die Diskussion, ob der Union Jack oder die US-Flagge die Englische Sprache symbolisieren ist z.B. überholt.

das dachte ich auch, denn wie Gunnar schon sagte: Flaggen haben nichts mit Sprachen zu tun.
Sonst dürftest du für Englisch auch noch die Flagge von Irland, Kanada, Australien hinmalen; für Französisch die von Frankreich, Belgien, der Schweiz, Kanada, etlichen afrikanischen Staaten, für Spanisch ... ach, es wird unübersichtlich.
Umgekehrt: Warum sollte ein Ire, ein Nordire womöglich noch, auf die Flagge des verhassten United Kingdom klicken, oder ein Österreicher auf die Piefke-Fahne?

Die aktuelle Seite zu verlinken ist zwar nicht schön, stört aber eigentlich auch nicht.

Es stört nicht, und ich finde es sogar konsequent und richtig. Ansichtssache.

Semantik hin und her aber man kann es auch übertreiben, oder?

Wenn jemand auf andere Ansichten oder auf mögliche Probleme hingewiesen wird oder Kritik zu hören bekommt, liegt es an ihm selbst, diese Hinweise und Kritik aufzugreifen und umzusetzen, oder es zu lassen. Zumindest sollte er aber nochmal darüber nachdenken.

Ciao,
 Martin

[SImon]

Wenn jemand auf andere Ansichten oder auf mögliche Probleme hingewiesen wird oder Kritik zu hören bekommt, liegt es an ihm selbst, diese Hinweise und Kritik aufzugreifen und umzusetzen, oder es zu lassen. Zumindest sollte er aber nochmal darüber nachdenken.

Ich finde es sogar sehr gut, darum frag ich ja hier, meistens kommt man auf Sachen drauf die man selbst nie beachtet hätte.

[Simon]

Was soll das Sternenbanner da neben der Sprachauswahl „English“? Flaggen stehen nicht für Sprachen.

Vielleicht, aber ich glaube (fast) jeder verbindet mit dieser Fagge die Englische Sprache.

Es wurde jetzt ja schon sehr viel zum Design gesagt aber mich würde viel mehr interessieren wie ihr jetzt das XHTML und das CSS findet. Gibt es Sachen die man noch verbessern kann?

MfG
Simon

[Gunnar Bittersmann]

@@Simon:

nuqneH

Was soll das Sternenbanner da neben der Sprachauswahl „English“? Flaggen stehen nicht für Sprachen.
Vielleicht, aber ich glaube (fast) jeder verbindet mit dieser Fagge die Englische Sprache.

Ich verbinde mit dieser Flagge alles Mögliche: Bruce Springsteen, die Mondlandung, Hollywood, die üblen Machenschaften der CIA in so ziemlich jedem lateinamerikanischen Land ... aber nicht die englische Sprache.

Wenn du ein Symbol für die Sprachauswahl suchst: ein Globus bietet sich an. [NAVIGATION-SELECT] » Best practice » Labeling.

Qapla'

[Felix Riesterer]

Lieber Simon,

meines Wissens heißt es _die_ Climax. Und Bilder will ich in 100% Größe sehen. Von daher muss ich auf Deiner Seite viel größere Bilder laden, als ich dann später angezeigt bekomme. Gerade bei der Tasse entseht durch das Verkleinern des Browsers ein nicht so schönes Bild.

Liebe Grüße,

Felix Riesterer.

[Simon]

Lieber Simon,

meines Wissens heißt es _die_ Climax.

???

Und Bilder will ich in 100% Größe sehen. Von daher muss ich auf Deiner Seite viel größere Bilder laden, als ich dann später angezeigt bekomme. Gerade bei der Tasse entseht durch das Verkleinern des Browsers ein nicht so schönes Bild.

Ok, aber das soll jetzt nicht das größte Problem sein da es ja nur ein simpler Beispiel-Content sein soll.

MfG
Simon

[Jeena Paradies]

Hallo,

Mir gefallen die IDs "left", "middle", "right" nicht, denn mir persönlich ist es schon unglaublich oft passiert, dass ich dann plötzlich das "die News" rechts haben sollte und plötzlich passten meine ganzen Klassen-, bzw. ID-namen nicht mehr.

Jeena

[Simon]

Mir gefallen die IDs "left", "middle", "right" nicht, denn mir persönlich ist es schon unglaublich oft passiert, dass ich dann plötzlich das "die News" rechts haben sollte und plötzlich passten meine ganzen Klassen-, bzw. ID-namen nicht mehr.

Ich versteh nicht wirklich was du damit meinst !?

[Jeena Paradies]

Hallo,

Ich versteh nicht wirklich was du damit meinst !?

Deine Seite sieht jetzt so aus:

+-------+---------+---------+
| #left | #middle | #right  |
| News  | Content | Werbung |
|       |         |         |
|       |         |         |
|       |         |         |
+-------+---------+---------+

Hier machst du ja:

#left { float: left; }  
#right { float: right; }  

Wenn du jetzt plötzlich das ganze so haben willst:

+---------+---------+-------+
| #right  | #middle | #left |
| Werbung | Content | News  |
|         |         |       |
|         |         |       |
|         |         |       |
|         |         |       |
+---------+---------+-------+

Wenn du die IDs beibehälst dann müsstest du so etwas machen:

#left { float: right; }  
#right { float: left; }  

Und das ist nicht cool. Wenn du die IDs aber nach den Inhalten wählst:

+----------+----------+-------+
| #werbung | #content | #news |
| Werbung  | Content  | News  |
|          |          |       |
+---------+-----------+-------+

... dann hast du das problem nicht:

#werbung { float: left; }  
#news { float: right; }  

Jeena

[Simon]

Hallo,

Ich versteh nicht wirklich was du damit meinst !?

Deine Seite sieht jetzt so aus:

+-------+---------+---------+
| #left | #middle | #right  |
| News  | Content | Werbung |
|       |         |         |
|       |         |         |
|       |         |         |
+-------+---------+---------+

Hier machst du ja:

#left { float: left; }

#right { float: right; }

> Wenn du jetzt plötzlich das ganze so haben willst:  
>   
> +---------+---------+-------+  
> | #right  | #middle | #left |  
> | Werbung | Content | News  |  
> |         |         |       |  
> |         |         |       |  
> |         |         |       |  
> |         |         |       |  
> +---------+---------+-------+  
>   
> Wenn du die IDs beibehälst dann müsstest du so etwas machen:  
>   
> ~~~css

#left { float: right; }  

> #right { float: left; }  
> 

Und das ist nicht cool. Wenn du die IDs aber nach den Inhalten wählst:

+----------+----------+-------+
| #werbung | #content | #news |
| Werbung  | Content  | News  |
|          |          |       |
+---------+-----------+-------+

... dann hast du das problem nicht:

#werbung { float: left; }

#news { float: right; }

>   

Aso, so meintest du. Ja werd ich noch ändern.  
  
Danke, MfG  
Simon