[Editor] Design, Code und Aufbau bewerten

[Icy]

Hallo!

Ich würde gerne meine neue Seite von euch bewerten lassen, die zur Publikation meines selbst geschriebenen Gästebuchs dient.
Hier erstmal der Link: klick (Top-Level Domain kommt noch).
Ich muss vorher dazu sagen, dass ich was Grafisches angeht total talentlos bin. Den Header habe ich mir von aboutpixel.de (Page für lizenzfreie Bilder) gezogen und zurechtgeschnitten. Das Logo auf der Start-Seite habe ich mir erstellen lassen.
Der Rest ist von mir. Habe die Seite wie immer sehr schlicht gehalten, um das schnelle Finden von Informationen zu ermöglichen.
Die Seite ist aufgebaut mit CSS-definierten Blöcken.

Würde mich über eine Bewertung freuen, da ich schon von einem Freund die Aussage erhalten habe, dass da kein eigener Style drin ist (was natürlich ok ist, da es seine Meinung ist).
Ich bitte darum, nicht das Gästebuch zu bewerten.

MfG Icy

 

[Körnerbrötchen]

Gegen schlichte Seiten hab ich auch gar nichts.
Vom Aufbau her ist die Seite soweit auch recht gut gelungen.
Folgenden Satz versteh ich nur nicht so richtig:

da ich schon von einem Freund die Aussage erhalten habe, dass da kein eigener Style drin ist

Der Header der Seite ist einfach zu kontrast- und farbschwach. Das ist keine gute Fotografie. Vielleicht kann man da noch etwas mit einer Bildbearbeitungssoftware basteln, allerdings sage ich aus eigener Erfahrung als Hobbyfotograf: Besser neu und echt.^^
Unter about gibst du einige Listen ohen List-tags wieder? Aber das ist doch der klassische Sinn dieser tags, oder? ;)
Keine Hover-Effekte erkennbar, solange die Links nicht durch "visited" dunkler gefärbt werden. Das irritiert etwas. Vielleicht ist dir das aber auch nicht aufgefallen, da sie bei dir bereits alle dunkel sind?
Zudem würde ich Header mit Navi direkt und ohne padding bzw margin nach außen anbinden.
Den Code könnte man mithilfe von Einrückungen außerdem besser strukturieren.
Zudem würde ich die "box" durch margin von oben abgrenzen. Damit's nicht so anstößt.^^

Aber: Die Seite ist voll valide ;). Was anderes hab ich aber auch nicht erwartet!
Und...
...klar strukturierte Sites haben bei mir oft Vorteilspunkte.

Noten gibt's bei mir aber wie immer nicht. Die gibt's schon ständig in der Schule, da muss es nicht auch noch hier sein! :roll:

 

[Icy]

Hey Körnerbrötchen,
danke erstmal für die konstruktive Kritik.

Ja bei dem Header blieb mir erstmal nichts anderes übrig als mir einen fertigen herauszusuchen *g* Habe mit Bildbearbeitungssoftware nichts am Hut (bin schon stolz auf mich, dass ich den Hintergrund für die Menüleiste allein hinbekommen hab ^^) und habe auch leider nicht die Möglichkeit, solche Skylines in echt zu fotografieren. Aber ich werde mal schauen, ob ich einen besseren finde.

Hm das mit den Hover-Effekten ist mir noch gar nicht aufgefallen :/ normalerweise müsste ich die doch sehen, wenn ich Cookies und/oder Cache lösche oder?

Unter "about" benutze ich nun eine Liste. Weiß auch nicht, warum ich das nicht von Anfang an gemacht habe, danke jedenfalls für den Hinweis.
Auch den Ratschlag mit dem Abstand zwischen Box und oberen Bildschirmrand habe ich umgesetzt. MUss sagen, das sieht wirklich besser aus.

MfG Icy

Edit: Problem mit dem hover-Effekt gelöst :)

 

[koslowski]

Hallo!

Den Header habe ich mir von aboutpixel.de (Page für lizenzfreie Bilder) gezogen und zurechtgeschnitten.

Das täte ich niemals machen.

Du wärst nicht der erste der wg. angeblich lizenzfreier Bilder ne Abmahnung bekommen würde.

