SEO- und Internet-News by TechDivision
Top-Aktuelle News, Trends und Gerüchte aus den Bereichen Suchmaschinenoptimierung (SEO), Online-Marketing, TYPO3 und Webdesign.

Verschiedene Layouts für Startseite und Unterseiten?

geschrieben von Marion Engel am 30. März 2010 um 16:49 Uhr

Betrachtet man Themes für Shops oder auch fertige Shops, so stellt man fest, dass hier oft unterschiedliche Layouts für die Startseite und die Unterseiten verwendet werden. Auf der Startseite dominieren große Teaser-Bilder, die hauptsächlich Lust auf’s Einkaufen machen. Und auch in “normalen” Internet-Auftritten findet man das Phänomen, dass die Startseite zumindest ein wenig anders gestaltet ist als die Unterseiten.
Stellt sich nun die Frage, ob das sinnvoll ist und ob es dafür vielleicht ein paar Regeln oder Tipps gibt.

Verschiedene Layouts für Startseite und Unterseiten? weiterlesen…

Verpassen Sie keinen Beitrag und abonnieren Sie unseren RSS-Feed.

3 Kommentare

Buchvorstellung: Fortgeschrittene CSS-Techniken von Chao und Rudel

geschrieben von Marion Engel am 16. März 2010 um 13:04 Uhr

Auch dieses Buch für fortgeschrittene CSS-Anwender ist Anfang 2010 in einer überarbeiteten und erweiterten zweiten Auflage erschienen. Grund genug, auch dieses Werk ein wenig genauer unter die Lupe zu nehmen und vorzustellen.

Buchvorstellung: Fortgeschrittene CSS-Techniken von Chao und Rudel weiterlesen…

2 Kommentare

Buchvorstellung: Modernes Webdesign von M. Hoffmann

geschrieben von Marion Engel am 9. März 2010 um 11:05 Uhr

Das Buch “Modernes Webdesign”, Gestaltungsprinzipien, Webstandards, Praxis von Manuela Hoffmann ist Anfang 2010 in der 2. Auflage bei Galileo Design erschienen. Man braucht schon seine Zeit, bis man die 392 Seiten durchgearbeitet hat – aber es lohnt sich auf jeden Fall, und es lohnt sich auch für eine sehr große Zielgruppe.

Buchvorstellung: Modernes Webdesign von M. Hoffmann weiterlesen…

kein Kommentar

Fehler bei Webseitenentwicklung und Webdesign

geschrieben von Marion Engel am 15. Juni 2009 um 8:44 Uhr

Wer viel im Web unterwegs ist und sich zumindest ein wenig auskennt, sieht viele Dinge, die er eigentlich nicht sehen möchte. Die Masse derartiger “Entdeckungen” hat mich dazu bewogen, mal wieder ein kleines “Gruselkabinett” anzulegen.

Denn aus Fehlern lernt man ja bekanntlich am meisten und sieht deutlich, was man unterlassen sollte. Diverse graue Striche sind natürlich im Original nicht zu sehen. Diese habe ich nur eingefügt, um die Screenshots so weit wie möglich zu anonymisieren, weil ich natürlich keinen Seitenbetreiber oder Webmaster persönlich angreifen oder an den Pranger stellen möchten. Fehler bei Webseitenentwicklung und Webdesign weiterlesen…

5 Kommentare

Vorteile der Web-Entwicklung vom Profi

geschrieben von Marion Engel am 24. März 2009 um 14:28 Uhr

Natürlich soll und kann man nichts verallgemeinern. Und was man hier und da mal erlebt, muss in anderen ähnlichen Situationen nicht genauso eintreten. Aber gewisse Tendenzen lassen sich im Laufe der Zeit erkennen, und um die soll es heute gehen.

An jeder Ecke werden WYSIWYG-Editoren oder Web-Baukästen angeboten, die suggerieren, dass der Aufbau einer Website ein Kinderspiel ist, für das keinerlei Programmierkenntnisse erforderlich sind. Das ist zwar nicht ganz falsch, aaaaber…. Dabei wird die Qualität des Ergebnisses außer Acht gelassen. Tools, so gut sie sein mögen, können die menschliche Arbeit und Intelligenz nur bedingt ersetzen.

Der Laie, der sich in der Webentwicklung nur rudimentär auskennt, ist allerdings nicht in der Lage, zwischen qualitativ hochwertigen und eher schlechten Seiten  zu unterscheiden. Und so bewertet er Webseiten eher nach optischen Aspekten, denn von Usability, W3C-Standards oder Suchmaschinenoptimierung hat er ja noch nichts gehört.

Schaut man sich beispielsweise Webseiten von Vereinen an, sieht man ganz gut, was ich meine. Von Frames bis zu Content Management Systemen gibt es dort alles. Große Vereine können es sich mitunter sogar leisten, auf einen externen Dienstleister zuzugreifen. Andere können sich nur Seiten aus einem Baukasten leisten oder verzichten ganz auf einen Internet-Aufritt.

