L’intégration faisant partie des épreuves finales du titre professionnel de web designer, et surtout étant une des pierres angulaire du métier, on s’est un peu entraîné. Une bonne expérience 🙂
Un exercice formateur
« Et je veux ça au pixel près ! », exigeait le formateur, nous voyant abattus par la charge de travail. Et on l’a fait ! Bon pour être franc, je suis sûr qu’il reste quelques pains ça et là, mais dans l’ensemble, c’est réussi.
Le but du jeu était de reproduire la maquette d’une page produit du site Lokahi, de préférence sans utiliser Bootstrap. Le contenu devait tenir dans un container fixé à 1024 pixels pour les écrans d’une taille supérieure. « En dessous de ça, vous faites ce que vous voulez ».
La page devait bien sûr être responsive, la conception des apparences mobiles étant laissées à l’appréciation de chaque apprenant.
Cela a donc été l’occasion de s’interroger sur le design responsive, tout en révisant le fonctionnement du Html et du CSS. Et même un peu de Javascript !
Et à un mois du stage, ça n’a pas été de trop.
Des p’tits blocks, des p’tits blocks, toujours des p’tits blocks…
La plus grande difficulté a été le responsive. Même en ayant réfléchi au design et au mouvement des blocs d’une taille à l’autre dès le départ, la réalisation de la page dans sa globalité peut vite s’avérer laborieuse, la charge de travail généreuse, le code s’étendre, l’apprenant se pendre…
Bref, ça n’a pas toujours été une partie de plaisir.
Réaliser la page de base n’a pas été difficile, juste un peu long au départ, le temps de retrouver ses marques. Sans framework, j’ai créé des classes communes pour des positionnements de base, pouvant amener à des mouvements simples d’une taille à l’autre avec les media queries.
Des classes plus particulières seront attribuées à un certain nombre de blocs, qui devront bien sûr être modifiées pour le responsive.
Chaque spécificité modifiée en amont doit souvent l’être ensuite dans le responsive. J’en prendrai toute la mesure plus tard, lors de mon stage en entreprise. En effet, WordPress n’échappe pas à la règle.
Des graphiques ont également réalisés directement avec le CSS.
Chaque base a été paramétrée avec une classe commune, et ensuite chaque couleur qui vient par-dessus possède sa propre classe.Pour les points forts, il s’agit d’éléments <div> avec un border-radius à 50%.
Tous possèdent une bordure, et, à l’aide d’une autre classe, certains sont remplis grâce à la propriété background-color.
Différents boutons ont également été réalisés, parfois directement en CSS, d’autre fois à l’aide d’Illustrator.
Le responsive avant tout
Le mode tablette
Pour le mode tablette, le choix a été fait de supprimer certaines parties de la page, que j’ai jugé moins essentielles. Si c’était à refaire, je ferais différemment. Mais à ce moment-là, en pleine formation, nous étions pris par le temps. J’ai donc fait simple.
En mode tablette, le menu et les produits restent, mais les détails sautent. La façon de placer les différents blocs facilitait les choses pour passer aux différents modes smartphones.
Pour les mouvements des blocs, j’ai utilisé les flexbox (voir plus haut).
Pour la méthode, je me suis inspiré du fonctionnement de Bootstrap et de son système de grille : en-dessous d’une certaine taille, les blocs s’empilent.
C’est ce que je me suis efforcé de faire, de façon plus simple, en créant des classes communes, pour ensuite les modifier avec les medias queries.
Les smartphones et autres petits écrans
À ce stade, le plus dur était fait. Arrivé en-dessous 760 pixels de large, les blocs s’empilaient tous les uns sur les autres.
Il ne restait plus qu’à affiner quelques détails, comme les marges par exemple, internes et externes.
D’autres détails ont aussi dû être gérés pour les écrans inférieurs à 361 pixels (on sait jamais 😉 ).
Au final, l’essentiel avait été préparé en amont lors du passage au mode tablette.
Hormis ces quelques finitions, le passage à la taille smartphone implique de changer de header. Le menu disparaît, ainsi que l’image type de la page produit, qui restait jusqu’alors.
Ne reste que l’essentiel : les produits et leurs différentes descriptions.
Pour le menu, un icône « hamburger » a été mis en place. À l’aide du CSS et d’un peu de javascript basique, faire disparaître et réapparaître le menu s’est avéré plus facile que prévu.
Après, le code reste très basique. Mais il fonctionne, et c’est l’essentiel !
Une dizaine de lignes de code suffisent.
On colle quelques id ça et là, on met le menu en « display: none; », et ensuite on gère l’évènement dans un fichier javascript, avec les fonctions getElementById pour cibler, et addEventListener pour le clic.
Pour gérer le passage d’un état à l’autre entre chaque clic, on utilise une fonction faite maison, habilement nommée clic().
Avant tout ça bien sûr, il faut gérer l’apparition de l’icône hamburger sur la page.
Pour ça c’est facile : CSS et media queries.
Et hop, le javascript c’est fantastique.
Pour conclure
Un excellent entraînement, qui fait certainement progresser quiconque le prend au sérieux. Cela aura été une bonne préparation au stage en entreprise, ainsi qu’à l’épreuve finale des web designers.
Et quel plaisir, une fois le travail terminé, devant un rendu propre et même « professionnel », selon mon maître de stage. On se dit finalement que ça en valait vraiment la peine d’y passer des heures et des heures.
NB : La vidéo utilisée pour l’intégration, Freakout Tv Calamity Show, est celle d’un jeu vidéo indépendant super cool et super sympa fait par des types supers cools et supers sympas.
Et en plus c’est pas cher.