Der Code für dein Menü ist semantisch falsch. Die Links gehören in eine ungeordnete Liste.

Styleangaben haben im Code nix zu suchen, da Code und Layout strikt getrennt sein müssen.

Im IE7 bekomm ich ein Werbepopup. Sowas ist bei mir immer ein Grund mich gleich wieder zu verabschieden.

Ansonsten wie körnerbrötchen.

 

[Fili]

Ich finde das Foto unpassend. Es ist weder besonders schön noch sehe ich irgendeinen Zusammenhang zum Inhalt der Seite. Das würde ich ändern.

 

[Icy]

Ich finde das Foto unpassend. Es ist weder besonders schön noch sehe ich irgendeinen Zusammenhang zum Inhalt der Seite. Das würde ich ändern.

Ich muss zugeben dass ich mich da ein bisschen bei woltlab habe inspirieren lassen. Das hört sich jetzt vllt ein bisschen komisch an, aber für mich wirkt die Seite dadurch irgendwie seriös, das macht irgendwie so einen großen, globalen Eindruck ^^
Für Vorschläge bin ich gern offen; muss aber wiederholen, dass ich absolut keinen Plan von Grafikbearbeitung habe.

Der Code für dein Menü ist semantisch falsch. Die Links gehören in eine ungeordnete Liste.

Nun ich persönlich finde es nicht wichtig, ob ich ein horizontales Menü per Liste oder einfach durch Aneinanderreihung aufbaue. Heraus kommt das selbe ;)

Styleangaben haben im Code nix zu suchen, da Code und Layout strikt getrennt sein müssen.

Nenn mir mal bitte die Stellen; habe eigentlich versucht, mich mit Style-Angaben im Code zurückzuhalten.

Im IE7 bekomm ich ein Werbepopup. Sowas ist bei mir immer ein Grund mich gleich wieder zu verabschieden.

Die Seite liegt auch nur auf einem Testserver ;-)

Danke für die Kritik.

MfG Icy

 

[Maxi]

Gefallen tuts mir gut.
Ist es beabsichtigt, dass in der navigation alles auf Englisch geschrieben ist? Irgendwie stört mich das ein bisschen...

Wo hast du das Foto her, von welcher Seite?

 

[Icy]

Jo ist alles extra auf Englisch ^^
Das Foto habe ich von aboutpixel.de (Such mal nach "skyline"). Habe es dann noch auf die passende Größe geschnitten.

MFG Icy

 

[koslowski]

Hi,

Nenn mir mal bitte die Stellen; habe eigentlich versucht, mich mit Style-Angaben im Code zurückzuhalten.

Styleangaben haben im Code überhaupt nix zu suchen, d.h. keine=0 Styleangaben in den code schreiben.
Styleangaben gehören alle in die CSS-Datei.

Nun ich persönlich finde es nicht wichtig, ob ich ein horizontales Menü per Liste oder einfach durch Aneinanderreihung aufbaue. Heraus kommt das selbe

.

daraus kann ich nur schließen, das du nicht auf guten, semantischen Code stehst.
Das laß ich einfach mal so stehen.

 

[Icy]

daraus kann ich nur schließen, das du nicht auf guten, semantischen Code stehst.
Das laß ich einfach mal so stehen.

Man muss nicht immer jeden Quatsch mitmachen nur weil es dann angeblich korrekter ist ;)
Mir ist valider Code wichtig, allerdings weiß ich für mich, ab wann es übertrieben kleinlich wird :)

Hoffe Rechtfertigungen sind erlaubt :-D

MfG Icy

 

[Körnerbrötchen]

Ich hoffe eher, dass koslowski sich einen netten und angenehmen Umgangston zulegt. Wo sind wir denn hier? Wir wollen uns hier nicht streiten, sondern Hilfe und Unterstützung anbieten.

Styleangaben haben im Code überhaupt nix zu suchen, d.h. keine=0 Styleangaben in den code schreiben.
Styleangaben gehören alle in die CSS-Datei.

Allein deine Art zu schreiben, wie auch die Betonung durch fettes Schreiben stört mich. Vielleicht ist es nicht so gemeint, aber dann achte bitte auf soetwas. Im Web kann so manches ganz schnell falsch herüberkommen. Vielen Dank!

