Bitte mein Template begutachten

[Thomas]

Schönen Nachmittag!

Habe mir ein Template erstellt, das bald meine neue Website werden soll. Bevor ich es nun verwende, wollte ich es euch zeigen und eure Meinung bezüglich Design, Semantik und Darstellbarkeit hören.
Hier der Link: http://www.thomass.at.tf/template bzw. http://vockenhuber.vo.funpic.de/template

Sorry für die Werbeeinblendung auf der Seite, die kommen von funpic.

Danke, Thomas

[D.R.]

Hallo,

Habe mir ein Template erstellt, das bald meine neue Website werden soll. Bevor ich es nun verwende, wollte ich es euch zeigen und eure Meinung bezüglich Design, Semantik und Darstellbarkeit hören.

Die Seite wird bei einer zu kleinen Viewportgröße nach links aus dem Fenster geschoben. Das solltest du möglichst beheben.

(X)HTML, Semantik und Gestaltung gefallen mit aber sehr gut. Weiter so!

mfg. Daniel

[Orlando]

Die Seite wird bei einer zu kleinen Viewportgröße nach links aus dem Fenster geschoben.

Bei einer großen wirkt sie leicht deplatziert:

Auch ist der weiße Text auf schraffiertem Grund schlecht zu lesen. Ein geringerer Kontrast in der Grafik wäre vorteilhaft.

Roland

[D.R.]

Hallo,

Die Seite wird bei einer zu kleinen Viewportgröße nach links aus dem Fenster geschoben.

Bei einer großen wirkt sie leicht deplatziert:

[s. Bild des Vorpostings]

Boah, was is'n das für 'ne riesen Auflösung. Kann man da überhaupt noch was lesen, ohne den Text zu skalieren?!

Auch ist der weiße Text auf schraffiertem Grund schlecht zu lesen.

Der Meinung bin ich wiederum nicht.

mfg. Daniel

[Orlando]

[s. Bild des Vorpostings]

Boah, was is'n das für 'ne riesen Auflösung.

1.920 × 1.200

Kann man da überhaupt noch was lesen, ohne den Text zu skalieren?!

Klar, die Pixel teilen sich eine 24 Zoll-Diagonale und sind daher nicht unbedingt kleiner als bei anderen Monitoren. Zum Vergleich: der Screenshot wird darauf mit ca. 13 cm Breite dargestellt.

Roland

[Mathias Brodala]

Hallo Thomas.

Habe mir ein Template erstellt, das bald meine neue Website werden soll. Bevor ich es nun verwende, wollte ich es euch zeigen und eure Meinung bezüglich Design, Semantik und Darstellbarkeit hören.
Hier der Link: http://www.thomass.at.tf/template bzw. http://vockenhuber.vo.funpic.de/template

Die Farbkomposition wirkt recht angenehm auf mich, lediglich die diagonalen Linien hinter dem Text erschweren das Lesen des selbigen etwas. Vielleicht solltest du diese etwas dunkler gestalten. Die Zweifarbigkeit erscheint mir ein wenig uneins, kann aber mit etwas mehr Inhalt dennoch gut wirken. Und möchtest du den Freiraum unten links nicht nutzen? Momentan ist er Verschwendung.

Dagegen, dass der Navigationstext beim Skalieren im Firefox über und im Konqueror unter den Inhaltsbereich wandert solltest du wohl etwas unternehmen.

Ich sehe gerade, dass das Layout im IE deutlich anders aussieht. Du solltest der „Gras“-Grafik eine Hintergrundfarbe mitgeben. Zudem skaliert im IE leider nur die Navigation, nicht jedoch der Inhaltstext, da du hier die Schriftgröße in Pixeln einzementiert hast. Würde ich den IE nutzen, würde mir dies missfallen.

Das HTML gibt keinen Grund zur Bemängelung.

Einen schönen Freitag noch.

Gruß, Mathias

[Thomas]

Hallo

Und möchtest du den Freiraum unten links nicht nutzen? Momentan ist er Verschwendung.

Hätte ich eigentlich vor, ich weiß aber noch nicht was ich dort hintun soll. Ich hatte die Idee zwei Valid Buttons für XHTML und CSS untereinander anzuordnen, die neben der Contentbox mitwandern. Ich habe aber noch nicht herausbekommen wie ich das mache :-)

Dagegen, dass der Navigationstext beim Skalieren im Firefox über und im Konqueror unter den Inhaltsbereich wandert solltest du wohl etwas unternehmen.

Dieses Problem kann ich leider nicht nachvollziehen. Vielleicht könnte jemand einen Screenshot davon hier reinstellen.

