Marketing ContentVideo di marketing e venditeInfografica di marketingMarketing per dispositivi mobili e tablet

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

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

Cos'è il Responsive Design?

Il responsive web design è un approccio progettuale che garantisce che un sito web fornisca un'esperienza di visualizzazione ottimale su qualsiasi dispositivo, indipendentemente dalle dimensioni o dalla risoluzione dello schermo. Implica l'utilizzo di layout flessibili, layout basati su griglia e media query per creare un sito che si adatti alle dimensioni dello schermo su cui viene visualizzato. Ciò significa che un sito Web progettato con un design web reattivo apparirà e funzionerà bene su un computer desktop, un tablet o uno smartphone.

In altre parole, elementi come le immagini possono essere regolati così come il layout di tali elementi. Ecco un video che spiega cos'è il responsive design e perché la tua azienda dovrebbe implementarlo. Se stai sviluppando un nuovo design del sito o un'applicazione web, il responsive web design è un must, non un'opzione, dato che oltre la metà di tutto il traffico web proviene da dispositivi mobili con diverse larghezze e altezze del viewport.

Il responsive design è ottimale anche per i web designer, che non devono creare esperienze indipendenti univoche in base al dispositivo o al viewport. Il web design reattivo può essere realizzato utilizzando CSS.

Query di visualizzazione CSS di progettazione reattiva

Ecco un esempio di un foglio di stile che regola la dimensione del carattere in base al viewport utilizzando una media query:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

I browser sono consapevoli delle loro dimensioni e caricano il foglio di stile dall'alto verso il basso. Interrogando gli stili applicabili per le dimensioni dello schermo, è possibile impostare elementi di stile specifici per ogni larghezza minima e massima del dispositivo. Questo non significa che devi progettare siti diversi per schermi di ogni dimensione, devi solo spostare gli elementi necessari utilizzando le media query.

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 da Monetate illustrando i potenziali vantaggi della creazione di un design reattivo per più dispositivi:

Responsive Web Design Infografica

Il tuo sito è reattivo?

Un modo semplice per vedere se il tuo sito è reattivo è semplicemente ingrandire o ridurre la finestra del browser per vedere se gli elementi si muovono in base alla larghezza del browser.

Per maggiore precisione, punta il tuo Google Chrome browser al tuo sito. Selezionare Visualizza> Sviluppatore> Strumenti per sviluppatori dal menù. Questo caricherà una serie di strumenti in un pannello o in una nuova finestra. Fai clic sulla piccola icona a sinistra della barra dei menu degli Strumenti per sviluppatori che assomiglia all'icona di un dispositivo mobile e di un tablet. Puoi selezionare alcuni dispositivi standard e persino cambiare se desideri visualizzare la pagina orizzontalmente o verticalmente.

  • Tablet reattivo degli strumenti di sviluppo Chrome
  • strumenti per sviluppatori Chrome responsive mobile orizzontale
  • strumenti per sviluppatori Chrome reattivi per dispositivi mobili
  • desktop reattivo degli strumenti di sviluppo di 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!

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.