Design und Code bewerten (EDITOR)

[tarik02]

Hey Leute,

Ich würde mich freuen wenn ihr euch mal meine (private) Seite anschauen könntet. ;)
Der Inhalt kommt noch, möchte aber erst einmal wissen wie ihr die Seite so findet :lol:

Danke und Gruß
T02

Link: Neu

 

[Fisker31]

Ich persönlich mag nicht solche Designs, ich setze eher auf Minimalismus aber dennoch ist das eine gute Lösung die du hier vorstellst. Ich würde vllt noch ein bisschen diese Zerissene Textur mit Schatten hinterlegen oder Weichere Kanten geben.

Mein Lob hast du!

 

[tarik02]

Ich würde vllt noch ein bisschen diese Zerissene Textur mit Schatten hinterlegen oder Weichere Kanten geben.

Okay ich werd's versuchen ;)

Mein Lob hast du!

Danke!

T02

 

[kruschimappel]

Hallo,

die Idee mit dem angepinnten Zettel finde ich an sich schon gut. Allerdings sieht der Zettel m. E. unecht aus. Die verpixelten Ränder und der einfarbige Hintergrund sehen etwas "billig" aus.
Das mit dem Bild für die Überschrift würde ich schon aus SEO-Sicht anders lösen. Für jede Seite den gesamten Header neu laden zu müssen ist unsinnig. Tausch lieber nur den tatsächlichen Titel aus und mach das für die Suchmaschinen und Screenreader so:
Header Text Image Replacement | CSS-Tricks
Ein weiteres Problem: was passiert, wenn der Text länger als dein Design ist? Richtig, sieht doof aus.

Beim Code: voher den Validator fragen, dann zeigen sich bei dir Kleinigkeiten im Code (keine anderen HTML-Elemente innerhalb einer Liste, Charset angeben).
[Invalid] Markup Validation of http://our-world.bplaced.net/ - W3C Markup Validator
Aus semantischer Sicht solltest du leere Elemente vermeiden (oben, unten) und überflüssige Elemente einsparen (der Container um die Navigation -> id dem <ul> zuweisen).

Schöne Idee, aber ein paar Kleinigkeiten am Code und an der Umsetzung würde ich noch ändern.

 

[tarik02]

Allerdings sieht der Zettel m. E. unecht aus. Die verpixelten Ränder und der einfarbige Hintergrund sehen etwas "billig" aus.

Die Ränder... hm werde ich mir was einfallen lassen..nach schärfen vielleicht. Hast du einen Tipp wie ich den Hintergrund nicht so "billig" bzw, einfarbig wirken lasse? ;)

Das mit dem Bild für die Überschrift würde ich schon aus SEO-Sicht anders lösen. Für jede Seite den gesamten Header neu laden zu müssen ist unsinnig. Tausch lieber nur den tatsächlichen Titel aus und mach das für die Suchmaschinen und Screenreader so:
Header Text Image Replacement | CSS-Tricks

Okay werde ich versuchen umzusetzen

Ein weiteres Problem: was passiert, wenn der Text länger als dein Design ist? Richtig, sieht doof aus.

Das Problem ist das sich der Zettel sehr schlecht wiederholen lässt...gibt es da eine Lösung?

Beim Code: voher den Validator fragen, dann zeigen sich bei dir Kleinigkeiten im Code (keine anderen HTML-Elemente innerhalb einer Liste, Charset angeben).
[Invalid] Markup Validation of http://our-world.bplaced.net/ - W3C Markup Validator

Okay, wo kommen dann die <hr> Tags hin?

Aus semantischer Sicht solltest du leere Elemente vermeiden (oben, unten) und überflüssige Elemente einsparen (der Container um die Navigation -> id dem <ul> zuweisen).

Okay und wie bzw. womit ersetze ich die div's oben und unten?

Schöne Idee, aber ein paar Kleinigkeiten am Code und an der Umsetzung würde ich noch ändern.

Danke für die Antworten ;)


MfG
T02

 

[kruschimappel]

Den Hintergrund könntest du mit einer leichten Pergament- oder Papier-Textur belegen (findet man z.B. im Internet oder selbst machen, wenn mans kann (ich z.B. nicht) ;) ).
Die Wiederholung des Zettels lässt sich in der Länge durch eine sich wiederholende Grafik lösen (z.B. 100px hoch), die dann nahtlos in das untere Ende des Zettels übergeht. Ich gebe zu, das ist schwer umzusetzen, ich habe mal etwas ähnliches gemacht, kann ich dir zeigen wenn du möchtest. ;)
Die <hr>-Tags müssen einfach innerhalb der <li>-ELemente sein.
Der Div oben kann durch ein <h1> ersetzt werden, der untere ist schwierig,gebe ich zu. Entweder Inhalt rein (Footer) oder geschickt irgendwo anders unterbringen. Oder falls es gar nicht geht, so lassen, da kann man mal ein Auge zudrücken

 

[tarik02]

Den Hintergrund könntest du mit einer leichten Pergament- oder Papier-Textur belegen (findet man z.B. im Internet oder selbst machen, wenn mans kann (ich z.B. nicht) ;) ).

Hab eine (Siehe Anhang) ist die soweit in Ordnung?

Die Wiederholung des Zettels lässt sich in der Länge durch eine sich wiederholende Grafik lösen (z.B. 100px hoch), die dann nahtlos in das untere Ende des Zettels übergeht. Ich gebe zu, das ist schwer umzusetzen, ich habe mal etwas ähnliches gemacht, kann ich dir zeigen wenn du möchtest. ;)

Wäre nett. Ich kann mir nicht vorstellen wie das dann mit den Ausgefransten Ränder (die ich schon gerne haben würde) klappen soll ;)

Die <hr>-Tags müssen einfach innerhalb der <li>-ELemente sein.

Behoben

Der Div oben kann durch ein <h1> ersetzt werden, der untere ist schwierig,gebe ich zu. Entweder Inhalt rein (Footer) oder geschickt irgendwo anders unterbringen. Oder falls es gar nicht geht, so lassen, da kann man mal ein Auge zudrücken

Oberer Div ist jetzt <h1> unterer hab ich erst einmal so gelassen.

Aktualisierte Seite hab ich hoch geladen.

Danke!
T02

Edit: Mist, Anhang vergessen...
Bild ist zu groß... Ich musste das Bild auf meinen Webspace laden: http://our-world.bplaced.net/1.jpg

 

[kruschimappel]

Hallo,

Oberer Div ist jetzt <h1> unterer hab ich erst einmal so gelassen.

Ein leeres H1 macht genausowenig Sinn wie ein leerer DIV-Container. Da muss natürlich als Text die Überschrift der Seite rein ;) Per text-indent kannst du diese verstecken und deine Grafik-Überschrift einsetzen (die zur Zeit nicht sichtbar ist?). Siehe Link im ersten Eintrag von mir.

Die Textur finde ich gut, hauptsache es hat ein wenig Struktur und wirkt nicht zu "platt" und einfarbig auf dem Holzhintergrund. Hab dir mal einen Screenshot angehängt mit der Lösung, die ich mal gebastelt habe.
Allerdings ist es da etwas schwierig, einen vernünftigen Abschluss unten hinzukriegen, da du nicht weißt, wie lang der Inhalt ist. Ich hab deshalb gar keinen Abschluss angefügt.

lg
kruschimappel