nicht angemeldet
Verehrte Freundinnen und Freunde der halbwegs korrekten Auszeichnung, liebes Publikum,
mal eine etwas andere Seitenvorstellungsbewertungsbitte:
Vor einigen Tagen hat die Weltstadt Elmshorn ihre renovierten Webseiten ins Netz stellen lassen, heute (nein, gestern) erschien dazu ein Artikel im örtlichen Blatt unter dem Titel "Kritik am Internet-Auftritt der Stadt". Ein FDP-Politiker und "EDV-Fachmann" (nur ein Zitat) habe "'einfach handwerklichen Pfusch' ausgemacht". So weit - so richtig. Die Aufmachung ist als Tabellenverhau realisiert, der Code hat eine Reihe Syntaxfehler; beides muss bummelig acht Jahre nach Verabschiedung von HTML 4 und CSS 2 nicht mehr sein, da liegt der Herr Bezirksvorsitzende schon richtig.
Der verantwortliche Programmierer weist die Kritik zurück, die Agentur habe sich am Browsermarkt orientiert. "Ein starres Einhalten der W3C-Regeln würde dazu führen, dass deutlich weniger als 20 Prozent der Nutzer die Seiten richtig dargestellt bekämen." Die übliche Optimierungsgeschichte.
In dem Artikel ist IMHO - mit Ausnahme der Feststellung besagten Pfusches - so ziemlich gar nichts richtig (aber das soll hier nicht Thema sein), die besagte Behauptung war lediglich der Höhepunkt, der sozusagen das Fass zum Überlaufen brachte. Prinzipiell ist mir sowas ja mittlerweile weitgehend wurscht, aber irgendwo ist Ende vom Deich. Ein Gegenbeweis musste her.
Gesagt, getan, aber bevor ich die beiden Seiten jetzt an die Zeitung schicke, würde ich sie gerne auch mal hier zur Diskussion stellen. Außerdem möchte ich um Screenshots jeglicher Browser / Systeme bitten (Adresse siehe oben), damit man sich einen brauchbareren Überblick verschaffen kann (n.b.: ich werde die Bilder möglicherweise zur Dokumentation auf meine Seiten kleben).
Zum Vergleich stehen die folgenden zwei / vier Seiten:
Startseite:
http://www.stadt-elmshorn.de/
http://soenke.tesch.name/elmshorn/start.html
Kinder- und Jugend / Jugendhäuser:
http://www.stadt-elmshorn.de/ShowContent.aspx?NA=SN&HLID=7&ULID=73
http://soenke.tesch.name/elmshorn/jugendhaeuser.html
Es geht wie bereits angedeutet bei der Angelegenheit nur um die Technik; Farbwahl, Menüaufbau und andere Kosmetik sind vorgegeben. Für die Bildqualität hier und da kann ich nix, die Verweise funktionieren bewusst nicht.
Ich bin soweit recht zufrieden mit dem Ergebnis aus dreieinhalb Stunden Bastelei. Der Code hält sich an HTML 4 strict, sieht deutlich aufgeräumter aus und hat statt 18,6 kByte nur noch 4,4 (start.html). Spezielle IE-Hacks werden nicht eingesetzt, aber ein, zwei Klimmzüge waren nötig.
Etwas unschön ist das Gewühl, das die roten Punkte im Menü links blinken lässt. Das wäre kürzer auch mit CSS möglich gewesen, aber der IE 6 beherrscht :hover anscheinend nicht vollständig.
Verbesserungswürdig auch das in Teilen festzementierte Layout, namentlich die Breite vom Menü links und dem Inhalt rechts. Für alte Monitore, geschweige denn Telefone, sind 800 Pixel Breite sicher nicht die beste Wahl.
Nichtsdestotrotz am wichtigsten: Der optische Eindruck ist in Firefox und IE fast identisch zu den Originalen. Auch noch die letzten paar Pixel zu schieben hatte ich keine Lust mehr, aber der angestrebte Gegenbeweis dürfte trotzdem so ziemlich erbracht sein, zumindest für meine beiden Browser.
Nicht-CSS-fähige Browser habe ich von der Optik mittels @import bewusst ausgeschlossen. Das ist insofern kein Problem, als dass die Seiten vollständig nutzbar bleiben (auch mal mit Lynx vergleichen) und der Anteil derjenigen, die auf Klicki-Bunti verzichten müssen, eher zwischen 0% und 1% liegen dürfte.
Einen Fehler konnte ich noch nicht beseitigen: Der IE zeigt die <h2>- und <h3>-Titel ein bzw. zwei Pixel nach rechts versetzt an. Auf der Jugendhäuser-Seite ist zudem der nachfolgende Text nach rechts versetzt.
Die Ursache liegt irgendwo im linken Menü. Erstens hört der Textversatz am Ende des Menüs auf, zweitens verschwindet er, wenn man die Menübreite drastisch reduziert (~50%). IMHO ist das kein Beinbruch, aber hat jemand eine Ahnung, woran genau das liegt?
Bin gespannt auf Eure Kommentare!
Danke,
soenk.e