E 'consigliabile utilizzare un layout fluido?

https://stackoverflow.com/questions/1963041

21-09-2019
|

Domanda

Ho sempre preferito i layout a larghezza fissa over layout fluido-width, uno dei motivi principali è che sono in grado di capire meglio come il quadro completo sarà senza doversi preoccupare la risoluzione dello schermo.

Ma ora il "immagine" è cambiato, c'è un'alta discrepanza tra i bassi e più alti risoluzioni utilizzati dalla maggior parte degli utenti al giorno d'oggi e sembrano essere qui per rimanere.

Ho un netbook che supporta solo 800 pixel o 1024 pixel di larghezza; Ho anche un monitor che supporta 1650 pixel e, 24" 22" monitor che supportano 1920 pixel e più stanno diventando abbastanza comune.

Sono praticamente "ignorato" i 800 utenti pixel per qualche tempo e ho sviluppato con ampia fissi 950/960 pixel, ho anche notato che i siti popolari (SO per uno) o utilizzare questo approccio o un fluido.

Per il testo (quasi) solo siti web (come Wikipedia ) Non vedere un problema con il sistema fluido, ma che dire di tutti gli altri siti web che dipendono da immagini / video per creare contenuti interessanti ? Social Network, annunci, e così via ... Che cosa è (sarà) il loro approccio per affrontare questo problema?

Seam Carving sembra una buona opzione per il prossimo futuro, ma non lo ha fatto maturare sufficiente (né i browser né jQuery nativelly supporta a questo punto nel tempo), mi sento anche come gli utenti non lo capirebbero, confondersi con esso e di conseguenza abbandonare il sito.

de facto di serie sul web è ancora 1024 pixel di larghezza, e lasciando 980 pixel inutilizzati in un 24" monitor sembra proprio pianura strano per non dire sbagliato. < strong> Quindi quali sono le nostre opzioni?

Mi piacerebbe sentire cosa ne pensi di questo e le vostre esperienze con entrambi i sistemi fluidi e fissi.

PS:. Siti web popolari utilizzando uno di questi sistemi sono i benvenuti, sono particolarmente interessato a vedere i siti web non di testo che utilizzano il sistema fluido

EDIT: Ho appena visto questa risposta e ho avuto un po 'confuso la differenza tra i layout fluidi e liquidi, non sono essi dovrebbero essere esattamente lo stesso?

Soluzione

In genere penso che i layout fluidi sono una buona idea. Il problema inizia quando il layout fluido comincia a diventare davvero ampia con schermi ad alta risoluzione - c'è un limite a quanto l'occhio umano può monitorare in orizzontale, senza perdere il posizionamento verticale. È per questo che le colonne dei giornali, per esempio, sono sempre piuttosto stretta.

Prova a guardare wikipedia in uno schermo ad alta risoluzione, e vedrete che limitano la larghezza massima di qualcosa intorno 800-900px - più di questo (assumendo un carattere 12pt piuttosto standard) e la gente smettere di essere in grado di leggere fino alla fine della linea e quindi senza sforzo trovare l'inizio della riga successiva, e il tutto si rompe in un pasticcio di occhi e collo affaticamento.

Su siti web che costruire, io uso max-width per limitare la larghezza massima del contenuto del testo (e in che comprendono anche le immagini e altre cose) a circa 720-800px, che con barre laterali e tale può eventualmente ottenere a intorno 1000px. Se lo schermo è più ampio allora che, allora o il centro il contenuto della sinistra allinearlo (allineare a destra su siti web RTL) -. Entrambi funzionano bene

Ma bisogna progettare il layout in modo che scorre quando la larghezza disponibile è stretta - questo è molto utile per le persone con i netbook (che sono piuttosto popolare oggi e mi aspetto diventerà più popolare in futuro), telefoni intelligenti e anche i dispositivi mobili piccolo schermo. Tali dispositivi mobili sempre più browser di serie e si dovrebbe affrontare questo nei vostri progetti - anche se un browser per dispositivi mobili in grado di ridurre il vostro sito web in qualche modo, la modalità "mobile" di solito fa questo rovinare la pagina e uccidere il vostro user-experience previsto.

