Layout

Der nächste Morgen ist da, das Weinfest ist vorbei, Didier und Marlene haben viel fotografiert. Herr Bertrand hat die Website zu seiner Zufriedenheit fertig gestellt und auch schon die PDFs eingebunden.

Die PayPal-Anbindung funktioniert.

Man trifft sich zum Frühstück, und Ruth ist mittlerweile fertig mit dem Template. Sie bringt die fertige Komponente auf einem USB-Stick mit und erzählt eine Stunde lang über ihre Erlebnisse mit dem Template.

16.6.1 Installation des Templates

Herr Bertrand überträgt die Template-Dateien per FTP in das Verzeichnis /httpddocs/ templates/tmpl_bertrand und /httpddocs/templates/tmpl_bertrand_shop. Im Menü Erweiterungen - Templates macht er das neue Template tmpl_bertrand zum Standard (Abbildung 16.60).

Abbildung 16.60: Neues Template im Template-Manager

Das Template tmpl_bertrand_shop ordnet er im Bearbeitungsmodus den Weinseiten zu. Damit ist sichergestellt, dass der Kunde bemerkt, dass er jetzt im Shop-Bereich ist (Abbildung 16.61).

Abbildung 16.61: Spezielles Template für den Shop-Bereich

16.6.2 Das Template

Das Template ist von Ruth nach folgenden Gesichtspunkten gestaltet worden:

Pflege

Da Herr Bertrand die Seite weiter pflegen will, hat sie ein möglichst einfaches und übersichtliches Gestaltungsraster zu Grunde gelegt. Herr Bertrand kann die Bilder im oberen Bereich später leicht durch neue ersetzen.

Layout

Ruth erklärt ihre Arbeit so:

Es gibt viele Wege, eine Website gestalterisch umzusetzen.

Herr Bertrand will Wein verkaufen.

Das bedeutet, sein Template braucht die optische Ausstattung eines traditionellen, qualitätsbewussten Winzers, bei dem man gern guten Wein einkaufen möchte.

Eine High-Tech-Ausstattung im Metallic-Look wäre einfach unpassend, auch wenn sie gerade modern ist.

Nein, in diesem Fall geben Wein, Trauben und Erde der Seite das Look and Feel. Getragen wird dies durch die Farbeinstellungen wie durch das Fotomaterial.

Ein optisches Erscheinungsbild setzt sich aus mehreren wichtigen Elementen zusammen. Zu ihnen gehören: Logo, Farben, Foto- und Grafikstil (mit Grafiken sind alle Bildelemente gemeint, die nicht Fotografien sind, beispielsweise Buttons und Symbole), Schriftarten.

Zusätzlich wirken Raumaufteilung und Proportion.

All das muss auf einer Website zueinander passen, wenn der optische Eindruck stimmig sein soll. Am besten sollte nur eine Schriftart verwendet werden. Mit fetten und kursiven Schnitten der gleichen Schrift kann man sehr gut Unterschiede hervorheben.

Im Bertrand-Template habe ich für die Überschriften nicht eine besonders originelle, sondern eine sehr klassische Schrift gewählt, die einen seriösen Eindruck hinterlässt. Es ist die klassische Times, ähnlich den Überschriften überregionaler Zeitungen. Gestaltung muss nicht immer besonders originell sein, es ist ausreichend, wenn es einfach gut passt.

Ein Porträt

Während des Frühstücks und beim Telefongespräch, als Ruth Herrn Bertrand die CSS-Technik erklärte, hat sie nebenbei ein wenig gezeichnet. Sie schickt ihr Werk per E-Mail an Herrn Bertrand, und der baut es gleich mit in die Bildergalerie ein.

Abbildung 16.62: Herr Bertrand

Um diese Anforderungen erfüllen zu können, bedarf es einiger Vorbereitungen.

16.2.1 Logo und Erscheinungsbild

Die Familie Bertrand trifft sich mit der befreundeten Designerin Ruth Prantz, um das Layout zu besprechen, und diskutiert auch über die Inhalte, die auf der Website publiziert werden sollen. Ruth fragt unter anderem, ob es bereits ein Logo und ein Erscheinungsbild im Printbereich gibt. Unter Printbereich versteht sie bereits vorhandene Prospekte, Flyer, Briefpapiere und auch beispielsweise ein Ladenschild.

Es gibt bereits ein Logo, das der Großvater Bertrand mal gezeichnet hat (Abbildung 16.1).

Abbildung 16.1: Großvater Bertrands Logo

Das Logo taucht in verschiedenen Zusammenhängen immer wieder bei der Familie Bertrand auf. Ein einheitliches Erscheinungsbild gibt es allerdings nicht. In verschiedenen Druckerzeugnissen wird mit unterschiedlichen Farben, Schriften und Foto- und Grafikstilen gearbeitet.

