Cos'è il responsive design? (Video esplicativo e infografica)

web design reattivo

Ci sono voluti un decennio per web design reattivo (RWD) per diventare mainstream da allora Presentato per la prima volta Cameron Adams il concetto. L'idea era geniale: perché non possiamo progettare siti che si adattino alla visualizzazione del dispositivo su cui vengono visualizzati?

Cos'è il Responsive Design?

Il responsive web design (RWD) è un approccio di web design mirato alla creazione di siti per fornire un'esperienza visiva ottimale - facile lettura e navigazione con un minimo di ridimensionamento, panoramica e scorrimento - su un'ampia gamma di dispositivi (dai telefoni cellulari al computer desktop monitor). Un sito progettato con RWD adatta il layout all'ambiente di visualizzazione utilizzando griglie fluide basate su proporzioni, immagini flessibili e query multimediali CSS3, un'estensione della regola @media.

wikipedia

In altre parole, elementi come le immagini possono essere regolati così come il layout di quegli elementi. Ecco un video che spiega cos'è il responsive design e perché la tua azienda dovrebbe implementarlo. Recentemente abbiamo ristrutturato il DK New Media sito per essere reattivo e ora stanno lavorando Martech Zone fare lo stesso!

La metodologia di creazione di un sito reattivo è un po 'noiosa in quanto è necessario disporre di una gerarchia per gli stili organizzati in base alle dimensioni del viewport.

I browser sono consapevoli delle loro dimensioni, quindi caricano il foglio di stile dall'alto verso il basso, interrogando gli stili applicabili per la dimensione dello schermo. Ciò non significa che devi progettare fogli di stile diversi per schermi di ogni dimensione, devi solo spostare gli elementi necessari.

Operare con una mentalità mobile-first è lo standard di base oggi. I migliori marchi della categoria non pensano solo al fatto che il loro sito sia ottimizzato per i dispositivi mobili, ma anche alla completa esperienza del cliente.

Lucinda Duncalfe, CEO di Monetate

Ecco un'infografica di Monetate che illustra i potenziali vantaggi della creazione di un design reattivo per più dispositivi:

Responsive Web Design Infografica

Se desideri vedere un sito reattivo in azione, punta il tuo Google Chrome browser (credo che Firefox abbia la stessa funzionalità) a DK New Media. Ora seleziona Visualizza> Sviluppatore> Strumenti per sviluppatori dal menu. Questo caricherà una serie di strumenti nella parte inferiore del browser. Fare clic sulla piccola icona del cellulare all'estrema sinistra della barra dei menu Strumenti per sviluppatori.

reattivo-test-chrome

Puoi utilizzare le opzioni di navigazione in alto per cambiare la visualizzazione da orizzontale a verticale o persino selezionare un numero qualsiasi di dimensioni di visualizzazione preprogrammate. Potrebbe essere necessario ricaricare la pagina, ma è lo strumento più interessante al mondo per verificare le tue impostazioni reattive e garantire che il tuo sito abbia un bell'aspetto su tutti i dispositivi!

Commenti

  1. 1
  2. 2

    Grazie mille Douglas per questo articolo ben spiegato. Devo essere d'accordo con questo però sul lato contenuto delle cose. Per la maggior parte dei siti che realizziamo un layout responsive non sarà sufficiente. Abbiamo bisogno di contenuti reattivi. Ma per i siti web più basilari useremo sicuramente il tuo articolo ben documentato su come gestirlo!

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.