Een responsief portaal ontwerpen

De header van een responsief portaal

Belangrijk

Het personaliseren van thema's is niet beschikbaar voor freemium domeinen (aangemaakt via de pagina "Probeer gratis <https://www.opendatasoft.com/discover-opendatasoft-demo/> op de website van OpenDataSoft <https://www.opendatasoft.com>). Wanneer uw domein een freemium domein is en u zou deze themafunctie toch graag willen, stuur ons dan een e-mail! <sales@opendatasoft.com>

Waarschuwing

Op deze pagina wordt meer diepgaand ingegaan op de richtlijn betreffende het personaliseren van het responsieve menu van het platform. Dit houdt in dat er een vrij grote hoeveelheid HTML- en CSS-code moet worden geschreven en uitgelegd. U zal werkkennis nodig hebben van deze beide technologieën om de inhoud van deze pagina te kunnen begrijpen.

Voor basisnoden op het vlak van personalisering, ga naar het thema van uw portaal personaliseren.

Een zeer vaak gebruikt patroon bij het ontwerpen van grafieken is om het headermenu te verbergen op kleine schermen te vervangen door één enkele toggle-knop, die meestal voorzien is van het gekende hamburgerpictogram hamburger.

Wanneer op deze knop wordt geklikt, gaat er een lade open of dicht die alle menu-items bevat. Dit gedrag is waar te nemen op de centrale datarepository van OpenDataSoft en op alle nieuwe portalen.

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

Gesloten lade

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

Open lade

Implementatie

Het implementeren van dit gedrag betekent meestal dat zwaar een beroep moet worden gedaan op media zoekopdrachten. Dit zijn CSS-regels die enkel gelden voor een welbepaalde schermbreedte. Om dit werk te vereenvoudigen, voorziet OpenDataSoft een handige richtlijn die de naam "ods-responsive-menu" draagt en die u als volgt binnen de header zou moeten gebruiken.

<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>

Deze richtlijn is eigenlijk een geheel van 3 richtlijnen:

  • ods-responsive-menu (attribuutrichtlijn, gebruikt als een attribuut van een andere HTML-tag)

    Wordt gebruikt om (via het attribuut "breekpunt") de schermbreedte (in px) te specificeren onder welke de lade zou moeten verschijnen en boven welke dingen normaal zouden moeten worden weergegeven.

  • ods-responsive-menu-placeholder (elementrichtlijn gebruikt als een HTML-tag)

    Omvat de inhoud die onzichtbaar zal zijn, tenzij we onder het breekpunt zitten.

  • ods-responsive-menu-collapsible (elementrichtlijn)

    Omvat de inhoud die normaal zal worden weergegeven boven het breekpunt maar ingeklapt in de lade eronder.

Schrijfstijlen voor de ingeklapte inhoud van de header

Evolueren van een horizontale lay-out naar een verticale lay-out houdt vrij veel grafische wijzigingen in, zoals geïllustreerd wordt door de standaard header van het platform.

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

Desktop header.

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

Mobiele header.

Opdat u de stijl dienovereenkomstig kan wijzigen, zal het element ods-responsive-menu-collapsible de inhoud ervan omwikkelen met de .ods-responsive-menu-collapsible--collapsed wanneer (en enkel wanneer) het scherm kleiner is dan het breekpunt. Hierdoor kan u duidelijk de stijl voor de twee lay-outstijlen (horizontaal en verticaal) scheiden.

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

Schrijfstijlen voor de lade

Indien u het globale uitzicht van de lade wil personaliseren, zal u de naam van de klassen moeten kennen die toegepast werden op de elementen die aangemaakt zijn door de 3 richtlijnen. Het codevoorbeeld dat we eerder al zagen, zal weergegeven worden als:

<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>

Daarbovenop zal het element .ods-responsive-menu-collapsible de klasse .ods-responsive-menu-collapsible--collapsed krijgen zodra de schermbreedte onder het breekpunt daalt en de klasse .ods-responsive-menu-collapsible--expanded om aan te geven wanneer de gebruiker wil dat het menu wordt weergegeven.

Responsieve pagina lay-outs