Außerdem möchte Ruth wissen, welche Ziele die Familie Bertrand mit der Website verfolgt und welche Zielgruppen angesprochen werden sollen.

Die Firma Bertrand ist ein ökologischer Betrieb, der sehr auf die Qualität des produzierten Weines achtet und damit auf einen Zeittrend setzt. Sie wollen über die Website etwa 5% ihres Weines verkaufen. Zielgruppe sind Weinliebhaber und deren Freunde ab ca. 35 Jahre aufwärts.

Um sich von seinen Konkurrenten deutlich abzugrenzen, rät Ruth Herrn Bertrand, das Logo, die Farben und die Schriften zeitgemäß zu überarbeiten.

Ein erster Entwurf, der nach einer halben Stunde auf ihrem Bildschirm sichtbar wird, sieht aus wie in Abbildung 16.2.

Abbildung 16.2: Großvater Bertrands Logo nach der Bearbeitung durch Ruth

Zum Erstellen dieses Logos benutzt Ruth hier das Programm Photoshop Elements¹. Viele Website-Provider legen dieses Programm als kostenlose Zugabe beim Abschluss eines Hosting-Vertrages bei. Sie können natürlich auch jedes andere Grafikprogramm benutzen, um ein Logo zu erstellen, beispielsweise das Open Source-Programm Gimp².

Der Familie Bertrand gefällt der Entwurf gut und Ruth verabschiedet sich, um ein Joomla!-Template auf dieser Basis in diesen Farben weiterzuentwickeln. Familie Bertrand will in der Zwischenzeit Materialien für die Website sammeln und die Struktur des Joomla!-Systems festlegen.

16.2.2 Fotos

Um einen Eindruck vom Wein, der Umgebung, den Reben, der Arbeit und der Familie zu bekommen, werden Fotos benötigt. Der Sohn Didier und die Tochter Marlene werden beauftragt, ihr umfangreiches Foto- und Videoarchiv nach brauchbarem Material zu durchsuchen und beim heutigen Weinfest zu fotografieren und zu filmen.

16.2.3 Texte

Um die Texte, die auf der Website erscheinen sollen, möchte sich Herr Bertrand persönlich kümmern. Er hat bereits zahlreiche Flyer in der Vergangenheit mit Texten versehen und Artikel in der lokalen Presse und in Fachzeitschriften geschrieben. Außerdem besitzt er viele Dokumente über Untersuchungen seines Landes und seines Weins. Diese Dokumente möchte er einscannen und als PDF im internen Bereich anbieten.

Bei der Gestaltung habe ich bewusst versucht, immer wieder auftauchende CSS-Fragen zu beantworten. Das Floaten von Inhalten genauso wie das absolute Positionieren innerhalb von relativen Elementen.

14.11.1Die Beez-internen CSS-Dateien

Innerhalb des CSS-Ordners finden sich eine Reihe von CSS-Dateien mit unterschiedlichen Aufgaben.

Die Positionierung und die Darstellung wurden absichtlich in unterschiedliche Dateien ausgelagert. Dies hat den großen Vorteil, dass man, wenn man lediglich die Farben ändern möchte, diese Änderungen nur in der layout.css vornehmen muss, und die Positionierung unberührt bleibt. Man kann also weniger falsch machen.

CSS-Dateien im Überblick

• position.css
• layout.css
• print.css
• template.css
• ie7only.css
• ieonly.css
• generell.css
• template_rtl.css

14.11.2 Positionierung

Die Positionierung der eigentlichen Inhalte ist in der position.css geregelt.

Hier finden Sie alle CSS-Angaben für das so genannte Rahmendokument, wie es in der index.php festgelegt worden ist, und die Positionierung für die Ein- und Zweispaltigkeit im Inhaltsbereich sowie die Leading story. Eingriffe in die position.css sollte nur vornehmen, wer genau weiß, was er tut und was er erreichen will.

Der folgende Code z.  B. hinterlegt die Leading story mit dem Hintergrundbild des Bienchens.

.leading {
  background: #EFDEEA url(../images/biene.gif) no-repeat top left;
  border: solid 1px #CCC;
  color: #000;
  margin: 30px 0px 10px   0px;
  padding: 20px 20px 40px 120px;
  position: relative;
}

14.11.3 Das Layout

In der layout.css können Sie sich nach Herzenslust austoben, denn hier sind alle Formatierungen und Farbschemata hinterlegt. Aber auch die Positionierung von bestimmten inhaltlichen Elementen können Sie hier finden.

Das folgende CSS formatiert die Überschrift der Leading story und positioniert den Readmore-Link in die rechte untere Ecke. Dies geschieht durch die absolute Positionierung in der relativ positionierten Leading story.

