Nous commençons par jouer avec notre module de publication de blog, en jouant avec l'espacement. On ajoute également le petit carré coloré en haut à gauche du module, un signifiant visuel du type de contenu qu'il s'agit.
Le prochain changement que nous apportons est de réduire certains des espaces extérieurs à des tailles d'écran plus étroites. Sur les écrans larges, le contenu est de 80% de large (10% de largeur de bords) mais il est préférable d'aller plus comme 90% sur des écrans plus petits (5% de largeur de bords).
Nous ajoutons une petite transition pour le moment où cette requête multimédia frappe, ce qui peut être une astuce de concepteur vraiment amusante. Je l'aime dans cette vidéo, mais finalement cela a été retiré du design. Cela peut devenir instable lorsqu'il y a beaucoup plus de contenu sur la page et plutôt distrayant.
Nous modifions notre système de grille pour avoir un point d'arrêt à la plus petite taille. C'est super facile, on arrête juste de faire flotter les colonnes et on les rend width: 100%;Yay pour ne pas trop réfléchir aux grilles! Nous combattons certains problèmes de spécificité en cours de route.
Nous ouvrons le vrai simulateur iOS pour vérifier la grille fonctionnant sur un «vrai» appareil mobile. Nous avons un peu de mal à trouver la bonne balise Meta, mais finalement, nous allons attraper la bonne sur CSS-Tricks.com. Ça marche! Mais bien sûr, nous avons des problèmes de positionnement que nous devrons résoudre. Pour mémoire, cette balise meta est:
Nous bricolons bricoler avec l'espacement et le dimensionnement jusqu'à ce que tout semble bien. Les choses semblent plutôt bien réactives à la fin!