Ich sehe gerade, dass das Layout im IE deutlich anders aussieht.

Jetzt wo ich es mit dem IE6 ansehe, bemerke ich es auch, werde ich wohl noch ein bisschen ändern müssen, obwohl mir das helle oben jetzt auch ganz gut gefällt ;-)

Das HTML gibt keinen Grund zur Bemängelung.

Freut mich ;-)

Grüße, Thomas

[D.R.]

Hallo,

Ich hatte die Idee zwei Valid Buttons für XHTML und CSS untereinander anzuordnen, die neben der Contentbox mitwandern. Ich habe aber noch nicht herausbekommen wie ich das mache :-)

Nachdem du die Seite durch den Validator jagst, und die Validität bestätigt wird, wird dir das auf der Ergebnisseite erklärt.

Dagegen, dass der Navigationstext beim Skalieren im Firefox über und im Konqueror unter den Inhaltsbereich wandert solltest du wohl etwas unternehmen.

Dieses Problem kann ich leider nicht nachvollziehen. Vielleicht könnte jemand einen Screenshot davon hier reinstellen.

Wie du willst:

Selber ausprobieren, kannst du das, indem du auf Strg drückst und ein wenig scrollst. Opera und der IE 7 skalieren aber anders.

Ich sehe gerade, dass das Layout im IE deutlich anders aussieht.
Jetzt wo ich es mit dem IE6 ansehe, bemerke ich es auch, werde ich wohl noch ein bisschen ändern müssen,

Evtl. mal nach „alpha Image Loader“ googlen. Ansonsten ist der IE6 aber IMHO vernachlässigbar.

mfg. Daniel

[Thomas]

Hallo

Nachdem du die Seite durch den Validator jagst, und die Validität bestätigt wird, wird dir das auf der Ergebnisseite erklärt.

Du hast mich glaube ich falsch verstanden. Ich wollte nämlich meine eigenen Buttons links daneben einbinde, die automatisch mitgehen, wenn man das Fenster verkleinert. Würde dann etwa so aussehen:

Wie du willst:

Ok, ihr habt gemeint, wenn man den Text vergrößert. Werde mich darum kümmern, danke.

ps: Das Problem mit der Transparenz der der Grasgrafik oben habe ich jetzt geändert indem es immer einen leicht blauen Hintergrund hat. Gefällt mir so eh besser als vorher.

Grüße, Thomas

[D.R.]

Hallo,

Nachdem du die Seite durch den Validator jagst, und die Validität bestätigt wird, wird dir das auf der Ergebnisseite erklärt.

Du hast mich glaube ich falsch verstanden. Ich wollte nämlich meine eigenen Buttons links daneben einbinde, die automatisch mitgehen, wenn man das Fenster verkleinert.

Was genau meinst du mit „mitgehen“?

1. Möglichkeit:
Die Buttons sollen immer den gleichen Abstand zum Content haben:

-> Dann musst du selbige innerhalb (am Besten am Ende) des Content-Blockes definieren und es mittels absoluter Positionierung und negativen Werten für „left“ nach links schieben.

2. Möglichkeit:
Die Buttons sollen bei einer zu kleinen Auflösung unter dem Inhalt stehen:

-> Positioniere den Inhalt nicht absolut, sondern floate ihn rechts (float:right). Die Buttons kommen dann unter den Content-Block und werden entweder auch rechts gefloatet ober mit „margin-left:auto“ an die richtige Stelle geschoben.

Wie du willst:
[Bild: verschobene Navi (s. Vorposting)]

Ok, ihr habt gemeint, wenn man den Text vergrößert. Werde mich darum kümmern, danke.

Dazu noch ein paar Tipps:

• Gehe sparsam mit Angaben, die die Höhe beeinflussen um. Dann richtet sich diese nach dem Inhalt.

• Verwende möglichst relative Einheiten wie „em“ (sofern der Bereich nciht von einer Grafik abhängig ist). Bereiche, dessen Größe in „em“ definiert ist, wachsen dann mit der Schrift.

ps: Das Problem mit der Transparenz der der Grasgrafik oben habe ich jetzt geändert indem es immer einen leicht blauen Hintergrund hat.

Alternativ könntest du die Grafik auch so speichern, dass der Hintergrund nur in nicht-transparenz-fähigen Browsern auftaucht.
Im Gimp geht das z.B. wenn du die gewünschte Farbe als Hintergrundfarbe auswählst und beim speichern die Option „Transparenzfarbe speichern“ (oder so) ankreuzt.

mfg. Daniel

[JürgenB]

Hallo Thomas,

Und möchtest du den Freiraum unten links nicht nutzen? Momentan ist er Verschwendung.

... Ich hatte die Idee zwei Valid Buttons für XHTML und CSS untereinander anzuordnen, ...

das wäre ja so, als hätte Dein neuer geschmackvoll designter Plasmafernseher auf der Bildfläche, evtl. neben dem Senderlogo, ein permanent eingeblendetes VDE-Prüfsiegel. Wirklich schick.

Oder stell Dir einen getunten (tiefer-härter-breiter) Porsche vor, der auf Türen und Hauben eine formatfüllende TÜV-Plakette spazieren fährt.

Gruß, Jürgen

[Thomas]

Hallo,

das wäre ja so, als hätte Dein neuer geschmackvoll designter Plasmafernseher auf der Bildfläche, evtl. neben dem Senderlogo, ein permanent eingeblendetes VDE-Prüfsiegel. Wirklich schick.

Oder stell Dir einen getunten (tiefer-härter-breiter) Porsche vor, der auf Türen und Hauben eine formatfüllende TÜV-Plakette spazieren fährt.

Naja ich würde aber trotzdem gern zeigen dass ich mich um Validät bemüht habe und versuche diese Standards einzuhalten. Hättest du eine Idee, was ich sonst in den linken ungenutzen Bereich setzten soll?

Grüße, Thomas

[Mathias Brodala]

Hallo Thomas.

das wäre ja so, als hätte Dein neuer geschmackvoll designter Plasmafernseher auf der Bildfläche, evtl. neben dem Senderlogo, ein permanent eingeblendetes VDE-Prüfsiegel. Wirklich schick.

Oder stell Dir einen getunten (tiefer-härter-breiter) Porsche vor, der auf Türen und Hauben eine formatfüllende TÜV-Plakette spazieren fährt.

Naja ich würde aber trotzdem gern zeigen dass ich mich um Validät bemüht habe und versuche diese Standards einzuhalten.

Derjenige, den dies interessiert, der findet dies auch ohne Markierungen heraus. Wen es nicht interessiert, den werden auch die Markierungen nicht interessieren.

Hättest du eine Idee, was ich sonst in den linken ungenutzen Bereich setzten soll?

Inhalt. Verbreitere deinen Inhaltsbereich nach links. Oder setze eine MOTD dort hin. Oder ein Grafik. Oder, oder, oder …

Einen schönen Freitag noch.

Gruß, Mathias

[Thomas]

Hallo,

Inhalt. Verbreitere deinen Inhaltsbereich nach links. Oder setze eine MOTD dort hin. Oder ein Grafik. Oder, oder, oder …

Ok werde mir was überlegen, danke.

Schönen Abend, Thomas

[JürgenB]

Hallo Thomas,

Naja ich würde aber trotzdem gern zeigen dass ich mich um Validät bemüht habe und versuche diese Standards einzuhalten. Hättest du eine Idee, was ich sonst in den linken ungenutzen Bereich setzten soll?

meine vieleicht etwas weit hergeholten Vergleiche sollten Dir nur zeigen, dass man nicht extra darauf hinweist und hinweisen muss, wenn selbstverständliche Standards eingehalten werden. (Wobei die TÜV-Plakette bei "tiefer-härter-breiter" deutlich schwieriger sein kann als valides (X)HTML.)

Leider habe ich keine Idee für den freien Raum. Im Zweifelsfall frei lassen.

Gruß, Jürgen

[Bud]

Hi.

Die Farbkomposition wirkt recht angenehm auf mich, lediglich die diagonalen Linien hinter dem Text erschweren das Lesen des selbigen etwas. Vielleicht solltest du diese etwas dunkler gestalten.

Noch eine kleine Ergänzung: Die Linien sollten von links unten nach rechts oben gehen - wirkt "positiver". ;-)

vg Bud

[Thomas]

Hallo,

Noch eine kleine Ergänzung: Die Linien sollten von links unten nach rechts oben gehen - wirkt "positiver". ;-)

ist aber absichtlich so, weil sie sonst in die selbe Richtung gehen wie der Hintergrund.

Grüße
Thomas

[Bud]

Hi.

Noch eine kleine Ergänzung: Die Linien sollten von links unten nach rechts oben gehen - wirkt "positiver". ;-)
ist aber absichtlich so, weil sie sonst in die selbe Richtung gehen wie der Hintergrund.

Hab' ich mir schon gedacht. Dann würde ich _beide_ umdrehen, damit bei der dominanteren Variante die Richtung "stimmt".

vg Bud

[Thomas]

Hallo!