Glückliche Vereine finden jemanden in den eigenen Reihen, der sich mit der Materie auskennt und zum Nulltarif hochwertige Webseiten erstellt. Ob diese Vereine allerdings von ihrem Glück wissen, ist eine andere Frage. Ich habe es leider schon oft erlebt und auch von anderen gehört, dass die Arbeit des Web-Masters viel zu wenig geschätzt wird – weil die Qualität von den Laien eben nicht richtig bewertet werden kann.
Und wenn persönliche Befindlichkeiten dann auch noch wichtiger als die objektive Beurteilung eines Arbeitsergebnisses werden, ist der Absturz in die Mittelmäßigkeit nicht mehr zu verhindern. Den Vogel hat kürzlich ein Verein abgeschossen, der einen optisch ansprechende, W3C-konformen und suchmaschinenoptimierten Internet-Auftritt wegen dieser persönlichen Befindlichkeiten aus dem Netz genommen hat und nun mit einer Uralt-Version eines WYSIWIG-Editors drei rudimentäre und einige leere Seiten anbietet. Tabellenlayout, Formatierungen im html-Code, keine Fehlerfreiheit, Baustellenseiten und fehlende Umleitungen indizierter Seiten – für Profis absolute NO-GOs. Aber der Laie hat scheinbar wenigstens das Glück, dass er nicht merkt, wie er seinem Verein selber schadet.

Wer würde denn im realen Leben auf die Idee kommen, seine Schuhe zum Besohlen zum Metzger zu bringen? Und wer würde zum Maler gehen, wenn er ein Stück Sahnetorte braucht? Niemand, oder?

Was natürlich nicht heißt, dass der Maler nicht ein begnadeter Hobby-Bäcker sein kann, oder dass der Metzger handwerklich sehr geschickt ist. Aber wer sich in seiner Berufsausbildung und in der täglichen Praxis mit einer Materie beschäftigt, muss sich zwangsläufig besser auskennen als jemand, dem nur die Freizeit dafür verbleibt.

Behält man diese Aussagen im Hinterkopf, ist man sicher besser gerüstet, die verschiedenen Verlockungen im Web realistisch einzuschätzen.
Bis beispielsweise ein Online-Shop gut funktioniert, dauert es zwangsläufig eine gewisse Zeit. Und auch wenn man beispielsweise Magento als Grundlage auswählt, sind ein paar Mausklicks leider nicht ausreichend, um den Rubel rollen zu sehen.

Und selbst ein Blog hat so seine Tücken – wie ich gestern feststellen musste. Wunderbare Templates stehen da zur Verfügung, für die es im Backend eine Vielzahl an Konfigurationsmöglichkeiten gibt, die überwiegend auch für den Laien verständlich und nutzbar sind. Diese Möglichkeit wird aber mit erheblichen Nachteilen im Code erkauft. Denn dieser enthält in dem von mir betrachteten Beispiel unendlich viele Codezeilen zur Formatierung, die eigentlich in ein Stylesheet gehören. Dort können sie aber nicht stehen, weil sie php-Befehle enthalten, mit denen offenbar die Konfiguration ausgelesen wird. Bis die Spider der Suchmaschinen dann zum wirklichen Text des Blogbeitrags kommen, ist ihnen wahrscheinlich schon der Appetit vergangen.

Wenn es sich “nur” um einen Blog für die Freunde handelt, ist das noch nicht so schlimm, aber wenn ein Laie diese Vorlage verwendet, weil er ja gehört hat, dass Blogs bei den Suchmaschinen so hoch im Kurs stehen, wird er möglicherweise eine Enttäuschung erleben.

Also: Augen auf im Web, Köpfen einschalten, dies und das kritisch hinterfragen und Partner suchen, die sich wirklich auskennen.

3 Kommentare

Hausaufgaben für Web-Entwickler

geschrieben von Marion Engel am 1. Dezember 2008 um 11:38 Uhr

Ich bin ja logischerweise beruflich und derzeit auch privat viel im Web unterwegs. Und das, was mir dabei negativ aufgefallen ist, möchte ich in Form von Hausaufgabenlisten für Webmaster vorstellen. Der erste Teil befasst sich mit der Entwicklung.

Gewohnheiten der Benutzer beachten

