Responsive design

De WIKI-BOKEH
Aller à : navigation, rechercher

/!\ ATTENTION : Contenu réservé aux portails possédant le thème Historique !

Le responsive design est un mode de représentation du site bokeh qui va permettre au contenu de s'adapter à la taille de l'écran.

Ce style de représentation est compatible avec les chartes de base fournies dans Bokeh (modele / origin).

L'utilisation de la version mobile reste utilisable.

Où l'activer ?[ ]

Dans la configuration d'un profil, vous avez une case à cocher "Activer la mise en page responsive".

A noter qu'il s'agit d'un paramètre local à un profil.

Responsive checkbox.png


Explications sur les comportements[ ]

A quel moment bokeh passe en "mode responsive" ?[ ]

Deux tailles d'écrans ont été choisies pour déclencher le mode responsive.

  • 1024 pixels de largeur : téléphone en mode paysage et tablette
  • 580 pixels de largeur : téléphone en mode portrait

largeur maximum : 1024 pixels[ ]

Les boîtes des colonnes de droite et de gauche se rangent en ligne par deux.

Responsive 1024.png

largeur maximum : 580 pixels[ ]

Toutes les boîtes utilisent la largeur maximum de l'écran.

Responsive 580.png

Transformations[ ]

Les menus et les boîtes de la colonne de gauche ont été modifiés pour faciliter l'accès aux informations.

La modification est visuelle et elle intervient dès que le mode responsive s'applique.

Boîtes de la colonne de gauche, facettes du résultat de recherche, nuage de tags du résultat de recherche[ ]

Les différents éléments ci-dessus voient leur contenu caché.

En contre partie, le titre de la boîte devient clickable et permet d'afficher ou de cacher le contenu.

Avoir un titre sur la boîte n'est pas obligatoire mais conseillé.

Responsive collapsed widget.png

Responsive opened widget.png

Les menus[ ]

Les menus sont remplacés par un bouton.

Le click sur le bouton permet d'afficher l'intégralité du menu et de ses sous-menus

Responsive collapsed menu.png

Responsive opened menu.png

Disparitions[ ]

La division flottante n'est plus affichée lorsque le site devient responsive.


Comment personnaliser le mode responsive ?[ ]

La personnalisation du mode responsive se fait via les outils habituels (éditeur css front, fichier css de la charte graphique).

Vous pouvez utiliser les règles de css suivantes:

@media screen and (max-width: 1024px) {
/* vos règles de css */
}

@media screen and (max-width: 580px) { 
/* vos règles de css */
}

Responsive bron.png