Concevoir un portail responsive

Un en-tête responsive

Important

La personnalisation du thème du portail n’est pas disponible sur les domaines freemium (domaines créés via la page Essayez ODS du site d’OpenDataSoft). Si votre domaine est un domaine freemium mais que vous voudriez tout de même avoir la fonctionnalité de personnalisation de thème activée, écrivez nous !

Avertissement

Cette page explore en détail la customisation des menus de la plateforme. Ceci implique d’écrire et d’expliquer une certaine quantité de code HTML et CSS. Vous aurez besoin de connaissances des ces deux langages pour comprendre le contenu de cette page.

Pour les besoins de customisation basique, vous pouvez consulter introduction à la gestion de thèmes pour le portail.

Un motif très utilisé en design graphique est d’avoir le menu d’entête caché sur les petits écrans et remplacé par un seul bouton qui contient généralement la fameuse icône hamburger hamburger.

Un clic sur cette icône ouvre et ferme un tiroir contenant tous les éléments du menu. Ce comportement est visible sur le portail central de données OpenDataSoft et sur tous les nouveaux portails.

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

Tiroir fermé

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

Tiroir ouvert

Implémentation

Implémenter ce comportement implique d’implémenter les media queries, ce sont des règles CSS appliquées uniquement pour une largeur d’écran donnée. Pour faciliter ce travail, OpenDataSoft fournit une directive nommée ods-responsive-menu qu’il faut utiliser dans l’entête comme ceci.

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

Cette directive est en fait un ensemble de 3 directives :

  • ods-responsive-menu (attribute de directive, utilisé comme attribut d’un autre tag html)

    Utilisé pour spécifier (à l’aide de l’attribut breakpoint) la largeur d’écran (en px) sous laquelle le tiroir doit apparaître et au dessus de laquelle les éléments doivent être affichés normalement.

  • ods-responsive-menu-placeholder (directive d’élément utilisée comme un tag html)

    Renvoie à la ligne le contenu qui sera invisible sauf si on est en dessous du breakpoint.

  • ods-responsive-menu-collapsible (directive d’élément)

    Entoure le contenu qui sera affiché normalement au delà du breakpoint mais caché à l’intérieur du tiroir en deçà.

Styles d’écriture du contenu replié de l’entête

Passer d’une disposition horizontale à une disposition verticale nécessite quelques changements graphiques, comme démontré par l’entête par défaut de la plateforme.

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

Entête bureautique

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

Entête mobile

Afin de pouvoir changer le style en conséquence, l’élément ods-responsive-menu-collapsible renvoie à la ligne son contenu avec .ods-responsive-menu-collapsible--collapsed quand (et seulement quand) l’écran est plut petit que le breakpint. Ceci vous permet de séparer précisement le style pour les deux styles de disposition (horizontal et vertical).

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

Styles d’écriture pour le tiroir

Si vous voulez personnaliser le style du tiroir, vous allez avoir besoin de connaître le nom des classes appliquées sur les éléments créé par les 3 directives. L’échantillon de code vu précédemment sera affiché comme ceci :

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

De plus, l’élément .ods-responsive-menu-collapsible obtiendra la classe .ods-responsive-menu-collapsible--collapsed dès que la largeur de l’écran passe en dessous du breakpoint et la classe .ods-responsive-menu-collapsible--expanded pour indiquer lorsque l’utilisateur veut afficher le menu.

Disposition responsive de la page

Le portail OpenDataSoft utilise une disposition en grille pour positionner les éléments. Une grille est une intersection de lignes et colonnes aux dimensions prédéfinies qui seront utilisées pour positionner les éléments dans la grille. Cet outil de design a été adapté au design Web en utilisant en premier lieu des tableaux et ensuite en utilisant des éléments “div”.

Si vous êtes familier avec le concept des dispositions en grille, il suffit de savoir que le systeme de grille OpenDataSoft est basé sur le framework Bootstrap CSS. Vous pouvez voir la liste des Classes disponibles ci-dessous.

Concepts et terminologie

La disposition en grille OpenDataSoft est une grille de 12 colonnes, ce qui signifie que les cellules de la grille peuvent s’étendre de 1 à 12 colonnes à la fois.

Une disposition en grille contient 3 types d’éléments : des conteneurs, des lignes et des colonnes. Les conteneurs définissent la largeur totale de la grille, les lignes regroupent les cellules et les colonnes font 1/12e de la largeur d’un conteneur. Ainsi, les cellules sont définies par le nombre de colonnes sur lesquelles elles s’étendent, sont contenues dans des lignes, qui sont elles-mêmes contenues dans des conteneurs.

Soit en code html :

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

Sera affiché comme (les couleurs et les labels sont ajoutés spécifiquement par CSS pour ces exemples) :

../_images/grid-layouts__concept.png

Vous pouvez bien sur spécifier des cellules qui couvrent moins de 12 colonnes. Dans ce cas, il y aura un espace blanc à la fin. Si les cellules couvrent plus de 12 colonnes, elle seront alors renvoyées à la ligne et crééront une nouvelle ligne.

Ainsi, ceci :

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

Sera affiché comme cela :

../_images/grid-layouts__overflow.png

Les dispositions en grille responsive.

En design Web, une disposition responsive signifie que la disposition de la page s’adaptera à la largeur de l’écran. Plus précisément, elle s’adaptera à la largeur du viewport, c’est à dire, l’espace disponible pour l’affichage qui est la largeur de la fenêtre du navigateur.

Les dispositions en grilles fonctionnent grâce à la définition de points de rupture, ce sont des largeurs en pixels qui définissent à quel moment la disposition va changer. Sur la plateforme OpenDataSoft, 3 points de rupture (soit 4 modes) sont utilisés et peuvent être modifiés sur la page Theme. Ces mides sont extra-small, small, medium et large (on utilise parfois mobile, tablet, desktop et large desktop).

Une disposition en grille est conçue pour une largeur de fenêtre déterminée mais peut être inadaptée pour d’autres formats d’écran. Par exemple, une disposition 12-colonnes va s’afficher très mal sur un petit écran. Tout le contenu sera inséré dans des petites cellules faisant 1/12e du petit espace disponible. On préfère ainsi avoir une disposition qui se réorganise au changement de mode.

Vous avez peut-être remarqué que les extraits de code au dessus des noms de classes pour les cellules <div class="col-xs-6">col-6</div> contiennent un petit xs juste avant le nombre de colonnes sur lequel la cellule doit s’étendre. Cela indique aux navigateurs que dans le mode extra-small, cette cellule doit s’étendre sur 6 des 12 minuscules colonnes. Pour autant, on peut ajouter des classes spécifiques pour les autres modes. Par exemple :

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

Ainsi, une cellule s’étendra sur 6 colonnes dans mode extra-small, sur 4 en mode small, sur 2 en mode medium et seulement sur 1 en mode large.

Vous n’avez pas besoin de spécifier les 4 modes. Les classes utilisent une largeur de 12 colonnes par défaut en dessous de leur mode d’affichage et gardent leur largeur spécifiée pour des modes d’affichage plus grand. <div class="col-md-4"></div> est équivalent à <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div> et <div class="col-sm-6 col-lg-3"></div> est équivalent à <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"></div>.

Classes disponibles

.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