heiko-rech.de , bitte einen Blick drauf werfen [EDITOR]

[heiko74]

Hallo,

ich überarbeite die Seite http://heiko-rech.de

Die erste Version der neu gestalteten Seite habe ich mal unter
Heiko-rech.de - Startseite
online gestellt.

Viele Feinarbeiten sind noch zu machen. Ich wollte von euch aber mal die ersten Meinungen hören. Vor allem, was die Bedienbarkeit angeht.

Was ich auf jeden Fall noch machen werde:

Die letzen Auszeichnungen mit <b> und <strong> etc. werden noch ersetzt durch <em>

Die Einbindung der Videos auf Heiko-rech.de Eine Ziehklinge schärfen werde ich noch neu machen.

Das "Thema der Woche" ist noch nicht fertig

Feinheiten im Textfluss muss ich noch einige machen.

Es wird weinige Beiträge auch als PDF geben

Die Anzeige der "neuen Beiträge" Auf der Startseite ist noch nicht richtig mit CSS formatiert.

Der Text "heiko-rech.de" ist im Header noch als <h1> asugezeichnet, das werde ich noch ändern. Wird vermutlich einfach nur <em> oder <span>

An einigen Stellen ist die Struktur der Überschriften noch nicht optimal.

Was fällte euch sonst noch auf Anhieb auf?

Gruß

Heiko

 

[Efchen]

ich überarbeite die Seite http://heiko-rech.de

Du wirst überarbeiten? Das erklärt, warum da noch Tabellenlayout drin ist.

Viele Feinarbeiten sind noch zu machen.

Auch das grobe. Tabellenlayout, <br>, <h2> ohne ein <h1>, und generell die fehlende Semantik.

Die letzen Auszeichnungen mit <b> und <strong> etc. werden noch ersetzt durch <em>

Macht das Sinn? <b> wird in der Tat meistens dafür verwendet, etwas wichtiges auszuzeichnen. Dass <b> falsch ist, weil es keine logische, sonder nur eine physische Bedeutung hat, scheinst Du zu wissen. Aber <strong> ist doch ein semantisch sinnvolles Tag. Es zeichnet besonders wichtigen Text aus, im Gegensatz zu <em>, das nur wichtigen Text auszeichnet. Beachte das.

Der Text "heiko-rech.de" ist im Header noch als <h1> asugezeichnet, das werde ich noch ändern. Wird vermutlich einfach nur <em> oder <span>

Das ist er leider nicht, dann wäre es nämlich richtig. Du verwendest das ja als Überschrift. Warum willst Du es also als "wichtig" oder als "nichts" auszeichnen?

 

[heiko74]

Hallo,

Du wirst überarbeiten? Das erklärt, warum da noch Tabellenlayout drin ist.

Auch das grobe. Tabellenlayout, <br>, <h2> ohne ein <h1>, und generell die fehlende Semantik.

bitte NICHT die Seiten unter http://heiko-rech.de bewerten!

Schaut euch bitte Heiko-rech.de - Startseite an, das ist die neue, Version

Aber <strong> ist doch ein semantisch sinnvolles Tag. Es zeichnet besonders wichtigen Text aus, im Gegensatz zu <em>, das nur wichtigen Text auszeichnet. Beachte das.

Ja, das ist mir klar. Aber derzeit nutze ich auch <strong> an einigen Stellen nur zur optischen Hervorhebung. Das ändere ich noch.

Das ist er leider nicht, dann wäre es nämlich richtig. Du verwendest das ja als Überschrift. Warum willst Du es also als "wichtig" oder als "nichts" auszeichnen?

Ich sehe diesen Text nicht als so wichtig an, dass er ein h1 verdient.

Gruß

Heiko

 

[Loon3y]

Hallo Heiko.

zu Beginn ersteinmal die "Fehler"

<img src="http://test.heiko-rech.de/css/trans2.gif" alt="blindgrafik">

-> ganz schlecht....vor allem der alt-text.

</div>	<br>

-> Abstände macht man mit CSS.

