Il design adattivo (design reattivo)

Gli utenti che accedono a Internet tramite tablet e telefoni cellulari sono in aumento. Questo, come già sai, significa che non è solo sufficiente progettare una buona pagina web che abbia un bell'aspetto sul nostro computer: deve anche essere vista su ogni dispositivo mobile. Il problema? Diverse dimensioni e risoluzioni dello schermo. Ecco perché è così difficile realizzare un design che si adatti correttamente a tutti i media (il famoso Design reattivo, tradotto come design adattivo).

Ecco alcuni suggerimenti da tenere a mente quando si realizza un design con queste caratteristiche. Fai attenzione!

Suggerimenti per la progettazione adattiva

Crea un semplice modelloCon semplice non intendo insipido. Sto parlando del struttura HTML del tuo sito web: più è chiaro, meglio è. Tieni presente che lo schermo di un computer può adattarsi a tre colonne verticali; sullo schermo di un cellulare, ne inserirai solo uno. Pensaci e come riposizionerai gli elementi.
Elimina tutto il necessarioEvita effetti jQuery, animazioni Flash e qualsiasi altro codice che rallenti il caricamento della tua pagina. Meno contenuti di questo tipo hai, più velocemente si caricherà il web.
Definisci uno stile css per ogni "dimensione"Crea un tiny.css, small.css e big.css (ad esempio) che viene eseguito in base al dispositivo su cui viene visualizzato. Per esempio:

@import url (tiny.css) (larghezza minima: 300px);

@import url (small.css) (larghezza minima: 600px);

@import url (big.css) (larghezza minima: 900px);
Le risoluzioni più utilizzate320 px / 480 px / 720 px / 768 px / 900 px / 1024 px
Rendi il tuo modello FLESSIBILEOgni volta che puoi, lavora con percentuali anziché con importi fissi. Ecco alcune equivalenze di riferimento: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
Tipografia È più importante che mai A volte lo schermo del tuo dispositivo può essere così piccolo che tutto ciò che vedi su di esso è testo. Questo è il motivo per cui dobbiamo selezionare molto attentamente i migliori caratteri sul nostro sito, in modo che quando vengono ridotti di dimensioni non perdano leggibilità. Inoltre, dobbiamo sapere come combinare caratteri più neutri con altri con personalità che conferiscono al web il carattere necessario. Pertanto, il primo suggerimento è che passi del tempo a selezionare i caratteri che intendi utilizzare.
Stati Uniti d'America immagini di alta qualitàMan mano che lo spazio si riduce, le immagini lo accompagneranno. Seleziona quelli che non perdono qualità se ridotti e che funzionano allo stesso modo quando ridimensionati. Un'immagine di scarsa qualità renderà il tuo sito Web brutto.
Che le tue immagini si vedano sempre per interoEvita che le tue foto vengano tagliate aggiungendo il codice img (width: 100%;) nel tuo css. In questo modo, stai dicendo al dispositivo di ricalcolare l'altezza da dare all'immagine in modo che la sua larghezza possa essere vista al cento per cento.
Tutto basso lo stesso URLDimentica i sottodomini come www.miosito.com/mobile, poiché lo stesso file index.html nella cartella principale funzionerà per tutti i dispositivi (se esegui correttamente il design adattivo). Conosci già il vantaggio: meno sottodomini, più veloce sarà il caricamento della pagina.
Approfitta dei supporti: Sii fantasioso Accedere a un sito web da un computer desktop non è la stessa cosa che da un iPad o da un telefono cellulare. Con il primo navigherai in modo calmo e rilassato. Con quest'ultimo, lo farai nelle ore di inattività e chiuderai la finestra non appena ti annoierai. Approfitta di queste condizioni per intrattenere l'utente e farlo divertire in quei pochi minuti che ti dedicheranno. Forse quando tornerà a casa deciderà di farti visita di nuovo in modo più rilassato.
Lasciati ispirare Nelle pubblicazioni digitali, ti chiederai perché questo consiglio. Molto facile: riviste digitali (bravo) sanno come sfruttare il supporto e il loro design è molto intelligente. Lasciati ispirare da loro e crea un sito web difficile da lasciare.

Maggiori informazioni - Riviste digitali

Fonte - Splio, 960.gs, colonnale