Responsive Web Design

Responsive Web Design (RWD) è una configurazione in cui il server invia sempre lo stesso codice HTML a tutti i dispositivi e il codice CSS viene utilizzato per modificare il rendering della pagina sul dispositivo. Se tutti gli user-agent Googlebot possono sottoporre a scansione la pagina e le relative risorse (CSS, JavaScript e immagini), gli algoritmi di Google dovrebbero essere in grado di rilevare automaticamente questo tipo di configurazione.

Con il responsive design viene pubblicato lo stesso codice per tutti i dispositivi, adattato in base alle dimensioni dello schermo.

TL;DR

  • Utilizza il tag meta name="viewport" per indicare al browser la modalità di adattamento dei contenuti.
  • Visita il sito Web Fundamentals (Concetti fondamentali del Web) per accedere ad altra documentazione.

Utilizzare meta name="viewport"

Per segnalare ai browser che la tua pagina si adatterà a tutti i dispositivi, aggiungi un meta tag all'intestazione del documento, come segue:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il meta tag viewport indica al browser come regolare le dimensioni e il ridimensionamento della pagina in base alla larghezza del dispositivo. In assenza di tale elemento, i browser per dispositivi mobili applicano l'impostazione predefinita, ovvero eseguono il rendering della pagina alla larghezza utilizzata per gli schermi desktop (di solito circa 980 px, anche se questo valore può variare da un dispositivo all'altro). Dopodiché, per migliorare l'aspetto dei contenuti, aumentano le dimensioni dei caratteri e ridimensionano i contenuti in base allo schermo oppure ne visualizzano solo la parte che può essere inclusa nello schermo.

Per gli utenti, questo significa che le dimensioni dei caratteri potrebbero avere un aspetto disomogeneo e che potrebbe essere necessario toccare due volte lo schermo o pizzicare per aumentare lo zoom al fine di visualizzare e interagire con i contenuti. Per Google, invece, la pagina potrebbe non essere riconosciuta come ottimizzata per i dispositivi mobili, poiché richiede questo tipo di interazione in un dispositivo mobile.

Per la pagina raffigurata a sinistra non è stato specificato alcun meta tag viewport. Di conseguenza, il browser del dispositivo mobile presuppone che lo schermo abbia la larghezza di un dispositivo desktop e adatta la pagina di conseguenza, rendendo i contenuti difficili da leggere. A destra è raffigurata la stessa pagina per cui è stata specificata un'area visibile corrispondente alla larghezza dello schermo del dispositivo. Il browser del dispositivo mobile, pertanto, non ridimensiona la pagina e i contenuti sono leggibili.

Se desideri utilizzare immagini reattive, includi l'elemento <picture>.

Come regola generale, se il tuo sito funziona in un browser recente come Google Chrome o Safari per dispositivi mobili di Apple, dovrebbe funzionare anche con i nostri algoritmi.

Perché utilizzare il responsive design

Ti consigliamo di utilizzare il responsive web design perché:

  • Semplifica la condivisione dei contenuti e il reindirizzamento degli utenti ai tuoi contenuti con un singolo URL.
  • Consente agli algoritmi di Google di attribuire in modo preciso le proprietà di indicizzazione alla pagina, senza dover segnalare l'esistenza di pagine corrispondenti per dispositivi mobili/desktop.
  • Richiede un tempo di progettazione inferiore per la manutenzione di più pagine per gli stessi contenuti.
  • Riduce il rischio che si verifichino errori comuni che incidono sui siti per dispositivi mobili.
  • Non richiede alcun reindirizzamento per offrire agli utenti una visualizzazione ottimizzata in base al dispositivo in uso, riducendo quindi il tempo di caricamento. Il reindirizzamento basato sullo user-agent è inoltre soggetto a errori e può peggiorare l'esperienza degli utenti con il tuo sito (per informazioni dettagliate, leggi la sezione "Insidie durante il rilevamento degli user-agent").
  • Consente di risparmiare risorse quando Googlebot esegue la scansione del tuo sito. Per le pagine responsive web design, il recupero di tutte le versioni dei contenuti richiede una sola scansione di un solo user-agent Googlebot, anziché più scansioni di user-agent Googlebot diversi. Indirettamente, grazie a questa maggiore efficienza di scansione, Google è in grado di indicizzare un numero maggiore di contenuti del tuo sito e di mantenerli debitamente aggiornati.

Se sei interessato al responsive web design, inizia leggendo il nostro post sul blog Webmaster Central e visita il sito Web Fundamentals (Concetti fondamentali del Web).

JavaScript

Nella realizzazione di siti ottimizzati per dispositivi mobili, un aspetto che richiede un'attenta valutazione è l'utilizzo di JavaScript per modificare il rendering e il comportamento del sito su dispositivi diversi. Tra gli utilizzi tipici di JavaScript è inclusa la scelta della risoluzione alternativa di un'immagine o di un annuncio da mostrare nella pagina.

In questa sezione sono illustrati i diversi approcci all'utilizzo di JavaScript e la relativa correlazione con l'utilizzo di responsive web design consigliato da Google.

Configurazioni comuni

Di seguito sono descritte tre implementazioni comuni di JavaScript per i siti ottimizzati per i dispositivi mobili:

  • Adattiva a JavaScript. In questa configurazione vengono pubblicati per tutti i dispositivi gli stessi contenuti HTML, CSS e JavaScript. Quando il codice JavaScript viene eseguito sul dispositivo, viene modificato il rendering o il comportamento del sito. Se un sito web richiede JavaScript, questa è la configurazione consigliata da Google.
  • Rilevamento combinato. In questa implementazione, il sito web utilizza il rilevamento sia JavaScript sia sul lato server delle funzionalità del dispositivo per pubblicare contenuti diversi per dispositivi diversi.
  • JavaScript pubblicato in modo dinamico. In questa configurazione viene pubblicato lo stesso codice HTML per tutti i dispositivi, ma viene utilizzato un URL che pubblica in modo dinamico codici JavaScript diversi in base allo user-agent del dispositivo.

Di seguito viene esaminata in dettaglio ognuna di queste configurazioni.

Adattiva a JavaScript

In questa configurazione, in corrispondenza di un URL vengono pubblicati gli stessi contenuti (HTML, CSS, JavaScript e immagine) per tutti i dispositivi. Soltanto quando il codice JavaScript viene eseguito sul dispositivo viene modificato il rendering o il comportamento del sito. Si tratta di un funzionamento simile a quello del Responsive Web Design con l'utilizzo di query multimediali CSS.

Ecco un esempio. In una pagina viene pubblicato per tutti i dispositivi lo stesso codice HTML contenente un elemento <script> che richiede un URL esterno per la pubblicazione dei contenuti JavaScript. Tutti i dispositivi che richiedono l'URL dei contenuti JavaScript ricevono lo stesso codice. Quando viene eseguito, il codice JavaScript rileva il dispositivo e decide di apportare alcune modifiche alla pagina, ad esempio includendo un'immagine o un codice dell'annuncio nella versione ottimizzata per smartphone anziché nella versione desktop.

Questa configurazione è strettamente correlata al responsive web design e i nostri algoritmi sono in grado di rilevarla automaticamente. Inoltre, questa configurazione non richiede l'intestazione HTTP Vary perché gli URL della pagina e le relative risorse non pubblicano in modo dinamico i contenuti. Considerati tali vantaggi, se il tuo sito web richiede l'utilizzo di JavaScript, questa è la nostra configurazione consigliata.

Rilevamento combinato

Il rilevamento combinato è una configurazione in cui il server opera insieme a JavaScript sul client per rilevare le funzionalità del dispositivo e modificare i contenuti pubblicati.

Ad esempio, per un sito potrebbe decidere di modificare il rendering dei contenuti in base al fatto che il dispositivo sia un computer desktop o uno smartphone. In questo caso, nel sito web si potrebbe includere codice JavaScript che rilevi le dimensioni dello schermo, che vengono poi inviate al server il quale, a sua volta, aggiorna o modifica il codice inviato al dispositivo. In genere, il codice JavaScript memorizza le funzionalità del dispositivo rilevate in un cookie che viene letto dal server durante le visite successive dallo stesso dispositivo.

Considerato che il server restituisce contenuti HTML diversi a user-agent diversi, il rilevamento combinato viene considerato un tipo di configurazione con pubblicazione dinamica. I dettagli sono descritti in modo esaustivo nella sezione relativa alla pubblicazione dinamica ma, per riassumerli brevemente, il sito web dovrebbe includere l'intestazione della risposta HTTP "Vary: User-agent" quando viene richiesto un URL in corrispondenza del quale vengono pubblicati contenuti HTML diversi per user-agent diversi.

JavaScript pubblicato in modo dinamico

In questa configurazione, per tutti i dispositivi viene pubblicato lo stesso codice HTML contenente un elemento <script> per includere un file JavaScript esterno che può avere contenuti diversi a seconda dello user-agent che li richiede. Ciò significa che il codice JavaScript viene pubblicato in modo dinamico.

In questo caso, consigliamo di pubblicare il file JavaScript con l'intestazione HTTP "Vary: User-agent". Si tratta di un segnale per le cache Internet e per Googlebot che indica che i contenuti JavaScript possono essere diversi per user-agent diversi, nonché di un'indicazione per Googlebot della necessità di eseguire la scansione del file JavaScript utilizzando diversi user-agent Googlebot.