trilodge computin blog

Disclaimer:
Wir haben vor kurzem selbst angemerkt, dass das gegenseitige Zerfleischen von Webprojekten nix bringt. Da gerät ein (Re-)Launch schnell zum Spießrutenlauf anstatt das man konstruktiv kritisiert und damit Verbesserungen fordert und fördert.

Was ist passiert
Allerdings hat heute eine größere deutsche Agentur eine neue Version ihrer Seite an den Start gebracht. Von Webagenturen – grade in diesem Bereich – erwartet man doch eine passable bis gute Leistung. Immerhin dient die eigene Seite ja als Showcase. Optisch noch ansprechend, packt einen beim Blick in den Quellcode das nackte Grauen. Man kann es kaum in Worte fassen, deswegen lassen wir euch einen kurzem Moment mit Auszügen aus dem Quellcode allein. Zartbesaitete “Web Craftsmen” oder gar Webkrauts sollten nur kurz drauf schauen oder ganz darauf verzichten, es ist wirklich alles andere als schön.

Noch harmlos

<meta name="date" content="10-04-2003" />
<script src="http://www.domainistunsbekannt.de/js/mootools.js" type="text/javascript"></script>
<script src="http://www.domainistunsbekannt.de/js/demo.js" type="text/javascript"></script>
<script src="http://www.domainistunsbekannt.de/js/jquery-1.2.6.min.js" type="text/javascript"></script>

Hier bitte nur kurz drauf schauen

<div style="position: absolute;left:240px;top:270px;z-index:5;color:#8b8989;font-size:11px;font-family: arial;width:700px;"> "you keep me trying to better myself. thank you for the inspiring creative works" <em>name ist uns bekannt</em>

<div class="help">
<a href="javascript:MM_openBrWindow( 'http://www.domainistunsbekannt/pages/help.php','help','width=300,height=690,scrollbars=yes')">
<img src="http://www.domainistunsbekannt.de/help_02.jpg" border="0" alt="" /></a>
</div>

<div class="help"><a href="javascript:MM_openBrWindow( 'http://www.domainistunsbekannt.de/v2/pages/help.php','help','width=300,height=690,scrollbars=yes')">
<img src="http://www.domainistunsbekannt.de/help_02.jpg" border="0" alt="" /></a></div> <div id="menu">
<table style="width: 980px; margin-top: 10px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 220px;" valign="top"> <div id="blogSliderWrap" style="margin-left:-25px;margin-top:11px;">
<div id="blogSlider">
<div class="innerWrap"> <div class="panelContainer">
<div class="panel" title="PSDTUTS">
<div class="wrapper" style="margin-left: 20px;margin-top: 10px;">
<ul id="psd-list"> <li> <div style="width: 160px; color: #8b8989; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
<div style="margin-top:20px;"><strong>
<span style="text-transform: lowercase;">Wednesday, 09/24/08 ...

Wie schon die Auszüge aus dem Quellcode vermuten lassen, zieht sich leider wie ein roter Faden durch die komplette Seite.

Zeit für Verbesserungen

Eigentlich möchte man meinen: alles löschen und noch mal von vorn, und diesmal mit ein wenig mehr Grundwissen in moderner Webprogrammierung. Aber das geht nun im Nachgang sicherlich eh nicht mehr.

Von daher sind kleine Verbesserungen sicherlich schnell und unkompliziert umsetzbar. Entfernt man die gesammelten inline-Stylesheets und packt sie dort hin wo sie hingehören – in eine sauber strukturierte CSS-Datei, vielleicht sogar mit CSS-Doc kommentiert. Selbiges gilt für die inline-Javascripte die auch in eigene Dateien ausgelagert werden können.

Auch wenn dabei die sowieso fehlende Semantik der Seite nicht besser wird und auch sonst sich nicht viel ändert, aber ein Anfang wäre es alle mal. Von den sehr weit verbreiteten Krankheiten DIVitis und CLASSitis hat auch diese Webseite die volle Breitseite bekommen. Dabei stellt sich dann auch die Frage warum der komplette Inhalt der Seite dann doch wieder ein einer Layouttabelle versteckt wird. Das hätte man dann auch noch 2-3 DIVs mehr packen können.

Das persönliche Highlight findet sich in einem ins Layout integrierten wechselnden Zitat wieder:

<div style="position: absolute;left:240px;top:270px;z-index:5;color:#8b8989;font-size:11px;font-family: arial;width:700px;"><br />
<p> "we've been following your work for the last 4 years, and we're hugely impressed with your limitless creativity "<br />
<em> autorname </em></p>
</div>

Nicht nur das DIV und das BR sind normalerweise hier fehl am Platz vielmehr sollte ein Zitat treffender mit <blockquote> und <cite> ausgezeichnet sein. Auch hier wären Änderungen schnell durchführbar.

Diese Auflistung könnte man bis zum </body> nun weiterführen, aber das wäre zu viel des Guten. Offentsichtlich bleibt nur die fehlende Qualität der Arbeit, die Missachtung gängiger Webstandards und die Ignoranz gegenüber Barrierefreiheit und anderen wichtigen Faktoren modernen Webdesigns.

Fazit

Was bleibt, ist der Hinweis auf Opera’s “Web Standards Curriculum“, wo alle Gesichtspunkte der Webseitengestaltung von namenhaften Autoren ausführlich besprochen werden und für jeden frei zugänglich sind.