Erstmal danke an alle hier die die vielen hilfreichen Tipps abgegeben haben. Ein paar Sachen habe ich schon verbessert, andere folgen noch. Dennoch bleiben ein paar Fragen offen:
1.) Ich habe derzeit 5 Navigationselemente. Da ich möchte dass sie die ganze Breite ausfüllen, habe ich sie auf width:20%; gesetzt. Im IE7 wird bei mit allerdings das letzte Element immer in die nächste Zeile umgebrochen. Was kann ich dagegen tun?
2.) Beim verkleinern der Seite wandert die Seite im Firefox auf der linken Seite aus dem Fenster. Was kann ich dagegen tun?

Danke nochmals
Thomas

[D.R.]

Hallo,

Erstmal danke an alle hier die die vielen hilfreichen Tipps abgegeben haben. Ein paar Sachen habe ich schon verbessert, andere folgen noch. Dennoch bleiben ein paar Fragen offen:
1.) …Im IE7 wird bei mit allerdings das letzte Element immer in die nächste Zeile umgebrochen. Was kann ich dagegen tun?

Ich habe den Effekt auch beobachtet. Jedoch nicht „immer“ (nicht bei jeder Fenstergröße). Von daher könntest du vielleicht einfach eine etwas geringere Browser zuweisen. Evtl. auch per Hack.

2.) Beim verkleinern der Seite wandert die Seite im Firefox auf der linken Seite aus dem Fenster. Was kann ich dagegen tun?

Gib den <body> eine passende Mindestbreite.

mfg. Daniel

[Thomas]

Hallo,

2.) Beim verkleinern der Seite wandert die Seite im Firefox auf der linken Seite aus dem Fenster. Was kann ich dagegen tun?

Gib den <body> eine passende Mindestbreite.

Soweit so gut, aber das Problem mit der Navigation konnte ich leider noch nicht lösen. CSS sieht so aus:
#nav {
 width: 100%;
}
#nav ul {
 list-style: none;
}
#nav ul li {
 float: left;
 width: 20%;
 background-color: #333;
 border-top: 3px solid #666;
 border-bottom: 3px solid #666;
}
#nav ul li a {
 display: block;
 padding: 3px 0 3px 0;
 height: 100%;
 text-decoration: none;
 text-align: center;
 color: #FFF;
}

Damit habe ich schonmal erreicht, dass man die Schrift vergrößern kann ohne dass sie aus der Navigation geht. Wenn ich jetzt aber die Breite eines Nav-Elements verkleinere, fehlt links der Hintergrund. Wenn ich den Hintergrund in #nav definiere, funktioniert es gar nicht.
Kann mir hier nochmal wer helfen? :-)

Schönen Abend
Thomas

[Thomas]

Hallo,

Ich habe den Effekt auch beobachtet. Jedoch nicht „immer“ (nicht bei jeder Fenstergröße). Von daher könntest du vielleicht einfach eine etwas geringere Browser zuweisen. Evtl. auch per Hack.

Was mir noch eingefallen ist: Wäre es eigentlich auch eine Alternative, für die Navigationselemente Grafiken zu verwenden?

Liebe Grüße, Thomas

[D.R.]

Hallo,

Ich habe den Effekt auch beobachtet. Jedoch nicht „immer“ (nicht bei jeder Fenstergröße). Von daher könntest du vielleicht einfach eine etwas geringere Browser zuweisen. Evtl. auch per Hack.

Was mir noch eingefallen ist: Wäre es eigentlich auch eine Alternative, für die Navigationselemente Grafiken zu verwenden?

Dann würde die Skalierbarkeit darunter leiden.
Soll heißen: Da kannst zwar auch die Breite der Grafiken in % angeben, aber zurzeit führt das zu ziemlich unschönen verpixelungen. Würde ich dir also nicht empfehlen.

Bleib lieber bei den Textlinks!

Zu deinem IE7-Problem:
Vielleicht ginge es, wenn du die Navi-ul dort etwas breiter machst und overflow:hidden auf das Navi-Div anwendest. Das ganze solltest du aber möglichst vor anderen Browsern verstecken, da es eigentlich auch ziemlich unschön ist.

mfg. Daniel

[Thomas]

Hallo,

Zu deinem IE7-Problem:
Vielleicht ginge es, wenn du die Navi-ul dort etwas breiter machst und overflow:hidden auf das Navi-Div anwendest. Das ganze solltest du aber möglichst vor anderen Browsern verstecken, da es eigentlich auch ziemlich unschön ist.

Es will irgendwie nicht ganz funktionieren. So wie ich es jetzt habe ist die Hintergrundfarbe in #nav ul li {} definiert, mit 20% width. Wenn ich das jetzt auf 16% width setzte, fehlt rechts der hintergrund.
Wenn ich den Hintergrund aber in #nav ul definiere, seh ich ihn gar nicht.
Bald kenn ich mich nicht mehr aus :-)