-> Es kommt mehrere <h3> nach einem <h1>, wo ist das <h2> geblieben?

-> du hast bei jedem link in der Navigation " class="aktiv" " stehen. Ergibt das Sinn?

-> Allgemein die id- und class-Bezeichnungen sind nicht sehr sinnvoll gewählt.

-> Beim vergrößern der Schrift verschwindet der mittlere Teil nach unten.

-> Design ist irgendwie komisch...was stellt der Header dar? Irgendwie sieht alles so weit auseinandergezogen aus..und die Schrift ist meines erachtens auch zu klein.

Ansonsten ist es schoneinmal ein kleiner Fortschritt zum Vergleich zum Tabellenlayout, aber du solltest dich auf keinem Fall ausruhen oder denken du wärst fertig. Denn das bist du noch nicht.

Ich erspare es mir über Dinge wie Semantik, Was ist HTML?, Barrierefreiheit & Co. zu reden. Ich hoffe das dies aus den paar aufgezählten Fehlern (habe das ganze nur überflogen) herauszulesen ist.


Gruß
Loon3y


EDIT:
x = array(1,2,3,4,5,6);

Ich sehe diesen Text nicht als so wichtig an, dass er ein h1 verdient.

Wichtigen Text zeichnet man mit <strong> oder <em> aus. Überschriften zeichnet man mti <hx> aus

 

[heiko74]

Hallo,

zu Beginn ersteinmal die "Fehler"

<img src="http://test.heiko-rech.de/css/trans2.gif" alt="blindgrafik">

-> ganz schlecht....vor allem der alt-text.

</div>    <br>

-> Abstände macht man mit CSS.

Ja, mit dem Header habe ich noch einige Probleme. Ich arbeite daran.

-> Es kommt mehrere <h3> nach einem <h1>, wo ist das <h2> geblieben?

Das meinte ich mit:

An einigen Stellen ist die Struktur der Überschriften noch nicht optimal.

-> du hast bei jedem link in der Navigation " class="aktiv" " stehen. Ergibt das Sinn?

Ja, die Navigation wird durch ein PHP Script erzeugt. Das Script bestimmt das Aussehen der Navigation und setzt entsprechend die CSS Klassen.

-> Allgemein die id- und class-Bezeichnungen sind nicht sehr sinnvoll gewählt.

Haben diese Bezeichnungen, außer dass ich mich damit zurechtfinden muss sonst noch eine tiefergehende Bedeutung, so dass eine als allgemein sinnvoll gewählte Bezeichnung wichtig wäre?

-> Beim vergrößern der Schrift verschwindet der mittlere Teil nach unten.

Ich werde mich mal näher mit Overflow beschäftigen, dann käme in diesem Fall ein Scrollbalken, wäre das besser?

-> Design ist irgendwie komisch..

Wie meinst du das genau?

.was stellt der Header dar?

Einen Hobel und eine Oberfräse in Holzspäenen. Die Zielgruppe kann damit was anfangen.

Irgendwie sieht alles so weit auseinandergezogen aus..und die Schrift ist meines erachtens auch zu klein.

Schriftgröße ist 0.9em

Ansonsten ist es schoneinmal ein kleiner Fortschritt zum Vergleich zum Tabellenlayout, aber du solltest dich auf keinem Fall ausruhen oder denken du wärst fertig. Denn das bist du noch nicht.

Würde ich hier nachfragen, wenn ich der Meinung wäre meine Seite sei perfekt?

Wichtigen Text zeichnet man mit <strong> oder <em> aus. Überschriften zeichnet man mti <hx> aus

Meiner Auffassung nach ist auch eine Überschrift wichtig. Vielleicht habe ich da aber auch einen Denkfehler.

Ich habe mir jetzt überlegt, dass ich den Text "heiko-rech.de" im Header durch den Titel der aufgerufenen Seite ersetzen werde. Dann würde dort auch ein h1 Sinn machen. Die Artikelüberschriften wären h2 usw. Somit wären die Überschriften Sinnvoll ausgezeichnet.

Gruß

Heiko

 

[Efchen]

