Abro, Dezember 2008

Webseitenqualität – Teil 1/6

Willkommen bei dem ersten Abschnitt unserer Serie

25 Merkmale, für eine schlecht gemachte Webseite

Dies ist eine Liste mit Hilfestellungen zum testen der Qualität Ihrer Webseite.
In diesem Abschnitt finden Sie folgende Negativpunkte:

Ihre Webseite…

  1. …ist nirgendwo verlinkt
  2. …benutzt Frame-Layout
  3. …benutzt Tabellen-Layout
  4. …wurde mit einem WYSIWYG-Editor erstellt

Für alle Abschnitte und mehr Informationen gehen Sie bitte auf die Übersichtsseite.


Ihre Webseite…

1. …ist nirgendwo verlinkt

Eigentlich ist dieser essentielle Punkt so logisch, dass man ihn gar nicht weiter ausführen muss. Linkt niemand auf Ihre Webseite, so haben sie als einzige Besucherquelle nur noch Ihre Offlinemedien wie Visitenkarten, Flyer und Autobeschriftungen.

Hyperlinks sind wohl die wichtigsten Strukturelemente des Internets. Bevor es zuverlässige Suchmaschinen gab, bestand die einzige Möglichkeit auf eine Seite zu gelangen darin, dass eine andere Webseite aus dem Content heraus auf Sie verlinkt hat.

Heute ist Google die Quelle eines jeden Erstbesuchers. Der Suchmaschinengigant sieht alle ausgehenden Links als Empfehlungen für die anderen Webseiten. Dies ist die Berechnungsgrundlage des Pageranks™ und schlussendlich auch für die Position in den SERPs entscheidend. Somit ist das Google-Ranking nur eine zentralisierte Reflektion des alten Systems ohne Suchmaschinen.

>> Wie finde ich heraus, wo meine Webseite verlinkt ist?

Wie immer im IT-Bereich haben wir dazu endlose Möglichkeiten. Eine Kombination aus den bekanntesten Backlinkcheck-Tools führt Sie zu einem sicheren Ergebnis.

– Gehen Sie auf https://siteexplorer.search.yahoo.com/ und geben Sie linkdomain:http://IhreDomain.de ein. Yahoo findet wirklich viele eingehende Links, zeigt aber viele doppelt an, wenn z.B. jemand aus der SideBar seiner Seite auf Sie linkt und dieser Link somit auf allen Seinen URLs erscheint.

– Außerdem können Sie sich bei den Google-Webmastertools anmelden um dort auf Links -> Seiten mit externen Links zu gehen. Damit erhalten Sie eine ziemlich zuverlässige Übersicht welche Links auf ihre Webseite verweisen. Wichtig ist auch der Linktext, werfen Sie also unbedingt auch einen Blick auf Statistiken -> Was GoogleBot sieht

– Benutzen Sie ein SEO-Tool wie die Sistrix-Tools, SEOmoz-Toolbox oder Linkvendor. (Die ersten beiden sind recht unspannend in der Gratisversion)

– Richten Sie sich eine Statistiksoftware ein, die Zeigt wer von woher auf Ihre Webseite gelangt. Beispiele dafür sind Google Analytics , Piwik , oder einfach nur Webalizer bzw. AWStats (standardmäßig bei vielen Servern dabei).

[ << ganz nach oben ]


2. …benutzt Frame-Layout

Framedesign war gegen 1998 genau so beliebt wie Layout-Tabellen. Man konnte wunderbar Seitenelemente erstellen, die unabhängig voneinander gescrollt werden konnten. Jedoch Neigt sich das Jahr 2008 dem Ende und Framedesigns sollte niemand, wirklich absolut niemand mehr benutzen. Es gibt einen ganzen Sack voller wirklich guter Gründe Frames zu vergessen, die aber größtenteils zu tiefgreifend sind für diesen Artikel und z.B. mit der technischen Definition eines Frame-Dokumenttyps zu tun haben. Für den User hingegen lassen Sie sich nur diese nennen:

Es ist unmöglich ein Bookmark für eine Frameseite zu setzen, wenn man nicht gerade die Startseite haben möchte. Aus demselben Grund, warum die Suchmaschinenfreundlichkeit bei einem Frameset nicht gegeben ist: Google und alle anderen denken, jedes Dokument hat eine eindeutige URL. Bei Frames haben aber alle Dokumente dieselbe URL. Und gesetzt der Fall man verlinkt ein Dokument direkt, kann weder Nutzer noch Suchmaschine die anderen Frames sehen. Ergo es fehlt das Menü zur weiteren Navigation und ggf. auch noch der Header. Woher soll man denn wissen wo man gerade ist und wie es weitergeht?

