Bitte um Kritik

[Eddie]

Liebe Profis,

ich sitze gerade an einer Generalüberholung meiner Seite, und da ich gerade so tief im Code rum-murkse, wäre jetzt der richtige Zeitpunkt, um Kritik umzusetzen.

Drum wäre ich Euch dankbar, wenn Ihr mal einen Blick auf meine Reiseberichte-Seite werfen könntet:
http://www.umdiewelt.de (deutsch)
http://www.break-fresh-ground.com (englisch)

Irgendwelche Kritik? (Ideen sind auch jederzeit willkommen...)
Seid Ihr Einverstanden mit dem Code?
Oder ist alles ganz schrecklich?

Danke Euch, Martin

[Siechfred]

Guten Morgen, Eddie,

Liebe Profis,

Bin ich zwar nicht, gebe aber trotzdem meinen Senf dazu.

Irgendwelche Kritik? (Ideen sind auch jederzeit willkommen...)

Hmm, das Login links unten klebt etwas am linken Rand, das könntest du noch nachbessern. Das blaue Banner passt irgendwie nicht so recht zum Rest (rein farblich gesehen).

Seid Ihr Einverstanden mit dem Code?

Der Validator nicht so ganz: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.umdiewelt.de

Aber ansonsten nette Seite (macht zumindest Lust auf's Reisen).

mfg Siechfred

[stefan]

Hi Eddie,

Der Validator nicht so ganz: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.umdiewelt.de

Der Validator schimpft im wesentlichen über 2 Sachen:

1. In Hyperlinks "&" verwenden (musst Du maskieren, also "&" schreiben)

2. "<nobr>". Kannst Du mit CSS lösen (weiss aber momentan nicht so genau wie).

Wollt ich nur sagen (ansonsten schöne Seite, auch wenn die Schrift was grösser könnte).

schö
stefan

[molily]

Hallo,

"<nobr>". Kannst Du mit CSS lösen (weiss aber momentan nicht so genau wie).

white-space:nowrap
http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#white_space

M.

[Eddie]

Vielen Dank Euch allen fuer die Muehen, vor allem Dir, Mathias (molily).
Ich habe mir eine grosse, lange Liste gemacht mit Aenderungen und werde das jetzt anpacken.
Gebt mir ein paar Wochen, ich schaetze, dann melde ich mich nochmal :-)
Eddie

[annA]

Hi Martin,