bitte NICHT die Seiten unter http://heiko-rech.de bewerten!

Das ist falsch angekommen, weil das auch verlinkt war.

Ja, das ist mir klar. Aber derzeit nutze ich auch <strong> an einigen Stellen nur zur optischen Hervorhebung. Das ändere ich noch.

Ja, das solltest Du :-)

Ich sehe diesen Text nicht als so wichtig an, dass er ein h1 verdient.

Was soll er dann bedeuten? Rein vom optischen empfinde ich das als Überschrift. Wäre er nicht wichtig, könntest Du ihn ja auch entfernen. Außerdem hast Du ihn in der neuen Seite auch als <h1>, obwohl der Text da noch unauffälliger ist - soviel zur Wichtigkeit.

Dann mal zur anderen Site:
- Loon3y hat ja schon auf den wahnsinnig tollen Alternativtext hingewiesen. Der hilft ungemein, wenn man ohne Images unterwegs ist. ;-(
- Blindgrafiken sind Nonsense. Füge einfach einen Abstand mittels CSS ein. Grafiken, die keinen Content enthalten, über <img> einzubinden, ist außerdem falsch. Kein Content, kein HTML-Tag. Das gehört dann in ein background-image. Damit fliegt dann auch div#header raus.
- Zum Header: Es ist zwar schön, dass Designelemente keinen Platz verschwenden, aber ich habs auch nicht richtig erkannt, es für Müll gehalten. Naja ist es ja auch, Späne, oder?
- Wähle Klassen- und ID-Bezeichnungen semantisch - wie alles andere auch im HTML-Code. "rightbox" ist dumm, wenn Du das mal auf die linke Seite stellen willst. "Sidebar" oder "Sidebar2" ist semantisch sinnvoller und schafft keine Probleme, wenn Du das Layout änderst.
- div#inhalt würde ich nicht floaten. Außerdem das width rausnehmen und lieber ein margin-left und -right in der Breite der Sidebars.
- Die Ordnung der Überschriften stimmt schon, Loon3y hat das <h2> nur übersehen ;-)

Fazit: Schon ganz gut. Sind eher noch Kleinigkeiten. Auch am optischen würde ich noch bisschen was ändern, mir gefällt das auch nicht, dass die Sidebars, also diese Boxen, direkt an den Rand des Viewport geklatscht sind.

 

[heiko74]

Was soll er dann bedeuten? Rein vom optischen empfinde ich das als Überschrift. Wäre er nicht wichtig, könntest Du ihn ja auch entfernen. Außerdem hast Du ihn in der neuen Seite auch als <h1>, obwohl der Text da noch unauffälliger ist - soviel zur Wichtigkeit.

Ich denke ich überarbeite den Header nochmal komplet. Die Hintergrundgrafik lasse ich aber wie sie ist, wie ich schon schrieb, die Zielgruppe erkennt den Hobel, das Winkelmaß und die Oberfräse schon. Statt "heiko-rech.de" werde ich die eigentliche Seitenüberschrift, welche jetzt im Title Tag steht nochmals dort aufführen. Es macht ja auch nicht so viel Sinn, nochmal die Internetadresse auf die Seite zu bringen, die steht ja schon in der Adresszeile des Browsers. Und dann ist es eine Überschrift und bleibt auc als h1 drin.

