Woran erkennt man einen Webpfuscher? (Teil 1)

Eine typische Horrorgeschichte aus dem Bereich der Webbetreuung:

  1. Jemand von einer Agentur bekommt ein barrierearmes Markup in der Design und Inhalt schön getrennt sind als Vorlage und soll lediglich die Ausgaben einer Anwendung (PHP) im definierten Contentteil ausgeben lassen.
  2. Statt das Markup zu nehmen, welches aus div-Bereichen (und zwar keine DIV-Wüsten) besteht, baut er das um und macht daraus ein Tablelayout mit fest vorgegebenen Pixelbreiten. Dabei werden auch alle Sprungmarken gelöscht und die Struktur des Dokuments um den Haufen geworfen. Vorhandene Print- und Handheld-CSS-Dateien werden aus unwichtig erachtet und weggeworfen.
  3. Was rauskommt ist natürlich nicht valide (weder das HTML, noch das CSS).
  4. Dort wo er nicht in der Lage ist, die selbe Optik zu bringen nutzt er dann doch div-Bereiche (innerhalb der Tablecells.); Zu allen Überfluss aber auch mit Inline-Styles!
  5. Damit der Auftraggeber nichts merkt, wird die Arbeit von einem Laptop gezeigt, bei dem der Webserver lokal installiert ist. Die Auflösung des Laptops ist auf 1024px Breite eingestellt und es wird nur der IE (V6) verwendet.

  6. Damit niemand sonst was merkt wird dem Auftraggeber geraten, keine anderen Leute hinzuzuziehen – die würden nur Unruhe bringen.. Ach ja, und da die Vorlage ja barrierearm war und die Optik ja mit dem Ergebnis die selbe ist, wird behauptet es sei jetzt alles auch 100% Barrierefrei.

Zum Vergleich ein Codesnipplet:

Vorher (laut Vorlage):

<form method="post" action="#">
  <div>
    <fieldset>
      <legend>Newsletter</legend>
        <div class="abstand">
          <p>Hier können Sie unsere Newsletter bestellen oder abstellen.
           Bitte fügen Sie Ihre E-Mail ein.</p>
          <p><label for="email">E-Mail</label>
          <input type="text" name="email" value="" id="email" size="34"
            title="Geben Sie hioer Ihre E-Mailadresse ein" />
          </p>
        </div>
     </fieldset>
     <p>
       <input type="submit" name="submit" value="Bestellen" />
       <input type="submit" name="submit" value="Abbestellen" />
     </p>
   </div>
 </form>

Das ist zwar auch etwas umfangreicher vom Code als notwendig, aber das hat den Grund das man vor hat, später das Design allein durch ändern des CSS ändern zu können, ohne das man nochmal in den HTMLCode muss.

Nun, daraus hat unser Profi dann folgendes gemacht:

<div style="padding-left:30px;">
  <div class="home-info">
    <table bgcolor align="center" rules="none" frame="box" width="100%"  border="0" >
     <tr>
      <td align="left"  width="80%" colspan="" style="padding: 8px">
       <div style="position: right; width: 250px; border: solid 1px #CAE1FF;">
        <div class="home-title" style="padding: 8px">Newsletter</div>
          <div style="padding: 8px">
            <img src="../_img/blue_line.jpg" width="220" height="2"></div><br>
            <p style="padding-left:8px;" align="justify">
              Hier können Sie unsere Newsletter bestellen oder
              abstellen. Bitte fügen Sie Ihre E-Mail ein.</p> <br>
          <form method="post" action="">
           <p style="padding-left:8px;"><b>E-Mail: </b>
           <input type="Text" name="email" value="" size="" maxlength="">
            <br/><br/></p>
           <div  style="padding-left:8px;">
             <input type="Submit" name="subcribe_newsletter" value="Bestellen"> |
             <input type="Submit" name="unsubcribe_newsletter" value="Abbestellen">
           </div>
         </form>
       </div>
      </td>
     </tr>
    </table>
   </div>
 </div>

Und dies ganze ist dann der Inhalt einer Tablecell.

2 Kommentare zu “Woran erkennt man einen Webpfuscher? (Teil 1)

Kommentarfunktion ist geschlossen.

  1. Nettes Beispiel.
    Mir ist letztes Jahr bisschen was anderes passiert. Habe mich bei einer „Agentur“ beworben – nicht, ohne mich vorher genau informiert zu haben. Die bauen immer noch mit Frames und Tabellen, haben ihr eigenes CMS „entwickelt“ und sind immer noch stolz drauf. Habe auf Schwachstellen hingewiesen, „Barrierefreiheit“, „BITV“, „tabellenloses Layout“, „Frames sind Mist“, habe mit einem Handgriff gezeigt, dass das Design bei einfacher Schriftvergrößerung zerfliegt… und bot mich an an der Verbesserung und in der Entwicklung mitzuarbeiten.
    „Ach nö… Programmierer haben wir, aber unser Außendienstmitarbeiter geht bald in den Ruhestand, da könnten wir jemanden wie Sie, die sich so gut auskennt, gebrauchen.“
    Ich sollte also den kaputten Kram verkaufen…
    Ich habe mich dort nie wieder gemeldet :-)
    Hm, im eigenen Blog kann ich das nicht schreiben, die Stadt ist zu klein ;-) aber hier fiel mir das beim Lesen wieder ein.
    Danke für den Beitrag.