Alcuni anni fa, era relativamente facile progettare e costruire siti web. I siti web erano più semplici e venivano visualizzati su desktop e laptop con piccole variazioni nelle dimensioni dello schermo. Oggi, con i dispositivi mobili che sfruttano il tempo di navigazione degli spettatori, è possibile visualizzare un sito Web su uno schermo per smartphone da 4,8 ", un phablet da 5", un tablet da 7 "o qualsiasi dimensione intermedia.
Quindi, come garantisci che il tuo sito web venga visualizzato correttamente tra i tipi di dispositivi e le dimensioni dello schermo?
La soluzione è stata inizialmente proposta da Ethan Marcotte, quando ha esplorato i modi per rendere reattivi i design dei siti web, cioè li ha fatti cambiare in base alle dimensioni dello schermo. Un design reattivo del sito Web è uno che fa un uso intelligente dei CSS per garantire che le pagine Web possano essere visualizzate su un'ampia gamma di dimensioni dello schermo, senza ricorrere al reindirizzamento URL o alla pubblicazione dinamica di codice HTML e CSS diverso, a seconda dell'Utente. Non è davvero una tecnologia o uno standard, ma piuttosto una serie di principi di progettazione che aiutano a raggiungere il risultato.
Negli ultimi anni sono sorti molti modelli reattivi, framework CSS e temi WordPress. Ad esempio, è possibile creare un sito Web reattivo in WordPress senza scrivere una singola riga di codice.
Ma un vero web designer non si accontenta di usare solo i modelli. Farà lo sforzo di comprendere gli elementi del web design reattivo, al fine di utilizzarli in modo efficace.
Quindi oggi esamineremo le 3 tecniche fondamentali che devi padroneggiare, sarai un efficace progettista reattivo.
Le query multimediali consentono di progettare layout diversi per diversi tipi di media come schermo, stampa, TV, dispositivi palmari ecc. A seconda del tipo di supporto, è possibile configurare lo stile, il tipo di carattere e altri elementi della pagina.
Introdotto nel CSS3, le query sui media consentono a un designer di personalizzare la presentazione del contenuto per adattarsi a una gamma specifica di tipi di dispositivi di output. Sono costituiti da una dichiarazione del tipo di supporto e da una o più espressioni di funzioni multimediali che valutano true o false.
La gamma di tipi di media comprende palmare, schermo, tv, stampa e proiezione. Le funzionalità multimediali includono, ma non si limitano a, altezza, larghezza, proporzioni, risoluzione, indice del colore e altezza, larghezza della finestra del browser.
Facciamo un esempio di base; Immagina di voler ridurre le dimensioni del tuo testo su dispositivi più piccoli, come i telefoni. La query per questo sarebbe simile a qualcosa:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Ora, la dimensione del font dei tuoi paragrafi sarà impostata su 1em, a meno che la larghezza del browser non sia inferiore a 400px, nel qual caso si ridurrà a 0.8em.
Nella mia esperienza, il modo migliore per progettare un layout reattivo è innanzitutto creare un foglio di stile master predefinito con gli elementi strutturali principali. Quindi è possibile aggiungere query multimediali per personalizzare gli elementi in base al layout o ad altri elementi del dispositivo. Se è più di una manciata di regole, potrebbe essere meglio spostarle in un foglio secondario separato, che puoi caricare in seguito in modo selettivo. Ecco come funzionerebbe:
Questo codice controlla se il dispositivo è palmare in modalità orizzontale con larghezza del dispositivo inferiore a 720 px e, in caso affermativo, carica il foglio di stile tablet_layout.css .
Si noti che le funzioni larghezza, altezza, min / max-larghezza, min / max-altezza si riferiscono tutte alla larghezza e all'altezza della finestra del browser. La larghezza e l'altezza del dispositivo sono controllate dalla larghezza del dispositivo, dall'altezza del dispositivo, dalla larghezza del dispositivo min / max, dall'altezza del dispositivo min / max . Se ti va di alzare lo sguardo altri esempi utilizzando le query multimediali MDN ha un buon riepilogo.
"Griglia fluida" è un termine usato per descrivere un layout che è codificato in proporzioni relative dei vari elementi, piuttosto che con valori di pixel fissi.
I tradizionali layout CSS utilizzavano griglie a larghezza fissa per posizionare gli elementi. L'approccio a larghezza fissa non funziona più oggi, ora che abbiamo schermi di dispositivi che vanno da 3 pollici a pochi metri. In una progettazione a griglia fluida, tutto è codificato in termini di proporzione relativa all'elemento base, cioè invece di specificare l'altezza e la larghezza di ciascun elemento; viene data una percentuale o una dimensione relativa.
Immagina di avere quattro colonne. Per rendere questo fluido, invece di specificare ciascuno di 200 pixel di larghezza, è necessario specificarli 0,2083% (ad esempio 200/960). Almeno, questo è il principio. Creare una griglia completamente fluida richiede molta cura. È uno di quei rari casi che preferisco raccomandare l'utilizzo di strumenti personalizzati. Piccola griglia fluida , Sistema a griglia variabile e Fluid Baseline Grid sono alcune ottime alternative per scrivere da zero la tua griglia fluida.
Le immagini sono considerate flessibili quando l'immagine viene visualizzata in formato nativo, purché il contenitore HTML lo supporti, ma quando la finestra del browser si riduce, l'immagine viene ridimensionata per adattarsi.
Anche se il resto del design è fluido e reattivo, non funzionerà correttamente se tutti i componenti non si ridimensionano. Questo può essere complicato con immagini e video. Un'immagine larga 700 pixel risulterà perfetta su un desktop, ma verrà troncata se visualizzata su un tablet da 320 pixel. I progetti responsive più moderni utilizzano la proprietà max-width del CSS per ridimensionare le immagini. (Questo metodo era prima proposta da Richard Butler .)
img {max-width: 100%;}Queste poche righe garantiranno che l'immagine non venga troncata, impostando la larghezza massima dell'immagine sul 100% del contenitore. Se la finestra o lo schermo del browser diventa più piccolo, questo pezzo di codice CSS ridurrà proporzionalmente l'immagine. L'altezza viene regolata automaticamente, mantenendo le proporzioni bloccate.
Puoi invece bloccare l'immagine per occupare una certa proporzione dello schermo verticale come questa
img {max-height: 75%;}(Assicurati di non utilizzare insieme le proprietà max-height e max-width .)
La dimensione dell'immagine può anche essere collegata alla dimensione del testo anziché l'elemento genitore usando em , come questo:
img {width: 30em;}Se l'immagine contiene del testo, potresti voler limitare la dimensione minima / massima, per assicurarti che il testo sia leggibile. Puoi specificarlo in questo modo:
img {width: 30em;max-width: 500px;min-width: 100px;}Le stesse tecniche possono essere utilizzate per ridimensionare i video, ad esempio:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Il design reattivo è il futuro del nostro settore, ma con così tante tecniche diverse in giro, è spesso difficile tenere il passo. Padroneggia queste 3 semplici tecniche e sarai il 90% del modo per diventare un designer reattivo.
Immagine in primo piano / miniatura, immagine elastica via Shutterstock.