Il responsive design è l'idea di rendere il tuo sito web eccezionale con qualsiasi risoluzione—non solo su desktop e dispositivi mobili. Con un sito responsive, il tuo sito desktop e mobile sono la stessa pagina e si adattano alle dimensioni della finestra.
Che cos'è il Responsive Design?
< p>Il design reattivo consente al tuo sito di ridimensionarsi per adattarsi a qualsiasi schermo. Piuttosto che progettare attorno a un layout specifico o progettare un sito mobile e desktop separato, il tuo sito dovrebbe ridimensionarsi per adattarsi a qualsiasi dispositivo. Nel mondo reale, le persone utilizzeranno il tuo sito in tutti i modi diversi; ci sono telefoni piccoli, telefoni grandi, tablet, tablet in modalità orizzontale, netbook, laptop e iMac 5K.
Dai un'occhiata alla home page di howtogeek.com. Sul desktop, ha un'intestazione con un logo, categorie principali, pulsanti dei social media e infine un menu di hamburger con categorie estese. Le caselle degli articoli sono disposte in una griglia che si ridimensiona con le dimensioni dello schermo ma occuperà sempre solo circa 1000 px (poiché un ridimensionamento eccessivo sembrerebbe strano). Tutto sommato, c'è molto spazio per lavorare, quindi il sito sembra il migliore qui.
Riduci leggermente lo schermo alle dimensioni del tablet e non c'è molto spazio. Il testo viene suddiviso in modo diverso, le immagini vengono ridimensionate o ritagliate e le categorie principali scompaiono.
Le caselle articolo mantengono il layout ma a costo di avere righe di testo extra. L'articolo in prima pagina è però più importante e manterrà le sue proporzioni e si ridimensionerà senza ritagliare.
Pubblicità
E su dispositivi davvero piccoli, non puoi davvero permetterti di avere tutti quei pulsanti nel menu e non c'è abbastanza spazio per posizionare le caselle degli articoli l'una accanto all'altra, quindi il menu è ridotto a un hamburger menu e le caselle degli articoli sono disposte in una colonna. Questa colonna occuperà sempre l'intera larghezza del dispositivo (meno 20 px su ciascun lato per l'imbottitura).
Puoi testarlo tu stesso per vedere come si ridimensiona il tuo sito. Apri gli strumenti per sviluppatori di Chrome facendo clic con il pulsante destro del mouse in un punto qualsiasi e selezionando “Ispeziona.” Premi il pulsante dei dispositivi mobili nell'angolo in alto a destra del riquadro che si apre e seleziona “Reattivo” come tipo di dispositivo:
Puoi afferrare le maniglie il bordo del tuo sito per regolare le dimensioni, oppure puoi inserire manualmente i valori dei pixel. Puoi anche vedere in anteprima come apparirà sulle risoluzioni mobili più diffuse (anche se dovresti comunque testarlo su un dispositivo reale).
Come funziona il Responsive Design?
Prima di eseguire qualsiasi design reattivo, devi correggere un bug con le pagine mobili e il viewport. Senza questo meta tag nell'intestazione HTML, la tua pagina per dispositivi mobili potrebbe essere ridotta e non essere visualizzata correttamente. Questo potrebbe essere già impostato, poiché è un pezzo abbastanza comune di boilerplate, ma se non lo è, vai avanti e aggiungilo:
<meta content=”width=device-width, initial -scale=1″ nome=”vista” />
Il modo principale per rendere i siti reattivi è con il display magico: proprietà flex, altrimenti nota come flexbox. Flexbox funziona regolando la dimensione degli elementi all'interno di un contenitore per ridimensionarla con una dimensione della finestra che cambia. Inizi creando un contenitore e impostandolo su display: flex:
.container { display: flex; }
E poi, imposta il parametro flex di tutti i figli:
.child { flex: 1; } Advertisement
Questo farà sì che i figli si espandano e occupino tutto lo spazio consentito dal contenitore. Ad esempio, se avessi due figli, ciascuno occuperebbe il 50% dello spazio:
Se invece imposti il secondo figlio su flex: 2, occuperebbe il doppio tanto spazio quanto l'altro (66% in totale).
Quando lo schermo si rimpicciolisce, i bambini si rimpiccioliscono con esso. Tuttavia, raggiungeranno un punto in cui non possono ridursi al di sotto delle dimensioni del loro contenuto, ma puoi farli avvolgere intorno a un'altra riga (proprio come il testo) con flex-wrap sul contenitore.
.container { flex-wrap: wrap; }
Ora, non avrai mai il problema di avere il contenuto del tuo sito fuori dallo schermo o così accartocciato che è illeggibile.
Un altro pezzo di tecnologia CSS dietro il design reattivo sono le query multimediali. Le query multimediali sono come le istruzioni CSS If che ti consentono di controllare un valore prima di applicare alcuni CSS. Puoi usarlo per applicare uno stile dinamico ai componenti in base alla larghezza del browser. Ad esempio, se avessi una barra dei menu in alto che volevi nascondere sul cellulare e sostituirla con un menu di hamburger, potresti nasconderla con una query @media:
.topmenu { display: block } @media screen e (max -width: 600px) { .topmenu { display: nessuno; } }
600px è solo un valore arbitrario utilizzato per definire i limiti della maggior parte dei dispositivi mobili, ma puoi avere molti punti di interruzione che cambiano lo stile. Puoi usarli in combinazione con flexbox per modificare le proprietà flex in base alle dimensioni del dispositivo; ad esempio, un uso comune è far visualizzare gli elenchi orizzontali verticalmente e allineati al centro, per una più facile leggibilità sui dispositivi mobili.
Pubblicità
C'è molto di più nel responsive design di quanto possiamo trattare qui, quindi se desideri saperne di più sul CSS che sta dietro, puoi leggere questa fantastica guida a flexbox da CSS Tricks o leggere la documentazione di W3Schools per le query multimediali.
Come posso rendere il mio sito reattivo?
Se non vuoi perdere tempo a rifare il tuo sito pensando a flexbox, ci sono molti modelli di siti reattivi che puoi utilizzare come base, inclusi molti gratuiti. Molti modelli che puoi utilizzare con provider di hosting gestito (GoDaddy, SquareSpace, Wix, ecc.) saranno immediatamente reattivi. Underscores è un ottimo modello di partenza gratuito per WordPress.
Se vuoi codificarlo tu stesso, ma non vuoi farlo tutto a mano, esistono molte librerie di terze parti per lavorare con flexbox. Il più popolare di questi è Bootstrap, che aggiunge classi facili da usare per lavorare con flexbox (insieme a molti altri utili elementi dell'interfaccia utente). Con Bootstrap, specifichi i contenitori con la classe riga e quindi specifichi la dimensione della colonna con classi come col-md-6 e il CSS viene gestito per te. Ad esempio, il codice seguente organizzerà ogni div in una riga di tre sul desktop e aggiungerà un punto di interruzione della query multimediale per trasformarlo in una colonna a larghezza intera sui dispositivi mobili:
<div class=”row”> <div class=”col-md-4 col-sm-12″> //contenuto </div> <div class=”col-md-4 col-sm-12″> //contenuto </div> <div class=”col-md-4 col-sm-12″> //contenuto </div> </div>
Le dimensioni sono misurate su 12, quindi col-md-4 imposterà il div al 33% di larghezza su medie dimensioni (“md”) e col-sm-12 lo imposterà al 100% di larghezza su dispositivi di piccole dimensioni (” sm”).
Bootstrap ha anche un sacco di temi e modelli con cui iniziare. È progettato per farti decollare molto rapidamente e per sbarazzarti del tempo speso a pasticciare con HTML e CSS standard (da cui il nome).