>> Wie finde ich heraus, ob meine Webseite Frames benutzt?

Schauen Sie wieder in den Quelltext. Steht dort <frame(…)>, oder <frameset (…)>, so ist Ihre Webseite mit Frames gestaltet.

[ << ganz nach oben ]


3. …benutzt Tabellen-Layout

Tabellen kennt jeder von den Fußballergebnissen oder von betrieblichen Anwendungen zur Kalkulation und zum Datenmanagement. Genau das ist Sinn und Zweck dieser Erfindung – auch im Web. Leider gab es eine Zeit in der das viele Leute anders sahen. Sie fanden es praktisch, Designvorlagen auseinander zu schneiden und dann zusammen mit dem Text pixelgenau so in verschachtelten Tabellen zu arrangieren, dass alles zusammenpasste. Nun, auch heute schneiden wir noch Designvorlagen auseinander, nur ohne sie in Tabellen unterzubringen. Design kommt ins CSS, Daten kommen ins XHTML. Der große Unterschied dabei ist wieder die Wartungsfähigkeit. Ein kleines Beispiel äquivalenter Codezeilen erst in früher gängigem Tabellenlayout, dann als aktuelles CSS-Layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Subheader1</th>
      <th>&nbsp;</th>    <!-- Abstandhalter -->
      <th>Subheader2</th>
    </tr>
    <tr>
      <td>Content1</td>
      <th>&nbsp;</th>    <!-- Abstandhalter -->
      <td>Content2</td>
    </tr>
  </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
<h1>Header</h1>
<h2 class="col-2">Subheader2</h2>
<p class="col-2">Content2</p>
<h2>Subheader1</h2>
<p>Content1</p>
 
<!-- für die insider, noch etwas css:
  .col-2  { float:right; }
  p.col-2 { clear:right; }
  /* ggf. noch ein bisschen width & margin... */
//-->

Man sieht also, es ist ein Leichtes den Quellcode auf 1/3 zu reduzieren, wodurch er wesentlich übersichtlicher und flexibler wird. Die Reihenfolge des Quellcodes muss nichteinmal gleich der Reihenfolge der Anzeige sein. Das ist prädestiniert für SEO. Weiterhin ist erkennbar, dass eigentlich zusammengehörende Abschnitte in Tabellen nicht zusammenstehen. Nicht etwa Überschrift-Content / Überschrift-Content, sondern Überschrift-Überschrift / Content-Content. Zum Nachteil derer, die auf Screenreader angewiesen sind und damit alles durcheinander vorgelesen bekommen. Alles nicht so chic. Wechseln wir einmal die Fronten, kann man dem Tabellenlayout zugutehalten, dass es für Anfänger leichter zu verstehen ist als CSS-Layout und, wenn es einmal steht, unkaputtbar ist und eher überall gleich aussieht. Letzteres ist unserer Ansicht nach jedoch kein Pro. Der ultimative vorteil des Webs ist die Dynamik und die Wandelbarkeit. Ob eine Webseite auf Monitoren, Projektoren, Screenreadern, Handys oder -ja ok- Druckern ausgegeben werden soll, jeder bekommt sie in dem passendsten Format angezeigt. Darum arbeiten wir heute mit CSS und dem KISS & POSH -Prinzip.

  • So viel Quelltext wie nötig, so wenig wie möglich.
  • Die Informationen für den User stehen im Vordergrund.
  • Jeder Inhalt wird mit den assoziativstem XHTML-Element deklariert.
    Überschriften mit Header-Tags und nicht etwa “Bereich mit Klasse Header”
  • Umgekehrt zeigt jedes XHTML-Element schon durch seinen Typ, was es beinhaltet.
    Also: In Tabellen kommen tabellarisch aufgelistete Daten!
>> Wie finde ich heraus, ob meine Webseite Tabellenlayout benutzt?