- Loon3y hat ja schon auf den wahnsinnig tollen Alternativtext hingewiesen. Der hilft ungemein, wenn man ohne Images unterwegs ist. ;-(
- Blindgrafiken sind Nonsense. Füge einfach einen Abstand mittels CSS ein. Grafiken, die keinen Content enthalten, über <img> einzubinden, ist außerdem falsch. Kein Content, kein HTML-Tag. Das gehört dann in ein background-image. Damit fliegt dann auch div#header raus.

Wie oben schon geschrieben, der Header überzeugt mich auch noch nicht wirklich. Werde ich in den kommenden Tagen mal noch dran gehen..

- Zum Header: Es ist zwar schön, dass Designelemente keinen Platz verschwenden, aber ich habs auch nicht richtig erkannt, es für Müll gehalten. Naja ist es ja auch, Späne, oder?

Na alos bitte! Das sind handgehobelte Späne, mit einem extrem scharfen, von Hand aufgearbeiteten Hobel in mühevoller Arbeit hergestellte Späne edlen Holzes. Aber doch kein Müll!:mrgreen:

- Wähle Klassen- und ID-Bezeichnungen semantisch - wie alles andere auch im HTML-Code. "rightbox" ist dumm, wenn Du das mal auf die linke Seite stellen willst. "Sidebar" oder "Sidebar2" ist semantisch sinnvoller und schafft keine Probleme, wenn Du das Layout änderst.

Kann ich machen, ist ja kaum Arbeit (muss nur endlich mal rausfinden, wie bei Aptana das Ersetzen über mehrere Dateien funktioniert)

- div#inhalt würde ich nicht floaten. Außerdem das width rausnehmen und lieber ein margin-left und -right in der Breite der Sidebars.

Muss ich mich mal näher damit beschäftigen, mit dem dreispaltigen Layout hatte ich einen ziemlichen Kampf.

- Die Ordnung der Überschriften stimmt schon, Loon3y hat das <h2> nur übersehen ;-)

Hier und da stimmt sie nicht. Aber das ist das kleinste Problem.

Fazit: Schon ganz gut. Sind eher noch Kleinigkeiten. Auch am optischen würde ich noch bisschen was ändern, mir gefällt das auch nicht, dass die Sidebars, also diese Boxen, direkt an den Rand des Viewport geklatscht sind.

Naja, wenigstens zerreißt ihr mich nicht gleich in der Luft. Man merkt halt schon, wenn man sich lange nicht wirklich mit HTML und CSS beschäftigt hat. Man verlernt vieles. Ich bin überzeugt, ich konnte das alles mal besser.:mrgreen:

So und nun muss ich mal sehen, wieviel Zeit ich in den nächten Tagen finde um an der Seite zu arbeiten.

Gruß

Heiko

 

[heiko74]

Hallo,

ich muss nochmal nachhaken:

- div#inhalt würde ich nicht floaten. Außerdem das width rausnehmen und lieber ein margin-left und -right in der Breite der Sidebars.

So, habs mal probiert, aber ich stehe jetzt vor einem Problem:
Die Bilder floaten immer nach rechts. Zu sehen ist das hier:

http://test.heiko-rech.de/werkstatt/werkstatt.php?seite=1

Ich habe auch schon die Struktur von Efchen ausprobiert, welche sie mir hier vorgeschlagen hat:
http://www.html.de/html-und-xhtml/30051-bild-neben-text-mehrere-untereinander.html#post226517

Klappt aber nicht. Im Moment stehe ich total auf dem Schlauch. Auch andere DIV Schachtelungen habe ich schon massenweise ausprobiert, aber ohne Erfolg.

Habt Ihr Tipps für mich?

Gruß

Heiko

 

[elektrowolf]

Wenn ich das richtig sehe, brauchst du ein leeres div mit clear:both (bzw. left oder right, wenn du nur ein float clearen willst). Damit hebst du alle floats auf, und fängst sozusagen von vorne an. Man sollte nach jedem float clearen! Sonst kann es z.B. Probleme mit Hintergrundbildern geben.

 

[heiko74]

Hallo,

Wenn ich das richtig sehe, brauchst du ein leeres div mit clear:both (bzw. left oder right, wenn du nur ein float clearen willst). Damit hebst du alle floats auf, und fängst sozusagen von vorne an. Man sollte nach jedem float clearen! Sonst kann es z.B. Probleme mit Hintergrundbildern geben.

Habe ich natürlich schon versucht. Mit dem Ergebnis, dass der mittlere Teil zum unteren Teil wurde, also immer unterhalb der Navigation gerutscht ist.

Gruß

Heiko

 

[Efchen]

Ist das noch aktuell? Ich seh da keine rechts floatenden Bilder.