Zoals dit het geval is bij vele websites, gebruikt het portaal van OpenDataSoft een rooster lay-out voor positie-elementen. Een rooster is een intersectie van rijen en kolommen met een vooraf gedefinieerde breedte die gebruikt zal worden voor positie-elementen binnen een lay-out. Deze vaak gebruikte ontwerptool werd aangepast voor webdesign door eerst tabellen te gebruiken en door snel daarna standaard "div"-elementen te gebruiken.

Indien u reeds vertrouwd bent met het volledige concept van rooster lay-outs, volstaat het om te zeggen dat het roostersysteem van OpenDataSoft grotendeels gebaseerd is op het Bootstrap CSS-kader. U kan de lijst met Beschikbare klassen hieronder terugvinden.

Concepten en terminologie

De roosterlay-out van OpenDataSoft is een lay-out die uit 12 kolommen bestaat. Dit betekent dat roostercellen zich in één keer kunnen uitstrekken over 1 tot 12 kolommen.

Een roosterlay-out berust op 3 types elementen: containers, rijen en kolommen. Containers definiëren de globale breedte van de lay-out, rijen groeperen cellen samen en kolommen zijn één twaalfde van de breedte van de container. Als gevolg hiervan worden cellen gedefinieerd door het aantal kolommen dat ze overspannen en die genest zijn in rijen, die op hun beurt weer genest zijn in containers.

Vertaald in HTML-code:

 <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>

Zal weergegeven worden als (kleuren en labels toegevoegd via CSS specifiek voor die voorbeelden):

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

U kan vanzelfsprekend cellen specificeren die zich uitstrekken over minder dan 12 kolommen. In dit geval zal er op het einde een witte ruimte overblijven. Ingeval ze zich uitstrekken over meer dan 12 kolommen, zouden de cellen inpakken en een nieuwe lijn binnen de rij aanmaken.

Vandaar, dit:

<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>

Zal worden weergegeven als dit:

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

Responsieve rooster lay-outs

In webdesign betekent "responsieve lay-out" dat de lay-out aangepast zal worden aan de breedte van het scherm waarop deze wordt weergegeven. Om nog nauwkeuriger te zijn, reageert deze op de breedte vanuit het oogpunt van het toestel, zijnde de ruimte die beschikbaar is om weer te geven, zijnde de breedte van het venster van de browser.

Responsieve lay-outs werken door het definiëren van breekpunten, breedtes in pixels die niveaus aangeven waarbij de lay-out zal wijzigen. Binnen het platform van OpenDataSoft worden 3 breekpunten (waarbij 4 modi worden gedefinieerd) gedefinieerd en deze kunnen de volgende zijn gepersonaliseerd via het thema. Deze modi zijn extra klein, klein, middelgroot en groot (waarnaar ook verwezen wordt als mobiel, tablet, desktop en grote desktop).

Een rooster lay-out wordt ontworpen voor een welbepaalde vensterbreedte, maar kan vrij snel ongeschikt worden voor andere schermformaten. Bijvoorbeeld, een zeer gedetailleerde lay-out in 12 kolommen zal zeer slecht weergegeven worden op een klein scherm, waarbij alle inhoud in kleine cellen wordt gepropt en elk één twaalfde van de kleine beschikbare ruimte in beslag nemen. In plaats daarvan zouden we willen dat de lay-out zichzelf reorganiseert wanneer deze van modus wijzigt.

In de bovenstaande code snippets heeft u misschien opgemerkt dat de namen van de klasse voor de cellen <div class="col-xs-6">col-6</div> een kleine xs omvatten net voor het aantal kolommen dat de cel zou moeten overspannen. Hiermee wordt aan de browser gezegd dat in de modus extra klein, de cel 6 van de 12 superkleine kolommen zou moeten overspannen. We kunnen evenwel klassen toevoegen die specificeren hoe we zouden willen dat de lay-out zich gedraagt in andere modi. Bijvoorbeeld:

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

Op deze manier zal de cel 6 kolommen in extra kleine modus overspannen, 4 in kleine modus, 2 in middelgrote modus en slechts 1 in grote modus.

U moet echter niet alle 4 niveaus specificeren. De klassen die standaard zijn voor een standaard overspanning over 12 kolommen onder hun eigen weergavemodus en behouden hun specifieke kolomoverspanning voor grotere weergavemodi. <div class="col-md-4"></div> is daarom het equivalent van <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div> en is <div class="col-sm-6 col-lg-3"></div> het equivalent van <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"></div>.

Beschikbare 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