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
Ci sono cose su cui non sono molto d'accordo.
Al punto 5 ... dato che 200px = 15,38% e successivi ... questo confronto di riferimento non può essere fatto senza alcuna misura genitore, la dimensione per pixel non è una misura relativa come le percentuali!
Specifica le immagini con la larghezza: 100% sbagliato, non penso che dovrebbe essere una raccomandazione. È meglio definire le immagini con la loro larghezza e altezza, quindi il server impiega meno tempo per elaborare le informazioni (non deve calcolarne le dimensioni) e miglioriamo la velocità di caricamento della pagina (molto importante nel web adattivo o reattivo design).
Includerei già, anche se è un tocco di naso ... le immagini per schermi retina. Se vogliamo realizzare un web design reattivo, è obbligatorio utilizzare immagini per la visualizzazione della retina, poiché un'elevata% delle visualizzazioni da dispositivi mobili e tablet utilizza questi schermi. Quindi non ha senso mettere gli sforzi in un design per loro a metà gas.
Buon per il resto
Al punto 5, ti contestualizzano e ti parlano di un layout totale di 1300px con 3 colonne, una di 200, 300 e 1000.
Se lo passi alle percentuali, nel loro caso sono come dici tu, 15,38% ((200 * 100) / 1300) (decimale sotto, sistema internazionale: P)
Ma se parliamo di un layout di 500px e abbiamo 3 colonne, una di 200, un'altra di 200 e un'altra di 100px, le percentuali non sono più le stesse, in questo caso 200px = 40% ((200 * 100) / 500)
Sarebbero: 200px = 40% e 100px = 10%
Dai, come ho detto, non sono un riferimento quello che indichi, sono solo un riferimento su un layout di 1300px.
saluti
Che fallimento, hai assolutamente ragione nel mondo! Grazie ancora ;)