Qual è la larghezza e l'altezza "più comuni" per cui i siti Web vengono progettati in questi giorni?

Sto lavorando a un progetto di gruppo e sto cercando di convincere i miei colleghi a presentare un disegno relativo alla loro visione per un'applicazione online; questa applicazione verrà visualizzata tramite un PC. Anche se sospetto che non esista uno standard industriale, sono certo che debbano esserci approcci comuni per i siti con layout a larghezza fissa. Devo conoscere il senso più comune delle proporzioni nel settore.

Manterremo questo prototipo semplice, e quindi non rileggeremo browser, larghezze dello schermo ecc. Quindi, ho pensato di chiedere questo in modo semplice con la speranza di ottenere una risposta semplice:

Qual è la larghezza e l'altezza "più comuni" per le quali le pagine Web sono state progettate più di recente. Sarebbe molto utile se potessi localizzare una fonte quando dico ai miei colleghi perché ho scelto un senso specifico delle proporzioni su cui basare i loro disegni.

Si prega di notare come ho posto questa domanda:

Non sto chiedendo le risoluzioni dello schermo più comuni.
Non sto chiedendo i browser più comuni.

Voglio sapere quali dimensioni la maggior parte dei siti Web sta optando per layout di dimensioni fisse. So che le persone normalmente scorrono e quindi l'altezza potrebbe non far parte di uno ~ 'standard'; in tal caso, mi accontenterò della larghezza più comune.

website-design

— John R
fonte

Risposte:

Come hai detto, non esiste un'altezza standard in quanto estremamente fluida, quindi usa tutto ciò che ti aiuta a visualizzare meglio il tuo design.

Per una larghezza di 960 pixel, la larghezza sembra essere "standard" per i progetti a larghezza fissa. È abbastanza comune che un sito Web sia stato dedicato all'esplorazione di layout con quella larghezza .

(Suppongo che tu non voglia che nessuno si arrabbi nell'usare un design fluido?)

— John Conde
fonte

Non c'è davvero una larghezza standard che dovresti impostare. La quantità di persone che usano un monitor 1024x768 è diminuita drasticamente negli ultimi anni, quindi una larghezza di 960 ha meno importanza. Con l'emergere di tanti nuovi dispositivi (smartphone, tablet, laptop e desktop), è necessario creare una serie di fogli di stile per ogni caso.

Le query multimediali CSS consentono di modificare gli stili in base alla risoluzione dello schermo dell'utente. Tendo a creare siti con un foglio di stile generale che gestisca tutto lo stile visivo, quindi separato per dispositivi mobili, tablet, desktop / laptop standard e schermi extra-larghi che strutturano la pagina.

Dai un'occhiata a questa pagina su W3.org per alcuni esempi - http://www.w3.org/TR/css3-mediaqueries/

È più lavoro, ma consentirà all'utente di ottenere la migliore esperienza possibile indipendentemente da ciò che usano per navigare nel proprio sito.

— Carson
fonte

Cosa ha detto @ John Conde. Inoltre, devi considerare chi è il tuo pubblico di destinazione. Ad esempio, se il mio sito Web è un blog di tecnologia o blog di gadget, è probabile che il mio pubblico di destinazione sia un po 'più esperto di tecnologia rispetto al pubblico normale, quindi posso scattare per un layout di oltre 1200 pixel px. O se stavo focalizzando un sito / blog / forum per i webmaster andrei un po 'più ampio.

Alla fine della giornata, scopri i tuoi dati demografici di massa e segui ciò che alla fine funzionerebbe per loro.

Due cose MOLTO importanti da tenere a mente ...

1) Se il tuo progetto può funzionare con oltre 900 px, non c'è motivo di estenderlo a oltre 1200 px anche se i tuoi dati demografici possono permetterselo.

2) Assicurati di disporre di una struttura adeguata in grado di ospitare quegli utenti che potrebbero non avere la tua risoluzione target.

— Adil
fonte

Non sono d'accordo con il punto 2. Con un display da 1366 px, probabilmente la larghezza più comune sulla maggior parte dei laptop venduti negli ultimi due anni, non è possibile montare due finestre da 900 px una accanto all'altra e vederle entrambe contemporaneamente. Se hai un solo layout di 900 px, stai sprecando il 34% dello spazio orizzontale con spazi bianchi. In tal caso, 1200 px sarebbe una larghezza ideale . Quindi sì, c'è un motivo di allungarlo.

— Pensa al

@nink: Non penso che tu abbia effettivamente letto il punto 2 ... cosa ha a che fare la tua risposta con il montaggio di due finestre da 900 px una accanto all'altra? Inoltre, leggi la domanda correttamente per capire cosa chiede John R. Questa non è una discussione su casi di utilizzo estremo come se volessi avere 2 finestre da 900px l'una accanto all'altra o nel mio caso volessi un monitor da 1600px (2 di loro) per fare un disegno. Piuttosto si tratta della stragrande maggioranza degli utenti che non sono voi o me ..

— Adil

Mi scuso, intendevo rispondere al tuo primo punto, non al tuo secondo. Mi dispiace che ciò abbia causato confusione. Il mio punto è ancora valido: la stragrande maggioranza degli utenti dispone di schermi sufficientemente ampi che un layout da 900 px sta sprecando molto del loro spazio. Sono d'accordo con la maggior parte di ciò che hai detto nella tua risposta, ma la tua prima "cosa da tenere a mente" non è vera. Se i tuoi dati demografici possono permettersi 1200px, dovresti usare quei 1200 px, altrimenti stai sprecando 300 dei loro pixel.

— Pensa al

@nink: Stai leggendo male il mio punto 1. Se il mio design è in grado di mostrare facilmente il sito in un 900px, perché dovrei allungarlo per renderlo 1200px? Inoltre, il 13% degli utenti ha ancora una risoluzione dello schermo di 1024x768 Concesso che è un piccolo numero ma è abbastanza grande da disturbarli e perdere vendite, clic sugli annunci, lead o qualunque sia il tuo modello di business .... (dati citati da: w3schools .com / browsers / browsers_display.asp )

— Adil

Ho capito il tuo punto. Il mio punto è che se i tuoi utenti in generale hanno schermi abbastanza ampi da utilizzare un layout largo 1200px, dovresti. Ad esempio, i siti di scambio di stack sono ottimizzati per una larghezza di circa 1000 px, ma molti utenti hanno richiesto un'opzione per visualizzare l'anteprima post-mark e l'anteprima di markdown affiancati, che utilizzerebbero più spazio orizzontale. w3schools non è un campione rappresentativo di utenti web, ma a parte questo, questa discussione era per i siti in cui il 1200 sarebbe logico se si adattasse al design.

— Pensa al