Tabellenlayout ist daran zu erkennen, dass die Tags <td> und <tr> übermäßig häufig vorkommen. Wenn es für Sie schwer einzuschätzen ist, ob das im Vorliegenden Fall jetzt viel oder wenig ist, dann schauen Sie wie viele Tabellen auf der Seite vorkommen und vergleichen das mit der Anzahl der <table (…)>-Tags und ob einer davon sehr nah hinter dem Tag <body> steht. All das ist ein sicheres Zeichen für Tabellenlayout, welches Anno 1998 eine durchaus gängige Praxis war, heute aber absolut überholt ist.

[ << ganz nach oben ]


4. …wurde mit einem WYSIWYG-Editor erstellt

WYSIWYG-Editoren sind Tools für den kleinen Webmaster, der kein HTML und CSS lernen will, sondern einfach nur schnell eine Seite zusammen klicken möchte um diese direkt online zu stellen. Beispiele dafür sind Adobe GoLive!, Dreamweaver, oder Frontpage. Leider hauen recht viele Agenturen ihre Kunden übers Ohr und benutzen solche Programme. Meistens gibt es dann im Haus keine Programmierer oder qualifizierten Webdesigner und man möchte die entsprechenden Einkaufskosten sparen. Grafiker die sich hauptsächlich mit Printmedien beschäftigen sollten einfach nicht gezwungen werden Webseiten zu bauen.

Der Nachteil dieser Editoren liegt neben dem Aspekt, dass es einfach keine Professionelle Methode ist, nicht allzu offensichtlich auf der Hand. Schließlich können die Ergebnisse einer handgeschriebenen Webseite gegenüber einer zusammengeklickten Webseite auf den ersten Blick identisch aussehen. Niemand kann jedoch die im CSS-Entwicklungsprozess so wichtigen Überlegungen per Klick nachahmen und sich z.B. für eine bestimmte Layout-Typologie entscheiden. Für den Kunden, oder besser: seine Zielgruppe, ist dies aber elementar. Es wäre so, als ob eine Firma sich von einer IT-Firma ein Netzwerk einrichten lassen will und diese keinen Strukturgedanken an die sinnvollste Netzwerktypologie verschwendet, sondern direkt anfangen würde Kabel hin und her zu stecken. Würde ihnen das nicht auch spanisch vorkommen?

Zu guter letzt gibt es kaum Szenarien, in denen ein WYSIWYG-Editor einen schlanken und validen Quellcode liefert. Man kann sich bei der Bedienung meistens ja noch nicht mal für die Art des Doctypes, also sozusagen des Slangs der Quellcodesprache entscheiden. Zwingen Sie Ihre Agentur möglichst, einen guten und validen Quellcode abzuliefern, indem Sie z.B. wünschen dass der Doctype „XHTML strict“ verwendet werden soll. Jeder gute Designer kann jedes Design damit umsetzen, die WYSIWYG-Editoren aber eben nicht (valide).

>> Wie finde ich heraus, ob meine Webseite mit einem WYSIWYG-Editor gemacht wurde?