Die Benutzer entwickeln im Web gewisse Gewohnheiten, weil viele Features auf vielen Seiten vorkommen. Und mit der Zeit entwickelt sich dabei ein Quasi-Standard, der dann immer vorausgesetzt und erwartet wird. Wenn ich also ein Kontaktformular ausfülle und abschicke, erwarte ich eine Bestätigungsseite, die mir zeigt, dass das Absenden funktioniert hat. Wird mir stattdessen das Kontaktformular wieder in leerer Form angezeigt, bin ich zumindest unsicher, ob meine Nachricht tatsächlich versendet wurde. Möglicherweise probiere ich es dann erneut, so dass der Empfänger unter Umständen doppelte Mails bekommt. Wenn er wenigstens so helle ist und schnell antwortet, löst sich das Rätsel unter Umständen schnell. Ansonsten könnte aber auch hier eine mögliche Kundenbeziehung schon im Keim erstickt werden.
Bei 99 von 100 Foren kann man sich durch Eingabe seiner Daten registrieren und nach Bestätigung der Double-Opt-In-Mail sofort im Forum aktiv werden. Bei einem Forum kommt man ebenfalls zum bekannten Registrierungsdialog, allerdings nicht weiter. Denn kein Benutzername, den man eingibt, wird akzeptiert. Entweder ist er schon vorhanden oder vom Administrator gesperrt. Dass in diesem Forum die Registrierung nur per Mail an den Admin funktioniert, steht zwar irgendwo in den Regeln. Die liest man aber nicht, wenn man sich grundsätzlich in Foren auskennt, keine bösen Absichten hat und das aus den 99 anderen Foren gelernte nun als allgemeingültig voraussetzt.

Kompatibilität in allen gängigen Browsern prüfen

Es ist immer wieder erstaunlich, wie viele Websites es noch gibt, die ausschließlich für den Internet Explorer optimiert sind. Wann immer mir auf einer Webseite etwas spanisch vorkommt, sei es vom Layout oder wegen mangelnder Funktionalität, probiere ich das Ganze inzwischen automatisch im Internet Explorer aus. Und in vielen Fällen zeigt sich dort ein ganz anderes Bild: Die Seite hat plötzlich eine Kopfzeile, der Login-Bereich funktioniert oder beim Layout ist plötzlich alles in Ordnung. Leider kann man es als noch so gewissenhafter Web-Programmierer nicht verhindern, dass bei gewissen Browsern Abstriche gemacht werden müssen. Aber neben dem Internet Explorer muss zumindest auch im Firefox die volle Funktionalität gewährleistet sein.

Mailto-Links sinnvoll verwenden

Immer wieder klickt man auf Links und wundert sich, warum sich da nichts tut. Nach einer Weile stellt man dann erst fest, dass es sich um einen mailto-Link handelt und im Hintergrund ein Mailfenster geöffnet wird. Das dauert natürlich etwas länger, wenn das lokale Mailprogramm beim Klick geschlossen war.
Wenn ich in einer Navigation auf “Kontakt” klicke, erwarte ich eine eigene Seite, auf der die Kontaktdaten und ein Kontaktformular zu finden sind. Innerhalb der Kontaktdaten darf dann eine Mailadresse stehen, die mit mailto verlinkt ist. Wer mit mehreren Postfächern arbeitet, und nicht alle Mails von der Mailadresse aus schicken möchte, die im lokal installierten Mailprogramm eingestellt ist, hat damit zwar auch nicht die volle Freude, aber dafür kann der Webmaster ja wirklich nichts.
Dass natürlich Mailto-Links, wenn sie nicht z.B. mit TYPO3 gesetzt und gleich verschlüsselt werden, eine potenzielle Spam-Quelle darstellen, sollte ein weiteres Argument gegen die übermäßige Verwendung sein.

Diese Hausaufgaben sollten erledigt sein, bevor die Seite online gehen. Aber damit endet die Arbeit nicht. Welche Aufgaben bei der regelmäßigen Pflege der Seiten anfallen, folgt in einem separaten Beitrag.

1 Kommentar

Verstöße gegen die Regeln der Web-Usability

geschrieben von Marion Engel am 4. Juli 2008 um 9:39 Uhr

Während auf der einen Seite mit Web 2.0 die Web-Sites immer ansprechender und die Online-Shops immer benutzerfreundlicher werden, findet man auf der anderen Seite beim täglichen Stöbern im Web immer wieder krasse Verstöße gegen die Regeln der Web-Usability. Daas ein oder andere müsste einem ja fast schon der Hausverstand verbieten. Aber die Menschen sind verschieden, die Geschmäcker unterscheiden sich ebenso wie die Dinge, auf die der einzelne Wert legt.

Auf privaten Web-Sites kann ja noch jeder machen was er will, aber auf Firmen-Sites sollte man sich an gewisse Konventionen halten. Es sei denn, man möchte keine neuen Kunden gewinnen oder bestehende verlieren. Hier nun ein paar Usability-Regeln an Hand von Negativbeispielen. Sollte einer meiner Leser seine Site erkennen – nichts für Ungut. Nun wissen Sie wenigstens, wo dringender Verbesserungsbedarf besteht.

Konsistenz und Gewohnheit
Innerhalb einer Website sollte Konsistenz herrschen, d.h. gleiche Elemente müssen auf jeder Seite an der gleichen Stelle stehen. Dies gilt ganz besonders für die Navigation, die zu den wichtigsten Orientierungshilfen des Benutzers zählt. Sie muss immer an der gleichen Stelle stehen und immer die gleichen Inhalte haben. Und so “hip und cool” das Web 2.0 auch sein mag, die Benutzer sind an gewisse Konventionen gewöhnt. Manche Elemente wollen sie einfach auf jeder Web-Site in gleicher Form wieder finden. Das folgende Beispiel hat hier einiges zu bieten. Das linke Bild zeigt die Navigationsleiste der Startseite, das rechte Bild die einer der Unterseiten:

Was fällt auf?

• Die Navigationssymbole sind ungewöhnlich. Die Idee, für eine Hausverwaltung Klingelknöpfe als Navigationshintergrund zu verwenden, ist zwar nicht sooo schlecht, aber etliche Benutzer werden damit Probleme haben. Der Link befindet sich nämlich tatsächlich nur hinter dem Knopf und nicht auf dem gesamten Kästchen. Benutzer, die mit der Maus nicht ganz zielsicher sind und auch nicht wissen, dass sich ein Link nur dort verbirgt, wo der Cursor zur Hand wird, haben Schwierigkeiten, die Unterseiten aufzurufen.
• grafisch ist natürlich einiges im Argen, von Texten, die über die Flächen ragen bis zum spiegelverkehrten unteren Bild
• Die Navigation ändert sich auf den Unterseiten. Es scheint mir so, dass die Navigation hierarchisch aufgebaut ist. Wenn ich also den 3. Link von oben auf der Startseite anklicke, werden der 1. und der 2. Link von der Startseite weggelassen.
• Es gibt keinen sichtbare Navigation zurück auf die Startseite. Dass sich dieser hinter “Übersicht” verbirgt, wird nur per Zufall klar.
• Der Navigationspunkt “Kontakt” verändert sich als einziger beim Mouse-Over…und dann gleich sooo schön . Warum ist das so? Möglicherweise, weil der Link die Website verlässt und sich ein Mailfenster öffnet. Aber wirklich intuitiv ist es nicht.

Schrift und Hintergrund
Schwarzer Text auf weißem Hintergrund, so wie es das Auge von gedruckten Werken gewöhnt ist, sollte auch im Web vorherrschen. Und wenn schwarz nicht gefällt, dann sollte es wenigstens eine dunkle Farbe sein, so dass ein ausreichend hoher Kontrast zum Hintergrund besteht. Grelle Schriften sind ebenso tabu wie grelle, dominante oder unruhige Hintergründe. Auch bewegter Text ist ein Relikt aus der Vergangenheit. Heute ist das Angebot an Waren und Dienstleistungen im Web so groß, dass die Benutzer unkomfortable Sites sehr schnell verlassen. Der erste Eindruck ist im Web überaus entscheidend, denn der Benutzer nimmt sich weniger als eine halbe Minute Zeit, um eine Seite zu betrachten und daraus auf den Wert der ganzen Site zu schließen.
Womit vergrault man seine Besucher also ziemlich sicher? Mit folgenden Kombinationen von Schrift und Hintergrund:

Menüs
Wenn es um die Gestaltung der Navigation geht, sind einige Vorüberlegungen nötig. Denn Menüs, die aufklappen, sollten nicht mehr als zwei Ebenen aufweisen. Wenn es gar nicht anders geht, kann im Ausnahmefall mal eine 3. Ebene sein. Aber dann muss wirklich Schluß sein, weil sich die Benutzer einfach nicht mehr zurechtfinden werden. Bei ausklappenden Menüs ist zudem ein gewisses Geschick mit der Maus erforderlich, um in die nächste Ebene zu gelangen. Das bedeutet umgekehrt, dass die Menüs hier eine gewisse Toleranz aufweisen sollten. Bei seitlich ausklappenden Menüs muss man auch bedenken, dass sie sich über den Inhalt legen. Dieser ist dann nicht mehr sichtbar, und andersherum kann der Hintergrund auch die Lesbarkeit des Menüs beeinträchtigen.
Aber auch in diesem Bereich gibt es Sachen, die es eigentlich nicht geben sollte:

Das soll für heute zum Thema Usability reichen. Aber zu diesem fast unerschöpflichen Thema gibt es demnächt sicher noch weitere Beiträge.

3 Kommentare

Anforderungsanalyse für beste Usability

geschrieben von Marion Engel am 27. Juni 2008 um 9:34 Uhr

Der Relaunch einer Web-Site steht an. Ein paar Ideen und Wünsche bringt unser Auftraggeber sicher mit, aber dann ist es die Aufgabe der Internet-Agentur, eine sorgfältige Anforderungsanalyse durchzuführen und ein schlüssiges, kundenfreundliches Konzept für die neue Site zu entwickeln. Wie geht man dabei am besten vor?

Die Beteiligten
Zunächst sollte man sich verinnerlichen, dass es mindestens drei beteiligte Parteien gibt:

• den Auftraggeber
• die Agentur
• die aktuellen und potenziellen Kunden des Auftraggebers

