Schlechtes Webdesign - was man bleiben lassen sollte:


Der "typische" Webdesigner:

Freischaffend mit naturgegeben künstlerischer Ader sitzt er am Mac-"Computer" und mit seiner 1-Tasten-Maus bearbeitet er gut gelaunt Klick-sensitive Bereiche in Anwendungen wie PhotoShop und Dreamweaver.

Im Laufe seines Schaffens stellt er fest, daß die von ihm erstellten Webseiten bei den meisten Leuten (zu denen leider auch seine Kunden gehören) nicht so aussehen, wie er sich das gedacht hat. Beim Nachfragen erfährt er, daß diese Leute alle keinen Mac haben. Das galt in den späten 90ern für ca. 96% aller Webuser!

Er weiß nicht was html, css und javascript sind, geschweige denn, welche Versionen es gibt und welche Art von Dokumenten-Quelltext die von ihm verwendeten sog. html-Editoren erzeugen. Referenz-Nachschlagewerke wie SelfHtml von Stefan Münz, von gutmeinenden Freunden mehrfach empfohlen, liegen verschüttet im Stapel irgendwelcher Multimedia-CDs.

Vom Kunden übermittelte Textinhalte werden als Grafiken in die Webseite implementiert, damit sie auch sicher auf allen anderen Bildschirmen gleich aussehen. Dass sich an diesen Seiten auch die hartnäckigsten Roboter, Crawler und Spider der Suchmaschinen die Zähne ausbeißen, interessiert ihn nicht und solange der Kunde nicht auf die Idee kommt, per Suchmaschine nach der für ihn erstellten Seite oder gar nach der Homepage des Webdesigners zu suchen, ist ja alles in Butter.

Diesem Menschen ist nicht zu helfen.

Jede Information, die in die Materie von html, css und anderer im Web benutzter Technologien eindringt, empfindet er als vom kreativen Arbeiten abhaltend und deswegen als störend - ich wünsche frohes Weiterklicken.

nach oben

Der professionelle Webdesigner:

Der professionelle Webdesigner hat sein Handwerk gelernt. Er weiß, was Schriftsatz und Typen sind, was Kerning und Hurenkinder bedeuten; er kennt verschiedene Farbräume und setzt Blindtext ein, um das Wesentliche herauszuarbeiten. Er arbeitet mit professionellen Produkten und professionellen Partnern, bei denen fast kein Gerät weniger als einen sechsstelligen Euro-Betrag kostet.

Was er nicht weiß, ist, daß Webseiten elektronische Dokumente sind, die im Rahmen eines größtenteils öffentlichen Netzwerkes von elektronischen Geräten angefragt und von anderen elektronischen Geräten geliefert werden.
Und daß diese Dokumente gewissen Standards entsprechen müssen, damit sie von elektronischen Geräten verschiedenster Herkunft und Beschaffenheit gelesen und dargestellt werden können.

Was er auch nicht weiß, ist, daß die Anschaffung immer neuerer Software-Produkte aus den Bereichen Grafik- und Webdesign sowie DeskTopPublishing (s.a. das DTP - Glossar für die wichtigsten Begriffe aus dem Bereich des Desktop Publishing) ihn von der für Webseiten vorgeschriebenen Einhaltung gültiger Standards immer mehr abhalten.

Mit obendrein künstlerischer Begabung gesegnet ist er in allen Fragen grafischer Gestaltung der wohl beste denkbare Ansprechpartner.

Nur Webseiten sollte er keine machen.

 

nach oben

Katastrophen auch ohne Mac:

Mac-User, die sich bei den Kapiteln "Der typische Webdesigner" und "Der professionelle Webdesigner" zu Unrecht angesprochen fühlen, möchte ich sagen: Ihr seid nicht allein !

Ein paar abschreckende Beispiele ...

Und zu guter Letzt noch ein Schmankerl für die jenigen, die gerne mal einen Blick hinter die Kulissen riskieren:

Bei der Überprüfung des Rankings (Positionierung in Suchmaschinen) einer Webseite einer Kundin (Stichworte [reinigung nach hausfrauenart], [reinigungsdienst bietigheim], [kehrwoche putzen bietigheim]) stieß ich auf die Seite einer Mitbewerberin: www.fszaja.de

