Website erstellt - Kritik erwünscht

**philofdeath** · 23. 12. 2011, 23:21

Moin!

Habe hier mal eine Website gebastelt und wollte mir ein par Kritiken abholen.
Von Technik bis Design, würde ich mich über Anregungen freuen. Ich mache das noch nicht sehr lange, deshalb nicht zu streng.

Eine kleine Randnotiz: Auf die start.html kommt noch wordpress um News zu posten, deshalb ist die bis jetzt noch leer.

Hier die Website

Danke und so long

Phil

**Kugelfisch23** · 23. 12. 2011, 23:45

Aus technischer Sicht fällt die mangelnde Zugänglichkeit deiner Website auf. Die von mir getesteten Seiten sind zwar weitgehend valide (es fehlen jedoch u.a. die type-Attribute der script-Elemente, siehe etwa http://www.validome.org/validate/?ur....de/media.html), doch sind es kaum strukturierte `div-Suppen`, d.h. sie bestehen zu einem grossen Teil aus semantisch aussagelosen div-Elementen.

Ausserdem sind zwar alt-Attribute für die img-Elemente vorhanden, diese sind jedoch leer - das ist wenig sinnvoll, da dadurch deine Website ohne die Bilder (z.B. für sehbehinderte Benutzer oder automatisierte Crawler) praktisch unbenutzbar wird.

**philofdeath** · 24. 12. 2011, 00:03

Dank dir erst einmal.

Zitat von Kugelfisch23

kaum strukturierte `div-Suppen`, d.h. sie bestehen zu einem grossen Teil aus semantisch aussagelosen div-Elementen.

Meinst du damit die Bezeichnung der divs?

Was die alt-Atribute angeht. Was genau kommt denn dort rein, wie jetzt bspw. bei den dir genannten Beispiel der Barrierefreiheit?

**Kugelfisch23** · 24. 12. 2011, 01:23

Zitat von philofdeath

Meinst du damit die Bezeichnung der divs?

Nein, die Tatsache, dass ausschliesslich div-Elemente zur Stukturierung des Dokuments verwendet wurden. Diese haben - unabhängig von einer `Bezeichnung` z.B. über ein class- oder id-Attribut - keinerlei semantische Aussagekraft. Allerdings befinden sich aktuell auf den Seiten deiner Website auch erst sehr wenige Inhalte, welche sich semantisch strukturieren liessen.

Allgemein gilt, dass die generischen div- und span-Elemente nur dann verwendet werden sollten, wenn kein anderes Element semantisch passend ist. So sollten z.B. Überschriften nicht durch (per CSS mit einer entsprechenden Darstellung versehene) div-Elemente, sondern durch h1-, h2-, ... h6-Elemente. Textabschnitte sollten durch p-Elemente ausgezeichnet werden, Listen jeglicher Art durch ul-/ol- und ihre Einträge li-Elemente. Dies gilt vollkommen unabhängig von der am Ende gewünschten Darstellung, da ein HTML-Dokument die semantischen Zusammenhänge der Inhalte beschreiben soll, nicht deren Darstellung (diese wird im Idealfall ausschliesslich über das Stylesheet festgelegt).

Zitat von philofdeath

Was die alt-Atribute angeht. Was genau kommt denn dort rein, wie jetzt bspw. bei den dir genannten Beispiel der Barrierefreiheit?

Grundlegende Hinweise dazu nennt selbst die HTML-4.01-Spezifikation: http://www.w3.org/TR/html4/struct/ob...alternate-text. Die Angabe sollte geeignet sein, das Bild zu ersetzen. In deinem Fall wäre dies insbesondere der in den Bildern enthaltene Text.

**LemonDrops** · 24. 12. 2011, 01:24

Du lieferst den falschen Doctype aus, das ist nämlich eindeutig kein valides xHtml, da du z.b. die Java Scripts falsch eingebunden hast. (Scripts sind cdata Bereiche.) Du lieferst das Dokument zwar sowieso falsch aus und zwar als "text/html", darum gibt es auch keine großartigen Probleme, trotzdem ist das großer Unsinn, auch wenn ihn viele so betreiben.

Entscheide dich, entweder html, oder xhtml, momentan hast du ein nicht wohlgeformtes xhtml-Dokument zueinem html-Dokument gelabelt, damit alles funktioniert. Du hast also weder Fisch noch Fleisch. Mein Tipp wäre es sich für html5 zu entscheiden.

Anonsten sollte z.b. dein Menü eine Liste sein und die Bilder entsprechende alt Attibute haben und die Seiten brauchen sinnvolle Title.

Über die optischen Qualitäten will ich nichts sagen, das musst du soweit selbst sehen und wissen.

**Kugelfisch23** · 24. 12. 2011, 01:45

Zitat von LemonDrops

Du lieferst den falschen Doctype aus, das ist nämlich eindeutig kein valides xHtml, da du z.b. die Java Scripts falsch eingebunden hast. (Scripts sind cdata Bereiche.) Du lieferst das Dokument zwar sowieso falsch aus und zwar als "text/html", darum gibt es auch keine großartigen Probleme, trotzdem ist das großer Unsinn, auch wenn ihn viele so betreiben.

Das ist so nicht korrekt. Zwar sind die Dokumente in der Tat kein wohlgeformtes XML, der Grund dafür ist jedoch ein fehlendes Whitespace-Zeichen nach der src-Attribut-Definition in

HTML-Code:

<img src="img/Bilder/kontakt_03.png"alt="" class="a" />

was in XML erforderlich wäre.

Dass in XHTML script-Elemente nicht mit CDATA-Inhaltsmodell definiert sind, da dieses Inhaltsmodell in XML nicht existiert, und daher deren Inhalte einem Parsing unterzogen werden und ebenfalls die Bedingungen für die Wohlgeformtheit erfüllen müssen ist in diesem Fall irrelevant, da sein Inline-JavaScript-Code gar keine in dieser Hinsicht kritischen Zeichen (<, &) enthält - siehe etwa http://schneegans.de/web/xhtml/#embedded. Im allgemeinen Fall ist dieser Hinweis natürlich gerechtfertigt.

Ein XHTML-Dokument, welches den Kompatibilitätsrichtlinien genügt, darf gemäss http://www.w3.org/TR/xhtml1/#media und http://www.w3.org/TR/xhtml-media-types/ als text/html ausgeliefert werden. Dies ist in vielen Fällen sogar sinnvoll, da ältere Browser, insbesondere ältere IE-Versionen, ein als application/xhtml+xml ausgeliefertes Dokument nicht verarbeiten können und Content Negotiation relativ problemanfällig ist.

**philofdeath** · 25. 12. 2011, 13:23

Es ist krass was man alles beachten muss.

Werde das auf jeden Fall ausbessern

danke für die Kritiken

**Munro24** · 27. 12. 2011, 00:19

Vielleicht solltest du deine Seite an verschiedenen Bildschirmen betrachten. Zumindest bei meinem hier kann ich den Text kaum lesen, weil er sich vom Hintergrund kaum abhebt. Mehr Kontrast oder gleich ein einfarbiger Hintergrund für den Text könnten helfen.

Ich persönlich bin auch kein Fan unnötiger Intro-Seiten. Wenn die Intro-Seite in deinem Konzept nicht unverzichtbar ist, dann lass sie lieber weg. Ein Klick weniger, der jeden deiner Besucher nur nervt und nichts bringt.

Und gerade da du noch am Anfang beim Webdesign stehst: Es ist nicht schlimm, ein paar Anläufe zu nehmen. Ich lösche auch hin und wieder meine komplette Arbeit und fange neu an. Ein paar Versuche später würde ich dann behaupten, das Ergebnis kann sich sehen lassen.

**Kugelfisch23** · 27. 12. 2011, 00:46

Das Hintergrundbild ist mir bisher mangels aktiviertem JavaScript komplett entgangen (ich stimme jedoch Munro24 zu, dass der Kontrast nicht optimal ist, auch wenn das Hintergrundbild angezeigt wird).

Ein 100% breites und/oder hohes Hintergrundbild liesse sich jedoch auch ohne JavaScript umsetzen - in modernen Browsern und im IE 9 wäre dies über die CSS-3-Eigenschaft background-size möglich, als Fallback für den IE <= 8 könntest du ja nach wie vor die JavaScript-Lösung nutzen. Siehe auch https://developer.mozilla.org/en/CSS/background-size.

Eine in allen verbreiteten Browsern ohne JavaScript funktionsfähige Lösung wäre in http://www.cssplay.co.uk/layouts/background.html gezeigt. Diese erfordert jedoch ein zusätzliches img-Element, eine Hintergrundgrafik für ein beliebiges Element reicht dazu nicht aus.

**tnf** · 27. 12. 2011, 03:53

Zitat von Munro24

Ich persönlich bin auch kein Fan unnötiger Intro-Seiten. Wenn die Intro-Seite in deinem Konzept nicht unverzichtbar ist, dann lass sie lieber weg. Ein Klick weniger, der jeden deiner Besucher nur nervt und nichts bringt.

Richtig...
Und was mich angeht. Ich stehe auch nicht so wahnsinnig drauf, wenn ich jedes Mal, nachdem ich einen Link angeklickt habe, extra wieder nach unten scrollen muss, um z.B. das Bild der Band komplett zu sehen. Das Logo oben drüber ist also entweder überflüssig oder auf Grund der Größe zu dominant.

**KingJamez** · 27. 12. 2011, 14:08

Ich gehe mal nur auf die Optik ein:

1. Eine Enterpage ist überflüssig wenn sie keinen Inhalt hat
2. Die Schrift ist sehr schwer lesbar,
3. Du hast schon auf der Startseite einen Scroll, ohne das etwas dargestellt wird.
4. unter "media" zeigst du bilder mit hover effekt allerdings wird beim hover das 2te bild erst geladen "sprite images" wären da sinnvoller
5. Kontrast, Kontraste, Kontraste
6. Es sollte vielleicht eine kleine vorstellung der Band geben
7. Es wirkt alles sehr lieblos und hingeklatscht, etwas mehr liebe zum detail wäre besser, schau dir mal andere Bandsites zur inspiration an.

**philofdeath** · 29. 12. 2011, 01:31

Wow danke, mit so einer Kritik kann man echt arbeiten.

Schrift wird auf jeden Fall noch geändert, jetzt wo es erwähnt wird, kann man sie wirklich schlecht lesen.

Die Enter-index Page wird so beibehalten, denn es ist nicht (nur) meine Entscheidung.

@Kugelfisch, ich habe das bg image erst per css eingebunden, nur hat sich das beim verkleinern des Fenters nicht mitskaliert, deshalb habe ich die backstretch js. genutzt.

**Kugelfisch23** · 29. 12. 2011, 10:24

Zitat von philofdeath

ich habe das bg image erst per css eingebunden, nur hat sich das beim verkleinern des Fenters nicht mitskaliert, deshalb habe ich die backstretch js. genutzt.

Das hatte ich durchaus vermutet - deshalb auch der Hinweis auf die background-size-Eigenschaft, welche dies ermöglicht, und eine alternative Lösung, welche dies ebenfalls ohne JavaScript-Voraussetzung leistet.

**Line7** · 30. 12. 2011, 20:20

Um noch ne Kleinigkeit zu nennen^^
Vielleicht könntest du noch bei dem <img>'s das Attribut "border" anhängen. Bei dem IE wird nämlich um jedes Bild einen 1px Rand angezeigt, zu lösen wäre dies einfach mit
... border="0" ...
LG

**Kugelfisch23** · 31. 12. 2011, 11:50

Sinnvoller wäre solch eine Angabe im Stylesheet, da dann einerseits ein einziger Definitionsblock für alle img-Elemente ausreichen würde und andererseits das border-Attribut gemäss http://www.w3.org/TR/html401/struct/....html#h-13.7.3 missbilligt ist. Zum Beispiel:

Code:

a img {
    border: 0;
}

Offenbar hat philofdeath dies bereits versucht, dabei allerdings einen falschen Selektor verwendet. Im Stylesheet findet sich die Definition

Code:

img a {
	border:0;}

welche jedoch auf kein Element zutrifft, da img-Elemente gar keine Unterelemente (insbesondere keine a-Elemente) enthalten dürfen.

**philofdeath** · 01. 01. 2012, 21:41

Also dann einfach nur

HTML-Code:

a {border: 0;}

?

**Kugelfisch23** · 01. 01. 2012, 21:44

Nein, denn nicht das a-Element selbst, sondern das img-Element erhält durch das User-Agent-Stylesheet einen border, wenn es einem a-Element untergeordnet ist. Passend wäre wie erwähnt die Regel

Code:

a img {
    border: 0;
}

um dies zu überschreiben. Beachte den Selektor: `a img` trifft auf alle einem a-Element untergeordneten img-Elemente zu, während dein Selektor `img a` auf a-Elemente zutreffen würde, welche einem img-Element untergeordnet sind (was in HTML 4.01/XHTML 1.0 nicht möglich ist).