Gegen lizenzfreie Bilder habe ich selber nichts einzuwänden. Vorsicht ist hier bei der Wahl der Seite geboten!

Ich schlage dir folgendes Bild vor:
Image:Old book bindings.jpg - Wikimedia Commons
Dieses Bild ist momentan in der Endrunde der "Picture of the Year 2007"-Wahl bei Wikimedia Commons (Bilder- und Medienarchiv der Wikipedia ua. Projekte). Durch die verwendete Creative-Commons-Lizenz ist eine Verwendung in deinem Webprojekt einfach möglich. Solltest du dabei Hilfe brauchen, dann gib Bescheid.

Grüße

 

[koslowski]

Hi,

Zitat von Körnerbrötchen:
Allein deine Art zu schreiben, wie auch die Betonung durch fettes Schreiben stört mich. Vielleicht ist es nicht so gemeint, aber dann achte bitte auf soetwas. Im Web kann so manches ganz schnell falsch herüberkommen. Vielen Dank!

Du hast natürlich völlig recht, sorry deswegen.:)

Manchmal bin ich zu direkt und 'krachert'. Ist aber keineswegs böse gemeint.

 

[koslowski]

Hallo Icy,

hoffe ich habe dich nicht mit meinen 'kracherten' Postings beleidigt,
wenn doch, sorry deswegen, war nicht böse gemeint.

Man muss nicht immer jeden Quatsch mitmachen nur weil es dann angeblich korrekter ist ;)
Mir ist valider Code wichtig, allerdings weiß ich für mich, ab wann es übertrieben kleinlich wird :)

Hoffe Rechtfertigungen sind erlaubt :-D

MfG Icy

Ein wichtiger Grund semantischen Code zu schreiben ist der, das so etwas von Google belohnt wird.

Schau mal hier: Google - Richtlinien für Webmaster

dort heißt es bei "Richtlinien zur Gestaltung und zum Content" unter anderem: "Überprüfen Sie Ihre Seiten auf fehlerhafte Links und sorgen Sie für eine korrekte Verwendung der HTML-Syntax."

Das heißt übersetzt man sollte semantischen Code schreiben.

Google läßt sich kaum in die Karten gucken, das wenige was sie preisgeben sollte man imho dafür aufmerksam lesen.

Wenn dich sowas nicht interessiert ist es natürlich dein Ding wie du code schreibst, da will ich mich nicht einmischen.

koslowski

 

[Html-Profi]

Code: validator bei w3: valide
validome: nicht valide

Browsercheck: Opera: OK
Mozilla Firefox: OK
Internet-Explorer: OK

Ich finde das schlichte Design der Seite sehr schön! Das externe Gästebuch ist: :shock:
Was mir nicht gefällt:
Da die Seite, so viel ich mitbekommen habe, für ein Gästebuch ist, Was suchen die Gebäude im Banner?? Sie passen meiner Meinung nicht hin!:-(

 

[Icy]

Hallo Icy,

hoffe ich habe dich nicht mit meinen 'kracherten' Postings beleidigt,
wenn doch, sorry deswegen, war nicht böse gemeint.



Ein wichtiger Grund semantischen Code zu schreiben ist der, das so etwas von Google belohnt wird.

Schau mal hier: Google - Richtlinien für Webmaster

dort heißt es bei "Richtlinien zur Gestaltung und zum Content" unter anderem: "Überprüfen Sie Ihre Seiten auf fehlerhafte Links und sorgen Sie für eine korrekte Verwendung der HTML-Syntax."

Das heißt übersetzt man sollte semantischen Code schreiben.

Google läßt sich kaum in die Karten gucken, das wenige was sie preisgeben sollte man imho dafür aufmerksam lesen.

Wenn dich sowas nicht interessiert ist es natürlich dein Ding wie du code schreibst, da will ich mich nicht einmischen.

koslowski

Nein, wegen Kritik bin ich ja hier; möchte auch nicht unfreundlich rüberkommen wenn ich versuche mich rechtzufertigen bzw. die Gründe zu nennen, warum ich welchen Code benutzt habe :-)