#main .leading h2,#main2 .leading h2 {
  background:#EFDEEA;
  border-bottom:solid 0 #333;
  color:#93246F;
  font-family:trebuchet MS, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  margin:0 0 10px;
  text-transform:uppercase;
}
 
#main .leading .readon,#main2   .leading .readon {
  background:url(../images/pfeil.gif) #93246F   no-repeat;
  border:solid 0;
  bottom:0;
  color:#FFF   !important;
  display:block !important;
  margin-top:20px   !important;
  position:absolute;
  right:0;
  text-decoration:none;
  padding:2px 2px 0 30px;
}

14.11.4 Sonstiges

Die template.css wird immer dann in Joomla! eingebunden, wenn Popups ohne Browsernavigation auftauchen, z.  B. in dem Email to friend-Popup-Fenster, oder wenn Sie über die Navigation einen Menüpunkt in diesem Stil anlegen. Die Formatierung dieser Ansicht erfolgt ausschließlich über diese Datei.

ie7only.css und ieonly.css kümmern sich um die Browserbugs der verschiedenen Internet Explorer-Versionen und sind im Kopf der index.php durch Conditional Comments eingebunden.

Conditional Comments sind spezielle Kommentare, die nur vom Microsoft Internet Explorer ab Version 5 interpretiert werden, um ausschließlich diese Browser mit Anweisungen zu versorgen.

<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ieonly.css"
      rel="stylesheet"
      type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/beez/css/ie7only.css"
      rel="stylesheet"
      type="text/css" />
<![endif]--> 

Zur print.css gibt es nicht viel zu sagen. Sie formatiert die Seite für den Ausdruck und wird nur dort benutzt. Der ein oder andere wird sich vielleicht wundern, warum vor dem eigentlichen Inhalt ganz groß das Wörtchen Content steht, obwohl das in dieser Form nicht im Quelltext vorkommt.

Mit CSS ist man in der Lage, Content in ein Dokument zu schreiben. Der folgende Code erledigt das für uns. Nicht alle Browser können damit umgehen – die standardkonformen schon.

#main2:before {
 content: " content ";
 …
} 

Die generell.css ist eigentlich schon eine Hierarchieebene höher im Systemordner vorhanden. Möchte man jedoch auch die Joomla!-internen Fehlermeldungen seinem Design entsprechend anpassen, ist dafür hier der richtige Ort.

Und last but not least die template_rtl.css. RTL bedeutet Right to Left, was sich auf die Leserichtung der installierten Sprache bezieht. Die Leserichtung ist in der xml-Datei des ausgewählten Sprachfiles angegeben und als Variable in der index.php des Templates verfügbar.

<?php
if($this->direction == 'rtl') :
?>
  <link rel="stylesheet"   
        href="<?php echo $this->baseurl ?>/templates/beez/css/template_rtl.css"
        type="text/css"   />
<?php
endif;
?>

Mit dieser CSS--Datei wird die Darstellung von Beez entsprechend der Leserichtung verändert, wenn Sie eine Sprache wie Hebräisch oder Arabisch installiert haben.

Spaßeshalber können Sie einfach mal ausprobieren, was passiert, wenn Sie in der englischen Standardsprache die Leserichtung ändern, indem Sie die entsprechende Variable von 0 auf 1 setzen (Abbildung 14.11).

Pfad: language/en-GB/en-GB.xml

...
<metadata>
...
<rtl>1</rtl>
...
</metadata>

Abbildung 14.11: Beez in RTL-Schreibrichtung

Unter Corporate Identity (CI) versteht man das Selbstverständnis und das Erscheinungsbild eines Unternehmens. Dieses Erscheinungsbild, die Identität, ergibt sich entweder aus der Tradition eines Unternehmens oder sie wird komplett bei der Neugründung erdacht. Diese Identität ist wichtig, um dem Kunden ein Gefühl für das Unternehmen zu geben und eine Wiedererkennung zu ermöglichen.

Zur Corporate Identity gehören:

• Corporate Image (Preis-, Produkt- und Werbestrategie)
• Corporate Design (visuelle Erscheinung)
• Corporate Communication (Unternehmenskommunikation)
• Corporate Behaviour (Verhaltensweisen der Mitarbeiter untereinander und nach außen)

Alle diese Bereiche müssen bei der Erstellung einer Homepage berücksichtigt werden. Wir wollen in diesem Kapitel das Corporate Design betrachten. Es besteht mindestens aus einem Logo, einer Schriftart und den Hausfarben, die das Unternehmen benutzt.

Die Besucher Ihrer Homepage sollten Ihr Unternehmen auf Anhieb wiedererkennen.

14.3.1 Trennung von Content und Layout

Die erste und wichtigste Regel für die Entwickler ist die möglichst vollständige Trennung von Inhalt und Layout:

• Sauberer und reiner HTML-Code für die Inhalte
• Keine unnötigen Layouttabellen
• Formatierung ausschließlich über CSS
• Ein logischer semantischer Aufbau
• Sprungmarken

Die linearisierbare Ausgabe des Inhalts und die Formatierung ausschließlich über CSS ist eine der wichtigsten Bedingungen für praktische Zugänglichkeit.

Nur dann hat Assistive Technologie die Möglichkeit, den Inhalt nach Belieben aufzubereiten, während die visuelle Präsentation völlig unberücksichtigt bleiben kann. Die Auslagerung der Präsentation in Stylesheets gibt dem z.  B. sehbehinderten User überdies die Möglichkeit, eigene Stylesheets in seinem Browser zu definieren und damit die Seiten exakt seinen Bedürfnissen anzupassen. Eine lineare Darstellung der Inhalte und eine adäquate semantische Struktur ist für Screenreader-Nutzer besonders wichtig.

Screenreader erfassen den Inhalt einer Website von oben nach unten – also linear. Verwendet man umfangreiche Layoutabellen, ist diese Linearisierung nicht mehr gegeben.

Unter dem Begriff Semantik im Web kann man sich erst einmal wenig vorstellen. Man denkt wahrscheinlich an den Deutschunterricht, aber auch beim Schreiben von Webinhalten spielt sie eine besondere Rolle. Zum Beispiel bieten Screenreader ihren Nutzern an, von Überschrift zu Überschrift oder von Liste zu Liste zu springen, was einen schnelleren Überblick über das Gesamtdokument verschafft. Beinhaltet ein Webdokument keine Überschriften, ist diese Funktionalität nicht nutzbar.

Die formale Struktur eines Webdokumentes sollte der inhaltlichen Struktur weitgehend entsprechen. Je nach Webprojekt kann die Wahl der entsprechenden Überschriftenhierarchie durchaus eine Herausforderung sein.

Sprungmarken

Lineare Darstellung von Inhalten hat allerdings einen großen Nachteil: Unter Umständen muss man einen sehr weiten Weg zurücklegen, um zu »hinten« liegenden Inhaltsbereichen zu kommen. Auf dem Bildschirm können bei einem Drei-Spalten-Layout dagegen mehrere Bereiche »oben« zumindest anfangen, und das Auge kann gleich dorthin springen, wo es – durch visuelle Hilfen unterstützt – die gerade interessierende Information vermutet. Abhilfe bietet hier das Konzept der Sprungmarken. Es bildet faktisch ein nicht visuelles Gegenstück zum grafischen Layout und ermöglicht es dem Anwender linearer Wiedergabegeräte, wesentliche Inhaltsbereiche bereits am Anfang der Seite zu identifizieren und dann unmittelbar dorthin zu springen, wo er die Informationen vermutet, die ihn interessieren.

Praktisch läuft der Einsatz von Sprungmarken darauf hinaus, an den Anfang jeder Seite noch einmal ein zusätzliches Menü für die seiteninterne Navigation zu stellen. In den meisten Fällen wird es sinnvoll sein, dieses Menü im grafischen Layout auszublenden – für sehende User ist es mitunter höchst irritierend, wenn sie einen Link betätigen, aber es geschieht (scheinbar) nichts, weil das Linkziel ja bereits im Viewport sichtbar ist. In jedem Fall sollte das »Übersprungmenü« nicht zu lang und sehr durchdacht aufgebaut sein, weil es ja unter den Bedingungen der Linearisierung selbst ebenfalls zur Verlängerung und Verkomplizierung des Wahrnehmungspfades beiträgt. Im Allgemeinen dürfte es empfehlenswert sein, als erstes Sprungziel »zum Hauptinhalt« anzubieten – dann haben Stammbesucher, die sich auf einer Site auskennen und die Navigation gezielt handhaben, den kürzesten Weg dorthin, wo sie tatsächlich hin wollen.

Spätestens hier wird deutlich, dass insbesondere Seiten mit komplexeren Inhalten nicht nur ein grafisches Layout benötigen, sondern auch ein Content-Design, das darauf abzielt, den Seiteninhalt in einer Form anzuordnen, die für Anwender linearisierender Clients keine überflüssigen Barrieren enthält.

14.3.2 Anforderungen an das Design und den Inhalt

Die Gestaltung einer Website ist mehr als ein nettes Design, sie unterstützt die Besucher bei der Aufnahme der angebotenen Informationen. Sie zeigt ihm Interaktionsmöglichkeiten und drückt gleichzeitig die Corporate Identity des Seitenbetreibers aus. Sie führt den Betrachter in logischer Folge durch die wichtigsten Inhalte einer Seite und hilft ihm so beim Erfassen des Gesamtkonzepts.

Im Rahmen von barrierefreier Gestaltung ist besonders zu achten auf:

• Sinnvolle Anordnung der Inhalte
• Durchdachte Farbwahl
• Ausreichende Kontraste
• Variable Schriftgrößen
• Skalierbare Layouts
• Keine Schriftgrafiken
• Keine transparenten Hintergründe für Grafiken
• Sinnvolle Alternativ-Texte für Grafiken
• Ausreichend große Navigationselemente
• Vorsicht bei mausgesteuerten Events

14.3.3 Visuelle und inhaltliche Anordnung der Inhalte

Die optische Gliederung der einzelnen Seitenbereiche ist ein zentrales Element, um Inhalte zu präsentieren und den Benutzer strukturiert durch das jeweilige Webangebot zu führen. Je strukturierter und logischer der Aufbau ist, desto besser werden sich die Benutzer auf Ihrer Website zurechtfinden.

Die inhaltliche Struktur ist dabei genauso wichtig wie die gestalterische Struktur. Der inhaltlichen Konzeption fällt eine besondere Bedeutung zu: Eine wichtige Richtlinie bei der Strukturierung der Inhalte ist:

Strukturieren Sie Ihre Inhalte immer so, dass sie den Erwartungen Ihres Nutzers entsprechen.

Das ist nicht immer ganz einfach, denn oftmals muss man umdenken. Ein Anbieter kennt seinen Betrieb und die internen Abläufe, so dass man aus dieser Sicht Dinge anders strukturieren würde, als es für den Nutzer vielleicht sinnvoll erscheint.

Im Lauf der Jahre haben sich im Web einige deutlich erkennbare Konventionen zur optischen Gliederung entwickelt: Im Kopfbereich findet man in der Regel Informationen über den Anbieter; Sinn und Zweck der Seite sowie zentrale Navigationselemente wie Kontakt, Impressum und mögliche Navigationshilfen wie etwa Links zu einer Sitemap oder einer Suchfunktion. An dieser exponierten Position befinden sich diese Informationen direkt im Blickfeld des Betrachters und können bei möglichen Problemen direkt angewählt werden.

Entsprechend der westlichen Leserichtung bewegt sich das Auge von links nach rechts und von oben nach unten über die Seiten, deshalb befindet sich das Logo meistens oben links, im primären optischen Bereich. Dort wird es gefunden – wenn man es sucht.

Der durchschnittliche User erwartet die Navigation auf der linken Seite. Oftmals diskutiert, wird diesem Konzept Langeweile und fehlende Innovation vorgeworfen. Menschen bewegen sich jedoch auch im Netz nach vertrauten Mustern. Sie haben ihre eigenen Erfahrungen und reagieren entsprechend. Gewohnte Positionierungen verkürzen die Zeit, die der User zum Erfassen der Gesamtinhalte benötigt, er kann sich schneller den eigentlichen Inhalten zuwenden.

14.3.4 Die Farbwahl

Die Farbwahl ist gerade im barrierefreien Zusammenhang besonders wichtig, denn auch Menschen mit eingeschränkter Farbwahrnehmung sollen Ihre Website uneingeschränkt nutzen können.

Konvertiert man ein Layout in Graustufen, gewinnt man eine ungefähre Vorstellung davon, was z.  B. farbenblinde Menschen sehen. Allerdings ist die Wahrnehmung sehr individuell und je nach Ausprägungsgrad der Fehlsichtigkeit unterschiedlich. Viele farbenblinde Menschen haben allerdings im Lauf ihres Lebens gelernt, welche Farben hinter dem, was sie tatsächlich sehen, stecken. Sie wissen z.B., dass Rasen grün ist, und können durch Vergleiche auch andere Grüntöne identifizieren.

Abbildung 14.1: Die Beez, in Graustufen konvertiert

Wesentlich verbreiteter als die totale Farbenblindheit ist die so genannte Rot-Grün-Blindheit. Durch eine genetische Besonderheit sind Betroffene nicht in der Lage, die Farben Rot und Grün zu unterscheiden. Mischfarben, die diese Farbanteile enthalten, verschwimmen.

14.3.5 Kontraste

Farben spielen auch bei verschiedenen anderen Arten der Sehbehinderung eine wichtige Rolle, denn nicht nur der Farbwert, sondern auch ein deutlicher Farbkontrast kann bei der Nutzung einer Webseite hilfreich sein.

Vorder- und Hintergrundfarbe sollten innerhalb der Textelemente einen deutlichen Kontrast bilden, allerdings ist es nicht möglich, Farb- und Kontraststellungen auszuwählen, die allen gerecht werden. Schwarzer Text auf weißem Hintergrund erzielt einen größtmöglichen Farbkontrast. Um störende Blendeffekte zu vermeiden, kann eine leichte Tönung des Hintergrundes sinnvoll sein. Manche fehlsichtige Menschen benötigen sehr starke Kontraste, um die einzelnen Elemente einer Seite inhaltlich voneinander trennen zu können. Für sie sind Farbkombinationen wie z.  B. weiße Schrift auf hellem, orangefarbenem Hintergrund nicht kontrastreich genug. Auf andere hingegen wirken starke Kontraste als Überstrahlung – der Inhalt wird schwer lesbar.

14.3.6 Variable Schriftgrößen

Eine weitere, ebenfalls außerordentlich wichtige Regel ist, die Schriftgrößen variabel zu gestalten.

Die gängigen Browser bieten uns glücklicherweise die Möglichkeit, Schriften zu zoomen. Dies funktioniert aber nur dann, wenn wir relative Angaben für die Schriftgrößen machen und keine feste Pixelgröße wählen. Sie haben die Wahl zwischen Prozentangaben und der em-Angabe. Beide Angaben beziehen sich, wenn man sie auf die Eigenschaft font-size anwendet, auf die elementeigene Schrifthöhe.

14.3.7 Skalierbare Layouts

Innerhalb des Webdesigns unterscheidet man zwischen festen und fluiden Layouts.

Fluide Layouts passen sich der Bildschirmgröße an und bieten skalierbarem Text Raum. Die Breitenangaben einzelner Spalten des Designs werden in Prozent oder em angegeben, das bietet die Möglichkeit, den Darstellungsbereich des Bildschirms maximal auszunutzen. Ändert sich die Größe des Browserfensters, passt sich der Inhalt automatisch an.

Das ist generell eine sehr schöne Art, Inhalte zu präsentieren. Ich selbst halte es aber so, eine maximale Breite von ca. 950 bis 980 Pixeln festzulegen, was den Vorteil bietet, dass bei sehr großen Bildschirmauflösungen die Zeilenlänge nicht zu lang wird, was nämlich die Lesbarkeit des Inhalts einschränken würde.

14.3.8 Grafiken

Grafiken können wir auf unserer Seite unterschiedlich einsetzen. Zum einen in unserem Template und zum anderen in dem eigentlichen Inhaltsbereich.

Für die Gestaltung ist besonders wichtig, dass wir z.  B. beim Einbinden eines Logos darauf achten, transparente Hintergründe zu vermeiden. Stellen Sie sich vor, Sie hätten ein Logo mit einem schwarzen Schriftzug auf transparentem Hintergrund eingebunden.

Menschen mit bestimmten Fehlsichtigkeiten surfen z.B im Windows-Invertierungsmodus, wobei in der Regel helle Schrift auf schwarzem Hintergrund verwendet wird (Abbildung 14.2).

Abbildung 14.2: Invertierte Darstellung

Das Beez-Logo hat einen weißen Hintergrund und ist auch bei schwarzem Hintergrund noch erkennbar.

Ihr Logo ist für diese Menschen nicht zugänglich, da der Schriftzug von dem schwarzen Hintergrund überlagert wird.

Generell sollte man auf Schriftgrafiken verzichten, eine textliche Alternative ist in den meisten Fällen möglich, denn Schriftgrafiken sind in der Regel nicht skalierbar und damit vom Nutzer nicht beeinflussbar.

Es gibt Situationen, in denen der Kunde einen besonderen Schriftzug fordert. In diesen Falle kann ich Ihnen dazu raten, die Schriftgrafiken größer anzulegen und mit der relativen Größenangabe em auf die Wunschgröße herunterzuskalieren. So sind sie wenigstens etwas vergrößerbar.

Und denken Sie daran, einen sinnvollen Alternativ-Text zu vergeben.

Grundsätzlich sollten Sie sich immer Gedanken über sinnvolle Alternativ-Texte für Grafiken machen. Denn Menschen, die nichts oder nur eingeschränkt sehen können, bleibt die Information, die diese Grafiken transportiert, verschlossen.

Mithilfe des alt-Attributes des img-Elements haben Sie die Möglichkeit, einen alternativen Text zu formulieren.

Das Formulieren eines solchen Textes ist nicht immer einfach, grundsätzlich sollte er kurz, aussagekräftig und prägnant sein.

Bilder, die keine Information enthalten, erfordern auch keinen alt-Text. Allerdings gibt es zwischen Bildern, die klar erkennbare und eindeutige Information enthalten, und solchen, die nur eine Stimmung transportieren oder ganz ohne bestimmbaren Inhalt nur zur Gestaltung in der Fläche dienen, ein breites Spektrum von Möglichkeiten. Unter diesen Umständen ist es wirklich oft nicht leicht, das von der BITV an die erste Stelle ihres Forderungskataloges gesetzte Gebot zur Angabe von textlichen Alternativen zu erfüllen.

Um z.  B. Grafiken mit vielen Informationen – ich denke da etwa an eine grafische Auswertung der letzen Bundestagswahlen – zu beschreiben, bietet sich das longdesc-Attribut an.

Das Attribut enthält einen Verweis auf eine externe Quelle, die den beschreibenden Text enthält.

<img src="wahlergebnisse.jpg" width="271" height="265" alt="Übersicht der Wahlergebnisse der Bundestagswahl" longdesc="wahlergebnisse.html">

Leider hat longdesc Schwächen in der Implementierung – es wird nicht von allen Screenreadern ausgewertet.

14.3.9 Ausreichend große Navigationselemente

Menschen, denen es aus unterschiedlichen Gründen nicht möglich ist, eine Maus zu führen, sind auf alternative Techniken angewiesen. Viele von ihnen nutzen entweder die Tastatur oder alternative technische Hilfsmittel. Das klassische Beispiel für motorische Behinderungen ist sicherlich Steven Hawking⁵. Der Physiker leitet an amyothropher Lateralsklerose und steuert seinen Rollstuhl mit dem Mund. Die angebotenen Hilfsmittel sind in vielen Bereichen technische Wunderwerke, die Dinge ermöglichen, die wir für unmöglich halten würden.

Jahrelang gab es die Richtlinie, auf mausgesteuerte Events zu verzichten, da diese von motorisch eingeschränkten Menschen und Screenreader-Nutzern nicht bedienbar sind, die Hilfsmittel sind aber mittlerweile in der Lage, adäquat damit umzugehen⁶.

Reinen Tastaturnutzern bleiben mausgesteuerte Events jedoch nach wie vor verborgen.

In jedem Fall sollte man darauf achten, ausreichend große Schaltflächen anzubieten. Links, die nur einen kleinen sensitiven Bereich aufweisen, sind schwer zu treffen, Und das nicht nur für Menschen mit Behinderung.

14.3.10 Formulare

Interaktivität wird im Netz immer wichtiger, um Kommunikationsprozesse zwischen dem Anwender und dem Seitenbetreiber zu vereinfachen. Der Besucher gibt persönliche Daten ein, und ein Programm im Hintergrund verarbeitet diese weiter.

HTML-Formulare sind beim aktuellen Stand der Technik immer noch das bevorzugte Mittel zur Realisierung dieser Interaktion.

Unter dem Aspekt der Accessibility ist das auch sehr zu begrüßen, weil HTML zumindest grundlegende Möglichkeiten bereitstellt, Interaktion plattformübergreifend und geräteneutral zu ermöglichen. Solange diese Funktionalität auch für Anwender von alternativen Technologien erreichbar ist, ist nichts dagegen einzuwenden.

Die zugängliche Gestaltung von HTML-Formularen ist in erster Linie ein Problem der Linearisierung und der Gruppierung des Inhalts.

Die Elemente fieldset und label

Webdesigner neigen dazu, Formulare in Layouttabellen darzustellen. Tatsächlich erscheint die Gestaltung der Formulare damit deutlich einfacher. Leider verleitet das aber auf der anderen Seite zu Konstruktionen, bei denen die inhaltliche Verbindung zwischen der Beschriftung und dem Formularelement verloren gehen kann.

Um einen logischen Bezug zwischen den Formularelementen und der Beschriftung zu ermöglichen, ist in (X)HTML das label-Element vorgesehen.

<label for="Vorname" title="Vorname">Vorname:</label>
<input id="Vorname" type="text" size="20" name="Vorname" value="" />

Das Eingabefeld erhält mithilfe des Universalattributes ID einen eindeutigen Namen, auf den dann das Attribut for des label-Elements verweist.

Hat man innerhalb eines Formulars ähnlich lautende Eingabefelder, z.  B. getrennte Angaben für Ehefrau und Ehemann, ist die Gruppierung mit fieldset ein hilfreiches Instrument, diese Bereiche eindeutig voneinander zu trennen.

<fieldset>
  <legend>Angaben Ehefrau</legend>
  <label for="Vornamefrau">Vorname</label>
  <input id="Vornamefrau" 
         type="text" size="20"
         name="Vorname"
         value=""   />
   ...
</fieldset><fieldset>
<legend>Angaben Ehemann</legend>
  <label for="Vornamemann">Vorname</label>
  <input id="Vornamemann"
         type="text" 
         size="20"
         name="Vorname"
         value="" />
</fieldset>

...  

Für Nutzer des Screenreaders Jaws bietet der Einsatz von Legend eine zusätzliche Navigationshilfe, denn er kann von fieldset zu fieldset springen, um damit eine schnellere Übersicht über die Formularelemente zu gewinnen. Der Webformator kann das z.  B. nicht.

Menüleiste

Die Joomla!-Administration besteht ebenso wie Ihre Website aus verschiedenen Ele­menten. Im oberen Bereich Menüleiste (Abbildung 5.1) befinden sich die Menüs und auf der rechten Seite drei Elemente:

• Ein Link zur Website (Vorschau)

• Eine Anzeige, ob und wie viele Nachrichten Sie erhalten haben

• Eine Anzeige, wie viele Benutzer gerade angemeldet sind

• Der Abmelden-Button

Abbildung 5.1: Menüleiste

Werkzeugleiste

Unter der Menüleiste befindet sich die Werkzeugleiste (Abbildung 5.2). Hier ein Beispiel aus den Menüeinträgen im Main Menu.

Abbildung 5.2: Werkzeugleiste

Im linken Bereich wird der Name des aktuellen Arbeitsbereichs und das dazugehörige Icon angezeigt (Werkzeugleiste). Rechts daneben befinden sich abhängig vom Manager verschiedene abgeblendete Icons. Wenn Sie mit dem Mauszeiger über ein solches Icon fahren, so erscheint ein Rahmen, und Sie können mit der linken Maustaste klicken und die entsprechende Funktion ausführen. Die am häufigsten vorkommenden Icon-Bezeichnungen und ihre Bedeutungen finden Sie in der nachfolgenden Tabelle aufgelistet.

Tabelle 5.1:  Elemente der Werkzeugleiste

Untermenüs

Unterhalb der Werkzeugleiste befinden sich oft zusätzliche Menüs abhängig vom aktuellen Manager. Die Abbildung 5.3 zeigt die Untermenüs der Banner-Komponente. Dort gibt es die Reiter Banner, Kunden und Kategorien. Sie werden auch Sub-Menüs oder Sub-Kategorien genannt. In diesem Bereich können auch je nach Zusammenhang Systemmeldungen erscheinen (Abbildung 5.4).

Abbildung 5.3: Untermenüs der Banner-Komponente

Abbildung 5.4: Systemmeldung 

Filterelemente

Unterhalb der Untermenüs finden Sie Filterelemente. Abhängig von der angezeigten Liste können Sie die Daten nach verschiedenen Kriterien filtern (Abbildung 5.5). Sie können per Suchstring suchen oder hier in der Übersicht der Module beispielsweise nur die Module an bestimmten Positionen anzeigen, bestimmte Modultypen oder wie hier aktiviert, nur die aktivierten Module. Wenn Sie das Template auswählen, werden nur die Module angezeigt, die sich in Ihrem Template befinden.

Abbildung 5.5: Filterelemente

Inhaltsbereich

Unterhalb der Filterelemente sehen Sie einen großen Bereich, in dem die eigentlichen Inhalte angezeigt werden. Hier gibt es im Wesentlichen drei Varianten.

Listen

Eine Liste von Elementen, die per Ankreuzen der Checkbox und/oder durch Klicken auf den Namen bearbeitet werden können. Beim Klicken auf die obere Checkbox werden alle Elemente zu einer Sammelbearbeitung ausgewählt. Sie finden in dieser Liste auch oft eine Sortierfunktion sowie die Möglichkeit, durch einen einfachen Klick ein Element zu aktivieren bzw. zu deaktivieren. Unterhalb der Liste mit Elementen finden Sie die Navigation. Hier können Sie die Anzahl der angezeigten Listelemente verändern und durch die Seiten blättern. Hier ein Beispiel aus dem Menü Key Concepts (Abbildung 5.6).

Abbildung 5.6: Inhaltsbereich

Dialoge

Eine Dialogmaske mit Bezug auf ein Element (Abbildung 5.7). Das Element kann beispielsweise ein Inhalt, ein Modul, Menü, ein Menülink, ein Template oder auch etwas anderes sein. Abhängig vom Dialog werden im linken Bereich meist die Hauptinhalte und im rechten Bereich die Parameter für dieses Element angezeigt. Eine semantische Trennung der Eigenschaften und Parameter eines Elements ist hin und wieder nicht ganz einfach, daher gibt es manchmal auf der linken Seite noch weitere umrahmte Bereiche mit Konfigurationsmöglichkeiten.

Abbildung 5.7: Dialogmaske

Sonstige

Hiermit meine ich Anzeigen wie beispielsweise das Kontrollzentrum (Abbildung 5.8), das Sie als Erstes sehen, nachdem Sie sich im Administrationsbereich eingeloggt haben. Auf der linken Seite befinden sich die gebräuchlichsten Menübefehle, dargestellt als Icons. Im rechten Bereich finden Sie Informationen über Ihre Website (Admin Module). Manchmal passen die Joomla!-Inhalte nicht in das Liste/Dialog-Schema, daher finden Sie hin und wieder Bereiche, die etwas anders aufgebaut sind. Das Problem der Anzeige-Systematik tritt manchmal bei komplexeren Zusatzkomponenten auf.

Abbildung 5.8: Kontrollzentrum