Mehr Parteien kann es geben, wenn die genannten Gruppen weiter unterteilt werden müssen. So kann es beim Auftraggeber mehrere Stakeholder oder auch mehrere Kundensegemente geben, die unterschiedliche Anforderungen haben.
Auf jeden Fall sind die Kunden des Auftraggebers die wichtigsten. Zwar sollte die neue Site dem Auftraggeber gefallen, und auch die Agentur sollte sich wohl damit fühlen. Aber am allerwichtigsten ist, dass sie den Kunden des Auftraggebers gefällt und dass sie dort die vom Auftraggeber gewünschten Aktionen durchführen. Also müssen wir von der Agentur in ein anderes Paar Schuhe steigen, um hier ein optimales Ergebnis zu erzeugen. Welche Schuhe stehen da zur Auswahl?

Auftraggeber im B2C-Bereich
Nehmen wir zunächst den etwas geläufigeren Fall an, dass der Auftraggeber (immer aus Sicht der Agentur) im B2C-Bereich tätig ist, also an Endverbraucher verkauft oder diese bedient. Dann kann es für mich als Autor der Anforderungsanalyse und des Konzepts drei Unterfälle geben:
Ich bin Kunde
In diesem einfachsten Fall bin ich tatsächlich schon Konsument der Produkte oder Dienstleistungen des Auftraggebers. Ich kenne das Angebot, kenne die Anwendungsfälle, habe meine Meinung dazu und auch Wünsche an die Präsentation im Web. Dann kann ich die Site erstmal so konzipieren, wie sie mir gefallen würde. Vielleicht habe ich auch schon mit Verwandten und Freunden über den Auftraggeber und sein Angebot gesprochen und kann deren Meinung ebenfalls berücksichtigen. Anschließend sollte ich dennoch kurz aus meinen Schuhen heraustreten und überlegen, ob es andere Kundensegmente gibt, die möglicherweise andere Bedürfnisse haben, die auch berücksichtigt werden sollten.
Angenommen, die Website ist für ein Busunternehmen. Dann bevorzugen berufstätige Kunden sicher die Online-Buchung, während ältere Menschen sich vielleicht im Web vorab informieren, dann aber doch lieber telefonisch oder sogar persönlich buchen. Dazu sollten ihnen die Kontaktdaten und die Dienstzeiten mitgeteilt werden.

Ich könnte Kunde werden
Im zweiten Fall bin ich zwar privat noch nicht Kunde des Auftraggebers, könnte es aber werden. Da stellt sich die Frage, was passieren müsste, damit ich diesen Schritt tue, also welche Informationen und Angebote ich bräuchte, um zu kaufen oder zu beauftragen. Danach ist auch hier wieder der Schritt aus den Schuhen ratsam, mit dem man überlegt, wie andere Menschen in der gleichen Situation denken könnten. Und als nächstes muss ich für das Konzept hier virtuell in die Schuhe der aktuellen Kunden steigen und mir vergegenwärtigen, welche Anforderungen sie an die neue Website stellen würden.

Ich kann nie Kunde werden
Der schwierigste Fall ist der, dass ich ein Konzept für eine Website entwickeln muss, die ich selber nie nutzen kann. Auch wenn nichts unmöglich ist, wäre es wohl eher unwahrscheinlich, dass ich nochmal in die “Verlegenheit” komme, eine Kinderseite selber zu nutzen…. Aber auch hier gibt es natürlich Mittel und Wege, zum Ziel zu kommen. Erstens natürlich, in die Schuhe der Kunden zu wechseln und die Analyse aus deren Blickwinkel durchzuführen. Zweitens aber auch, zu überlegen, ob ich nicht indirekt Kunde werden könnte. Denn auch wenn ich selber und alleine keine Kinderseite nutzen würde, könnte ich dennoch zusammen mit einem Kind tun. Oder vielleicht kenne ich jemanden, der mir als potenzieller Kunde erscheint und dem ich die Site empfehlen würde, wenn sie denn gut gemacht ist. Und über solche “Umwege” komme ich bestimmt zum Ziel, ein gutes Konzept für die neue Website zu erstellen.

Auftraggeber im B2B-Bereich
Dieser Fall hat viel mit dem letztgenannten Fall aus dem B2C-Bereich zu tun. Hier ist es wichtig, sich zunächst in die Welt des Auftraggebers einzulesen und einzudenken. Dabei helfen vielleicht die Inhalte der bisherigen Website, und sicher stellt der Auftraggeber gerne auch weitere Dokumente zur Verfügung, damit die Konzeptionierer ein Gespür für seine Produkte und sein Angebot und somit auch die Situation seiner Kunden bekommen. Und manchmal ist es auch gar nicht schlecht, wenn ein Externer Fragen stellt, die in der internen Betriebsblindheit schon längst untergegangen sind. Denn solche Fragen sind keineswegs dumme Fragen, sondern regen auch die Insider manchmal zu neuen Gedankengängen an, die neue Aspekte und Ideen auf den Tisch bringen können.

Noch was zur Zielgruppe
Neben der Ermittlung der Zielgruppe sollte man sich für das Konzept auch Gedanken machen, in welcher Situation die Besucher eine Website aufsuchen. Denn wer dies zum Zweck der Unterhaltung tut, hat ganz andere Erwartungen als jemand, der ein akutes Problem hat, auf das er dringend eine Lösung sucht. Wenn das Wasser beispielsweise nach einem Rohrbruch schon von der Decke rinnt, möchte sicher niemand die Firmengeschichte des Installateurs lesen und Videos seiner Referenzen betrachten, sondern nur schnell herausfinden, ob es eine 24-Stunden-Hotline gibt.

Fazit
Nicht für uns, die Agentur, konzipieren und bauen wir Websites, sondern für unseren Auftraggeber und dessen Kunden. Und deren Bedürfnisse müssen immer individuell analysiert und befriedigt werden. Wer bereits ist, die Schuhe zu wechseln und auch mal quer zu denken, der wird sicher mit Erfolg und Kundenzufriedenheit auf allen Seiten belohnt werden.

3 Kommentare

Barrierefreiheit: Tipps zur Umsetzung

geschrieben von Marion Engel am 9. Juni 2008 um 8:43 Uhr

Wie in meinem Einführungsbeitrag zur Barrierefreiheit versprochen, hier nun ein paar konkrete Tipps, wie man beim Design und bei der Programmierung von Web-Seiten zumindest einige Barrieren umgehen kann. Das Schöne daran ist, dass man mit einer Maßnahme gleich mehrere “Fliegen erschlagen” kann, dass es also mehrere Nutznießer und positive Effekte gibt.

Der erste Schritt auf dem Weg zur neuen Web-Site liegt darin, eine Seiten- und Navigationsstruktur zu erarbeiten. Hierbei gehen natürlich Usability und Barrierefreiheit Hand in Hand, denn eine schwer verständliche Struktur stellt ganz klar eine Barriere dar. Der Aufbau der Site muss logisch und klar strukturiert sein, und zwar nicht nur für den Firmen-Insider, sondern auch für den Besucher, der mit dem Portfolio oder der Firmen-Terminologie nicht auf Du und Du ist. Die Informationen sollten ihm häppchenweise angeboten werden, vom Allgemeinen zum Speziellen gehend. Der Benutzer sollte also zunächst abschätzen können, welche Informationen vorhanden sind. Dann hat er die Wahl, zu entscheiden, wo er im Detail weiterlesen möchte. Nach dieser Logik sollten beispielsweise in pdf-Dateien nur sehr spezielle Detailinformationen enthalten sein, die sich nicht in HTML darstellen lassen. Denn pdf-Dateien sind für Screenreader und somit Sehbehinderte Menschen nur sehr eingeschränkt zugänglich.

Einen guten Überblick bietet eine Sitemap, die für Menschen und auch Suchmaschinen zum Standardangebot gehören sollte. Je nach Zielgruppe, Thema und Seitenstruktur können auch spezielle Hilfeseiten nützlich sein. Ob sie nun Hinweise für die Benutzung der Seite enthalten oder häufig gestellte Fragen auf einen Blick beantworten – erlaubt ist alles, was die Benutzung erleichtert.

Im Rahmen der Strukturierung sollte man sich auch immer mal wieder den Spruch “Weniger ist mehr” zu Herzen nehmen, und weder die Seiten selber noch die Navigationspunkte überladen. Es gibt ja verschiedene Untersuchungen, wieviele optische Eindrücke Menschen auf einmal wahrnehmen können. Demnach sollte eine Navigation nicht mehr als 7 Unterpunkte aufweisen. Werden es wesentlich mehr, ist das ein Hinweis darauf, dass eine weitere Unterteilung sinnvoll ist.

Der nächste Schritt auf dem Weg zur neuen Website besteht in der Entwicklung des Layouts. Eine Regel sollte sich eigentlich von selbst verstehen, aber trotzdem findet man immer wieder Abweichungen davon: Gleiche Elemente sollten auf den unterschiedlichen Seiten immer gleich gestaltet werden, damit der Benutzer einmal erworbenes Wissen auf der gesamten Web-Site anwenden kann und sich nicht jedes Mal wieder neu orientieren muss.

Der Einsatz von Farben und die Farbwahl an sich sind ein komplexes Thema, über das sich trefflich streiten lässt, da ja auch die Geschmäcker verschieden sind. Klar ist, dass die Kontraste zwischen Hintergrund und Vordergrund ausreichend groß sein müssen. Dies ist ja auch ein wichtiges Kriterium für die Suchmaschinen, die durch die Messung des Kontrasts Black-Hat-SEOs ausschließen möchten, die den berühmten weißen Text auf weißem Grund verwenden, der nur von Suchmaschinen im Code gelesen, aber nicht von den menschlichen Besuchern erkannt werden kann.
Farbleitsysteme sind für normalsichtige Web-Surfer oftmals eine feine Sache. Allerdings sollte die Farbe nicht das einzige Mittel sein, das die Bedeutung trägt.

