Page Structure

In diesem Bereich findet sich die Basisstruktur der Seite, die im Body-Tag eingefügt werden muss. Diese Struktur besteht aus Header, Content und Footer. Für weitere Informationen zu zum globalen Header und Footer siehe Global -> Header und Global -> Footer.

Im Content-Bereich, bezeichnet mit der ID layout-grid, müssen vor dem Einfügen von spezifischen Einheiten die korrekten Einheiten des Grid-Layouts verwendet werden.

Das Grid Layout garantiert eine stimmige Anzeige der Einheiten für jede Bildschirmgröße und Variation. Welche Teile des Grid Layouts genutzt werden hängt von den genutzten Einheiten und deren gewünschter Positionierung ab.

Das Div-Tag mit der ID layout-grid__area--contentheader wird verwendet um Seiten übergreifende Einheiten darzustellen, wie beispielsweise den Breadcrumb.

In layout-grid__area--herounit können einführende oder prominente Inhalte dargestellt werden. Hier soll maximal eine Einheit verwendet werden, die durch die Klasse fullwidth an der layout-grid__area--herounit auf die volle Breite des Grid Layouts gezogen werden kann. Empfehlenswert ist an dieser Stelle das Modul Opener.

layout-grid__area--maincontent beinhaltet den Content-Bereich der Seite, also je nach Belieben Elemente und Module.

Die Bereiche layout-grid__area--leftcolumn und layout-grid__area--marginal sind nicht für die Verwendung auf neuen Seiten gedacht. Diese Bereiche sind lediglich für die korrekte automatische Konvertierung von alten Seiten in das neue Design vorhanden. Bei manueller Verwendung oder Neugestaltung von Seiten mithilfe des Styleguides ist die Nutzung dieser Bereich dringend zu vermeiden, da sie nicht mehr zeitgemäß sind.

Im Bereich layout-grid__area--contentfooter ist eine Sitemap vorgesehen und die Möglichkeit für ein Feedback-Formular vorhanden. Details zur Einbindung und Nutzung dieser Elemente, siehe Global -> Footer.

This section contains the basic structure of the page to be inserted into the body tag. This structure consists of the header, the content and the footer. For more information about the global header and the footer, see Global -> Header and Global -> Footer.

In the content section, labelled with the ID layout-grid, before specific units are inserted, the correct grid layout units must be used; see Global -> Grid Layout.

The Grid Layout guarantees a coherent display of the units for each screen size and variation. The parts of the Grid Layout that are used depend on the units used and their desired positioning.

The div tag with the ID layout-grid__area--contentheader is used for displaying cross-page units such as the Breadcrumb.

Introductory or prominent content can be displayed in layout-grid__area--herounit. At most one unit should be used here and can be pulled to the full width of the Grid Layout using class fullwidth in layout-grid__area--herounit. The Opener module is recommended for this.

layout-grid__area--maincontent contains the content section of the web page, i.e. any elements and modules.

The sections layout-grid__area--leftcolumn and layout-grid__area--marginal are not intended to be used on new web pages. These sections are only available for the correct automatic conversion of old web pages to the new design. The sections are no longer up to date and should not be used manually or for redesigning web pages with the help of the style guide.

A sitemap and a feedback form option are provided in the section layout-grid__area--contentfooter. For details on integration and use of these elements, see Global -> Footer.

<div id="page-wrapper">
    <header id="header">
        <!-- GLOBAL PORTAL HEADER (see "Global -> Header" for full markup) -->
    </header>
    <div id="layout-grid" role="main">
        <div id="layout-grid__area--contentheader">
            <div id="content-header">
                <!-- CONTENTHEADER (Breadcrumb, Languageselect, ...) -->
            </div>
        </div>
        <div id="layout-grid__area--herounit" class="fullwidth">
            <!-- HEROUNIT (Big images or fullwidth (optional) content) -->
        </div>
        <div id="layout-grid__area--leftcolumn">
            <!-- LEFT COLUMN -->
        </div>
        <div id="layout-grid__area--maincontent">
            <!-- MAIN CONTENT -->
        </div>
        <div id="layout-grid__area--marginal" role="complementary" class="marginal">
            <!-- RIGHT COLUMN -->
        </div>
        <div id="layout-grid__area--contentfooter">
            <div id="content-footer">
                <!-- CONTENT FOOTER -->
                <div class="content-footer__brand">
                    <!-- Sitelogo (optional) -->
                </div>
                <a class="to-top" href="#top">Zum Seitenanfang</a>
                <nav class="content-footer__links" aria-label="Weiterführende Links">
                    <!-- Sitemap -->
                </nav>
            </div>
        </div>
    </div>
    <footer id="footer" >
        <!-- GLOBAL PORTAL FOOTER (see "Global -> Footer" for full markup) -->
        <div class="footer__brand">
            <!-- Portallogo -->
        </div>
        <nav class="footer__links" aria-label="Weitere Bereiche auf Berlin.de">
            <!-- Portalnavigation -->
        </nav>
        <div class="footer__claim">
            <!-- Portalclaim -->
        </div>    
    </footer>
</div>

Breakpoints

Name	Width	Description
Smallest
Palm		Most items changes from grid to one column here.
Tablet
Tablet Landscape
Desktop

Abstract

Layout grid areas on medium and large screens

Portalheader
	Contentheader
	Herounit
Leftcolumn (not in use)	Mainbar	Marginal
	Contentfooter
Portalfooter

Layout grid areas on small screens

Portalheader (Sticky)

Contentheader

Herounit

Mainbar

Marginal

Contentfooter

Portalfooter

Weiterführende Informationen

Barrierefreies Webdesign - Landmark roles

w3.org - ARIA Landmarks