Negli ultimi tempi mi sono reso conto che i design di alcuni siti progettati ben prima che si parlasse in modo così ossessivo di responsive design funzionano molto bene su dispositivi mobile (ad esempio CSS Zibaldone), mentre gli ultimi miei design personali non riescono ad adattarsi con facilità a questo tipo di layout. In questo articolo vorrei passare in rassegna alcuni problemi da me individuati nello sviluppo di design di tipo responsive.
Una colonna: l'ideale
I design ad una sola colonna restano ancora oggi la soluzione ideale per questo tipo di design, specie quando si pensa ai dispositivi mobile. Non è affatto vero che i browser mobile riescano sempre a rendere al meglio i layout non ottimizzati: ci riescono, curiosamente, quando applicano i loro algoritmi di zoom alla pagina senza che noi abbiamo specificato alcun meta tag per definire le dimensioni della viewport.
CSS Zibaldone, testato su iPad, si adatta molto bene alla finestra del browser. La regola che rende possibile il tutto è semplice:
#content {
width: 90%;
margin: 0 auto;
}
Con un layout ad una colonna l'unico problema resta lo spazio disponibile per gli elementi affiancati orizzontalmente tramite i float. Purtroppo non esiste una soluzione CSS al problema, perchè molto spesso le dimensioni di un elemento variano in base alla quantità di contenuto presente in esso.
Credo che linearizzare un layout, specie quando si gestiscono strutture complesse, resti una soluzione consigliata. Potrebbe sembrare una soluzione retrodatata, ma se pensiamo a quante difficoltà incontreremmo mantenendo il layout originale non possiamo che concordare (a malincuore magari) sulla sua utilità.
E se pensiamo che lo spazio orizzontale si riduce ulteriormente sugli smartphone, cambiare l'impaginazione del layout è sicuramente un approccio da tenere presente. Possiamo utilizzare le Media Queries CSS3 per questo scopo.
Riferimenti
Stili specifici per l'orientamento dell'iPad con le Media Queries
Dimensioni minime e massime
I CSS dispongono di quattro proprietà per gestire le dimensioni minime e massime degli elementi:
min-widthmax-widthmin-heightmax-height
Il problema è che l'uso di queste proprietà segue degli algoritmi particolari, definiti nelle specifiche CSS 2.1:
| Violazione della restrizione | Larghezza finale | Altezza finale |
|---|---|---|
| none | w | h |
| w > max-width | max-width | max(max-width * h/w, min-height) |
| w < min-width | min-width | min(min-width * h/w, max-height) |
| h > max-height | max(max-height * w/h, min-width) | max-height |
| h < min-height | min(min-height * w/h, max-width) | min-height |
| (w > max-width) e (h > max-height), dove (max-width/w ≤ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) e (h > max-height), dove (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) e (h < min-height), dove (min-width/w ≤ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) e (h < min-height), dove (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) e (h > max-height) | min-width | max-height |
| (w > max-width) e (h < min-height) | max-width | min-height |
Molti layout di tipo responsive usano un approccio che evita questi calcoli tra dimensioni minime e massime:
#content {
width: 100%;
margin: 0 auto;
max-width: 960px;
}
In questo caso anche se la larghezza massima è di 960 pixel, il contenitore sarà sempre al 100% della larghezza della finestra del browser quando si effettua un resize della viewport.
Conclusione
Questi due aspetti sono solo alcune delle cose che ho notato durante lo sviluppo di layout responsive. Sicuramente aggiungerò altre riflessioni nel corso del mio lavoro.