den BodyCounter würde ich rausnehmen, der machte keine Lust auf
Reisen (mal davon abgesehen, was ich davon halte, mal eben eine
Zahl für die Toten hochzuzählen, Super Idee:(

Die Seite macht nicht gleich klar worum es eigenltich geht:
Reiseveranstalter?, Berichtesammler? da wäre villeicht eine kurze
Einführung, eine Art Vorwort toll. Auch der Aufbau der Naviagtion
ist nicht klar ersichtlich (warum stehen die Artikel in dieser
Reihenfolge etc). Ich hatte das Gefühl, die Navigation wäre nicht
mitgeladen.

Die Farbwahl finde ich super. Links das Bild und auch das oben
im Hintergrund ist wirklich sehr gut. Die Animation oben nervt!
Sowas schauen ich mir nur aus den Augenwinkeln an, da es meisst
Werbung ist, die micht nicht interessiert.

Viele Grüße
annA

[Christian]

Hallo!
Wie dir schon gesagt wurde, für das Prüfen des Quelltextes ist der Validator da.
Meine Ergänzungen: Für Leute, die nur ein 56-K-Modem oder vielleicht noch weniger haben, sind auf deiner Seite zu viele Bilder.

Außerdem, finde ich, nervt der horizontale Scrollbalken.
Und du könntest mit einer gut platzierten <H1> mal sagen, was eigentlich das Thema deiner Seite ist.

Sonst gefällt mir die Seite ganz gut, vom Design und so...

Christian

[emu]

Hallo!

http://www.umdiewelt.de
Ideen sind auch jederzeit willkommen...

Der Banner oben rechts nervt sehr und passt auch nicht zum blauen Hintergrund der oberen Leiste (den allerdings würde ich ohnehin entfernen, er passt nicht zu den anderen Farben der Seite, die ansonsten angenehm für das Auge ist - nur eine Spur dunkler (vielleicht sogar schwarz) könnte die Fließtextfarbe sein. Der  Bodycount muss nicht unbedingt sein und gerade bei deiner Seite fallen mir die Flaggen negativ auf. Entweder du schaffst es, die Farben etwas deiner Seite anzugleichen (also etwas blasser, ohne 3D-Effekt) oder du setzt Textlinks. Die Hintergrundgrafik auf der linken Seite sollte nach rechts etwas harmonischer in die Hintergrundfarbe übergehen. Der erste Teil eines Berichtes ist zwar fett, aber auch kleiner als der Fließtext - normale Größe wäre besser.

Die Wanderschuhe erinnern mich mehr an Alpen und Almen, deine Seite dürfte sich aber mit Reisen in die ganze Welt beschäftigen. Möglicherweise sind feste Wanderschuhe auch dort vorteilhaft, aber als Markenzeichen für die Seite ist es eher für Seiten mit mitteleuropäischem Schwerpunkt interessant. Und hier ist schon das nächste Problem - man weiß nicht so ganz, was man von deiner Seite halten soll. Auf den ersten Blick hat sie mich an einen kleinen Individualreisenveranstalter erinnert, erst nach mehreren Minuten habe ich entdeckt, dass es wohl so eine Art offene Sammlung von Reiseberichten ist. Das solltest du unbedingt kurz erklären (das muss nicht zwangsläufig in einem faden Vorwort enden.)

Den Validator kannst du ohnehin selbst befragen, ich möchte dich nur darauf hinweisen, dass du das Alt-Attribut fehlinterpretierst. Die »Neu«-Grafiken (deren Schatten nicht unbedingt notwendig ist) brauchen als Alternativtext »Neu«, die Grafiken am Rand dürfen gar keinen Alternativtext haben. Sie sollten dafür das im Title-Text haben, was jetzt im Alt-Text stehen. Auf den Berichtseiten wiederholst du ohnehin den Alternativtext unter dem Bild (was ich gut finde), du kannst also den Alt-Text leer lassen. Das Impressum ist ungenügend, da die E-Mail-Adresse nicht ständig verfügbar ist (ja, ich verstehe deine Angst vor Spam, aber eine Grafik ohne Alternativtext ist jedenfalls nicht universell und direkt zugänglich.) Deine Metaangaben sind sehr ausführlich, allerdings wäre die Zeit dafür vielleicht sinnvoller in ein paar <link>-Strukturen investiert und etwas mehr logische Auszeichnung - vor allem bei den Überschriften - wäre auch nicht verkehrt.

Anonsten ist es eine schöne Seite, die angenehm schlicht ist und nicht vom Inhalt ablenkt :-)

emu

[molily]

Hallo Martin,

ich sitze gerade an einer Generalüberholung meiner Seite, und da ich gerade so tief im Code rum-murkse, wäre jetzt der richtige Zeitpunkt, um Kritik umzusetzen.

Jetzt wäre natürlich interessant zu erfahren, welche Verbesserungen bereits planst beziehungsweise schon umgesetzt hast, also ob der aktuelle Zustand sowieso schon veraltet ist und du dir vieler Fehler bewusst bist oder die Generalüberholung schon nahezu abgeschlossen ist...

Ein paar Anmerkungen zur Technik, speziell dem Code, unabhängig davon, in welcher Phase du momentan bist:

Sofern ich mich nicht irre, ist das Element mit dem Himmelhintergrund überflüssig, da sich das Hintergrundbild auch anscheinend einfach für das body-Element vergeben lässt, natürlich mit entsprechend eingeschränkter Wiederholung.

Die Schrift von Reise-Schrift_de.gif könnte anti-aliased sein, sie wirkt pixelig. Diese Grafik sollte als Alternativtext etwas wie »um die welt - Reiseberichte« enthalten (als title vielleicht dasselbe), der Schuh sollte ein leeres alt-Attribut haben.

Der Schuh hat vor dem Wolkenhintergrund einen sichtbaren weißen Rand, das stört etwas. Vielleicht müsste man mit Halbtransparenz arbeiten, damit die ränder sowohl oben und unten weich in den Hintergrund übergehen.

Ich finde den Kontrast von Gelb-Orange der Seitenmitte und des blauen Hintergrundes im Seitenkopf anders als emu angenehm, ohne den wäre die Gestaltung zu eintönig.

Du wechselst anscheinend die Schriftfamilie mehrfach, wieso bleibst du nicht bei serifenloser Schrift? Momentan ist alles durcheinander, mal ist keine Schriftart angegeben, so wird die Standardschriftfamilie verwendet, welche meist Serif ist, mal gibst du Verdana bzw. letzten Endes sans-serif an.

Die Kästen auf der Startseite mit den Auflistungen der Reiseberichte könnten mehr Innenabstand vertragen, genauso Platz zwischen Überschrift und Text.

Die Grafik rechts oben sieht tatsächlich eher wie fremde Werbung aus, zumindest erwartet man dies auf den ersten Blick. Siehe emus Kommentare.

Ich rate dir, CSS noch effizienter zu nutzen. Momentan hast du die möglichen Vorteile von noch lange nicht ausgereizt. Du setzt an vielen Stellen wie ich denke überflüssige Tabellen ein und vor allem massig Inline-Styles, welche mit jedem Dokument neu geladen werden. Anstatt die Formatierungen in style-Attributen direkt im Markup unterzubringen, könntest du noch mehr IDs und Klassen verwenden und somit die Styles auslagern und den Code verkürzen und übersichtlicher gestalten. Ich nehme an, dass du Templates benutzt und deshalb bisher am liebsten alles an einer Stelle ändern wolltest.

Beispielsweise ließe sich die Übersichtstabelle auf der Startseite mit wenigen Elementen pro Eintrag lösen, das Markup könnte zum Beispiel folgendermaßen aussehen:

<div class="travelogueListElement0">

<img src="Reisebericht-Neu_0_de.gif" alt="Neu!" class="travelogueListNewbutton">

<a href="travelogue.php?l=de&m=p&t=46&c=3#259"><img src="photos/23/46/3/thumbs/259.jpg" alt="" title="zu diesem Bild im Reisebericht "Südostasien, nur wohin?"" class="travelogueListThumb"></a>

<h2>Südostasien, nur wohin?</h2>

<p>Nachdem offenbar vor wenigen Stunden die thailändische Botschaft in Kambodscha abgebrannt ist - offenbar nicht ohne Fremdeinwirkung - stehe ich nun vor dem Scherbenhaufen meiner hochtrabenden Kambodscha-Pläne. Sicher scheint im Augenblick nur die Landung in Bangkok - die Frage nach dem "Wohin" wird sich dann wohl dort lösen.</p>

<p class="travelogueListLabel"><a href="./travelogue.php?l=de&m=p&t=46&c=0">Katar</a> - <a href="./travelogue.php?l=de&m=p&t=46&c=1">Thailand</a> - <a href="./travelogue.php?l=de&m=p&t=46&c=5">Kambodscha</a> - <a href="./travelogue.php?l=de&m=p&t=46&c=11">Laos</a>    |    Februar / März 2003   |    Dauer: 6 Wochen</p>

</div>

Alle Formatierungen könnten komplett mit CSS gelöst werden, auch das Nebeneinander von Text und Bild. Die Klassen kann man wie gewohnt über Klassenselektor ansprechen und die Elemente ohne Klassen jeweils mit den Selektoren »travelogueListElement0 h2«, »travelogueListElement0 p« usw. Die Klassennamen habe ich an den verwendeten angelehnt, sie müssten natürlich andere Formatierungen erhalten.
Von den blauen Bindestrichen und dem white-space:nowrap abgesehen, sollte dieses Markup ausreichen, die komplexen verschachtelten Tabellenkonstruktionen sind unnötig, vielleicht höchstens für uralte Browser, aber ich glaube nicht, dass deine Seite in diesen überhaupt wie gewünscht angezeigt wird, da du CSS-Positionierung einsetzt.

Folgendes Markup für die Photos kann ebenfalls abgekürzt werden:

<table border="0" width="100%">
<tr>
<td align="center">
<a name="247">
<img src="./photos/23/46/0/247.jpg" alt="Na toll, ein Einkaufszentrum.">
</a>
</td>
</tr>
<tr>
<td align="center">
<p style="width:70%; margin-bottom:10px;">
<font class="photoDesription">
Na toll, ein Einkaufszentrum.
</font>
</p>
</td>
</tr>
</table>

Wozu ist die Tabelle nötig? Besser:

<div class="photo">
<a name="a247"><img src="./photos/23/46/0/247.jpg" alt=""></a>
<p>Na toll, ein Einkaufszentrum.</p>
</div>

Oder auch:

<p class="photo">
<a name="a247"><img src="./photos/23/46/0/247.jpg" alt=""></a><br>
Na toll, ein Einkaufszentrum.
</p>

Die Zentrierung sowie die Abstände ließen sich über CSS lösen.
Ich würde dir raten, die Ankernamen mit einem Buchstaben beginnen zu lassen, sodass du irgendwann einmal zu id-Attributen wechseln kannst.

Wieso ist für einen simplen Textabsatz eine Tabelle und ein font-Element nötig?

<table border="0" width="100%">
 <tr>
 <td><font class="chapterContentBlock">Leider ist es schon spät, so ist der <i>Souk</i>, der typisch arabische Markt, schon vorbei. Per Taxi verschlägt es mich in ein gigantisches Einkaufszentrum, in dessen Mitte sich tatsächlich eine Eislaufbahn befindet. Also diese Wüstenstaaten ...</font>
 </td>
</tr>
</table>

Dies sollte reichen:

<p>Leider ist es schon spät, so ist der <dfn>Souk</dfn>, der typisch arabische Markt, schon vorbei. Per Taxi verschlägt es mich in ein gigantisches Einkaufszentrum, in dessen Mitte sich tatsächlich eine Eislaufbahn befindet. Also diese Wüstenstaaten ...</p>

Noch ein Beispiel:

<p style="border:2px solid #DFD7BF; background-color:#FFE89F; margin-left:-190px; width:160px; margin-bottom:20px; bottom:20px;">
<table>
<tr>
<td>
<b></b><a href="./index.php?l=de&m=i">Impressum</a><b></b>
</td>
</tr>
<tr>
<td>
<b></b><a href="./index.php?l=de&m=d">Ausschlussklausel</a><b></b>
</td>
</tr>
</table>
</p>

... wird zu:

<p class="footer">
<a href="./index.php?l=de&m=i">Impressum</a><br>
<a href="./index.php?l=de&m=d">Ausschlussklausel</a>
</p>

Für die Box mit »© Martin Gädeke, 2003« brauchst du auch nicht viel HTML-Code.

<p align="right">
<font style="border:2px solid #DFD7BF; color:rgb(0,0,0); font-size:12px; background-color:#FFE89F;">  ©  <a href="mailto:[e-mail]" style="color:#000000;">Martin Gädeke</a>,  2003  
</font>
</p>

... wird zu:

<address>©  <a href="mailto:[e-mail]" rel="author made">Martin Gädeke</a>,  2003</address>

Alle Formatierungen lassen sich wie gesagt bequem mit CSS vornehmen, auch die Innenabstände.

Der Einsatz der font-Elemente ist meist überflüssig und sogar redundant, weil jeweils das darüberliegende Element bereits zur selben Klasse gehört:

<td class="boxTitle2">
<font class="boxTitle2">Navigation:</font>
</td>

p-Elemente in td-Tabellenzellen sind ebenfalls meist unnötig:

<td>
<p class="subChapterLink">
<a href="./travelogue.php?l=de&m=p&t=46&c=2">
Erste Schritte
</a>
</p>
</td>

Wenn überhaupt eine Tabelle nötig ist, dann reicht:

<td class="subChapterLink">
<a href="./travelogue.php?l=de&m=p&t=46&c=2">Erste Schritte</a>
</td>

Ansonsten kannst du für diese Navigationslisten ul-Elemente verwenden.

<ul class="subChapter">
<li>Erste Schritte</li>
<li>Gebot Nr.1</li>
<li>One Night in Bangkok ...</li>
</ul>

Und so weiter, die Darstellung lässt sich nahezu beliebig anpassen, siehe http://selfhtml.teamone.de/css/eigenschaften/listen.htm.

Du bringst oft table-Elemente in p-Elementen unter. Das ist in der Regel unnötig, weil du die Styles anstatt dem p-Element um die Tabelle herum auch direkt der Tabelle zuweisen kannst, natürlich am besten über eine ID oder Klasse.

Abgesehen davon gefällt mir die Seite. ;)

Grüße,
Mathias

[IE Nutzer (I'll be back)]

Scheiß auf deinen Code mein Junge, die Site sieht shit aus.
Da hilft dir dein perfekter "Code" auch nicht weiter.

Nur Lamer lungern hier rum, tzzz!!!
Am besten sollten die selfforumler mal einen Billig-Kurs
auf der VH ala "Homepage in 2 Tagen" belegen.

[molily]

Hallo,

Schlechter Trollversuch, ziemlich mau, da kenne ich besseres, auch von dir. Vielleicht solltest du einen VHS-Kurs à la »Kreativ Trollen in zwei Tagen« belegen.

Mathias

[IE Nutzer]

Ohhh,
da kennt jemand meine Leistungen in diesem Forum. Danke!
Cool, dann können wir ja zu zweit in die VHS gehen, dich lade ich dann beim Homepage-Kurs ab und ich geh ne Tür weiter zum Troll-Kurs