Ich möchte die kleine Dokumentationsreihe fortsetzten. Nachdem jetzt die Bannergrafiken richtig und mit HTML-Text angezeigt werden, möchte ich die Übersichtlichkeit der Website noch etwas optimieren, indem ich einen “Sitemap-Footer” einbaue.
Nach Erstellen eines Vorschlags in einem Grafikprogramm haben wir uns auf folgende Version geeinigt:
(zum Vergrößern bitte klicken)
Wie auf der Abbildung zu sehen ist, wird der eher unspannende Footer gegen einen neueren, peppigeren aktualisiert. Wichtig ist, dass auch der neue Footer barrierefrei wird.
Das hieße unter anderem, dass zoomen auf z. B. 200% problemlos funktionieren sollte, oder wie schon in Teil 1 erwähnt, die Kontraste des Textes mindest bei 4,5:1 liegen sollten. Die Fokusreihenfolgen für die Tastaturbedienung müssen natürlich auch stimmen, doch das macht OpenSAGA beispielsweise automatisch 
.
Lösung:
Nachdem das komplizierteste, nämlich der Designvorschlag, fertig ist 
, gibt es verschiedene Möglichkeiten, dies in OpenSAGA zu lösen. Laut Vorschlag sollten im Footer vier Kacheln gleicher Größe definiert werden. Dazu gibt es z. B. die Möglichkeit die in OpenSAGA integrierte DSS-Bibliothek und das damit verbundene 960-Grid zu nutzen. Ein anderer Weg wäre, auf Blueprint zurück zu greifen, das ebenfalls in OpenSAGA mitgeliefert wird. Meiner Meinung nach, hier die elegantere Lösung, weil die gesamte Template-Datei (opensaga-layout.xml), die das Layout definiert, bereits mit Blueprint arbeitet. Die nachfolgende Abbildung soll noch einmal die Aufteilung der Kacheln verdeutlichen:
Blueprintmuster für den Footer
Eine entsprechende Deklaration in der opensaga-layout.xml könnte dann so aussehen:
<div id=”footer“>
<div class=”column span-6″>
<os:navigation styleClass=”footerNav” navigationId=”${skin['portal.navigation.support-ref']}” />
</div>
… <!— und das ganze noch drei mal –>
</div>
Das Layout der Website untergliedert sich in 24 Blueprint-Kacheln. Da 24 / 6 = 4 sind, ist es möglich hier 4 gleich große Kacheln mit Blueprint zu erstellen.
Die Navigationspunkte, die im Footerbereich angezeigt werden sollen, können aus der Hauptnavigation übernommen werden und müssen so nicht noch einmal neu erstellt werden.Das kann bequem über das <os:navigataion-Modell erfolgen. Hier wird auf die bereits bestehende Navigation zurück gegriffen. Der Placeholder ${skin} gibt an, welcher Navigationsteilsbaum importiert werden soll.
Fertig – Auf zur nächsten Aufgabe!
