Principi di web design reattivo

Al giorno d'oggi, è pratica comune creare un sito Web o un'app che regoli la sua interfaccia utente a seconda del browser o del dispositivo. Ci sono due approcci per raggiungere questo obiettivo. Il primo prevede la creazione di versioni diverse del tuo sito Web o della tua app per dispositivi diversi. Ma è inefficiente e può portare a errori imprevedibili.

Alla ricerca di un approccio affidabile e a prova di futuro, è stato coniato il design reattivo o adattivo. Si concentra sulla creazione di un'unica versione del layout che si adatta automaticamente a diversi browser o dispositivi.

In questo articolo, impareremo a conoscere il web design reattivo e i principi fondamentali che ti aiuteranno a creare un sito web fantastico.

Ingredienti per il web design reattivo

Il web design reattivo non è così complicato come sembra. È un insieme di pratiche che puoi usare quando scrivi CSS, non una tecnologia separata che dovrai imparare da zero. Potresti già seguire molti di questi principi senza rendertene conto. Puoi comprendere il web design reattivo esplorando i suoi quattro ingredienti: layout fluidi, unità reattive, immagini flessibili e query multimediali.

Layout fluidi

Con un layout fluido, puoi creare pagine Web che si adattano alla larghezza e all'altezza della finestra corrente. La pratica comune include l'uso del larghezza massima proprietà invece di dare una larghezza fissa a un elemento. Inoltre, utilizzando la percentuale (%), altezza della finestra (vh), o larghezza della finestra (vw) aiuta a migliorare l'adattabilità che non è possibile con i pixel (px). Quindi, la prossima volta che costruirai un layout, assicurati di introdurre queste piccole modifiche e inizia a beneficiare delle tecniche di progettazione reattiva.

Unità reattive

Passando a CSS più avanzati, vedrai spesso l'uso di rem e em unità di lunghezza invece di px unità. Questo perché il rem unità rende super facile ridimensionare l'intero layout. Per impostazione predefinita, 1rem è uguale a 16px perché è proporzionale a la dimensione del carattere dell'elemento, tipicamente 16px. Tuttavia, puoi impostare 1rem uguale a 10px (o qualsiasi altro valore) per calcoli più semplici, regolando la dimensione del carattere di primo livello.

Immagini flessibili

Le immagini sono una preoccupazione primaria durante la progettazione anche del layout più elementare. Devi sempre fare attenzione a dimensionarli correttamente in modo che si adattino al design. Inoltre, per impostazione predefinita, non si adattano alle modifiche nella finestra. Quindi, dovresti usare % per le dimensioni delle tue immagini, insieme al larghezza massima proprietà.

Puoi dare vita a siti reattivi utilizzando le query multimediali. Le griglie fluide sono buone per cominciare, ma scoprirai che ci sono alcuni punti in cui il layout inizia a rompersi. L'aggiunta di punti di interruzione per queste larghezze della finestra consente di ottimizzare il layout per i diversi dispositivi. Le query multimediali aiutano ad applicare CSS in modo selettivo in base ai risultati dei test delle funzionalità multimediali. Puoi esplorarne di nuove Funzionalità CSS per creare un sito web responsive in meno tempo.

Principi di web design reattivo

Sebbene il web design reattivo sia un salvatore quando si tratta di problemi multischermo, potresti non avere un vincolo fisico fisso a cui fare riferimento. Pertanto, ci sono sei principi di base del web design reattivo con cui iniziare quando si progetta un layout reattivo.

Usa punti di interruzione basati sul contenuto

Uno dei principi fondamentali del design afferma che il design del tuo sito web dovrebbe supportare il contenuto, non il contrario. I contenuti multimediali come video, fotografie e contenuti di testo come testi Web lunghi e brevi dovrebbero essere visualizzati in modo ottimale su tutti gli schermi. La chiave per il web design reattivo è utilizzare punti di interruzione basati sul contenuto piuttosto che quelli basati sul dispositivo.

Scegli i caratteri Web e i caratteri di sistema con saggezza

