Valide aber auch guter Code?

[Benny Dorner]

Hallo,
und zwar bräuchte ich fachlich fundierte Meinungen und wo bekomme ich bessere als im SelfHTML-Forum?!
Deshalb wäre ich sehr dankbar, wenn ihr mich kritisieren würdet.

Es handelt sich um eine Testseite, die ich "anständig" programmieren möchte. Dazu möchte ich nicht nur die Validiertheit zählen, sondern es soll sich auch sonst um einen vernünftigen Code handeln. Zudem offenbaren sich auf der Testseite schon erste Probleme.

Aber der Reihe nach:

• Es handelt sich um die Seite http://www.servusbenny.de/testweb/

Gut nun zu meinen konkreten Fragen:

• Die Navigation ist wahrscheinlich nicht optimal gelöst. Beim Hovern kommt die Hintergrundgrafik aus der css-Datei zum Vorschein, aber erstens zuckt der Link beim ersten Überfahren und zweitens zeigt der Opera beim ersten Überfahren gar nichts an. Welche Lösung könnte ich hier anstreben?

• Die ausgelagerte css-Datei wurde (ich gebs zu) ein wenig zusammengestückelt, da ich die Navigation nur teilweise selbst programmiert habe. Jetzt ist der css-Code bestimmt nicht "sehr schön". Gut er ist valide, aber da könnte ich bestimmt noch Bereinigungen vornehmen. Wäre nett, wenn hierbei Tipps von Profis kommen.

• Ich habe für mehrere IE-Versionen verschiedene css-Zusätze eingebaut, wobei ich beim IE 5.01 keine Links in meine Navigation bekomme. Sprich, die Seite wird normal angezeigt, aber beim Überfahren der Links in der Navigation passiert nichts und sie sind auch nicht anklickbar. Dies wäre für Benutzer des IE 5.01 natürlich fatal. Meine Frage hierzu ist, ob ich überhaupt hier Lösungen suchen sollte, weil wer hat noch den IE 5.01 und falls ja, ob vielleicht jemand Tipps für eine mögliche Lösung parat hat.

• Gerne bin ich auch offen für "insgesamte" Kritik zu der Testseite.

Gut, dass war ja schon mal eine ganze Menge. Wahrscheinlich sind es eh nur noch 10 Prozent die bis hier her gelesen haben. Denjenigen sei jedoch gesagt, dass ich über Hilfe sehr dankbar wäre und ich extra aus diesem Grund versucht habe meine Dateien (html und css) mit einer sehr übersichtlichen Codedarstellung zu versehen.

Auf jeden Fall schon mal vielen Dank für sämtliche Hilfe.
In diesem Sinne "gute Nacht".
Benny

[Gunnar Bittersmann]

@@Benny Dorner:

So gut wie alles in http://forum.de.selfhtml.org/archiv/2009/2/t183301/#m1214223 Gesagte trifft auch bei deiner Seite zu.

Live long and prosper,
Gunnar

[Benjamin]

@Gunnar:

So gut wie alles in http://forum.de.selfhtml.org/archiv/2009/2/t183301/#m1214223 Gesagte trifft auch bei deiner Seite zu.

Vielen Dank, ich konnte ein paar Sachen herausfiltern und an meiner Seite verbessern.

@Martin:

wo ist die erste Hälfte dieses Satzes? Die Floskel "und zwar" bezieht sich zweifelsfrei auf etwas Vorangegangenes, das hier leider fehlt.

Ok, kann man so stehen lassen. Als angehender Deutschlehrer sollte man sich solch eine Kritik auf jeden Fall zu Herzen nehmen.

Was mich viel mehr irritiert: Alle Links verweisen auf "#", also auf die aktuelle Seite. Du willst doch hoffentlich nicht eine Navigation aufbauen, die ausschließlich auf Javascript basiert? Das sind doch zunächst nur Platzhalter, oder?

Dies sind lediglich Platzhalter. Es handelt sich um eine Testseite. Die Links wollte ich erst dann einsetzen, wenn das Grundgerüst steht.

Außerdem frage ich mich bei einem Blick in den Quellcode, warum die Navigation nicht nur von einem, sondern sogar von zwei div-Elementen umschlossen ist. Meiner Ansicht nach wäre nicht einmal eines nötig; das ul-Element lässt sich doch in ausreichendem Maß stylen.

Hier werde ich auf jeden Fall ansetzen. Hier werde ich Verbesserungen versuchen. Danke für den Tipp.

Stimmt. Für IE 5.x würde ich an deiner Stelle keinen Aufwand für eine schöne oder ordentliche Darstellung treiben, aber zumindest muss die Seite benutzbar bleiben, ganz gleich mit welchem Browser. Das ist eine Minimalanforderung.

Hier wäre ich über sämtliche Tipps dankbar.

@Beat:

Mir fehlen Überschriften.

Richtig, die fehlen auch noch. Ich hab pro forma mal eine rein gesetzt.

Die Valide-Links sind überflüssig

Stimmt, da werde ich eine andere Lösung finden.

<p>&nbsp;</p>
What's that? Ein Baugerüst?

Ja, aber eher um das Seitenlayout besser darzustellen. Wie sich das Seitenende dann genau zum "footer" verhält, werde ich mal noch schauen.

class="imp"
In einem halben Jahr weiss ich nicht mehr, was die Klasse bezeichnet.

Stimmt, die werde ich aussagekräftiger gestalten.

Dein All Rights Reserved ist überflüssig da unlesbar.
Die Rechte sind anscheinend doch nicht so klar, dass du das ausgraust.

Stimmt, braucht eigentlich auch kein Mensch. Also wird entfernt.

Zum Design möchte ich nicht viel sagen. weisser Text auf schwarzem Hintergrund ist eine Augenlast. Aber ich weiss ja nicht, was du vorhast.

Ist Weiß auf Schwarz wirklich so schlimm? Also ich fands ganz cool, aber vielleicht überdenke ichs noch ...

@ alle Zurückschreiber:
Danke für die Tipps, die mir sehr weitergeholfen haben. Weiteren bin ich selbstverständlich nicht abgeneigt ...

Schöne Grüße
Benny

[Bademeister]

Hi Benny,
ich hab noch ein paar Bemerkungen. Aber vorneweg: ich find die Site recht gut.

1.: Die "Überschrift"
Warum ist das ganze Ding ein Bild? Es ist mir nicht ganz klar, was die Beschreibung neben dem Logo genau beschreiben soll, aber es wäre doch eventuell schöner, wenn sie es auch be"schreiben" und nicht be"malen" würde, oder?

Du legst Dein Titelbild über ein gleichartiges Hintergrundbild. Auf den ersten Blick fällt nichts auf, aber wenn man etwa den Viewport verbreitert, dann sieht das schon etwas merkwürdig aus.

Mein Vorschlag: Anstatt des leeren <div>-Elements eine Überschrift (h1), die über die gesamte Breite des Viewports geht, das rote Bildchen als Hintergrund und das Logo und den Beschreibungstext als Inhalt hat. (Wenn der Beschreibungstext keine Überschrift sein soll, dann entsprechend anpassen).

2.: Die Links in der Navigation
Beat beipflichtend, sehe ich hier an Effekten nichts, was nicht auch mit Textlinks und einer(!) Hintergrundgrafik, die für alle Links benutzt wird, gemacht werden kann. Das hat nicht nur den Vorteil, dass Du nicht für jeden Link ein individuelles Bild machen musst, sondern dass Du sie auch ohne individuelle IDs als Nachfahren der Hauptnavigation formatieren kannst.