Das mit dem Google-Aspekt wusste ich noch gar nicht, hört sich aber sehr interessant an. Ich habe gerade mal versucht, die Navi als Liste zu formatieren aber komischerweise stimmen dann die Abstände nicht mehr, owbhol ich versucht habe, es mit margin und padding zu berichtigen. Werde ich mich nochmal etwas länger dransetzen müssen!
Danke jedenfalls für die Info.

Code: validator bei w3: valide
validome: nicht valide

Browsercheck: Opera: OK
Mozilla Firefox: OK
Internet-Explorer: OK

Ich finde das schlichte Design der Seite sehr schön! Das externe Gästebuch ist:
Was mir nicht gefällt:
Da die Seite, so viel ich mitbekommen habe, für ein Gästebuch ist, Was suchen die Gebäude im Banner?? Sie passen meiner Meinung nicht hin!

Danke erstmal für die Kritik.
Habe allerdings nicht so ganz verstanden ob das :shock: positiv oder negativ gemeint ist *gg*
Jaa, der Banner ^^ Also habe mich da wie gesagt ein wenig bei Woltlab.de orientiert weil ich damit irgendwie Seriösität, Größe und Globalität verbinde. Hättet ihr Ideen, was ich da evtl. nehmen könnte? Vielleicht die Skyline-Grafik mit spezifischen Aspekten erweitern, die etwas mit meinem GB zu tun haben? Evtl. ein ganz neues Bild oder einen Header selbst erstellen?

MfG Icy

 

[koslowski]

Hallo Icy,

Ich habe gerade mal versucht, die Navi als Liste zu formatieren aber komischerweise stimmen dann die Abstände nicht mehr, owbhol ich versucht habe, es mit margin und padding zu berichtigen. Werde ich mich nochmal etwas länger dransetzen müssen!

das Phänomen heißt "whitespace".
Bei mit display:inline; erstellten horizontalen Navigationen kommt es zwischen den Listenelementen zu einem Abstand.

Der Grund liegt im HTML-Quelltext, wg. Zeilenumbrüchen und Einrückungen gibt es jede Menge Leerstellen und die werden in dem Fall zu einer Leerstelle zusammengefaßt.

Lösung:
1. Die ganze Liste ohne Umbrüche oder Leerstellen in eine Reihe schreiben. Da wird der HTML-Code sehr unübersichtlich.

2. Ein negativer rechter margin für die Listenelemente.

3.Eine weitere Leerstelle einfügen:
Code:
<li><a href="index.html">Startseite </a></li>
und zwar direkt vor </a>.

4. Die Listenelemente statt mit display:inline; mit float:left; nebeneinzustellen.

Ein guter Link zur Listenformatierung ist:
hier

Einfach runterscrollen. Unterhalb von Punkt 8 kommt Heikos lesenswerter Beitrag zu Listenformatierungen.

Hoffe das hilft dir ein bißchen.

Koslowski

 

[Körnerbrötchen]

Evtl. ein ganz neues Bild oder einen Header selbst erstellen?

MfG Icy

Hast du meinen Vorschlag von oben gelesen oder magst du ihn nicht?
Image:Old book bindings.jpg - Wikimedia Commons

 

[Icy]

Ach sry den hab ich mir zwar angeguckt aber dann vergessen was dazu zu sagen *gg*
Also bei dem BIld finde ich es ein wenig schwer wegen dem Schneiden.
Ich muss das Bild ja in die richtige Größe zurechtschneiden. Es müsste ca. 2,5 Mal so breit wie hoch sein. Das heißt ich müsste die Bücher "zerschneiden" und das würde denk ich mal nicht mehr gut aussehen.
Oder was meinst du?

MfG Icy

 

[neuroleptika]

Das heißt ich müsste die Bücher "zerschneiden" und das würde denk ich mal nicht mehr gut aussehen.

Ich hab Körnerbrötchens Vorschlag mal hochgeladen.
Ich hab einfach dein Code kopiert und absolute Pfadangaben reingeschrieben.
Dann das Bild ausgetauscht.
Ich finde es sieht gut aus. Nur möchte ich dich gefragt haben ehe ich es zeige.

Ansonsten finde ich du solltest den Rahmen feiner machen.
Vielleicht 1px - Haarlinen. Dann wirken Bilder meißt klarer.

 

[Icy]

Würde mich freuen wenn du mir die Page mit deinem Header mal zeigts bzw. hier reinstellst :)

MfG Icy