I caratteri Web sembrano sbalorditivi! Hai numerose opzioni per modificare il tuo design con font web dall'aspetto accattivante. Ma dovresti sapere che i browser dovranno scaricare ogni carattere web. Più web font, più tempo di download. Al contrario, i caratteri di sistema sono velocissimi. Se l'utente non ha un carattere di sistema denominato sul proprio dispositivo locale, tornerà al carattere successivo in lo stack della famiglia di caratteri. Pertanto, assicurati di considerare il tempo di caricamento e la richiesta di progettazione quando scegli i caratteri.

Ottimizza immagini bitmap e vettori

Hai icone diverse sul tuo sito web, a supporto del contenuto? È spesso buona norma utilizzare un formato bitmap se le tue icone hanno molti dettagli. D'altra parte, i formati vettoriali sono la strada da percorrere per le icone che si ridimensionano bene. I vettori sono spesso piccoli, ma lo svantaggio è che alcuni browser meno recenti potrebbero non supportarli. Inoltre, ci sono casi in cui i vettori sono più pesanti delle bitmap, ad esempio quando l'immagine è molto dettagliata. Pertanto, assicurati sempre di ottimizzare le immagini bitmap e i vettori prima che vadano online.

Conduci test per la prima piega reattiva

La prima piega di un sito Web è la vista che i visitatori vedono quando viene caricato per la prima volta, prima di qualsiasi scorrimento. Spesso include una sezione eroe con a barra di navigazione reattiva, copia introduttiva e media e un CTA. La reattività non è solo limitata ai dispositivi mobili. Dovresti considerare anche tablet, console di gioco e altri schermi. Quindi, la chiave è condurre test frequenti almeno per la prima visualizzazione del sito web. Puoi utilizzare Chrome DevTools (Faro) per testare la qualità della pagina web.

Non nascondere i contenuti su schermi più piccoli

Molte persone pensavano che gli utenti mobili fossero sempre di fretta, alla ricerca di informazioni di dimensioni ridotte, mentre gli utenti desktop erano più interessati a contenuti di lunga durata. Ora riconosciamo che questo non è vero nel mondo di oggi. Le persone utilizzano dispositivi mobili ovunque, alla ricerca di contenuti completi e accesso completo a tutti i servizi. Dovresti assicurarti che, invece di nascondere il contenuto, stai gestendo il layout e i punti di interruzione per presentarlo nel modo più semplice e senza sforzo possibile.

Gestire il layout utilizzando oggetti nidificati

Costruire un layout del sito e posizionare correttamente gli elementi richiede uno sforzo decente. Potresti anche aver avuto difficoltà a gestire molti elementi che dipendono l'uno dall'altro. Pertanto, dovresti considerare di avvolgere gli elementi correlati in un contenitore o. Ciò aiuta a ridurre il compito di disporre più elementi a uno in cui si dispone solo un singolo elemento.

Responsive Design: dovresti scegliere prima il desktop o il mobile prima?

Il primo approccio desktop significa che dovrai scrivere CSS per schermi di grandi dimensioni e quindi applicare query multimediali per ridurre il design per schermi più piccoli. Al contrario, il primo approccio mobile prevede la scrittura di CSS per dispositivi mobili, con schermi più piccoli, e quindi l'applicazione di query multimediali per espandere il design per schermi più grandi. L'obiettivo principale è ridurre il sito Web e le app all'essenziale.

Se stai appena iniziando con lo sviluppo web reattivo, dovresti optare per il desktop prima avvicinati come alla fine della giornata, dovrai impilare i contenitori uno sull'altro sul cellulare dispositivi. Sebbene sia una decisione completamente personale, l'approccio mobile first ti aiuta a strutturare il HTML in un modo migliore mentre l'approccio desktop-first ti aiuterà con il layout e la spaziatura tecniche.

I 6 migliori corsi per imparare UX Design

Se stai cercando di imparare il design UX o migliorare le tue abilità, ecco i sei migliori corsi online che puoi seguire.

Leggi Avanti

Circa l'autore