Sehr wichtig für eine Website sind natürlich auch die Texte und die dafür verwendete Sprache. Hier finden alle Seiten besondere Anerkennung, die eine klare und einfache Sprache aufweisen können. Selbst komplizierte Sachverhalte lassen sich einfach darstellen – wenn der Autor nur will. Denn bekanntermaßen muss sich beim Text immer einer anstrengen, entweder der Autor oder der Leser. Da aber gerade im Web jeder Leser die Wahl zwischen vielen verschiedenen Seiten hat, wird er sich nicht sehr lange mit einem schwer verständlichen Text plagen, sondern die Seite schnell verlassen.

Linktexte sollten immer sprechend und individuell sein. Enthält eine Seite mehrere Teaser-Texte mit den berühmten “mehr”-Links, so liest ein Screenreader natürlich immer nur diesen Text vor, und der bedauernswerte Benutzer verliert zwangsläufig den Überblick über die Links. Und auch die Suchmaschinen können mit “mehr” oder “weiterlesen” auch nicht wirklich viel anfangen, denn sie gehen davon aus, dass sie darüber zu einem Text zum Thema “mehr” oder “weiterlesen” kommen. Hier wird also wertvolle Link-Power verschenkt.
Ähnlich verhält es sich auch mit Bildern, die sowohl blinde Benutzer als auch Suchmaschinenspider nicht erkennen können. Deshalb sollte das Alt-Tag das beschreiben, was Normalsichtige auf dem Bild sehen und was sie dabei denken (sollen). Bilder, die keine Bedeutung tragen (z.B. Trennlinien), benötigen natürlich kein Alt-Tag und sollten auch keines bekommen, da dies den Vorlesefluss der Screenreader unnötig unterbrechen würde.

Und – last but not least – die Programmierung. Auch hier lassen sich einige Maßnahmen im Dienste der Barrierefreiheit für Menschen mit der Suchmaschinenoptimierung verbinden. An erster Stelle steht valider Code, Code also, der die Prüfung des W3C besteht, den Regeln entspricht und von allen Browsern ohne eigene Interpretationen angezeigt werden kann.
Bei der Programmierung ist ebenfalls wichtig, Gestaltung und Inhalte zu trennen, also nicht nur alle Formatierungen in CSS-Dateien auszulagern, sondern auch die Standardelemente wie <h1>, <h2> usw. zur Strukturierung zu verwenden. Denn nur so wissen Screenreader und Suchmaschinen, wo sie eine wichtige Überschrift finden, was ihnen bei individuellen div-Tags im Style Sheet nicht möglich ist.

Um schließlich den Benutzern die Freiheit zu geben, die Seite entsprechend ihrer Sehstärke zu skalieren, müssen alle Größenangaben relativ sein, also in % oder em und nicht in px. Und auch die Freiheit, den Lautsprecher abzuschalten, sollte nicht dazu führen, dass Warnungen untergehen. Wenn also auf der Webseite vor irgendwas gewarnt oder auf ein akutes Ereignis hingewiesen werden soll, muss dies sowohl akustisch als auch optisch erfolgen.

So schwierig ist es also nicht, zumindest barrierearme Webseiten zu erstellen, oder? Wer sich die Maximierung des Nutzens ihrer Kunden zum Ziel setzt und alles auch aus der Sicht seiner Kunden betrachtet, ist auf dem besten Weg zu einer barrierearmen Website mit hoher Usability.

2 Kommentare

Wer suchet, der findet…

geschrieben von Marion Engel am 6. Juni 2008 um 9:17 Uhr

Neja, wenn er ausdauernd und findig genug ist und wirklich großes Interesse daran hat, sein Ziel zu erreichen. Denn während der Kollege gestern Erotisches am Morgen erleben durfte, gab es bei mir eher Ernüchterndes am Morgen.

Es fing damit an, dass mein Virenscanner nach der länglichen internen Virenprüfung den Rechner doch nicht ausgeschaltet hat, obwohl er mir diese Option angeboten hat und ich auch das zugehörige Feld angekreuzt hatte. Is’ wie’s is, dachte ich mir, und vielleicht gar nicht so schlecht, denn beim Aufwachen kam mir eine Idee für die Gestaltung eines regenanfälligen Samstags, die ich kurz im Internet prüfen wollte.