Die Seite selbst ist einfach gehalten, aber leider uneinheitlich und etwas lieblos, aber das ist nicht der Grund, weshalb sie an dieser Stelle gewürdigt werden soll.
Auffällig ist eine lange Ladezeit, obwohl die auf der Startseite enthaltenen Texte mit lediglich 28 Bytes auskommen.
Das Betrachten der Seite im Editor zeigte, warum das Laden so lange brauchte.
Nicht nur, daß die Webseite fast ausschließlich aus Grafiken zusammengebastelt wurde, schlimmer noch: In den html-Quelltext wurden locker 37 kB hinein gestopft, was einen näheren Blick lohnenswert erschienen ließ:

Und siehe da: Im Meta-Tag "Generator" offenbart sich als verwendete Software "Microsoft Word 10", die selbst so wichtige Bestandteile wie ein "geschütztes Leerzeichen" (entspricht   in html) mit folgendem Konstrukt umgibt:

<p class=MsoNormal align=center style='text-align:center'><span
style='color:windowtext'><o:p>
&nbsp;</o:p></span></p>

In diesem Beispiel 123 Bytes für ein Zeichen, das am Monitor selbst gar nicht angezeigt wird.

Ähnlicher Mist wird auch vom grauenhaftesten aller html-Generatoren namens Microsoft Frontpage erzeugt.

Der hier als Link verfügbare Quelltext Schlechtes Webdesign - mit Hilfe von Microsoft Word 10 enthält mehr als 30 kB unsinnige, Microsoft-Word-spezifische Pseudo-CSS-Anweisungen, und das nur, um 28 Buchstaben und 10 Grafiken zu formatieren.

Hier ein kleiner Auszug:

<v:shape id="_x0000_s1039" style='position:absolute;left:529;
top:297;width:1161;height:1131' coordsize="1161,2262" path="m1156,1155r-15,-20l1126,1115r-15,-19l1096,1076r-13,-20l1068,1036r-15,-20l1039,999r-15,-20l1010, 959,995,939,980,919,966,902,951,882,938,862,923,842r,l922,840r,l921,840r-20,6l882,854r-18,6l845,868r-19, 6l808,882r-20,8l769,898,764,769,757,642,750,515,742,386,729,363,715,337,702,313,689,289,676,266,664,242, 652,218,639,194,626,173,614,149,601,125,589,101,576,77,564,56,551,32,538,8r,l538,8r,l538,8,537,6,536,4, 535,2,534,,513,26,492,54,472,81r-21,28l430,137r-21,28l389,192r-21,30l347,250r-20,30l306,309r-21,30l264, 369r-20,31l222,430r-20,32l210,606r6,145l222,896r5,144l221,1036r-5,-4l210,1028r-6,-4l199,1022r-5,-4l187, 1014r-5,-4l182,1012r,l182,1012r,l170,1024r-10,10l148,1046r-11,10l127,1068r-12,10l104,1090r-11,12l83, 1111r-12,12l60,1133r-10,12l39,1157r-11,10l17,1179,6,1191r5,251l11,1690,8,1935,,2177r31,-14l63,2151r30, -11l125,2128r31,-10l188,2110r31,-10l251,2092r31,-6l314,2080r32,-6l377,2070r32,-2l441,2064r31,-2l504, 2062r42,l589,2066r43,4l673,2076r41,6l753,2092r41,10l832,2114r38,14l908,2141r37,18l981,2177r37,20l1052, 2217r35,22l1120,2262r14,-134l1144,1993r8,-137l1158,1718r3,-139l1161,1438r-1,-140l1156,1155xe"
fillcolor="#b7b78c" stroked="f">
<v:path arrowok="t"/>
</v:shape>

nach oben

Flash #1: Alles so schön bunt hier: ("ich klick's einfach an ...")