3.: Der Link zum Impressum, eine Liste? Ein einzelner Link ist nicht notwendigerweise eine Liste, denke ich. Oder hat das einen speziellen Sinn in diesem Fall?
Außerdem sind hier, wie Martin schon erwähnte, völlig unnötige <div>-Elemente, ebenso wie bei der Hauptnavigation und auch im Footer.

4.: »» <div id="copy">&copy;2009 BENJAMIN DORNER</div>
&copy;? Du kodierst den Code in UTF-8. Nutze es doch auch, dafür ist es da.

Und zum Schluss noch ganz kleinkariert: Den Namen komplett in Großbuchstaben zu schreiben, ist im Deutschen falsch (d.h. etwa im Duden nur als Alternativschreibweise bei beschränktem Zeichensatz vorgesehen). Also wäre es doch eleganter, es im Code richtig zu schreiben und die Darstellung in Großbuchstaben, falls gewünscht, mit CSS zu bewirken.

So, jetzt aber ab ins Bett... ;-)

viele Grüße
der Bademeister

[Benjamin]

Vielen Dank für die hilfreichen Tipps. Eine ganze Menge, die aber alle sinnvolle Kritik darstellen, deshalb werde ich wohl den heutigen Samstag zum um"schreiben" nutzen :-)

Nochmals Danke.
Gruß Benny

[Der Martin]

Guten Abend!

und zwar bräuchte ich fachlich fundierte Meinungen und wo bekomme ich bessere als im SelfHTML-Forum?!

wo ist die erste Hälfte dieses Satzes? Die Floskel "und zwar" bezieht sich zweifelsfrei auf etwas Vorangegangenes, das hier leider fehlt.

• Die Navigation ist wahrscheinlich nicht optimal gelöst.
  Beim Hovern kommt die Hintergrundgrafik aus der css-Datei zum Vorschein, aber erstens zuckt der Link beim ersten Überfahren und zweitens zeigt der Opera beim ersten Überfahren gar nichts an.

Kann ich so nicht bestätigen. Ja, die Links zucken beim Hovern alle ein wenig, aber sie verändern nur ihre Höhe (dehnen sich ein paar Pixel nach unten aus), aber nicht ihre Breite. Das Hovern eines Links beeinflusst also nicht die Position der anderen. Gut.
Was mich viel mehr irritiert: Alle Links verweisen auf "#", also auf die aktuelle Seite. Du willst doch hoffentlich nicht eine Navigation aufbauen, die ausschließlich auf Javascript basiert? Das sind doch zunächst nur Platzhalter, oder?
Außerdem frage ich mich bei einem Blick in den Quellcode, warum die Navigation nicht nur von einem, sondern sogar von zwei div-Elementen umschlossen ist. Meiner Ansicht nach wäre nicht einmal eines nötig; das ul-Element lässt sich doch in ausreichendem Maß stylen.

• Ich habe für mehrere IE-Versionen verschiedene css-Zusätze eingebaut, wobei ich beim IE 5.01 keine Links in meine Navigation bekomme. Sprich, die Seite wird normal angezeigt, aber beim Überfahren der Links in der Navigation passiert nichts und sie sind auch nicht anklickbar. Dies wäre für Benutzer des IE 5.01 natürlich fatal.

Stimmt. Für IE 5.x würde ich an deiner Stelle keinen Aufwand für eine schöne oder ordentliche Darstellung treiben, aber zumindest muss die Seite benutzbar bleiben, ganz gleich mit welchem Browser. Das ist eine Minimalanforderung.

• Gerne bin ich auch offen für "insgesamte" Kritik zu der Testseite.

Naja, dominierende dunkle Farben (hier: schwarz) sind nicht so mein Ding, das ist aber wohl Geschmackssache.

In diesem Sinne "gute Nacht".

Danke, ebenso ...
 Martin

[Beat]

• Es handelt sich um die Seite http://www.servusbenny.de/testweb/

