Hey ya,

ich würde mich über euer Feedback zum Entwurf einer Website, die ich gerade für einen Freund gestalte, freuen: http://www.ximes.net/layout/topbackup.htm

Es geht mir in erster Linie um das Gesamterscheinungsbild: Wie ist der erste Eindruck? Wie gut harmonieren die Farben? Wie ist die Übersichtlich- bzw. Leserlichkeit? Ist das Layout zu stark an Blog-Sites angelehnt?

Nachdem ich immer noch in den CSS-Kinderschuhen stecke, wäre ich natürlich auch für diesbezügliche Verbesserungsvorschläge dankbar!

BTW: Ist es vielleicht doch besser, die Sub-Navigation links anzuordnen - wie unter http://www.ximes.net/layout/top.htm gezeigt?

Danke schon mal im voraus!!

Der erste Eindruck - mich stört die Frau.

Zweiter - Farben stimmig, passend zum Thema (Kaffee, mmh).

Dritter - ich vermisse 1-2 Bilder passend zum Thema (Kaffebohnen, Maschinen, etc.).

Die Navigation ist so ok, da das Design nicht sehr breit ist.

Das HTML ist nicht ganz optimal - mehrfach leere DIVs, 2x H1 ... das sollte unterteilt werden in H1-H6

__________________
“My software never has bugs. It just develops random features ...”

» DevShack - die Website des freien Webentwicklers Boris Bojic

Mir gefällt die Seite sehr gut - Ich muss mir jetzt gleich mal einen Kaffee machen

Die Frau finde ich eigentlich gut - allerdings sollte das Bild etwas nachbeabreitet werden, da sie irgendwie aussieht, als sei sie etwas blass...

Ich persönlich würde die Links in der rechten Navi-Leiste über die ganze Breite der li-Elemente gehen lassen - Das ist aber Geschmackssache...

__________________
... Meine Meinung

Ich seh schon - an der Dame scheiden sich die Geister. Dabei wollte ich nur einen Kontrapunkt zu den immergleichen, aalglatten Models von der Stange setzen...

@Boris: Zum Thema passende Bilder folgen noch.
Und zu den Farben: Ist grün für den Rollover-Effekt eine glückliche Wahl?

@slayer2205: Wie setzt man eine Navi-Leiste, die sich über die ganze Breite erstreckt, am besten um? Indem man den A-Elementen eine Breite von 100% verpasst?
Und: Die Variante mit der rechtsseitigen Navi-Leiste ist besser, oder?

Danke!

Die Farbgebung ist in Ordnung.
Alleind das Hover-Grün ist mir zu "schwach" vom Feedback her.

Das Foto ist für sich genommen gut, es passt aber nicht optimal zum Kontext.
Das Frontlicht ist zu überzogen und vermittelt eben diese "Frontalität", Spitzlichter scheinen ganz zu fehlen. Dadurch wird zwar ein unmittelbar wirkender Eindruck erzeugt, aber keine "Tiefe" die zum Kaffeegenuss und zur Botschaft dazugehört.

grüsse

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Ist dieses Bild - http://www.ximes.net/layout/topbackup.htm - besser?

Ich weiss, dass es an sich nichts mit dem Thema zu tun hat. Es soll aber durchaus schrill, also ein Eye Catcher sein...

Das Design gefällt mir.

1. Zum Titel:

a) Muß das englisch sein (wenn schon italienisch daruntersteht)?
b) Das sollte als h1 ins HTML, das Bild per IR (also CSS) eingefügt.

2. Zur Typografie:

Die drei Punkte heißen „horizontale Ellipse“, das gibt es als ein Sonderzeichen und verlangt (hier) ein vorangestelltes geschütztes Leerzeichen (damit die Ellipse nicht einzeln in die nächste Zeile umgebrochen wird). Also so:

  ist das geschützte Leerzeichen, das würde ich immer maskieren.
Die Ellipse kann man direkt so eingeben, unter Windows mit Alt+0133, unter Linux usw. weiß ich nicht wie. Maskiert wäre es ….
(wo wir gerade dabei sind: & funzt hier im Board nicht, dafür aber &#38

3. Zur Navi:

a) Die #mainnav würde ich auch als Liste machen, siehe http://css.maxdesign.com.au/. Dann sparst du dir zwei divs.

b) Gib den Links rechts display:block;, dann gehen sie über die ganze Breite.

c) Das Grün auf der rechten Seite würde ich ändern. Das macht so kaum einen Unterschied. Vielleicht ein blasses Grün als Hintergrundfarbe.

4. Zum Code an sich:

Das div#spacer ist überflüssig, das geht auch mit CSS. Trennung von Inhalt und Layout!

Das div#sidebar ist berechtigt. Es wäre noch berechtigter, wenn du den Inhalt richtig auszeichnen würdest:

Die Klassen bei den[*]s kannst du dir sparen. Das, was da wie Überschriften aussehen soll (.one), würde ich auch als solche auszeichnen und der Liste voranstellen (logisch, ist ja auch eine Überschrift). Dann hast du in dem div#sidebar nicht nur zwei Listen, die du zu einer zusammenfassen könntest, wodurch das div überflüssig wäre, sondern auch noch zwei h2.

Das div#final ist auch überflüssig (⇒CSS).

*grübel*

Ach und die » heißen » und gehören per content ins CSS. Das kann der IE nicht, das kann man hinnehmen, oder per Sonder-CSS beheben. Dazu würde ich mit @import die Pfeile als Hintergrundbilder einfügen (der IE kann sowieso kaum an der Schriftgröße drehen) und mit @import media:screen überschreiben (für Browser, der IE ignoriert das).

Nachtrag:

Stimmt.
Fast: column 69.

Edit: Oh fuck, jetzt darf ich nach dem ersten Edit alle & nochmal maskieren.

Edit: Zum Glück geht der Firefox bei „Zurück“ auch wirklich zurück (C&P).

Noch was:

Die Einschübe mit den Gedankenstrichen brauchen auch geschütze Leerzeichen, ich bin mir aber nicht sicher, wo die hingehören.

@ E|H: Vielen Dank für die zahlreichen, wertvollen Anregungen!
Ich werd versuchen, möglichst viele davon umzusetzen...

Dabei fällt mir noch eine Frage ein: Gibt es einen "einfachen" Weg, den Content-Bereich so auszuzeichnen, dass er stets 100% der Browserfensterhöhe ausfüllt? Dass also unterhalb der Statuszeile kein leerer Hintergrundbereich übrig bleibt?

@ tingeltangeltill: Mit der Bemerkung, dass mein Design sehr stark von gängigen Blog-Layouts beinflusst ist, liegst du bestimmt nicht falsch. Andererseits: Why not? Ich ziehe eine klar gegliederte, gut leserliche Site einer überladenen, unübersichtlichen Business-Site klar vor. V.a. aber muss das Design immer der Sache dienen...

Ui, jetzt steht’s auf italienisch da. Schön.

Vor allem was den Code angeht solltest du nochmal drübergehen. Der ist jetzt schon relativ schlank, das kann aber noch viel weniger werden. Dann wird’s erst richtig schön.