Reprise en HTML et CSS de la page « Freebies » d'un site de jeux d'icônes. Un fond bleu saturé couvert d'un motif répété, un bloc de téléchargement, une citation. Toute la mise en page tient en Flexbox, et le menu en petit écran repose sur l'ordre exact des éléments dans le document.
L'exercice consiste à reprendre une page réelle d'un site en production et à la réécrire de zéro en HTML et CSS. Contrairement à une maquette, il n'y a ici aucune valeur à lire dans un fichier de design : tout se relève à l'œil, en mesurant sur la page d'origine.
Cette page appartient à Symbolicons, un site de jeux d'icônes créé par Jory Raphael. Le travail présenté ici est un exercice de reproduction à but pédagogique, réalisé dans le cadre de ma formation. Le contenu, la marque et les icônes restent la propriété de leur auteur, et sont crédités sur la page intégrée. Les icônes Star Wars qui y figurent sont des marques déposées de Lucasfilm Ltd.
La question que je me suis posée : comment relever fidèlement une mise en page qu'on ne peut qu'observer, sans jamais accéder à ses valeurs ?
La page s'adresse à des designers et des développeurs qui cherchent des icônes gratuites. Ils arrivent le plus souvent d'un moteur de recherche, ne connaissent pas le site, et ont une seule question : qu'est-ce qui est téléchargeable, et à quelles conditions ?
La page y répond dans cet ordre. Le titre annonce « Free Stuff », le paragraphe qui suit pose la contrepartie - créditer l'auteur - et le bloc suivant précise la restriction d'usage avant même de proposer le bouton de téléchargement. Les conditions arrivent toujours avant l'action.
C'est la seule des trois pages de mon portfolio qui existe réellement en ligne : je pouvais donc comparer mon rendu à l'original à chaque étape, ce qui est un exercice bien plus exigeant qu'une maquette qu'on est seul à interpréter.
Relever une page en production, c'est identifier les quelques règles qui la tiennent et ignorer tout le reste. J'en ai retenu quatre.
Trois sections dans le main : le hero, le bloc de téléchargement, la citation. L'en-tête et le pied de page encadrent l'ensemble, chacun avec un conteneur interne qui borne la largeur du contenu tout en laissant l'aplat de couleur filer jusqu'aux bords de l'écran.
La contrainte structurante de ce projet est l'ordre du HTML. Le menu en petit écran repose sur les sélecteurs frères du CSS, qui ne savent regarder qu'en avant : la case à cocher doit venir avant son libellé, qui doit venir avant la navigation. Inverser deux lignes casse le menu sans produire la moindre erreur.
C'est aussi le projet où j'ai le plus commenté mon CSS - l'ordre des fichiers, le rôle du dans le pied de page, la raison d'être de chaque sélecteur frère. Un commentaire qui explique un piège vaut mieux que dix qui répètent le code.
La direction est celle du site d'origine, relevée à la pipette puis rangée en variables. Le contraste entre le bleu profond et le turquoise fluorescent est ce qui donne son énergie à la page.
Cobalt
#0125A0
Aplat de l'en-tête et du hero
Pervenche
#8A95D5
Titre du bloc de téléchargement
Turquoise
#00FDF8
Bouton de téléchargement, et rien d'autre
Aqua
#58CEE4
État de survol du bouton
Gris pierre
#A59999
Mentions du pied de page
C'est le sujet même de la page. Le pictogramme d'étiquette du hero est repris en motif de fond, à très faible contraste : la même forme sert d'illustration et de texture. Les quatre planches d'icônes du bloc de téléchargement portent chacune un attribut de titre qui décrit son contenu, et un texte alternatif distinct.
Tous les blocs de cette page s'alignent sur un seul axe, la plupart centrés. Sortir Grid pour ça aurait été de la démonstration : je ne l'utilise que quand j'ai besoin de contrôler les deux axes en même temps, ce qui n'arrive nulle part ici.
Une seule tuile de quelques kilo-octets, répétée par le navigateur, couvre n'importe quelle largeur et n'importe quelle hauteur sans jamais se pixelliser ni se déformer. Une image plein cadre aurait pesé cent fois plus pour un résultat moins souple.
Un palier inhabituel, mais nécessaire : au-delà de cette largeur, le contenu centré se perdait dans le motif. C'est un cas où le point de rupture ne vient pas d'un appareil, mais du moment où la mise en page cesse de tenir.
Les liens vers le site d'origine et les réseaux sociaux s'ouvrent dans un nouvel onglet, et portent un attribut de titre qui précise leur destination. Sur une page qui crédite un auteur tiers, savoir où l'on va avant de cliquer fait partie du respect dû à ce crédit.
max-width. Entre 990 et 1700 pixels, la page traverse une plage entière sans aucun ajustement.La page annonce « des ressources gratuites » au pluriel, et n'en propose qu'une seule. Quelqu'un qui arrive par un moteur de recherche repart aussitôt le fichier téléchargé, sans jamais voir le reste du site.
J'ajouterais une liste des jeux d'icônes disponibles sous le bloc actuel, et je remplacerais la citation de bas de page - décorative - par ce qui manque vraiment : la licence, en clair, en trois lignes.