Schlagwort-Archive: Stylesheets

Barrierefrei glücklich – kein Pfusch beim Design

Handwerklich schlecht gemacht ist Design, wenn improvisiert wird. Nachdem wir die Grundlagen tabellenfreier Layouts betrachtet haben, fragen wir uns nun, wie man „Abstand hält“.

Schlechte Designer verwenden dazu das geschütze Leerzeichen oder nonbreaking space, also HTML-Entität &nbsp;. Oder man verwendet das break <br> als Abstandhalter für Absätze. Das ist nicht sinnvoll, früher oder später möchte man eventuell so etwas ändern und muss es dann aufwändig suchen und entfernen. Sinnvoller ist es hier, von Anfang an auf CSS zu setzen. By the way, man sollte auf Inline-CSS nach Möglichkeit vollständig verzichten.

Zum Abstandhalten werden die Eigenschaften margin und padding verwendet. Margin ist der Außenabstand, padding der Innenabstand oder Einbettung. Diese Eigenschaften können etwa für Links, Absätze, Bilder und andere Elemente verwendet werden, auch für div oder span. Werden sie nicht vergeben, wird normalerweise das browserseitige CSS eingesetzt.

Die beiden Eigenschaften lassen sich verfeinern, indem man unterschiedliche Abstände eingibt:

margin-left: 5px; margin-right:4px; margin-top:3px; margin-bottom:2px;

Typographische Abstände lassen sich wie gewohnt definieren über word-spacing oder letter-spacing. Damit kann – was sonst – die Abstände zwischen Worten und Buchstaben regulieren.

Link – die Kunst der richtigen Verbindung

Auch Links wollen richtig gesetzt werden. Es ist zwar nett, am Ende eines elektroischen Textes alle Links zu erhalten, auf die im Text verwiesen wurde, aber dieses Verfahren stammt noch aud Zeiten des Papiers. Wir erinnern uns mit Schaudern an ellenlange Listen mit Fuß- und Endnoten und Anmerkungen, die zwar kleingedruckt aber dennoch um so umfangreicher sind.

Womit wir mitten im Thema sind: Eine Fußnote innerhalb eines elektronischen Textes muss prinzipiell anklickbar sein. Dabei öffnet sich entweder ein kleines neues Fenster, in dem der Text der Fußnote angezeigt wird oder das Dokument springt zur Fußnote. In letzterem Falle ist es unbedingt notwendig, eine Möglichkeit zu schaffen, damit der Leser genau dort hin zurück kommt, wo er herkam.

Häufiger tritt aber der Fall auf, dass man auf ein Dokument verweisen möchte: vielleicht als Beispiel, als Quellenverweis oder als weiter gehende Informationsquelle. In diesem Falle wird der Link direkt im Text gesetzt.

Möchte ich auf eine Pressemitteilung der Messe München verweisen, dann schreibe ich etwa: „Die Messe München sagt“, wobei der ganze Text ein Link ist, daraus schließt der Leser, dass hier auf die quelle der Aussage zurückverwiesen wird.

Dabei müssen Links deutlich erkennbar sein, etwa farblich oder unterstrichen. Dabei verwendet man am besten die klassischen Linkfarben des Web: blau für nicht-besuchte Links, lila für besuchte Seiten. Auf jeden Fall sollte man darauf verzichten, den User durch verschieden farbige Texte zu verwenden. Farben sollten immer eine bestimmte Bedeutung haben, die sich möglichst schnell erschließt.

Wenig hilfreich sind nackte Links, ob sie anklickbar sind oder nicht. Wenn sie „sprechend“ sind, also im Linktext etwas aussagekräftiges drin steht, ist das schon besser, dennoch nicht unbedingt zielführend: http://www.oliveira-online.net/wordpress/wp-admin/post.php?action=edit&post=246

Betreibt man eine professionelle Site mit vielen externen und internen Links sollte man sich überlegen, ob man ein neues Fenster öffnen will oder ob der Link im gleichen Fenster geöffnet werden soll. Wird der Link im gleichen Fenster geöffnet, ist es aufwendiger, zum ursprünglichen Artikel zurückzukehren, sofern man das möchte. Öffnet man den Link in einem neuen Fenster, ärgert sich der User gegebenenfalls darüber. Folgende Regel halte ich für einen sinnvollen Kompromiß: Siteinterne Links werden im gleichen Fenster geöffnet, externe Links in neuem Fenster. Man kann auch im Title-Tag des Ankers hierauf hinweisen.

Wohin der Online-Journalismus steuert und wie man Links nicht verwendet, erfährt man in diesem Telepolis-Artikel.

SEO IV – die Strukturebene

Ebenso wichtig wie die Inhaltsebene ist die Strukturebene. Die Struktur einer einzelnen Website basiert auf der Auszeichnungssprache HTML. Mit WYSIWYG-Editoren läßt sich ein solcher HTML-Code automatisch erzeugen. Von großer Relevanz sind folgende Bereiche:

1. Der Title oder Seitentitel: Er wird in den Suchergebnissen als erstes angezeigt und ist ENTSCHEIDEND dafür, dass ein User eine Seite anklickt. Er steht im Kopf einer HTML-Datei und nicht im eigentlichen Text der Seite. Sieht man ein Suchergebnis mit dem Titel „Unbenannte Seite 1“ merkt man sofort, dass da jemand geschludert hat

2. Sprechende Links: Von Content Management CMS erzeugte Seiten waren früher sehr kompliziert. Heute werten Suchmaschinen auch die Links aus, deshalb sollten sie Keywords enthalten, siehe die Adressleiste oben. WordPress kann also standardmäßig sprechende Links erzeugen.

3. Tags im Inhalt: Struktur gewinnt eine Seite wie bei normalen Dokumenten mittels Überschriften und Hervorhebungen. WYSIWYG-Editoren wie Kompozer bieten solche Formatvorlagen standardmäßig an. Dabei sollte man den üblichen Unsinn vermeiden, etwa den ganzen Text fett oder kursiv zu machen oder willkürlich Überschriften vergeben. So doof sind die Bot-Programmierer nun doch nicht.

4. Alternativtexte und Titel für Multimedia: Innerhalb eines Links oder Multimedia-Elements lassen sich Alternativtext und Titeltext vergeben. Der Titel wird angezeigt, wenn man mit der Maus darüber fährt. Es spricht nichts dagegen, dass Suchmaschinen solchen wichtigen Text auswerten, aber die Meisten vergessen schlicht, dass es solch eine Möglichkeit überhaupt gibt.

Wichtig ist, dass über CSS definierte Klassen natürlich nicht gewertet werden können. Dazu müsste der Bot verstehen, was mit der Klasse gemeint ist, das kann er natürlich nicht.

Suchmaschinen lieben RSS-Feeds. Ein Weblog-Eintrag kann so oft innerhalb von Minuten in den Suchergebnissen auftauchen. Natürlich sollten sie auch gefüttert werden, sprich, man sollte etwas Relevantes mitzuteilen haben.