Codifica di un nuovo sito web. Fondamentalmente, per gli elementi di posizione che usano i CSS, utilizzerei le percentuali e ho capito che era la cosa migliore da fare poiché il monitor di tutti era di dimensioni diverse. Ma ho notato che molti siti Web di grandi dimensioni utilizzano pixel.
Non capisco come sia possibile utilizzare i pixel per posizionare le cose poiché tutti abbiamo uno schermo di dimensioni diverse?
Il layout fluido offre, in generale, una migliore esperienza utente, ma non è privo di difetti. Quando si usano layout fluidi, li si sta testando su schermi medio-piccoli-medio-grandi, ma di certo non si possono fare complicati layout fluidi con CSS2 (nessun JavaScript, nessun HTML5 / CSS3) che funzioni perfettamente su qualsiasi dispositivo, da un piccolo telefono cellulare a una modalità a schermo intero da 30 pollici.
Nella maggior parte dei casi la disposizione dei fluidi è anche più costosa. Questo è vero per il design visivo, l'ergonomia e lo sviluppo HTML / CSS.
Il layout fisso offre la possibilità per uno sviluppatore di dire:
I ho raccolto le statistiche sui browser dei miei visitatori e so che il 95% degli utenti del mio sito web ha una risoluzione compresa tra 1024 e 1920 pixel. Invece di passare un mese a progettare un layout fluido, mirerò alla risoluzione del mio 95% di utenti e impiegheremo il tempo libero per implementare alcune funzioni interessanti.
Se ho abbastanza tempo e risorse, farò una versione dedicata per telefoni cellulari .
Il fatto che i layout fissi siano più facili da implementare è importante qui. Ho una scelta: o faccio un layout fluido che in tutti i casi avrà un aspetto negativo su schermi molto piccoli o molto grandi, o spendo la stessa quantità di tempo e denaro per creare due o tre layout per risoluzioni diverse.
A parte il costo, i layout fluidi hanno anche alcuni problemi che non puoi risolvere senza HTML5 / CSS3 o JavaScript.
Esempio 1: Programmers.SE ha un layout fisso. Ciò significa che in qualsiasi risoluzione, il testo principale che ho letto (le domande e le risposte) non sarà più lungo, diciamo, di 800 pixel in larghezza. Data la dimensione del carattere corrente e l'interlinea, questo è ok per essere in grado di leggere velocemente.
Se Programmers.SE si sposta su un layout fluido, la tua domanda attuale sarebbe 1 600 pixel di larghezza sul mio schermo in questo momento. Questo sarà totalmente inutilizzabile e non sarei in grado di leggere un lungo testo senza dover minimizzare la finestra del browser e adattarlo al sito web.
Esempio 2: in un progetto recente, ho diviso il testo in due colonne per i browser che supportano questo. Data la dimensione del carattere e l'interlinea, una colonna non è veramente leggibile, ma due sono perfette. Poiché conosco la larghezza della pagina, so come verrà visualizzato il testo nel 93-94% dei casi: l'altro 5% utilizza i browser che non supportano le colonne di testo e l'ultimo dall'1 al 2% utilizza le dimensioni dei caratteri personalizzati (cioè persone che non vedono bene e ingrandiscono i font di default e / o persone che non hanno il font che uso sulla pagina).
Con un layout fluido, non sarei in grado di farlo senza HTML5: su un monitor da 30 pollici a schermo intero, due colonne sarebbero ancora illeggibili: richiederebbero invece quattro o cinque colonne. Su uno schermo di un telefono cellulare di grandi dimensioni, due colonne non sarebbero illeggibili, poiché ci saranno da una a tre parole per riga.
Esempio 3: hai un menu in alto con le parti del tuo sito web. Ci sono cinque parti e gli elementi sono float:left ed. Con un layout fisso, funziona magicamente e fallisce se l'utente specifica il font più grande per il motivo dell'accessibilità. Con un layout fluido, cosa succederà con quegli elementi se l'utente ridimensiona la pagina a una larghezza inferiore alla larghezza totale di questi cinque elementi?
Ci sono un paio di situazioni in cui userò il posizionamento basato su pixel.
Il primo è quando creo menu o elementi posizionati in modo assoluto.
L'altra situazione a cui riesco a pensare è quando creo webapps. Voglio che l'ambiente dia un aspetto simile al desktop utilizzando tutto lo spazio. Il layout è dinamico nel dimensionamento (alcune volte utilizzo il layout di YUI2 che è molto utile. Vedi qui: link ). Quindi, quando la finestra viene ridimensionata, il layout viene ridimensionato.
Il posizionamento basato su pixel ti dà più controllo e l'aspetto rimarrà statico, tuttavia, come menzionato quando cambi le risoluzioni, tutto verrà visualizzato più grande o più piccolo.