J'aurais tout aussi bien pu intituler ce billet "Comment naissent les idées de développement ?" parce que c'est ce que je vais vous raconter. Le quotidien d'un webmaster est souvent fait de questions dont les réponses n'existent pas encore (ou qu'elles ne sont pas satisfaisantes). Dans ce cas, il n'a d'autres choix que d'inventer sa réponse et de la traduire en code pour matérialiser son idée. Se retrouver devant une page blanche peut souvent tétaniser mais cela permet, si l'on est prêt, à laisser libre court à sa créativité et sa fantaisie.
Il m'arrive parfois sur ce blog d'employer des termes techniques que j'essaye autant que faire se peut, de vulgariser au maximum. Mon auditoire est composé (en partie) de personnes n'ayant pas une connaissance technique très approfondie d'Internet, j'ai eu envie de proposer un glossaire afin qu'elles puissent trouver des réponses, des explications et des définitions sur les termes pouvant leur paraitre abscons. Seulement, il y a "glossaire" et "glossaire". Etant de nature (très) exigeante, je savais exactement ce que je voulais pour mes lecteurs. Et c'est ce que je vous vous raconter maintenant.
comment créer un glossaire responsive design
Imaginer et créer un glossaire responsive design
Dès le début du projet, je savais exactement quelles étaient les grandes lignes de ce que je voulais comme fonctionnement et comme rendu final. Je peux même dire que je les voyais.
J'ai donc commencé par dessiner un carré où chaque angle représentait un point non négociable :
- Le rendu final doit être Responsive Design,
- Visuellement agréable et rapidement compréhensible,
- Un code aussi léger que possible,
- Une intégration parfaite avec Joomla
Je pouvais être fléxible sur certains aspects mais absolument pas sur ces 4 critères.
Après avoir défini ce que je voulais, j'ai tenu à vérifier si cela n'existait déjà pas. A quoi bon vouloir réinventer la roue ? Le constat était sans appel : aucune extension ne correspondait à ce que j'imaginais. Curieusement, les autres proposaient toutes plus ou moins le même affichage banal et désuet. Alors, il ne me restait qu'à créer mon glossaire.
Le hasard fait bien les choses car c'est en cherchant autre chose que je suis tombé sur cette page de Wikipédia : http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Ordre_du_Temple. Et en regardant attentivement la mise en page des sous-catégories, j'ai immédiatement compris que je tenais le design de mon glossaire ! Il ne me restait plus qu'à en écrire le code en HTML et en CSS.
Le markup HTML
A priori, rien de très compliqué pour obtenir ce type de présentation sous cette forme. Les mots et leurs définitions peuvent être affichés sous forme de liste grâce à la balise <ul>.
Shcématiquement, cela donne ça :
<div class="lexique">
<div class="set"> <!-- pour chaque lettre -->
<h3 class="letter"> <!-- emplacment de l'initiale --> </h3>
<ul>
<div class="spoiler">
<a class="teaser" href="#"> <!-- emplacement du mot --> </a>
<div class="contenu"> <!-- emplacement de la définition --> </div>
</div>
<div class="spoiler">
<a class="teaser" href="#"> Exemple </a>
<div class="contenu"> Définition correspondante </div>
</div>
</ul>
</div>
</div>
Les CSS
Ce type de mise en page fonctionne du premier coup d'oeil pour l'internaute. Cela donnera un affichage en colonne avec les initiales et sous chacune d'entre elles, les mots et leurs définitions correspondantes. Les classes CSS feront tout le reste du travail : la mise en forme et les média queries pour le Responsive Design.
Pour le design général, j'ai retenu un affichage en 3 colonnes séparées par une ligne discrète :
div.lexique
{
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-rule: 1px dotted #ccc;
-moz-column-rule: 1px dotted #ccc;
-o-column-rule: 1px dotted #ccc;
-ms-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}
La partie "lettre" est centrée sur toute sa largeur :
div.set
{
display: inline-block;
width: 100%;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
}
L'initiale sera colorée en gris-bleuté et centrée :
h3.letter
{
color: #748094;
text-align: center;
}
La partie consacrée au mot et à sa définition :
.spoiler
{
margin: 0 0 5px 0;
padding: 0;
}
.teaser
{
margin: 1px;
padding: 3px;
cursor: pointer;
position: relative;
}
.contenu
{
padding: 5px 10px;
}
Rien de très compliqué à ce niveau, ce n'est qu'une mise en forme à l'aide de marges et d'espacements de manière à obtenir un affichage qui soit visuellement agréable.
Il reste à voir la partie Responsive Design qui est traité de la manière suivante :
@media screen and (max-width: 768px) {
div.lexique
{
-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
-ms-column-count: 2;
column-count: 2;
-webkit-column-rule: 1px dotted #ccc;
-moz-column-rule: 1px dotted #ccc;
-o-column-rule: 1px dotted #ccc;
-ms-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}
@media screen and (max-width: 480px) {
div.lexique
{
-webkit-column-count: 1;
-moz-column-count: 1;
-o-column-count: 1;
-ms-column-count: 1;
column-count: 1;
}
Pour les écrans inférieus à 480px de large, le glossaire est affiché sur une seule colonne et pour les écrans jusqu'à 768px de large, il est affiché sur 2 colonnes avec la petite ligne discrète de séparation.
Pour terminer, il y a un petit script JavaScript qui fait le job pour masquer/afficher la définition lorsque l'on clique sur le mot.
Le résultat définitif est visible sur cette page : https://www.web-eau.net/site-web/glossaire.
Qu'en pensez-vous ?
Conclusion
Comme vous le voyez, rien de très compliqué dans cette création. Le plus difficile pour moi est encore d'avoir l'idée (je ne suis vraiment pas un créatif) et de parfaitement définir ce que l'on veut obtenir. Traduire cela en mots est bien souvent plus compliqué que la traduction en code.
En tout cas, j'espère que vous aurez appris quelque chose d'intéressant, que le résultat final vous plait et que vous n'hésiterez pas à consulter très régulièrement ce glossaire pour trouver des définitions aux mots qui vous échappent. D'ailleurs, si vous souhaitez y voir figurer certains termes, n'hésitez pas à me contacter ou à commenter ce billet. Je me ferais un plaisir de les ajouter !
