Il responsive web design offre più vantaggi con meno sforzo

Il responsive web design (RWD) è recentemente diventato un termine popolare per il web design per diversi display. Sfortunatamente, molte delle persone che usano il termine non capiscono davvero il concetto. Per chiarire il più grande malinteso, facciamo un piccolo salto nel passato.

La necessità di un web design reattivo

Man mano che i dispositivi mobili, prima i telefoni cellulari, poi i tablet e gli smartphone, sono diventati più comuni, è diventato subito evidente che i siti Web progettati per essere visualizzati su un PC con Internet Explorer, Chrome, Firefox o qualsiasi altro browser sarebbero stati quasi illeggibili su di essi erano mobili dispositivi.

Alcuni proprietari di siti Web hanno tentato di visualizzare i propri siti Web in modo accettabile su dispositivi portatili più piccoli, di solito con risultati limitati o nulli.

Alla fine, poiché la necessità di visualizzare correttamente su questi dispositivi è diventata evidentemente più importante, alcuni sono arrivati ​​​​al punto di creare pagine aggiuntive, a volte anche duplicando l’intero sito, per acquisire questa crescente quota di mercato.

Questo ha creato Altro problemi ovviamente. Il punto che molti hanno perso è che hanno affrontato la questione dalla direzione sbagliata.

Abbandona completamente l’idea di un sito mobile separato… è una pessima soluzione alternativa. Il vero problema sorge quando crei un sito complesso destinato alla visualizzazione su PC e poi provi a “smorzarlo” per i display mobili.

Il giusto approccio

Non ha più senso creare un semplice sito web e poi trovare un modo logico per personalizzarlo? ogni Annuncio pubblicitario?

Questo è esattamente ciò che fa il responsive web design. Utilizzando HTML5+CSS3 integrato da query multimediali, è possibile creare un design di base del sito Web per essere visualizzato correttamente su dispositivi di qualsiasi dimensione e tipo, da un PC (2560px) a un iPhone (320px).

Le media query, abbinate a una griglia fluida basata su proporzioni, consentono al sito di interrogare il tipo di annuncio e la larghezza massima, consentendo a CSS3 di personalizzare l’annuncio in base al dispositivo. Il passaggio da 3 colonne a 2 colonne viene implementato in modo fluido e trasparente, con i display ottimizzati per le proprietà del rispettivo dispositivo.

Cosa offre il responsive web design?

In sostanza, ottieni un design adattivo facendo in modo che il tuo CSS sovrascriva la struttura del layout predefinita in base al viewport nella mano dell’utente.

Questa potrebbe sembrare una spiegazione eccessivamente semplificata di ciò che fa il responsive web design, ma in realtà è così semplice. E i passaggi per utilizzare questa capacità non sono poi così complicati. Loro includono:

Consolida l’intestazione, il contenuto, i widget e il piè di pagina in un contenitore di impaginazione: in questo modo la larghezza di questo contenitore può essere modificata tramite CSS3 per adattarsi a diverse larghezze del viewport. Questo dà al tuo CSS3 un bel pacchetto ordinato che può essere ridimensionato secondo necessità;

  • Reimposta gli elementi HTLM5 da bloccare: imposta il blocco dell’elemento da gestire;
  • Creazione della struttura principale CSS: imposta la larghezza e il float per i vari elementi all’interno del blocco;
  • Imposta query multimediali: determinano quale frase CSS3 dovrebbe seguire a seconda delle caratteristiche del dispositivo di destinazione;
  • Imposta layout fluido: consente di impostare la percentuale della larghezza dei singoli elementi nel CSS della struttura principale da applicare a annunci specifici.
  • Larghezza delle immagini e dei video incorporati: qui è possibile impostare la percentuale della larghezza massima del display che può occupare un’immagine o un video incorporato.

Il risultato finale è un display fluido che riempie adeguatamente l’area consentita praticamente su qualsiasi dispositivo mobile, pur mostrando il design di base come previsto su un PC.

Questo è ciò che fa il responsive web design… ti consente di progettare una volta e di visualizzarlo correttamente su una varietà di dispositivi diversi, rispettando gli standard stabiliti di usabilità e accessibilità.

Leave a Comment