L’article explore comment adapter des designs éditoriaux et distinctifs aux petits écrans, en évitant la monotonie des colonnes infinies. L’auteur, Andy Clarke, démontre que le design pour mobile ne doit pas se limiter à empiler du contenu verticalement, mais peut s’inspirer des magazines en créant des « moments » visuels uniques : utilisation du défilement horizontal pour regrouper des éléments (comme des pochettes d’albums), placement d’éléments hors-cadre pour conserver la personnalité du design, ou encore création de mini-maquettes défilables qui rappellent les doubles pages imprimées. Il propose des techniques CSS modernes comme les container queries, le shape-outside, et les media queries d’orientation pour recomposer dynamiquement les layouts selon l’espace disponible et l’orientation de l’écran. L’objectif est de préserver l’impact visuel et la narration, même sur mobile, en jouant sur la variété, le rythme et l’interaction.
L’article explore les possibilités créatives offertes par la propriété CSS shape-outside, qui permet de faire épouser le flux de texte aux contours d’une image ou d’une forme personnalisée, au lieu de se limiter à un rectangle classique. L’auteur illustre son propos avec des exemples concrets, comme un site web pour une artiste de country fictive, Patty Meltt. Il montre comment utiliser shape-outside pour créer des mises en page dynamiques et immersives : text wrapping autour de portraits, d’instruments de musique, ou même de montages photo, en jouant avec les canaux alpha des images ou des clip-path. L’article détaille aussi des astuces pour simuler un centrage d’image ou contourner les limites des rotations CSS. L’objectif ? Rendre les longs contenus visuellement plus engageants et moins statiques, en intégrant images et texte dans une composition harmonieuse. Des exemples interactifs sont disponibles dans un lab en ligne pour expérimenter ces techniques. Une lecture inspirante pour les designers et développeurs web cherchant à ajouter du mouvement et de la personnalité à leurs layouts.