Altri suggerimenti

lasciando 980 pixel inutilizzati in un 24" monitor sembra proprio pianura strano non dire sbagliato

Mi piacerebbe disaccordo qui. Se hai un monitor con quella ad alta risoluzione, si sta probabilmente non è in esecuzione con una finestra del browser ingrandita. E anche se siete, siete veramente coccolato che il contenuto è tutto in una zona fissa in mezzo? Davvero?

Per quanto tempo il vostro sito ha un decente, il layout utilizzabile, non vedo il problema con lo spazio ai lati su monitor ad alta risoluzione.

Ci sono modi per creare regole diverse @media all'interno di un stylesheet- W3C ha qualcosa su questo -e anche se è Cat un grande di Schrodinger se i browser dei palmari sarà obbedire alle regole, è abbastanza lecito ritenere che, anche se non lo fanno, hanno abbastanza grande e gli schermi ben rapportati-utilizzare solo un modello in scala del sito così come appare sul desktop.

Mi sembra che fosse nel migliore interesse dei dispositivi produttori per renderli compatibili con i siti web che precedono l'avvento di tali dispositivi da 5-10 anni.

E se no, è il loro problema.

Mi avvicino al problema da una diversa angolazione. Avere un layout fluido ma dare una larghezza minima (piuttosto che una larghezza massima). È possibile raggiungere questo obiettivo con i CSS.

Il problema con le immagini non è così grande. Quello che fai è la seguente:

Carica l'immagine alla dimensione massima si aspetta di avere.
Crea il fluido immagine come segue:

<img src="http://example.png" style="width:32.5%">

Come si ridimensiona nella pagina l'immagine in sé ridimensionare la larghezza percentuale. Basta fare in modo che non si dispone di qualsiasi larghezza o l'altezza attributi nell'immagine. Io lo chiamo superlastic:)

layout fluido sono stati la risposta prima di Responsive design supporto nei browser è venuto fuori. Non c'è bisogno di utilizzare più layout fluidi o elastiche.

Non c'è una risposta giusta a questa domanda come non esistono due obiettivi di progettazione sono sempre uguali. layout fluidi rendono ogni parvenza di controllo tipografico praticamente impossibile, ma non tutti i disegni bisogno o vogliono.

No raccolta delle "buone pratiche" potrà mai equiparare ad una formazione progettazione vera e propria, e non tutti gli utenti si sentono costretti a saltare le finestre del browser fino a riempire l'intero schermo, sia.

discussione più informativo sul layout che ho letto finora è nel libro CSS Mastery di Andy Budd. Se si ha la possibilità, farlo leggerlo. Penso che sia un must have libro su CSS (livello intermedio). Sembra che il capitolo layout è disponibile in forma di articolo qui. http://www.webreference.com/authoring/style/sheets/css_mastery2/

Un altro collegamento: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Liquid e fluido sono due nomi diversi per la stessa tecnica.

HTH.

Credo che sia meglio avere una larghezza massima di layout, è possibile cambiare la situazione con Javascript. Un buon esempio di ciò è questo layout, guarda cosa succede (in Firebug o qualcosa) con il layout se si cambia la larghezza: http: //tweakers.net/ Hanno scelto una larghezza di 1208px e renderlo più piccolo con JavaScript quando la larghezza del browser cambia. Con JavaScript disabilitato, il sito è ancora 1208px di larghezza, che sembra non essere un problema comunque.

EDIT: La prima larghezza del sito web sarà come 900px. Con Javascript si verificherà la larghezza del browser e vi darà la una classe con la risoluzione più vicino alla tua larghezza del browser. Per esempio: la larghezza del browser sembra essere 1100px, in modo da dare una lezione 'res1024', o la larghezza del browser è 1080px, allora si dà una classe 'res1100'. Questo sarà il tuo CSS:

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

Spero che aiuta a:], si può naturalmente cambiare molto di più con questa classe corpo, come:

.res900 #menu {
     width: 100px;
}

EDIT 2: È possibile gestire le immagini allo stesso modo:

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow