Warum dieser Hinweis?
Diesen Hinweis sehen Sie, weil Ihr Browser zentrale Formatvorlagen (CSS) nicht oder ungenügend unterstützt. Das ist zum Beispiel bei Netscape 4.x der Fall, wenn JavaScript deaktiviert ist.
Wenn Sie bei Ihrem nächsten Besuch auf diesen Seiten einen modernen Navigator benutzen (Firefox, Mozilla, Opera 9 oder IE 6), werden Sie diese Seiten in einer ganz anderen Darstellung zu sehen bekommen.
Um Ihnen jetzt die nachfolgende Bildersuppe zu ersparen (in einem modernen Browser wären die Bilder an den für sie angedachten Platz), hier ein direkter Link zum » Inhalt «. Alternativ können Sie die Datei »oldies.pl« aufrufen, auf welche Sie mit aktiviertem JavaScript umgeleitet worden wären:
Patrick Andrieu, Atomic Eggs
--------------------------------------------------------------------------------------
Sie sind Unternehmer, Künstler oder Freiberufler und planen die Errichtung einer Internetpräsenz, damit Ihre Kunden jederzeit Informationen über Ihre Produkte, Ihre Dienstleistungen oder Ihre Arbeit abrufen können.
Die Webseiten sollten zudem verschiedene Möglichkeiten der Kontaktaufnahme aufweisen, von der einfachen Angabe von Adresse(n) und Telefonnummer(n) bis hin zu elektronischen Kontaktmöglichkeiten wie der Angabe einer E-Mail-Adresse oder der Bereitstellung eines Kontaktformulars.
Mit einer Webpräsenz stellen Sie sich, Ihr Unternehmen oder Ihre Dienstleistung anderen Menschen vor. Und schon sind wir beim ersten Grundsatz angelangt:
Eine Internetpräsenz erstellt man nicht, um sie sich selbst anzuschauen, sondern für die Besucher, die alle als potentielle Kunden anzusehen und dementsprechend zu behandeln sind!
Aus diesem Grund sollte Ihr Auftritt alle Informationen liefern, nach welchen mögliche, an Ihr Unternehmen interessierte Besucher suchen werden. Wichtig ist hierbei zu wissen, dass Besucher nur in den seltensten Fällen die Adresse Ihrer Webseiten direkt eingeben oder gezielt nach Ihrem Unternehmen suchen werden. Vielmehr folgen sie Links, Empfehlungen und in erster Linie Ergebnissen von Suchmaschinen (so genannten Treffern).
Der Inhalt Ihrer Webseiten sollte demnach alle möglichen Stichwörter enthalten, mit welchen Sie gefunden werden wollen, vor allem aber, nach welchen im Zusammenhang mit Ihrem Angebot üblicherweise gesucht wird! Demzufolge lautet der zweite Grundsatz:
Das Bedürfnis nach Information sowie die Lese- und Surfgewohnheiten Ihrer Besucher sind wichtiger als Ihre persönlichen Layout-Vorstellungen! In Ihrem eigenen Interesse!
Auch wenn Ihr Auftritt mit derselben Sorgfalt geplant und erstellt werden sollte, wie ein Prospekt oder ein Exposé, gelten im Medium Internet ganz andere Regeln als im so genannten Printbereich. Verabschieden Sie sich am besten gleich von der Vorstellung, Ihre Website sollte ähnlich strukturiert sein wie die Hochglanzbroschüre, die Sie möglicherweise schon mal von einer Werbeagentur haben erstellen lassen.
Eine Werbeschrift wird wie ein Buch gelesen, in der Regel also werden die Informationen »linear« der Reihe nach gelesen, von vorne nach hinten. Nicht so im Internet: in diesem Medium gibt es keine Linearität. Ein künftiger Besucher Ihres Auftritts wird nur selten als erste die Startseite Ihrer Website zu sehen bekommen. Warum? Weil er, immer auf der Suche nach Informationen, einem Link gefolgt ist, der ihn möglicherweise zu einer Unterseite Ihrer Präsenz geführt hat. Dritter Grundsatz:
Jede Seite Ihrer Internetpräsenz ist genauso wichtig wie alle anderen und sollte den Besuchern die Möglichkeit bieten (und selbstverständlich auch Interesse wecken), sich auf weitere Unterseiten über Ihr Unternehmen zu informieren.
Wenn Sie zum Beispiel auf einer Unterseite Ihres Auftritts über Ihre persönliche Vorliebe für Aquaristik berichten, ein weiterer Aquariums-Fan, der zufälligerweise auch Interesse daran hätte, Produkte Ihrer Firma zu erwerben, diese Seite beim Stöbern über das gemeinsame Hobby via Google/Yahoo/andere Suchmaschine gefunden hat, sollte es ihm von Ihrer persönlichen Seite aus möglich sein, sich über Ihr Produktportfolio und Ihr Unternehmen zu informieren.
Einmal gedruckt, verändert sich ein Druckerzeugnis nicht mehr (außer Sie zerreißen oder verbrennen es). Die Darstellung einer Webseite hängt jedoch auch vom Ausgabegerät ab: Monitoren gibt es in vielen verschiedenen Größen und Auflösungen, Schriftarten stehen nicht in selben Umfang zur Verfügung usw. – und zu guter Letzt spielen Betriebssystem und Browser eine nicht unwesentliche Rolle.
Viele Werbeagenturen fühlten sich während des Internetbooms zu Beginn des Jahrtausends dazu prädestiniert, nun auch Webdesign anzubieten. Schließlich, meinten diese, besaßen sie aufgrund ihrer Erfahrungen die besten Voraussetzungen für die Erstellung ansprechender Layouts - war doch Werbung ihr Metier.
Doch der Versuch, die Erfahrungen mit anderen visuellen Medien auf das Web zu übertragen, war von vorne herein zum Scheitern verurteilt: Während Werbung darin besteht, irgendeine Botschaft an das Volk zu bringen, sucht das im World Wide Web surfende Volk seine Informationen selbst – und es geht auch nicht anders! Denn im Gegensatz zur Werbung im Fernsehprogramm oder zu einem Werbeprospekt im Briefkasten kommt Ihre Website nicht von alleine zum Besucher: er muss sie aufrufen, und dazu muss er sie zunächst auffinden.
^Gerald Blozek schreibt etwas plakativ aber nicht minder informativ in seinem Blog:
Liebe Marketingfuzzis und Werbeleute:
Im Gegensatz zu deinem Hochglanzprospekt, der verteilt wird und so bleibt wie er ist - außer ich leere meinen Kaffee drüber, besitzt der Benutzer einer Website das Ausgabemedium. Und du kannst denen nicht vorschreiben, ob sie mit 800x600 oder 1600x1200 Pixeln Bildschirmauflösung, mit einem Screenreader, Handheld oder Mobile Phone surfen. Du kannst auch nicht wissen, ob der Empfänger deiner Botschaft zu den 10% farbenblinden Männern, zu den über 50jährigen mit Altersfehlsichtigkeit, zu den Menschen mit motorischen Störungen oder sonstwie zu den 50% gehören, die nicht deine guten Augen, deine motorischen und kognitiven Fähigkeiten und deine technische Ausstattung haben. Auch die Suchmaschine weiß nicht, dass zum Beispiel deine Adresse in einer Grafik versteckt ist.
Ich weiß, eine Suchmaschine und ein Sehbehinderter können deine Information im Hochglanzprospekt auch nicht lesen. Und weil das Hypermedium eben anders ist, merke dir:
Auf einer Website hast du die Chance, dass (fast) alle Menschen - und auch andere Programme - deine Botschaften erfassen können. Nutze sie!
Sehr lesenswert zum Thema ist auch die Streitschrift von Rainer Kersten: ^Warum können Werbeagenturen keine guten WWW-Seiten schreiben?.
Andere Menschen (Ihre Besucher) können Sie weder ändern noch erziehen. Aber Ihre Webseiten können und sollten Sie dieser Sachlage anpassen!
Zuerst sollten Sie sich die Webseiten des Anbieters sehr genau anschauen, etwa nach dem Motto: »Wer im eigenen Haus keine Ordnung hält, wird auch bei mir nicht richtig putzen«.
Nachfolgend werden einige Punkte aufgelistet, denen Sie besondere Beachtung schenken sollten. In einigen Fällen wird es etwas technisch – ich bemühe mich, diese technischen Details im Abschnitt » Was ist... « so leicht wie nur möglich zu erklären!
Ist die Website der Agentur/des Anbieters gut strukturiert? Finden Sie auf Anhieb die Informationen, die Sie interessieren? Wie sehen die Webseiten aus, die der Anbieter bereits für seine Kunden erstellt hat (meistens unter »Referenzen« oder »Portfolio« zu sehen)? Sind da die Informationen leicht zu finden und eine gute Struktur erkennbar?
Sehen die Seiten in verschiedenen Browsern gleich aus? Die Zeiten, in welchen fast ausschließlich Netscape und der Internet Explorer sich den »Browsermarkt« teilten, sind schon lange vorbei. Hatte nach dem Erscheinen des Internet Explorers 4 der damalige Netscape Navigator das Nachsehen, hinken heute die Versionen 6 und 7 des Microsoft-Browsers der Entwicklung hinterher: die CSS-Interpretation lässt viel zu sehr zu wünschen übrig und ist in vielen Fällen schlicht fehlerhaft.
Ein Webdesigner, der sein Handwerk beherrscht, sollte die Stärken und Schwächen der ^meistverbreiteten Browser kennen und seine Webseiten dementsprechend gestalten. Testen Sie dies und rufen Sie die Seiten des Anbieters in allen Browsern auf, die Ihnen zur Verfügung stehen! Geringfügige Darstellungsunterschiede sind zwar normal und im Kauf zu nehmen, grobe Layoutfehler sollten jedoch nicht auftreten!
Hinweise wie »Diese Webseite wurde optimiert für Browser XY« sind bereits auf einer privaten Homepage ein Armutszeugnis – erst recht aber, wenn Ihnen solche Hinweise auf Webseiten von Agenturen oder selbst ernannten »professionellen Webdesignern« begegnen!
Entsprechen die Seiten des Anbieters den Webstandards des World Wide Web Consortiums (^W3C)? Rufen Sie hierzu den ^W3C-Webseiten-Validator auf und kopieren Sie in das Feld »Adress« die URL-Adresse des Anbieters (Beispiel: http://www.atomic-eggs.com). Führen Sie mehrere Stichproben durch, überprüfen Sie nicht nur die Startseite. Wiederholen Sie die Validitätskontrolle auch bei Webseiten, die die Agentur/der Anbieter für Kunden erstellt hat.
Bei einer standardkonformen Webseite ist das Ergebnis des W3C-Validators ^mit einem grünen Streifen versehen. Andernfalls sieht der Validator ^rot – und Sie sollten sich gleich einen anderen Webdesigner suchen!
Funktioniert die Navigation ohne JavaScript? Manche umfangreiche Projekte erfordern komplexe Navigationsmöglichkeiten, die über mehrere Ebenen verschachtelt sind: Die Navigationsunterpunkte erscheinen zum Beispiel erst dann, wenn der Mauszeiger sich über einen »Hauptpunkt« befindet. Um diese Effekte zu realisieren, wird leider in vielen Fällen ausschließlich JavaScript eingesetzt, so dass Besucher mit deaktiviertem JavaScript die Unterpunkte nicht aufrufen können. Der vierte Grundsatz lautet:
Alle Informationen, die Ihre Website bereitstellt, müssen von allen Besuchern ohne Umwege und lange Sucherei abgerufen werden können!
Wenn die Seiten des Anbieters/der Agentur einschließlich der für Kunden erstellten Seiten diesen Grundsatz nicht beherzigen, verweilen Sie nicht länger auf dessen/deren Präsenz und suchen Sie nach einem fähigeren Webdesigner!
Werden Tabellen zu Layoutzwecken missbraucht? Tabellen mit ihrer Aufteilung in Spalten und Zeilen sind ein wunderbares Werkzeug... um eben tabellarische Daten wie Reisepläne, Preislisten usw. darzustellen. Und das ist auch alles! Leider verwenden viele selbst ernannte Webdesigner immer noch blinde Tabellen (d.h. ohne Rahmen und Gitternetzlinien), um damit das Aussehen ihrer Webseiten zu gestalten. Doch Tabellenlayout bläht unnötigerweise den Quelltext einer Webseite: Dieser wird dadurch schwer zu lesen, zu pflegen und bei Bedarf zu erweitern.
Mit folgendem Stück Code zum Kopieren und Einfügen in die Adresszeile Ihres Browsers erkennen Sie, ob auf einer Webseite solche »versteckten« Tabellen eingesetzt werden:
Diesen Test können Sie mit den weiter unten verlinkten »original anonymisierten Agenturseiten« durchführen!
Lässt sich die Schrift skalieren? Zwar verliert dieser Prüfpunkt angesichts moderner Browser, die alle Schriftmaßeinheiten skalieren, etwas an Bedeutung. Doch einer tanzt bis einschließlich zu seiner Version 7 aus der Reihe... und leider ist er immer noch der Meistbenutzte: Der Internet Explorer skaliert keine Schriften, deren Größe in der Einheit »px« (Pixel) definiert wurde.
Wenn Sie also mit dem Microsoft Internet Explorer die Webseiten des Anbieters/der Agentur aufrufen, lässt sich die Schriftgröße über die entsprechende Bedienmöglichkeit des Browsers (Menü »Ansicht«, Option »Schriftgrad«) vergrößern oder verkleinern? Ist dies nicht der Fall, dann ist der Anbieter/die Agentur nicht in der Lage, benutzerfreundlich zu arbeiten!
Meine Kontaktaufnahmen mit verschiedenen Agenturen und kommerziellen Anbietern entstanden nicht aus dem Wunsch,
einen professionellen Internetauftritt zu kaufen – den ich mir selber zusammenbauen kann –
sondern weil ich einen guten Job in einem mich faszinierenden Bereich suchte.
Ich war also Bittsteller und wollte zwei Sachen von meinen Ansprechpartnern: nämlich den interessanten Job und dessen Entlohnung.
Einige Stellenanzeigen verlangten vom Bewerber, dass diese beispielsweise »das Wort ›Usability‹ erfunden« haben oder ein hohes Designverständnis für das WWW »mit Ziel bester ›Usability‹ (Benutzerfreundlichkeit)« mitbringen. Diese Voraussetzungen sollten für einen modernen Webdesigner selbstverständlich sein, weswegen ich mit großem Interesse die Websites der inserierenden Unternehmen besuchte.
Doch siehe da, den Anforderungen, welche diese Agenturen an ihre künftige Mitarbeiter stellen, sind sie selbst entweder nicht gewachsen – oder sie scheren sich wenig bis gar nicht darum. Die Webseiten missachten nicht nur die Standards des W3C, sondern auch wesentliche Punkte der benutzerfreundlichen Gestaltung. Zudem bestehen die Seiten meistens aus blinden Tabellen, unsichtbaren Graphiken oder Leerzeichen als Abstandhalter und zeugen somit von einer längst überholten Arbeitsweise. CSS scheint zwar nicht gänzlich unbekannt zu sein, wird jedoch vollkommen inkonsequent und ungenügend eingesetzt.
Allesamt sind die Seiten alles andere als benutzerfreundlich orientiert – die Anbieter haben also keinesfalls »das Wort Usability erfunden«. Nachfolgend gebe ich Ihnen die Gelegenheit, sich von dieser Kritik zu überzeugen, in dem ich Ihnen eine kleine Auswahl an anonymisierte Agentur-Seiten anbiete. Anonymisiert deswegen, weil es absolut nicht meine Absicht ist, irgendjemandem oder irgendeinem Unternehmen durch meine Kritik zu schaden: So wurden sämtliche Namen, Telefonnummern und E-Mail-Adressen geändert, Grafiken neu erstellt, manchmal wurde eine andere Farbkombination gewählt. Lediglich der Quelltext an sich ist gleich geblieben, denn schließlich will ich ja etwas zeigen.
Als Vergleichsmöglichkeit finden Sie immer einen standardkonformen und in vielen Punkten benutzerfreundlicheren Nachbau der Seite. In »weiteren Erläuterungen« werden einige Fehler analysiert und erklärt.
Vergleich 1:
Vergleich 2:
Vergleich 3:
Dieser dritte und vorerst letzte Vergleich unterscheidet sich in zwei wesentlichen Punkten von den zwei Vorhergehenden:
Auf ihrer Website bezeichnet diese Agentur »Barrierefreiheit« als ihre »Spezialität« und notiert dazu, dass barrierefreie Webseiten nicht nur für Behinderte, sondern für jeden Nutzer im vollen Umfang nutzbar seien. Letzteres ist zwar richtig, doch nimmt die Agentur »Barrierefreiheit als Spezialität« allen Anschein nach nicht sehr wörtlich: Aus ihrem großen Portfolio bestand heute, 17.10.2008, keine Einzige der von mir rein zufällig getesteten Auftragsseiten die Validitätsprüfung! Dabei ist Standardkonformität eine wichtige Voraussetzung für eine barrierefreie Webseite. Die ^Webkrauts ^schreiben dazu:
Barrierefreie Seiten müssen immer standardkonform sein
Wie schon bei den anderen zwei Agenturen mit dem Schlagwort »Usability/Benutzerfreundlichkeit«, auch hier also wieder nichts als Worthülsen, die nur dazu notiert worden sind, um Sie als Kunden zu locken! Wenn Sie bis hierher gelesen haben, werden Sie sich hoffentlich nicht mehr von solchen Werbebotschaften blenden lassen, denn Sie wissen jetzt, wie Sie diese Slogans auf ihren Wahrheitsgehalt überprüfen können!
Mehr zu diesem Vergleich entnehmen Sie bitte den »weiteren Erläuterungen«.
...der Unterschied zwischen Website und Webseite?
Der englische Begriff »site« (Ort, Örtlichkeit) führt durch seine Klangähnlichkeit mit dem deutschen Wort Seite (im englischen dagegen: »page«) oft zu Verwechslungen. Während eine »Webseite« eine einzelne Seite wie diese, die Sie jetzt in Ihrem Browser lesen, bezeichnet, werden unter dem Begriff »Website« alle Webseiten, Dateien und Ressourcen, die unter einer bestimmten Domain zu erreichen sind. Siehe auch ^Wikipedia: Website.
(X)HTML?
HTML steht für Hypertext Markup Language (Hypertext-Auszeichnungsprache) und stellt dem darstellenden Programm (i.d.R. dem Browser) die notwendigen Informationen zur Anzeige eines HTML-Dokuments zur Verfügung. So ist ^HTML keine Programmiersprache, denn sie enthält keine Befehle, sondern lediglich Anweisungen für das anzeigende Programm, in etwa so: »Hier ist eine Überschrift, hier ein Absatz, da kommt eine Tabelle, dort ein Bild«.
Das X in ^XHTML bedeutet »extensible« (erweiterbar) und steht für eine Neudefinition von HTML mit Hilfe von ^XML (Extensible Markup Language).
CSS?
Dieses Akronym ist die Kurzform für Cascading Style Sheets. Stylesheets ergänzen HMTL, indem sie Formateigenschaften definieren. Im modernen Webdesign, das stets Markup und Design (Inhaltsauszeichnung und Darstellung) strikt trennen sollte, übernimmt CSS die Aufgabe, die Elemente zu formatieren: z.B. kann angegeben werden, dass eine Überschrift in roter Farbe angezeigt, ein Textabsatz mit einer Hintergrundfarbe hinterlegt werden soll... u.v.m.
Was mit Cascading Style Sheets alles möglich ist, beweist der ^css Zen Garden: ein einziger, gleich bleibender HTML-Quelltext führt durch jeweils eine andere CSS-Datei zu einer an Vielfalt schier unendlichen, blühenden »Layout-Landschaft«.
JavaScript?
JavaScript, das mit ^Java nicht verwechselt werden sollte, ist eine Programmiersprache (Skriptsprache). Sie wird fast ausschließlich in Webbrowsern eingesetzt: JavaScript erlaubt, etwas Dynamik in ein ansonsten starres Dokument einzubringen. So lassen sich mit Hilfe von JavaScript diverse Effekte realisieren, wie Bilder oder weitere Elemente im Dokument auf Klick oder beim Drüberfahren mit der Maus austauschen, Interaktivität, usw.
Im modernen Webdesign sollte JavaScript stets als Möglichkeit eingesetzt werden, den Seitenbesuchern zusätzlichen Komfort anzubieten, doch das Abrufen wichtiger Informationen sollte nicht davon abhängig sein. JavaScript wird in Ihrem Browser ausgeführt, d.h. auf Ihrem Computer, während oder nachdem die Webseite vollständig geladen wurde.
Usability/Benutzerfreundlichkeit?
Als benutzerfreundlich wird ein System bezeichnet, das seinen Nutzern höchstmögliche Qualität in puncto Bedienung bietet. So wäre ein Fahrzeug, dessen Kombischalter zum Blinken, Lichtanschalten, Scheibenwischer-Betätigen rechts neben dem Beifahrersitz montiert wäre, alles andere als »benutzerfreundlich«!
Aufs Webdesign übertragen bedeutet »Usability« die Aufgabe, Surf-, Seh- und Bediengewohnheiten der Nutzer (Besucher der Webseite) zu respektieren und die Webseiten dementsprechend zu gestalten. Mehr dazu im Abschnitt ^Web-Usability auf Wikipedia.
Barrierefreiheit?
Barrierefreiheit kann in gewissem Maße als Steigerung der Benutzerfreundlichkeit verstanden werden: das bereits benutzerfreundliche System wird so optimiert, dass auch Menschen mit Behinderungen das System bedienen können. Webseiten sind barrierefrei, wenn z.B. auch blinde Mitmenschen problemlos die bereitgestellten Informationen aufrufen können (von einem Screen Reader vorlesen lassen) oder Menschen mit motorischen Störungen die Navigation beispielsweise über einfache Tastatureingaben bedienen können. Auch hier stellt Wikipedia ^einen umfangreichen Artikel zur Verfügung.
Haben Sie wirklich alles bis hierhin gelesen? Wenn ja, dann gehören Sie wie ich zur seltsamen Gattung der Vielleser! Doch sollten Sie nicht den Fehler begehen, dieses Verhalten auf die künftigen Besucher Ihrer Webseiten zu projizieren.
Abgesehen davon, dass immer weniger Menschen bereit sind, viel zu lesen, ist Lesen am Bildschirm für viele sehr anstrengend. Überlegen Sie sich also, wie und wo Sie Ihre Informationen platzieren möchten. Die Erläuterung Ihrer »Firmenphilosophie« – übrigens eine abartige Wortkonstruktion – oder ein Artikel über die Entstehungsgeschichte Ihrer Firma sollten nicht gleich die erste Seite füllen.
Vielmehr stellen Sie kurz, knapp aber prägnant vor, was Sie verkaufen oder produzieren – und verlagern für den Besucher eher weniger interessante Texte auf Unterseiten: Wer es lesen will, wird es auch tun. Wenn nicht, ist es nicht so tragisch, solange der Besucher sich bereits einen Überblick über Ihre Produkte oder Dienstleistungen hat verschaffen können!
...sollten Sie sich am Anfang ein bisschen dumm stellen. Verraten Sie nicht sofort, so es denn der Fall sein sollte, dass Sie sich mit dem Medium bereits auskennen. Lassen Sie sich von Ihrem Gesprächspartner erklären, was das WWW ist und wie es funktioniert, worauf geachtet werden soll usw. Fragen Sie ruhig: »Was bedeutet denn ›Usability‹?«, »Was versteht man eigentlich unter ›barrierefrei‹?«. An den Antworten werden Sie nun erkennen können, ob Ihr Gegenüber weiß, wovon er spricht.
Auch wird ein guter Webdesigner möglicherweise nicht alle Ihre Vorstellungen gut heißen. Seien Sie im Gegenteil misstrauisch, wenn Ihr Gesprächspartner zu allem, was Sie vorschlagen, mit »Ja, machen wir« antwortet. Denn wenn technisch vieles realisierbar ist, bedeutet es lange nicht, dass es im WWW auch sinnvoll ist.
Sie suchen einen schlauen Webdesigner? Dann besuchen Sie: