COS’È IL RESPONSIVE WEB DESIGN?

ENG = la lingua inglese designa genericamente con l’aggettivo “responsive” tutto ciò che “reagisce o risponde rapidamente e in modo appropriato a uno stimolo”
ITA = in italiano l’aggettivo che rende meglio il termine responsive è “adattativo” o “adattivo”


I CONTENUTI: COSA INSERIRE?



“Non iniziate la progettazione del sito pensando al layout per il desktop. Ma non iniziate nemmeno pensando al layout per il mobile. Pensate invece, prima di tutto, ai contenuti
Jeremy Keith

Fondamentale è porsi le domande giuste in fatto di strategia per la gestione dei contenuti, passando solo in un secondo momento dal “cosa” (quali contenuti) al “come” (tecniche e modalità di presentazione degli stessi).


LA STRUTTURA

IL LAYOUT
La parola d’ordine è semplificare.
Sui dispositivi mobili la modalità ottimale è quella della LINEARIZZAZIONE degli elementi che compongono la pagina.

CANCELLIAMO IL SUPERFLUO



La regola fondamentale, nella realizzazione di pagine responsive, è la capacità di NASCONDERE i contenuti non essenziali. Pertanto, prima di iniziare lo sviluppo, è necessario stilare un elenco dei contenuti da visualizzare sui vari device.


LE 3 FASI DELLA PROGETTAZIONE

FASE 1: GRIGLIE FLUIDE Il layout deve espandersi e restringersi in base alle dimensioni del browser

FASE 2: IMMAGINI FLUIDE La regola del max-width
La regola css maxwidth vincola la larghezza dell’immagine a quella del suo contenitore.

FASE 3: MEDIA QUERIES Ri-disporre il contenuto adattandolo al dispositivo
I media queries sono attributi CSS che consentono di definire determinati valori per determinate dimensioni del browser
Informativa
Questo sito o gli strumenti terzi da questo utilizzati si avvalgono di cookie necessari al funzionamento ed utili alle finalità illustrate nella cookie policy.
Se vuoi saperne di più o negare il consenso a tutti o ad alcuni cookie, consulta la cookie policy
Chiudendo questo banner, scorrendo questa pagina, cliccando su un link o proseguendo la navigazione in altra maniera, acconsenti all'uso dei cookie. Per saperne di più.