Iniziamo giocando con il nostro modulo post sul blog, giocherellando con la spaziatura. Aggiungiamo anche il quadratino colorato in alto a sinistra del modulo, un significante visivo del tipo di contenuto che è.
Il prossimo cambiamento che apportiamo è ridurre alcuni spazi esterni con schermi di dimensioni più strette. Sugli schermi ampi, il contenuto è ampio all'80% (bordi di larghezza del 10%) ma è meglio andare più come il 90% su schermi più piccoli (bordi di larghezza del 5%).
Aggiungiamo una piccola transizione per quando la query multimediale viene raggiunta, il che può essere un trucco davvero divertente. Mi piace in questo video, ma alla fine questo è stato preso dal design. Può diventare instabile quando ci sono molti più contenuti sulla pagina e piuttosto distraenti.
Modifichiamo il nostro sistema di griglia per avere un punto di interruzione alla dimensione più piccola. È semplicissimo, smettiamo di far fluttuare le colonne e le facciamo sì che width: 100%;non pensino troppo alle griglie! Affrontiamo alcuni problemi di specificità lungo la strada.
Apriamo il vero simulatore iOS per controllare la griglia che funziona su un dispositivo mobile "reale". Facciamo un po 'fatica a trovare il meta tag corretto, ma alla fine riusciamo a prendere quello corretto da CSS-Tricks.com. Funziona! Ma ovviamente abbiamo alcuni problemi di posizionamento che dovremo risolvere. Per la cronaca, quel meta tag è:
Armeggiamo armeggiamo con spaziatura e dimensionamento finché le cose non sembrano a posto. Alla fine le cose sembrano piuttosto reattive!