Design eines responsiven Portals

Eine responsive Portal-Kopfzeile

Wichtig

Die Theme-Anpassung ist nicht für Freemium-Domains verfügbar (erstellt mit Hilfe der Seite 'Kostenlos ausprobieren <https://www.opendatasoft.com/discover-opendatasoft-demo/>`_ auf der OpenDataSoft-Website <https://www.opendatasoft.com>`_). Falls Ihre Domain eine Freemium-Domain ist und Sie diese Themenfunktion haben möchten, mailen Sie uns einfach! <sales@opendatasoft.com>`_

Warnung

Diese Seite untersucht die Anpassung der Plattform responsiven Menürichtlinie. Hierfür muss recht viel HTML- und CSS-Code geschrieben und erklärt werden. Sie werden für diese beiden Technologien Fachwissen benötigen, um den Inhalt dieser Seite verstehen zu können.

Für eine Basisanpassung lesen Sie bitte das Dokument Anpassen Ihres Portalthemas.

Ein sehr gängiges Muster im Grafikdesign ist das Verbergen des Kopfzeilenmenüs auf kleinen Bildschirmen und das Ersetzen durch eine einfache Schaltfläche, auf dem gewöhnlich das berühmte Hamburger-Icon hamburger zu sehen ist.

Durch Klicken auf diese Schaltfläche wird eine Schublade geöffnet bzw. geschlossen, die sämtliche Menüpunkte enthält. Dieses Verhalten kann beim zentralen Datenspeicher von OpenDataSoft <https://data.opendatasoft.com/page/home/>`_ sowie bei allen neuen Portalen beobachtet werden.

../../_images/responsive-menus__data-collapsed.png

Geschlossene Schublade

../../_images/responsive-menus__data-expanded.png

Geöffnete Schublade

Implementierung

Das Implementieren dieses Verhaltens bedeutet gewöhnlich ein intensives Zurückgreifen auf "Media Queries", d. h. CSS-Regeln werden nur für eine bestimmte Bildschirmbreite angewandt. Um diese Arbeit zu erleichtern, bietet OpenDataSoft eine praktische Richtlinie namens ods-responsive-menu, die Sie in der Kopfzeile wie folgt anwenden sollten.

<nav class="ods-front-header" ods-responsive-menu breakpoint="1000">
    <ods-responsive-menu-placeholder>
        <!-- content displayed only below the 1000px breakpoint -->
    </ods-responsive-menu-placeholder>
    <ods-responsive-menu-collapsible>
        <!-- content displayed normally above the 1000px breakpoint -->
        <!-- and collapsed within the drawer below the 1000px breakpoint -->
    </ods-responsive-menu-collapsible>
</nav>

Diese Richtlinie besteht aus insgesamt 3 Richtlinien:

  • ods-responsive-menu (Attribut-Richtlinie, als Attribut eines anderen HTML-Tags verwendet)

    Zur Spezifizierung (mittels des "Breakpoint"-Attributs) der Bildschirmbreite (in px), unter der die Schublade erscheinen soll und über der die Dinge normal angezeigt werden.

  • ods-responsive-menu-placeholder (Element-Richtlinie, als HTML-Tag verwendet)

    Bricht den Content um. Dieser bleibt unsichtbar, solange wir unterhalb des Breakpoints sind.

  • ods-responsive-menu-collapsible (Element-Richtlinie)

    Bricht den Content um, der oberhalb des Breakpoints normal angezeigt wird, in der Schublade unten jedoch nur minimiert.

Schriftarten für den minimiert angezeigten Kopfzeilen-Content

Der Wechsel von einem waagerechten zu einem senkrechten Layout führt zu recht vielen grafischen Veränderungen, wie am Beispiel der Plattform-Standardkopfzeile gezeigt.

../../_images/responsive-menus__header-desktop.png

Desktop-Kopfzeile

../../_images/responsive-menus__header-mobile.png

Mobile Kopfzeile.

Um die Schriftart entsprechend anzupassen, bricht das Element ods-responsive-menu-collapsible den Content mit .ods-responsive-menu-collapsible--collapsed um, wenn (und nur wenn) der Bildschirm kleiner als der Breakpoint ist. Damit können Sie die Schriftart für die zwei Layout-Styles (Quer- und Hochformat) klar trennen.

.my-menu-class {
    /* horizontal style */
}
.ods-responsive-menu-collapsible--collapsed .my-menu-class {
    /* vertical style */
}

Schriftarten für die Schublade

Wenn Sie das Gesamtbild der Schublade anpassen möchten, müssen Sie den Namen der Klassen kennen, die auf die Elemente angewendet werden, welche von den 3 Richtlinien erstellt wurden. Das an früherer Stelle besprochene Code-Muster ergibt folgendes Rendering:

<nav class="ods-front-header" ods-responsive-menu breakpoint="1000">
    <div class="ods-responsive-menu-placeholder">
        <!-- content displayed only below the 1000px breakpoint -->
    </div>
    <div class="ods-responsive-menu-collapsible">
        <div class="ods-responsive-menu-collapsible__backdrop"></div>
        <div class="ods-responsive-menu-collapsible__container">
            <div class="ods-responsive-menu-collapsible__toggle">
                <button class="ods-responsive-menu-collapsible__toggle-button">
                    <i class="fa fa-close"></i>
                </button>
            </div>
            <div class="ods-responsive-menu-collapsible__content">
                <!-- content displayed normally above the 1000px breakpoint -->
                <!-- and collapsed within the drawer below the 1000px breakpoint -->
            </div>
        </div>
    </div>
</nav>

An seinem Anfang bekommt das Element .ods-responsive-menu-collapsible die Klasse .ods-responsive-menu-collapsible--collapsed, sobald die Bildschirmbreite unterhalb des Breakpoints fällt, und die Klasse .ods-responsive-menu-collapsible--expanded, um zu kennzeichnen, wenn der Nutzer die Anzeige des Menüs wünscht.

Responsive Seiten-Layouts

Wie viele Websites nutzt auch das Portal OpenDataSoft eine Rasteranordnung, um Elemente zu positionieren. Unter einem Raster versteht man die Verknüpfung von Zeilen und Spalten mit vordefinierter Breite, die zum Positionieren von Elementen innerhalb eines Layouts verwendet wird. Dieses sehr gängige Entwicklungstool wurde für das Webdesign angepasst, indem es zunächst Tabellen nutzte und bald darauf Standard-"div"-Elemente.

Falls Sie bereits mit dem gesamten Konzept der Rasteranordnungen vertraut sind, genügt an dieser Stelle der Hinweis, dass das Rastersystem von OpenDataSoft hauptsächlich auf dem Bootstrap CSS Framework basiert. Im Anschluss finden Sie die Liste der Verfügbare Klassen.

Konzepte und Terminologie

Die OpenDataSoft-Rasteranordnung besteht aus einem 12-Spalten-Layout, d. h. die Rasterzellen können 1 bis 12 Spalten auf einmal umfassen.

Eine Rasteranordnung besteht aus 3 Element-Typen: Zellenkästen, Zeilen und Spalten. Die Zellenkästen bestimmen die Gesamtbreite des Layouts, die Zeilen ordnen die Zellen und die Spalten stellen ein Zwölftel der Zellenkastenbreite dar. Somit werden die Zellen über die Spaltenanzahl definiert, die sie umfassen, und sind in Zeilen verschachtelt, die wiederum in Zellenkästen verschachtelt sind.

In HTML-Code übersetzt:

 <div class="container">
    <div class="row">
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-xs-8">col-8</div>
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-3">col-3</div>
    </div>
    <div class="row">
        <div class="col-xs-1">col-1</div>
        <div class="col-xs-2">col-2</div>
        <div class="col-xs-3">col-3</div>
        <div class="col-xs-4">col-4</div>
        <div class="col-xs-2">col-2</div>
    </div>
</div>

Folgendes Rendering (Farben und Beschriftungen speziell für diese Beispiele mit CSS hinzugefügt):

../../_images/grid-layouts__concept.png

Selbstverständlich können Sie auch Zellen definieren, die weniger als 12 Spalten abdecken. In diesem Fall bleibt Leerraum am Ende übrig. Wenn die Zellen mehr als 12 Spalten abdecken, werden sie umgebrochen und es wird eine neue Zeile in der Spalte erstellt.

Somit entsteht

<div class="container">
    <div class="row">
        <div class="col-xs-4">col-4</div>
        <div class="col-xs-3">col-3</div>
        <div class="col-xs-2">col-2</div>
        <div class="col-xs-1">col-1</div>
    </div>
    <div class="row">
        <div class="col-xs-8">col-8</div>
        <div class="col-xs-6">col-6</div>
    </div>
</div>

folgendes Rendering:

../../_images/grid-layouts__overflow.png

Responsive Rasteranordnungen

Im Webdesign bedeutet ein "responsives Layout", dass sich bei der Anzeige das Layout der Größe des jeweiligen Bildschirmes proportional anpassen kann. Genauer genommen passt es sich der Breite des Anzeigebereichs des Geräts an. Der Anzeigebereich ist der für das Rendering zur Verfügung stehende Bereich, d. h. die Breite des Browserfensters.

Für responsive Layouts werden Breakpoints definiert, d. h. Breiten in Pixel, die Grenzen festlegen, ab denen das Layout sich ändert. Auf der OpenDataSoft-Plattform sind 3 Breakpoints (mit 4 definierten Modi) definiert: customized through the theme. Diese Modi lauten extra-klein, klein, mittel und groß (entsprechend Mobiles Endegerät, Tablet*, Desktop und großer Desktop).

Eine Rasteranordnung ist für eine bestimmte Bildschirmbreite ausgelegt, sie kann für andere Bildschirmformate jedoch schnell unpassend werden. So kann etwa ein genau detailliertes 12-Spalten-Layout auf einem kleinen Bildschirm sehr unübersichtlich wirken, da der gesamte Content in sehr kleine Zellen hineingezwängt wird, die jeweils ein Zwölftel des geringen zur Verfügung stehenden Raumes einnehmen.

Ihnen ist eventuell bei den oben genannten Codeschnipseln aufgefallen, dass in den Klassennamen für die Zellen <div class="col-xs-6">col-6</div> ein kleines "xs" vor der Anzahl der Spalten steht, die die Zelle umfassen kann. In diesem Beispiel handelt es sich um eine Information an den Browser, dass die Zelle im extra-kleinen Modus 6 der 12 ganz kleinen Spalten umfassen kann. Wir können jedoch Klassen hinzufügen, die spezifizieren, wie sich das Layout in anderen Modi verhält. Ein Beispiel:

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-1">my responsive cell</div>

Hier umfasst die Zelle 6 Spalten im extra-kleinen Modus, 4 im kleinen Modus, 2 im mittleren Modus und nur 1 im großen Modus.

Dabei müssen Sie jedoch nicht alle 4 Stufen angeben. Die Klassen stellen sich automatisch auf die Standardbreite 12 Spalten unterhalb ihres eigenen Anzeigemodus ein und behalten ihre spezifisch eingestellte Spaltenbreite breiteren Anzeigemodi vor. <div class="col-md-4"></div> entspricht also <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div> und <div class="col-sm-6 col-lg-3"></div> entspricht <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"></div>.

Verfügbare Klassen

.container          // width limited to size of the small-to-medium breakpoint
.container-fluid    // full width container

.row

.col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12
.col-sm-1, .col-sm-2, .col-sm-3, ... .col-sm-12
.col-md-1, .col-md-2, .col-md-3, ... .col-md-12
.col-lg-1, .col-lg-2, .col-lg-3, ... .col-lg-12