Inhaltsbereich Navigation Navigation Fußzeile

Seitenrahmen

Verwendung

Der Seitenrahmen bildet das Grundgerüst aller Seiten. Er beinhaltet in seinem Gestaltungsraster die wesentlichen Seitenbereiche mit der Aufteilung in sogenannte „Landmarks“: Kopfzeile (“Header“), Fußzeile (“Footer“) und den Hauptinhalt (“Main“). Fachverfahren, die den zur Verfügung gestellten Seitenrahmen aus technischen Gründen nicht integrieren können verpflichten sich, diesen nachzubilden und sinngemäß zu nutzen.

Responsives Design

Sämtliche Inhalte müssen unabhängig vom Ausgabegerät immer unter allen Breakpoints vollständig vorhanden sein. Auch die logische Bedien- und Lesereihenfolge dürfen sich z. B. in der linearisierten Darstellung unterhalb von kleinen Breakpoints nicht ändern.

Seitenrahmen und enthaltene Sinnabschnitte, sogenannte “Landmarks“, besitzen grundsätzlich als reine Sectioning-Elemente kein eigenes visuelles Design.

Aufbau

Der Seiten-Header und der Seiten-Footer des Seitenrahmens darf nicht mit weiteren <header>- und <footer>-Elementen verwechselt werden, die zum Beispiel auch in <section> und <article> enthalten sein können. Um die Seiten aber nicht semantisch zu überfrachten wird empfohlen, sich auf jeweils einen einmaligen <header> oben auf der Gesamtseite und <footer> unten auf der Gesamtseite zu beschränken. Wenn wir in Folge also von Header und Footer reden, so sind diese gemeint.

Sonderfälle

Ausnahmen stellen Seiten dar, die für bestimmte Arten von Server-, Anwendungs- oder Nutzerfehlern hinterlegt sind. Fehlerseiten der 40x- und 50x-Serie sind, abweichend vom generellen Seitenrahmen, sowohl in den Inhalten als auch im Code deutlich reduzierter.

Insbesondere bei Fehlern der 50x-Serie soll hiermit erreicht werden, dass in Situationen, bei denen die Server unter Last stehen auch weiterhin zumindest Basis-Informationen ausgeliefert werden. Hierzu werden bei diesen Seiten auf JavaScripte, Webfonts und unwesentliche Bilddateien verzichtet und alle zur Darstellung der Seite benötigten CSS-Regeln im Head der HTML-Seiten hinterlegt, um die Anfragen an die Server auf ein Minimum zu reduzieren.

Seitentitel

Der im Seitenrahmen hinterlegte Seitentitel muss eindeutig, sinnvoll und sprechend sein, inklusive einer klaren Anbieterkennung. Ein gutes Messkriterium ist, ob sich der Titel als Lesezeichen im Browser oder zur Unterscheidung verschiedener gleichartiger, nebeneinander geöffneter Browser-Tabs oder in der Ergebnisliste einer Suchmaschine eignet oder nicht.

Gut: <title>Zoll-Portal | Anmeldung und Registrierung</title>
Schlecht: <title>Startseite Portal</title>

Gut: <title>EORI-Nummer beantragen – Zoll-Portal</title>
Schlecht: <title>Bürger- und Geschäftskundenportal Zoll – EORI-Nummer beantragen</title>

Title im mobilen Kontext

In mobilen Anwendungen wird oben auf einem Bildschirm eine Navigationsleiste angezeigt, die die Navigation durch eine Inhaltshierarchie ermöglicht und die den Titel des aktuellen Screens anzeigt. Diese Navigationsleiste kann neben dem Title-Text auch Steuerelemente enthalten, die sich auf den Inhalt des Bildschirms auswirken.

Für die Navigation zwischen eigenständigen Bereichen der Anwendung muss die Bottom Navigation Bar verwendet werden.

Title in mobilen Ansichten erhalten grundsätzlich keine Tooltips.

Best Practices

  • Verwenden Sie den Titelbereich, um den aktuellen Screen zu beschreiben, wenn dies nützlichen Kontext bietet. Der Titel eines Screens hilft Nutzenden dabei, ihren Standort zu erkennen, während sie durch die Anwendung navigieren.
  • Schreiben Sie einen prägnanten Title. Benutzen Sie ein Wort oder eine kurze Phrase, die den Zweck des aktuellen Screens verdeutlicht. Die Verwendung von nicht mehr als etwa 15 Zeichen funktioniert auf den meisten Gerätegrößen gut, da so genügend Platz für eine Zurück-Schaltfläche und optionale Steuerelemente bleibt.
  • Verwenden Sie die Standard-Zurück-Schaltfläche. Die Nutzenden wissen, dass sie mit dieser Schaltfläche ihre Schritte durch eine Informationshierarchie zurückverfolgen können. Wenn Sie eine eigene Zurück-Schaltfläche implementieren: stellen Sie sicher, dass diese weiterhin wie eine Zurück-Schaltfläche aussieht, sich wie erwartet verhält, zum Rest Ihrer Benutzeroberfläche passt und in Ihrer gesamten Anwendung konsistent implementiert ist.
  • Stellen Sie sicher, dass Schaltflächen mit Textbeschriftungen genügend Platz haben. Wenn Ihre Navigationsleiste mehr als eine mit Text beschriftete Schaltfläche enthält, kann es sein, dass der Text dieser Schaltflächen zusammenläuft, sodass die Schaltflächen nicht mehr zu unterscheiden sind. Fügen Sie eine Trennung hinzu, indem Sie ein Element mit festem Abstand zwischen den Schaltflächen einfügen.

Do’s and Dont’s

So:

  • Verwenden Sie einen großen Title, um die Orientierung beim Navigieren und Scrollen zu erleichtern.

So nicht:

  • Der Name Ihrer Anwendung liefert keine nützlichen Informationen über den Screen oder Ihre Inhaltshierarchie und eignet sich daher nicht gut als Title.