Die Aufgabe für den (unfreiwilligen) Usability-Check lautete: “Finden Sie Informationen zum Knappenweg in Bad Häring.”
Die Frage, ob es nun www.bad-haering.at, www.badhaering.at oder www.haering.at sein würde, nahm mir der gute Google noch zuverlässig ab. Und dann? Willkommen auf einem großen Hintergrundbild mit Flash-Intro und einem kaputten Bild!
Gratulation, liebe Bad Häringer, zum ersten Schlecht-Zetterl auf dem nach oben offenen Schlecht-Zetterl-Stapel. Aber immerhin gibt es einen “Skip Intro” Link. Aber auch der beschleunigt die Sache leider nicht wirklich, zumal meine Internet-Verbindung momentan wohl noch von Frühjahrsmüdigkeit geplagt wird. Aber um auf dem Weg ins Büro nicht zu viel Zeit zu verlieren, gehe ich erstmal Zähne putzen. Und danach bin ich dann wirklich in Bad Häring…auf einer eher altbackenen Seite, die so gar nicht zur Einstiegsseite passen will. Aber egal, denn meine müden Augen sehen eine Link “Themenwanderungen”. Treffer, versenkt, Klick und ab.
Aber was passiert jetzt? Mein Firefox öffnet einen neuen Tab, obwohl ich doch ganz normal die linke Maustaste benutzt habe? Des Rätsels Lösung: Es war kein echter Navigationspunkt, sondern ein externer Link, der mich zur Site des Ferienlands Kufstein bringt.

Bis die Zielseite dann vollständig geladen ist, habe ich meinen Frühstückstisch gedeckt. Vielleicht hätte ich auch schon einen ersten Bissen nehmen sollen, als Stärkung für das bevorstehende Abenteuer – um nicht zu sagen die Schnitzeljagd durch die Ferienland-Site, bei der die Schnitzel fehlen….
Statt eines Deep-Links auf die Themenwanderungs-Seite lande ich nämlich auf der Startseite, die weder im Contentbereich noch in der Randspalte einen Hinweis auf die Themenwanderungen enthält.
Also Navigation durchsuchen. Aber auch da gibt es keinen Eintrag, der sich als heißer Tipp für mein Anliegen anbietet. Vielleicht bin ich wegen des noch ausstehenden Frühstücks ein wenig zittrig mit der Maus? Es ist jedenfalls nicht leicht, die Navigation aufzuklappen und so lange aufgeklappt zu halten, bis man den gewünschten Unterpunkt ausgewählt hat. Barrierefreiheit für motorisch eingeschränkte Menschen ist das also sicher nicht.
Normalerweise hätte ich die Suche jetzt abgebrochen, aber vielleicht inspiriert mich ja der Spürsinn der Rosenheim Cops, doch noch nicht aufzugeben? Ich entscheide mich also für Region & Orte – Sehens- & Erlebenswertes. Und nach drei Umdrehungen des Mausrades – hurra! – finde ich “Themenwanderwege im Ferienland” mit einem Bild der Bergknappen und dem 23. mehr-Link auf der Seite…. Der Schlecht-Zetterl-Stapel für die Barrierefreiheit wächst weiter.
Na wenigstens finde ich den gesuchten Themenweg dann an erster Stelle der Liste auf der nächsten Seite. Ein weiterer Klick auf einen der 7 erfahren Sie mehr-Links…. und endlich habe ich die gesuchten Informationen gefunden. Ausgangspunkt Kirche, 11 Station, 2 Stunden. Und die Stationen sind sogar mit Bild und Text beschrieben. Aber was ist das? Halb hinter den Bildern steht noch ein Text.

Haben wir mal wieder für den IE optimiert und sollen doch die Firefox-User wandern wo sie wollen, nur nicht im Ferienland Kufstein? Schaut wirklich so aus, denn zu jeder Station gibt es ein pdf zum Download, der im IE fein säuberlich unter dem Bild steht. Für mich gibt es allerdings nichts, denn wo Download steht, ist leider kein Download dahinter- egal wie bereitwillig ich meine Maus kreisen lasse. Ganz unten im IE (und nur dort) findet meine Maus dann endlich den Gesamtfolder zum Download. Wie ging noch das Topfschlagen beim Kindergeburstag? Aber da hat wenigstens jemand helfen “kalt”, “wärmer” oder “heiß” gesagt, während der Kandidat mit verbundenen Augen auf dem Boden rumgekrabbelt ist.

Ende gut, alles gut? Für den Knappenweg schon, aber einen hab’ ich noch – natürlich für den Schlechtzetterl-Stapel. Der Kulturrundgang durch Kufstein ist im Firefox auch schwer verdaulich, mit Text über Text und Text über Bild.

Und je zwei weitere Klicks muss ich tun, um zu erfahren, dass zwei der Themenwege von der Übersichtsseite erst Ende des Jahres bzw. nächstes Jahr eröffnet werden. Schade, da haben die Macher der Webseiten einiges an Potenzial verschenkt. Denn eine Zwischenüberschrift “Wir bauen für Sie an folgenden Themenwegen” hätte Aktivität und Touristenfreundlichkeit ausgedrückt. So fühle ich mich aber eher auf den Arm genommen.

Und die Moral von der Geschicht’? Was ich vor kurzem über Tourismusverbände im Web geschrieben habe, gilt nicht nur für Kärnten, sondern in diesem Fall auch für meine Freunde in Tirol. Aber da ich ja ein unerschütterlicher Tirol-Fan bin, werde ich den traditionellen Weg beschreiten und vor dem Einstieg in den Themenweg beim Tourismusverband vorbeischauen und mir die gedruckten Broschüren besorgen.

2 Kommentare