Hallo Dominique.
Original von ARESOL
Die Seite ist valides XHTML und ist mit validem CSS formatiert.
Wie es scheinst, erhebst Du also den Anspruch, etwas besseres Markup zu schreiben als der Rest des Web. Darauf werde ich zum Schluss eingehen. Zunächst einmal einige Eindrücke bezüglich des Gesamteindrucks und der Benutzbarkeit.
Browser wie immer: Mozilla 1.4 (heute mit JavaScript und mit Flash) mit einer recht undefinierbaren Fenstergröße von etwa einem Megapickel auf Linux (keine Wintendo-Standardschriften).
- Startseite: der einleitende Text ist knapp und sagt das wesentlichste aus. Das Eye wird zunächst von einem kleinen bunten Bild ge"catched". Sieht aus wie eine Softwareverpackung. Scheinbar bietest Du aber garkeine Software an. Das ist ein bisschen irreführend. Wieso ist das kein Bild von einem lachenden begrüßenden Dominique?
- Die Optik eines kleinen schmalen Kastens ist nicht gerade augenfreundlich, gerade auf großen Blindschirmen, aber wenn die Texte bei Dir so knapp bleiben, ist es OK. Die Aufteilung mit den Linien ist auch nicht gerade aufregend, aber gefällig. Die Navigation ist recht klar zu erkennen. Wenn Du aber den Anspruch erhebst, die Seite behindertengerecht zu gestalten, solltest Du Dich auch an die Konvention halten, Links zu unterstreichen. Derzeit unterscheiden sich die Links in der Navigation nur durch den Pfeil von dem Text.
- Im Impressum stellst Du die Icons "valid XHTML 1.0" und "valid CSS" sehr stolz ganz nach oben in das Zentrum der Aufmerksamkeit (warum Du vielleicht garnicht so stolz auf Deinen Code sein solltest, schreibe ich weiter unten). Das interessiert die Besucher aber eher marginal. Es würde besser beim Abschnitt über die Darstellungsfähigkeit auf "verbreitetsten Browsern" passen. Warum eigentlich nicht alle Web-Browser? Wenn Du doch so gutes HTML/CSS schreibst, spricht nichts dagegen, dass die Seite von Browsern, die HTML verstehen, genau entsprechend ihrer Möglichkeiten zugänglich und benutzbar dargestellt wird. Hast Du "wenig verbreitete" Browser gesehen, die bei Deiner Seite Crap veranstalten? Und: Webseiten "laufen" nicht, da Webseiten keine Programme sind. Webseiten werden dargestellt.
- Schizophren?
Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.
Wer seid Ihr?
- Die Texte bei "Aktuelles" sind mehr als knapp. Angesichts der genau wie Fließtext formatierten Links in der Navigation werden die Besucher versuchen, wild auf den Text zu klicken, um zu sehen, was Du noch so interessantes geschrieben hast. Auch ich habe geklickt und nichts gefunden. Entäuschend. Du darfst gerne mehr schreiben. Dadurch machst Du die Seite individuell und interessant.
- "Webdesign": Durch die von den Bildern verursachte verschiedene Zeilenhöhe ist es schwierig, die Texte links den Bildern/Texten rechts eindeutig zuzuordnen. Eine einfache Linie würde Abhilfe schaffen. Eine Stichprobe habe ich auch gemacht. Warum sind die (blau und unterstrichen formatierten) Links in http://www.intasol.de/design/pdf/Der%20W…n%20Website.pdf nicht anklickbar?
Der Fliegenschiss zwischen Text (zwei Doppelpunkte) mag ja vor drei Jahren mal in gewesen sein. Ich finde es mittlerweile nur noch albern. Und: warum "and more" statt "und mehr"?
- Wenn der interne Bereich sowieso nur Dir zugänglich ist, solltest Du den Link auch nicht auf die Seite stellen. Wenn der interne Bereich auch anderen zugänglich sein soll, dann schreibe zumindest, was man verpasst und wie man Zugang erlangt.
- Wieso sind die Bilder bei "anderes" nicht anklickbar? Man kann überhaupt nicht erkennen, dass man auf die Texte klicken muss, zumal Du sie in keiner Weise als Link deutlich gemacht hast.
Ansonsten ein interessanter, aber sehr knapper Einblick in das, was Herr Adam uns da mitteilen will. Das mit den Links solltest Du noch optimieren. Jetzt werde ich kurz technisch:
- Ich habe mich die ganze Zeit gefragt: "Wozu XHTML 1.0 Transitional? Warum nicht Strict?" -- nun weiß ich es. Ich habe in Deinen Quellcode geguckt und man fragt sich wirklich, wozu Du überhaupt CSS benötigst. Voll von presentational HTML. Ein Auszug:
- Farbangaben im Body-Element:
|
Quellcode
|
1
|
<body text="#000000" link="#000000" vlink="#000000" alink="#000000">
|
Wenn Du CSS einsetzt, dann bitte konsequent. Sowas gehört in ein externes Stylesheet. Stell Dir nur mal vor, Du willst mal eben die Farben ändern. Mit CSS änderst Du eine einzige Datei und lädst sie hoch. Fertig.
- FONT-Elemente ohne Ende! Die gesamte Seite ist voll von manuellen Größen- und Schriftart-Angaben. Wenigstens hast Du an eine gesunder Einbindung alternativer Schrift(familie)n gedacht.
|
|
Quellcode
|
1
|
<font size="1" face="Arial, Helvetica, sans-serif">main .. </font>
|
Und mit font-size 1 willst Du eine Seite geschrieben haben, die für die Benutzung durch Sehbehinderte explizit geeignet ist?
- Man könnte ja meinen, die schöne Navigation mit den Bildern sei eine Liste, wie sich das gehört. Weit gefehlt. Das ist eine Tabelle. Ein (!) einziger (!) Navigationspunkt verursacht diesen imposanten Wasserkopf an HTML:
|
|
Quellcode
|
1
2
3
4
5
6
|
<tr>
<td height="18"><font size="2" face="Arial, Helvetica, sans-serif">
<img src="icons/pfeil_rechts.gif" alt="+" width="14" height="10" /></font></td>
<td><font size="2" face="Arial, Helvetica, sans-serif">
<a href="sites/webdesign.htm">webdesign</a></font></td>
</tr>
|
Wozu braucht ein Bild eine Schriftendefinition? Wieso ist der korrekte alternative Text des Bildes nicht "->"?
- Und dann findet man um Quelltext auch noch solche Warzen:
|
|
Quellcode
|
1
2
3
4
5
6
|
<tr>
<td height="1"></td>
<td></td>
<td width="158"></td>
<td></td>
</tr>
|
Wsnds???
Also, mittlerweile reite ich ja ungern auf dem Quelltext herum, aber wenn Du schon explizit darauf hinweist, musst Du auch damit rechnen, dass jemand hineinguckt. Mit sauberem HTML hat das nichts zu tun. Stattdessen ist es vollgepackt mit unnötigen FONT-Elementen, sinnlosen Tabellen und nichtverständlichen Leerräumen. Wenn Du die gesamte Präsentation in ein externes Stylesheet auslagern würdest, um Dein HTML durch strukturierendes schlankes Markup ohne Angaben zur Optik zu ersetzen, wäre Dein HTML mindestens zwei Drittel kleiner. Es wäre WESENTLICH leichter pflegbar. Die zigtausend FONT-Elemente könntest Du etwa mit zwei (!) einfachen Deklaration im BODY-Selektor ersetzen:
|
|
Quellcode
|
1
2
3
4
|
body {
font: small Arial, Helvetica, sans-serif;
font-size: small; /* Crap, aber Domi will es so ;) */
}
|
Die Navigation ist eine Liste mit Bullets. Warum nicht auch im HTML? Wir haben doch extra ein so schönes Listentutorial geschrieben:
http://www.webstyleboard.de/wsb/thread.php?threadid=3085
Scheinbar ist Dir das Konzept der Trennung von Textauszeichnung und Präsentation, das ja erst HTML ausmacht, noch nicht geläufig. Daher empfehle ich Dir zur Verbesserung Deines HTML unbedingt die Lektüre von
www.memowe.de/webauthoring/markup/
Ich will ja auch garnicht länger drauf herumreiten, aber diese nette kleine Seite mit verbesserbaren Usability-Schwächen mit einem solchen Ur-HTML zu erzeugen, ist schade. Da kannst Du noch einiges dran machen. Ich jedenfalls hoffe, Dich nicht zu sehr auseinandergenommen zu haben und wünsche, dass Du beim Weiterarbeiten an der Seite viel Freude und noch mehr Aha-Effekte hast. Über Benachrichtigungen, wie es mit der Seite weitergeht in diesem Fred würde ich mich sehr freuen. Viel Erfolg!
Mirko
Zitat
Original von ARESOL
.
Freitag, 25. Mai 2012, 22:12
Zum Seitenanfang
