nicht angemeldet
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:webmaster@umdiewelt.de" style="color:#000000;">Martin Gädeke</a>, 2003
</font>
</p>
... wird zu:
<address>© <a href="mailto:webmaster@umdiewelt.de" 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