• Die Navigation ist wahrscheinlich nicht optimal gelöst. Beim Hovern kommt die Hintergrundgrafik aus der css-Datei zum Vorschein, aber erstens zuckt der Link beim ersten Überfahren und zweitens zeigt der Opera beim ersten Überfahren gar nichts an. Welche Lösung könnte ich hier anstreben?

Keine Ahnung. FF3 alles ok

Zur Navigation: Ich würde aus meiner Sicht folgendes ändern:
Schreibe textlinks, Wende Hintergrundgrafiken an. Organisiere die Hintergrundgrafiken als ein einziges Sprite. Wende eine Technik zur Bildersetzung an oder verwende Hintergrundgrafiken die sich nahtlos mit einer Textbelegung vertragen.
Mir wär es echt zu blöd für jeden Link, den ich ändern muss, das Bildprogramm zu starten.

• Die ausgelagerte css-Datei wurde (ich gebs zu) ein wenig zusammengestückelt, da ich die Navigation nur teilweise selbst programmiert habe. Jetzt ist der css-Code bestimmt nicht "sehr schön". Gut er ist valide, aber da könnte ich bestimmt noch Bereinigungen vornehmen. Wäre nett, wenn hierbei Tipps von Profis kommen.

CSS ist nicht das Problem, das CSS selbst keine Semantik etabliert, sondern allenfalls solche als Selektoren verwendet.

• Ich habe für mehrere IE-Versionen verschiedene css-Zusätze eingebaut, wobei ich beim IE 5.01

Vergiss den Browser. Den sperrt man am besten via htaccess.
Deine Erfuhrcht vor längt toten MSIE in Ehren, LYNX sollte dir mehr am Herzen liegen.

...

• Gerne bin ich auch offen für "insgesamte" Kritik zu der Testseite.

Mir fehlen Überschriften.
Schalte das CSS deines Browsers aus, und versuche dir einen Reim zu machen, um was es auf der Seite geht.

Die Valide-Links sind überflüssig

<p>&nbsp;</p>
What's that? Ein Baugerüst?

class="imp"
In einem halben Jahr weiss ich nicht mehr, was die Klasse bezeichnet.
Der Verschleiss an Klassennamen, nur wegen deiner Grafikbuttons wird dich noch einmal sehr erfinderisch machen.

Dein All Rights Reserved ist überflüssig da unlesbar.
Die Rechte sind anscheinend doch nicht so klar, dass du das ausgraust.

Zum Design möchte ich nicht viel sagen. weisser Text auf schwarzem Hintergrund ist eine Augenlast. Aber ich weiss ja nicht, was du vorhast.

mfg Beat

[Mike]

Kurzer Kommentar von mir:

Ich würde nicht bis zu IE 5 zurückgehen... Schlimm genug, dass man sich um den IE6 noch so viel kümmern muss.

Achja und, hier wirst du teilweise Kritik hören, die _in der Praxis_  irrelevant ist. Es reicht, wenn eine Seite valide ist und nicht total unlogisch. Das muss jeder selbst wissen, man muss Sachen nicht künstlich komplizierter machen.

[Gunnar Bittersmann]

@@Mike:

Es reicht, wenn eine Seite valide ist und nicht total unlogisch.

??

Es ist wichtiger, dass Quelltext vernünftig[tm] ist als dass es valide ist.

Live long and prosper,
Gunnar

[Bademeister]

Hi Mike,
ich bin jetzt gerade neugierig geworden.

Es reicht, wenn eine Seite valide ist ...

Es reicht wofuer?

und nicht total unlogisch.

Um welche Logik geht es Dir?

Danke, viele Gruesse
der Bademeister

[Beat]

Es reicht, wenn eine Seite valide ist ...
Es reicht wofuer?
und nicht total unlogisch.
Um welche Logik geht es Dir?

Um "total" wie in "Totalschaden". Da ist das Detail dann auch unerheblich.

mfg Beat