Schauen Sie in den Quelltext Ihrer Webseite. Keine Angst, das sieht zunächst nach undurchdringlichem Fachchinesisch aus, Sie müssen aber nur nach dem vorkommen bestimmer Texte suchen. Im Browser können Sie den Quelltext sehen wenn Sie im Menü auf Ansicht/Quelltext klicken (Internet Explorer, Opera und Safari). Bei Firefox ist es Ansicht/Seitenquelltext anzeigen. Das funktioniert leider nur, wenn keine Frames verwendet wurden (siehe weiter unten). In dem Fall geht`s über Rechtsklick/Framequelltext anzeigen.

Wenn einer der folgenden Punkte zutrifft, wurde ein WYSIWYG-Editor verwendet:

-Sehen Sie sich den Doctype an, das sollte die erste Zeile sein. Fehlt er, oder finden Sie dort kein „XHTML“, machen sie sich Sorgen. Beispiel: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

-Schauen Sie in den Seitenkopf. Diesen gibt es nur einmal im Quelltext und befindet sich zwischen <head (…)> und </head>. Steht dort <meta name=”generator” content=”(…)” /> haben Sie Glück und müssen jetzt nur noch recherchieren, was der eingesetzte Editor für ein Typ ist. Der Name des Übeltäters steht hinter dem Gleichzeichen des Content-Attributs. Google und Wikipedia sind in dem Fall große Hilfen.

-Es gab einmal die stillschweigende Konvention, dass automatisch generierter HTML-Code groß geschrieben wird. Sind also Tags (das sind die Dinger mit den spitzen Klammern), oder deren Attribute, groß geschrieben, kann man sehr sicher sein, dass es sich um generierte Inhalte handelt.

-Ist das nicht der Fall, schauen Sie ob es viele Attribute gibt, deren Werte nicht von Anführungszeichen eingeschlossen sind. Richtig: <tag attribut=“wert“>(…)</tag>, Falsch <tag attribut=wert>(…)</tag>.

-Viele Editoren haben ihre ganz eigenen Footprints. Dreamweaver erkennen Sie, indem sie die Suche im Quelltext öffnen (meistens per [STRG]+[F] ) und „MM_“ tippen. Fast alle Dreamweaver Seiten verwenden nämlich JavaScript-Funktionen die mit „MM_“ beginnen. Diese sind meist zum ändern von Bildern zuständig wenn man mit der Maus darüber fährt.

Haben Sie bis jetzt noch nichts gefunden ist das immerhin gut und ab diesem Punkt können wir nicht mehr sicher sagen, dass es sich um WYSIWYG-Editoren handelt. Wohl aber, dass der Schreiber seiner Zeit um mindestens 5 Jahre hinterher hinkt. Oftmals sieht der Code, den die Klick-Editoren produzieren genau so aus wie der eines 11-Jährigen.

– Schauen sie ob Tabellendesign benutzt wird. Es ist total überholt, scheint aber leider immer noch beim WYSIWYG-System sehr verführerisch zu sein…

– Wenn Tags (ausgenommen <img>) häufig Attribute wie width=(…), bgcolor=(…), oder align=(…) haben, dann wurde Design und Inhalt nicht getrennt und so etwas macht keiner, der regelmäßig XHTML schreibt. Denn die Wartungsfähigkeit des Codes geht damit gegen Null.

– Eine weitere Möglichkeit ist das suchen nach dem Vorkommen der Event-Attribute onmouseover=(…) und onclick=(…). In diesem Fall wurde Verhalten und Inhalt nicht voneinander getrennt. Klickeditoren finden diese Notation schlüssig, für Menschen gilt aber dasselbe wie im obigen Punkt.

[ << ganz nach oben ]




3 kreative Kommentare

  1. basti, 03.12.2010 10:33h

    Erstmal danke für die ganzen Tipps auf der Seite. Für einen Anfänger, der sich mal etwas mehr mit Webdesign beschäftigen will, hilft einem die Seite sehr.
    Mich würde nur mal interessieren wo die Eventhandler hinkommen, wenn nicht in die Tags

  2. Abro, 03.12.2010 12:49h

    Da hattest du aber Nerven, der Artikel zählt ja zugegebener Maßen nicht gerade zu meinen lesbarsten. Es freut mich dennoch sehr dass du dich mit der Thematik so tiefgreifend beschäftigen willst.

    Nun, die Eventhandler wie onclick=”machwas” & Co. schreibt man generell separat ins JavaScript. (Ob das eher im Kopf oder Fuß einer Seite steht ist dann wieder Religionsfrage und kommt IMHO auf den Anwendungsfall an, besonders wenn wir über den Einbau in ein CMS-Template sprechen)

    Wenn es ganz wenig Quelltext ist kann man alles direkt ins HTML einbetten ohne die Auslagerung in eine spezielle JS-Datei, das spart dann einen HTTP-Request und die Seite läd etwas schneller:

    1
    2
    3
    
    <script type="text/javascript">
    /* Quelltext hier */
    </script>

    Im Gegenfall eben so:

    1
    
    <script type="text/javascript" src="http://meine-webseite.de/js/machwas.js"></script>

    Wenn du jetzt normalerweise schreiben würdest:

    1
    
    <h1 id="foo" onclick="alert('geklickt');">Überschrift</h1>

    Lässt du jetzt einfach das onclick weg und schreibst statt dessen im JS:

    1
    2
    3
    4
    5
    6
    7
    
    window.onload = function()
    {
      document.getElementById('foo').onclick =  function()
      {
        alert('geklickt');
      };
    }

    Oder alternativ – mit jQuery sieht das so aus:

    1
    2
    3
    4
    5
    6
    7
    
    jQuery(function($)
    {
      $('#foo').click(function()
      {
        alert('geklickt');
      });
    });
  3. basti, 03.12.2010 15:42h

    Ah natürlich. Macht natürlich Sinn aber daran hatte ich noch gar nicht gedacht. Danke für die Info :)

Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an http://koch-essen.de/kontakt/