Démos
Que tu veuilles mettre en ligne ton dernier CV, ton tout nouveau pressbook ou un site perso qui ressemble à celui-ci, voici quelques idées pour éviter de (trop) galérer.
Sommaire
L’actuelle nécessité de construire un site responsive
Plus de la moitié des internautes est sur son téléphone: le contenu des sites doit donc tenir correctement sur un écran de 5 à 7 cm de large, soit environ 200 pixels pour avoir une bonne marge. Or le design mobile-first, qui privilégie les téléphones (merci Google), n’est pas vraiment original à première vue car les infos sont empilées et au final on passe notre temps à scroller. Mais tu as tout à fait le droit et la possibilité de construire un site qui ressemble à un magazine, comme celui-ci ou comme Wired, dont je me suis inspirée (lol). Ce sont des sites responsive dont tout le contenu (menu, titres et textes, images et animations) s’adapte au conteneur (l’écran d’ordi, la tablette ou le téléphone). Résultat: c'est beau sur ordi et OK sur téléphone.
Comment ça marche ?
Comme si tu utilisais une baguette magique, à première vue! Ouvre mon site sur ton ordi, puis rétrécis l’écran latéralement (côté main droite) et observe ce qui se passe: la partie la plus à droite disparaît de l’écran pour passer à “l’étage” inférieur (voir dessin ci-contre). Et ainsi de suite, jusqu’à arriver à une taille (largeur) d’écran de téléphone. A mi-chemin (taille d’une tablette), tu constates que le menu, qui était au départ horizontal en haut de l’écran, est remplacé par ☰ qu’il suffit de cliquer pour dérouler le nouveau menu, dit “hamburger" ou burger mobile-first. C’est actuellement le type de menu qui fonctionne le mieux parmi tous ceux que j’ai testés. Je l’ai trouvé sur Créa-blog, que je te recommande pour la qualité de son code.
Pour obtenir un look qui se rapproche d’un magazine, j’ai utilisé le système de grille (grid) dont tu trouveras des exemples et du code sur le site css3.com.
Maria Bardoulat - 16/08/2026
Sur l'image du haut (écran d'ordinateur) les traits oranges représentent deux grilles composées chacune d'une ligne et quatre colonnes (pour l'édition 3 je n'utilise finalement qu'une ligne et quatre colonnes)
Sur l'image du bas (écran de téléphone) les colonnes s'empilent les unes sur les autres.
Les premières animations du site, ici et en rubrique DIY, feront l'objet d'une prochaine démo. Tu trouveras leur code au "dos" de ces pages (clic droit n'importe où sur la page sur PC).