lustige java-applets, aufwendige Sounds oder am besten alles gleich komplett in Flash (das shockwave-plugin wird's schon richten) ...

Kein Problem; erlaubt ist was gefällt.
Bei privaten Inhalten spielt es keine Rolle, wieviele Leute diese Webseite nicht sehen können.
Selbstverständlich ist auch, daß eine Werbeagentur zeigen möchte, was sie drauf hat.

Für Flash-Seiten spricht immerhin, daß sich ansprechende Präsentationen und komplexe Menü-Führungen realisieren lassen und daß das Ganze auf allen Systemen, auf denen es sich darstellen läßt, auch ungefähr so aussieht, wie der Webdesigner sich das vorgestellt hat. Außerdem waren entsprechende Plugins Ende der 90er bei ca. 98% aller Browser installiert.

Doch auch für Flash gilt: schnell geklickt ist noch lange nicht gewonnen.
Die außerordentlichen Fähigkeiten von z.B. Flash MX in Bezug auf wiederverwendbare Objekte mit objekt-orientierter Ansteuerung durch eine Programmiersprache (actionscript), der gekonnte Umgang mit platzsparenden, vektor-orientierten Grafiken sowie die vielen Möglichkeiten zur Einbettung von Klängen mit Hilfe verschiedenster Komprimierungs-Verfahren setzen leider auch profundes Wissen auf der Seite des Anwenders (gemeint ist hier der Webdesigner) voraus.

Informationen zu Flash und Actionscript gibt es bei ActionScript Guide and Resources.

Ein echtes Muß zum Thema Grafik und Webdesign sind die Ausführungen in selfhtml zum Thema Grafik.

Ebenfalls empfehlenswert sind die Beispiele von www.on-design.de zum Thema Browser-gemäße Einbindung von Sound-Dateien wie mp3, real audio, midi, wav.

Und dann noch eine im Web entdeckte Perle zum Thema Flash-Shockwave-Tools: www.maani.us liefern wunderschöne Tools für xml- und php-gesteuerte grafische Statistiken, Bildergalerien und mehr.

nach oben

Flash #2: Ein Webunfall, der flasht ...

 (Stand: 2006)

Ausgerechnet in meinem eigenen geschäftlichen Umfeld ereignete sich dieses traurige Beispiel eines solchen Flash-Web-Unfalls:
Dieses Beispiel ist mein "liebstes", da es auf einfache Weise die größten Fehler, die beim Erstellen von Webseiten gemacht werden, demonstriert.

Was inzwischen passiert ist:

Was nicht passiert ist:

Fazit:

Der Schreiner selbst war Nachbar von mir, als ich noch in Bietigheim-Bissingen wohnte. Ich kenne ihn als sehr gewissenhaften und Qualitäts-bewußten Handwerker und würde ihn samt den Mitarbeitern seiner Schreinerei jederzeit uneingeschränkt empfehlen. Da der Mann für sein Geld sehr hart arbeiten muß und aus meiner Sicht über den Tisch gezogen wurde, wollte ich ihm gerne helfen.
Letztendlich ist dabei nicht mehr herausgekommen, als das Täter und Opfer wieder ein Stück weit in die Anonymität des Internets versinken.

Warum "in die Anonymität des Internets versinken" ?
Diese Seite hier ist mit einem recht beachtlichen sog. "PageRanking"-Wert gesegnet, gelegentlich melden sich sogar andere Dienstleister mit der Bitte, gegen regelmäßige Zahlungen Links zu ihnen zu setzen. Die so verlinkten Seiten profitieren aus der Sicht von Google & Co, in dem ein hoher PageRanking-Wert der sog. "Referer"-Seite in verkleinertem Maß "vererbt" wird und somit die Popularität der betroffenen Seiten steigt, wenn von gut besuchten Seiten auf sie verwiesen wird.
Davon hätten sogar die Webdesigner profitiert, da ihre eigene Seite nach demselben Muster wie die des Schreiner-Kunden erstellt wurde und für Suchmaschinen schlichtweg unfindbar war.

Zum Fall selbst:

Der in 74321 Bietigheim-Bissingen ansässige Schreiner beauftragte eine "professionelle" Werbeagentur aus dem Großraum Stuttgart mit der Erstellung einer Webseite.
Diese Seite (genau 1 html-Dokument mit einer eingebetteten flash-Datei) ist seit mehreren Jahren online.
Nach Aussage des Kunden hat der Spaß DM 10.000,- gekostet.

Beim Versuch, diese Webseite auf dem PC seines Pachtgebers zu betrachten, musste ich eine Suchmaschine bemühen, da mir die exakte URL der Seite nicht bekannt war. Also flugs die Suchbegriffe [schreiner bietigheim] bei google eingegeben und ab dafür ... Ergebnis Null Komma Null !
Kein einziger Treffer, der zu einer (von mehreren !) Schreinereien in Bietigheim-Bissingen führt.
Aber auf Platz 1 seinerzeit ein Link zu lb-portal.de, doch dazu mehr unter Betrug und Spamdexing.

Damit gab ich mich nicht zufrieden, zumal ich wußte, wie der Kunde heißt und in welchen Gemeinden seine Schreinerei sowie seine Wohnung sind ... und siehe da, eine gründlichere Webrecherche ergab, daß der gute Mann im Winter 2001 als Trainer bei der Skizunft Markgröningen im österreichischen Hochlitten tätig war.
Aber von seiner jahrelangen Tätigkeit als Schreiner in Markgröningen und Bietigheim-Bissingen und dem teuer bezahlten Webauftritt weit und breit keine Spur. Selbst andere, namensgleiche Firmen in Bietigheim (insgesamt 5 an der Zahl, von denen mindestens noch 2 andere eine Webseite besitzen: ein Bauunternehmen und ein Autohaus) können bei google mit der Suche nach [NAME bietigheim] nicht gefunden werden, was beileibe nicht an google liegt, sondern schlichtweg an der (In-)Kompetenz der Ersteller der jeweiligen Webseiten.

Also blieb mir nichts anderes übrig, als den stolzen Besitzer der Schreinerei-Webseite selbst zu fragen, wie denn die Webadresse seiner Homepage lautet.

Gleich im Browser eingetippt begrüßte mich die Seite mit einem System-Dialog, der wissen wollte, ob ich der Ausführung von aktiven Inhalten zustimme (das lag an der Einstellung des Browsers auf dem benutzten PC; dem User war das ganz recht, so er denn das Risiko z.B. gefährlicher ActiveX-Inhalte mindern und die oft unerträgliche lange Ladezeiten mancher Webangebote verkürzen konnte).

Die Frage-Box 'Ausführung von ActiveX-Steuerelementen und Plugins zulassen?' erscheint z.B. bei eingebetteten Flash-swf-Dateien, wenn in den Sicherheitseinstellungen des Browsers die Option 'Aktive Inhalte ausführen' o.ä. auf 'Fragen' eingestellt wurde. Das Beispiel stammt von der Webseite von Thomas Wildermuth, der als Schreinermeister eine Schreinerei in 74321 Bietigheim-Bissingen betreibt.

Neugierig, wie ich bin, bestätigte ich die Frage mit "nein" und bekomme prompt den Hinweis "ein ActiveX-Steuerelement auf dieser Seite ist nicht sicher ..." - sehr Vertrauen erweckend !

Eigenartiger Weise wird das Verneinen des Ausführens aktiver Inhalte bei einem Flash-Objekt öfter mit dem Hinweis ergänzt, daß das Objekt nicht sicher sei. Das Beispiel stammt von der Webseite von Thomas Wildermuth, der als Schreinermeister eine Schreinerei in 74321 Bietigheim-Bissingen betreibt.

Also auch diese Meldung bestätigt und dann: siehe da ... NICHTS !

Einfach NICHTS, gähnende Leere in weiß !
Radikaler kann Webdesign nicht sein ("design oder nicht design").
Und zu allem Überdruß prangte ein aussagekräftiges "Untitled Document" in der Titelleiste des Browsers !

So sieht die Webseite der Schreinerei Wildermuth (74321 Bietigheim-Bissingen) im Browser aus, wenn 'Aktive Inhalte' nicht ungefragt angezeigt werden und beim Laden des Objektes die entsprechende Frage verneint wird. Das Beispiel stammt von der Webseite von Thomas Wildermuth, der als Schreinermeister eine Schreinerei in 74321 Bietigheim-Bissingen betreibt.

Ein Blick hinter die Kulissen (z.B. in den Quelltext des Html-Dokumentes, in dieser Form bis Mitte März 2003 aktuell) offenbarte die Gründe für das unerfreuliche Geschehen:

Das alles verwundert nicht, wenn man sich die Homepage der Werbeagentur (der direkte Link wurde im März 2003 entfernt) ansieht, falls man diese überhaupt findet.
Klar, daß google selbst mit den Begriffen [agenturname ortsname] (geschweige denn mit so was wie [webdesign ortsname]) nichts anfangen kann, schließlich hat diese Werbeagentur wie so viele bei ihrer eigenen Webseite ebenfalls alle oben beschriebenen Fehler gemacht.

Auf der Homepage der Werbeagentur tut sich dann in allen Punkten genau das gleiche Elend auf wie auf der Webseite des Kunden, incl. der unsinnigen Pseudo-Zeitgeist-eMail-Adresse go@agenturname.de. Zu einem vernünftigen Webimpressum hat es nicht gereicht, aber dafür prangen leere Schaltflächen auf der 2.ten Startseite, voll grafisch, hey.
Das ist übrigens auch so eine Unart mit vorgeschalteten Startseiten, auf denen es ohne jeglichen Kommentar außer einem wenig aussagefähigen Logo nichts gibt, außer der nicht beschriebenen Notwendigkeit, eben genau auf dieses Logo klicken zu müssen.
Hätte man eine solche Startseite dazu genutzt, um Inhalte wahlweise in html oder flash bzw. in verschiedenen Fremdsprachen anzubieten ...
ja, das wäre was gewesen; da hätte es im Flash-Bereich auch auf Kosten längerer download-Zeiten dann so richtig Krachen dürfen.

Meine persönliche Meinung:

nach oben

Betrug und Spamdexing:

Betrogen fühlte ich mich, als ich zwecks Überprüfung der Positionierung einer Kunden-Webseite in google nach den Begriffen "dachdecker bietigheim" suchte.
Auf den vordersten Plätzen (auch in einigen anderen Suchmaschinen) erschien damals die "Portal"-Webseite lb-portal.de, die auch bei der Suche nach allen möglichen Handwerker-Berufen in Kombination mit den Ortschaften im Mittleren Neckarraum an prominenter Position gefunden wurde.

Die Webseite bewarb sich als "Marktplatz für Ludwigsburg und den Landkreis".
Die Trefferbeschreibung in den Suchmaschinen brachte bereits Licht in das Dunkel der Qualität des Webangebotes:
Eine Ansammlung von Ortsnamen ("Ludwigsburg, Asperg, Bietigheim, Bissingen, Freiberg, Großbottwar, Ingersheim ...") sowie Berufen ("Teppichboden, Schornsteinfeger, Kaminbauer, Schreiner, Friseur, Fußpflege ...") schien auf eine Webseite hinzuweisen, die außer einer bloßen Aneinanderreihung von Stichwörtern nicht viel zu bieten hat.

Und genau so war es auch; nicht nur, daß die Seite auch ein leider gutes Beispiel für schlechtes Webdesign war, nein, auch inhaltlich erwartete einen nichts Gutes.

Die paar Kunden, die wirklich aufgelistet wurden, tauchten dann auch gleich in mehreren Bereichen auf:
Eine Druckerei z.B. bei Handel, aber auch bei Handwerk; gleiches bei einem Juwelier; Städte-bezogene Angebote verwiesen teilweise wieder auf Vereinslisten usw.
Der "Service", dort aufgeführt zu werden, "durfte" dann schon 15 € im Jahr kosten, am besten gleich per Einzugsermächtigung.

Im November 2005 war diese Ausgeburt einer Webseite leider nicht mehr online, obgleich das in Backnang beheimatete Portal-Team unter der Federführung der Barbara R. nach wie vor Inhaber der Domain war.
Dennoch stand ein "Clone" der lb-portal-Seite online zur Verfügung: bk-portal.de.
Alle für lb-portal.de getroffenen Aussagen gelten 1 zu 1 auch für diese Un-Seite.

Wer die Webseite bk-portal.de öffnete und den Scrollbar (Rollbalken) am rechten Rand des Browser-Fensters bemerkte, wunderte sich, warum die Seite nach unten einen sehr großen, rein weißen Platz einnahm. Wer mit der Maus in diesen weißen Bereich hineinklickte und die Maus mit gedrückter linker Maustaste bewegte, konnte entdecken, daß dieser Bereich mit einer umfangreichen Stichwortliste mit Namen von Berufen und Ortschaften gefüllt war. Der reine Stichwortlisten-Text war obendrein in der Farbe des Hintergrundes der Webseite gehalten, um Besuchern eine "normal" aussehende Seite zu zeigen. Dieses Verfahren sollte dazu dienen, Suchmaschinen zu einer überhöhten Positionierung der Seite bei Suchanfragen zu bringen und wird mit dem Begriff "spamdexing" bezeichnet.

Die Betreiber von Suchmaschinen versuchen seit Jahren mittels ausgeklügelter Programmierung solche Machenschaften zu erkennen und diese Seite entweder abzuwerten oder gleich ganz aus ihren Indizes zu entfernen und mit einem Sperrvermerk zu versehen. Leider nur mit teilweisem Erfolg, wie man an den nach wie vor guten Platzierungen dieser Webseite bei mehreren Suchmaschinen sehen kann.

Verantwortlich für diesen Webauftritt zeichnete damals ein LB-Portal-Team. Ein grafischer Link führt auf der mit schreiendem Design durchsetzten Seite zu einer weiteren Firma, die sich mit dem Spruch "powered by" als verantwortlich für LB-Portal-Unsinn verrät:

Die Global Asset Consulting (www.g-a-c.de) bietet laut Seiteninhalt Unternehmensberatung, Internetimplementierung, Börsengänge und die Erstellung professioneller Webauftritte an und begrüßte damals ihre Besucher mit einem professionell ungefragt aufgehenden Popup-Werbefenster.

Die durchaus übersichtlich aufgemachte Webseite überrascht mit ungewöhnlich langen Ladezeiten, ein html-Ladezeit-Check bringt die kostspieligen, aber wertlosen Elemente der Seite an Tageslicht:

Die 57 kB des html-Dokumentes bestehen hauptsächlich aus einer schier endlosen Aneinanderreihung von Stichwörtern (ebenfalls in der Farbe des Seiten-Hintergrundes gehalten, diesmal halt in schwarz) sowie ungenutzt den html-Quelltext verstopfenden Formatierungs-Tags a'la

<font face="Century Gothic, Arial, Helvetica">
Verantwortlich für den Font-Tag-Quatsch ist der ziellose Einsatz einer ganz fürchterlichen Software namens Frontpage, die natürlich von Microsoft stammt und bei der Global Asset Consulting in der Version 5 benutzt wird. Daraus resultieren auch eine Vielzahl ungültiger html-Anweisungen, wie im folgendem html-Check zu sehen ist.

Die Global Asset Consulting residiert u.a. in der Friedhofstraße 14 in 71522 Backnang, genau wie auch Barbara Röhrle vom LB-Portal-Team und bietet auf dieser Ausgeburt einer Webseite immerhin ein Server-basiertes Kontakt-Formular an, das aber nicht einmal innerhalb der GAC-Domäne liegt und sich bei näherem Hinsehen als ein im puretec-Formular-Assistenten hastig hingeklicktes Standard-cgi herausstellt.

Wehe dem, der sich von solchen Leuten Webauftritte machen läßt.

nach oben

wärmstens empfohlene Links:

nach oben

da werden Sie geholfen:

Gerne stehe ich gewerblich bei der Projektierung und Realisierung von Webseiten zur Seite.
Gerade umfangreichere Projekte erfordern kompetenten Einsatz, wenn es um Themen geht wie Einhaltung von html und css-Standards, php-Programmierung, Datenbank-Anbindung, automatisierte Pflegbarkeit der Seiteninhalte und Findbarkeit des Webauftrittes durch Suchmaschinen.
In diesem Zusammenhang hat sich vor allem zum Ausgleich meiner gestalterischen Schwächen die Zusammenarbeit mit einer Reihe von Leuten bewährt, von denen hier einige in alphabetischer Reihenfolge gelistet werden:

nach oben

zur Startseite dieses Webangebotes zur DMT-Hauptseite