Aer an die alt-Attribute musst Du nochmal. Zum einen gehen da drin keine HTML-Tags, zum anderen schalte mal Grafiken ab und guck sie Dir an. Der Effekt ist nun, dass der selbe Text zweimal da steht, z.B. "Die Werkbank". In diesem Falle würde ich sogar dazu übergehen, alt="" zu schreiben. Hier macht das Sinn, finde ich.

 

[Körnerbrötchen]

Da elektrowolf und das efchen ja schon von der technischen Seite das ganze aufrollen, gehe ich mal ein wenig mehr auf das Design ein.

Ich habe mir mal ein Buch über HTML in unserer Stadtbibliothek ausgeliehen (zugegeben: Wir sind eher eine kleine Stadt). Das Buch war auf jeden Fall schon etwas älter und ich dachte mir nur, dass es dadurch ja nicht schlechter wird. Die Seiten, die man mit diesem Buch baute, sahen in etwa genauso aus, wie deine. ;) Nichts mit Web 2.0. Hier fehlt eindeutig der Pepp. Wo sind Schatten? Verläufe? 3D-Effekte?
Klar, es geht auch ohne 3D. Aber wo sind dann die peppigen Farben, wie zum Beispiel bei Willkommen - gimpusers.de oder aboutpixel.de - kostenlose lizenzfreie Bilder für alle! ?

Viele Grüße sendet,
das Körnerbrötchen

 

[heiko74]

Hallo,

Ist das noch aktuell? Ich seh da keine rechts floatenden Bilder.

Ich hab einiges geändert, es sollte jetzt um einiges besser sein. Auch die Überschriftenstruktur ist nun überarbeitet, die Klassennamen auch.

diesem Falle würde ich sogar dazu übergehen, alt="" zu schreiben. Hier macht das Sinn, finde ich.

Habe ich mir auch schon überlegt. Da der Quelltext per Script generiert wird, wäre das auch schnell umgesetzt. Durch das Script kommen übrigens auch die HTML Tags (du meinst sicher das <br>). Das ist mir ehrlich gesagt bisher nicht aufgefallen. Aber klar, die haben da nichts zu suchen.

Nichts mit Web 2.0. Hier fehlt eindeutig der Pepp. Wo sind Schatten? Verläufe? 3D-Effekte?
Klar, es geht auch ohne 3D. Aber wo sind dann die peppigen Farben, wie zum Beispiel bei Willkommen - gimpusers.de oder aboutpixel.de - kostenlose lizenzfreie Bilder für alle! ?

Machen die Schatten, Verläufe und 3D Effekte den Inhalt besser? Wohl kaum. Ich betriebe die Seite Ihres Inhalts wegen. Die Besucher kommen auch wegen der Inhalte. Außerdem muss ich mir leider auch eingestehen, dass ich kein begnadeter Designer bin. Also bleibt das Design ein wenig im Hintergrund. Auch wenn es auf den einen oder anderen eher langweilig und altbacken wirkt. Esgeht schon viel Zeit drauf, die Inhalte zu erstellen. Die Zeit mich auch noch mit einem aufwändigen Layout zu befassen habe ich einfach nicht.

Gruß

Heiko

 

[Akronym]

Machen die Schatten, Verläufe und 3D Effekte den Inhalt besser? Wohl kaum. Ich betriebe die Seite Ihres Inhalts wegen. Die Besucher kommen auch wegen der Inhalte. Außerdem muss ich mir leider auch eingestehen, dass ich kein begnadeter Designer bin. Also bleibt das Design ein wenig im Hintergrund. Auch wenn es auf den einen oder anderen eher langweilig und altbacken wirkt. Esgeht schon viel Zeit drauf, die Inhalte zu erstellen. Die Zeit mich auch noch mit einem aufwändigen Layout zu befassen habe ich einfach nicht.

dann dürfen wir auch den Inhalt bewerten?

 

[heiko74]

Hallo,

dann dürfen wir auch den Inhalt bewerten?

Wenn du möchtest...

Die Seite ist jetzt unter der regulären Adresse: Heiko-rech.de - Startseite zu finden. Habe heute umgeschaltet.

Gruß

Heiko