Liebe Grüße
Thomas

[D.R.]

Hallo,

Zu deinem IE7-Problem:
Vielleicht ginge es, wenn du die Navi-ul dort etwas breiter machst und overflow:hidden auf das Navi-Div anwendest. Das ganze solltest du aber möglichst vor anderen Browsern verstecken, da es eigentlich auch ziemlich unschön ist.

Es will irgendwie nicht ganz funktionieren.

Hast du das, was ich geschrieben hatte ausprobiert? Ich meinte das so:

  
<div style="overflow:hidden;">  
<ul style="width:150%">  
<!--Deine Navi-->  
</ul>  
</div>  

(das Ganze natürlich auslagern und vor (anderen) Browsern verstecken).

Eigentlich müsste sich der Umbruch auf diese Weise verhindern lassen.

So wie ich es jetzt habe ist die Hintergrundfarbe in #nav ul li {} definiert, mit 20% width. Wenn ich das jetzt auf 16% width setzte, fehlt rechts der hintergrund.

Das ist logisch…

Wenn ich den Hintergrund aber in #nav ul definiere, seh ich ihn gar nicht.

…das dagegen nicht! Hast du evtl. vergessen, der Hintergrund eines <li> vorher zu entfernen? Normalerweise müsste das ohne Probleme klappen. Optimal ist es aber so oder so nicht. Probier lieber nochmal meinen anderen Vorschlag.

Bald kenn ich mich nicht mehr aus :-)

Tja, das ist eben das normale Übel eines Webdesigners. Es läuft in allen Browsern ohne Probleme und dann testet man im IE (der ja immer noch meilenweit davon entfernt ist, den Acid 2-Test zu bestehen).

mfg. Daniel

[Thomas]

Hallo,

Hast du das, was ich geschrieben hatte ausprobiert? Ich meinte das so:

<div style="overflow:hidden;">
<ul style="width:150%">
<!--Deine Navi-->
</ul>
</div>

  
Tja so funktioniert es tatsächlich, da hab ich scheinbar vorher was falschgemacht. Bitte teste bei dir die Seite auch nochmal um zu sehen oba es wirklich geht.  
  

> Tja, das ist eben das normale Übel eines Webdesigners. Es läuft in allen Browsern ohne Probleme und dann testet man im IE (der ja immer noch meilenweit davon entfernt ist, den [Acid 2-Test](http://www.webstandards.org/files/acid2/test.html#top) zu bestehen).  
  
Hm, da sieht man ja wirklich beträchtliche Anzeigeunterschiede zwischen FF und IE :-)  
  
Danke für die Hilfe,  
Thomas  

[D.R.]

Hallo,

Hast du das, was ich geschrieben hatte ausprobiert? Ich meinte das so:

<div style="overflow:hidden;">
<ul style="width:150%">
<!--Deine Navi-->
</ul>
</div>

>   
> Tja so funktioniert es tatsächlich, da hab ich scheinbar vorher was falschgemacht. Bitte teste bei dir die Seite auch nochmal um zu sehen oba es wirklich geht.  
  
Funktioniert auch bei mir ohne Probleme (im IE7).  
Bitte lagere den Code aber aus und mache ihn möglichst nur dem IE zugänglich!  
Übrigens muss ich gestehen eine Sache übersehen zu haben: 20% entspricht ja jetzt nicht mehr der Fenstergröße, sondern der Größe des Balkens. Vielleicht könntest du jetzt Werte nehmen, die kleiner sind als 20%. Bei 130% Gesamtgröße wären wohl 16% optimal.  
  
Probier das mal:  
  
~~~css
  
*+html #nav {overflow:hidden;}  
*+html #nav ul {width:130%;}  
*+html #nav ul li {width:16%;}  

Das „*+html“ ist hierbei der CSS-Hack, der von gescheiten Browsern ignoriert wird.

Tja, das ist eben das normale Übel eines Webdesigners. Es läuft in allen Browsern ohne Probleme und dann testet man im IE (der ja immer noch meilenweit davon entfernt ist, den Acid 2-Test zu bestehen).

Hm, da sieht man ja wirklich beträchtliche Anzeigeunterschiede zwischen FF und IE :-)

Genau! Zwar besteht ihn Firefox 2 noch nicht komplett, aber das wird sich mit der nächsten Version (Firefox 3) ändern. Die aktuellen Nightlys haben jedenfalls keine Probleme mehr damit.

mfg. Daniel