Risoluzione del sito web consigliata (larghezza e altezza)? [chiuso]

Esiste uno standard sulla risoluzione comune dei siti Web?

Stiamo prendendo di mira i monitor più recenti, forse larghi almeno 1280 px, ma l'altezza può variare e ogni browser può avere anche altezze della barra degli strumenti diverse.

Esiste una sorta di standard per questo?

Il consiglio in questi giorni è:

Ottimizza per 1024x768 . Per la maggior parte dei siti questo coprirà la maggior parte dei visitatori. La maggior parte dei registri mostra che il 92-99% delle tue visite avrà una larghezza superiore a 1024. Mentre 1280 è sempre più comune, ce ne sono ancora molti a 1024 e alcuni al di sotto. Ottimizza per questo ma non ignorare gli altri.

1024 = ~ 960 . Tenere conto delle barre di scorrimento, dei bordi delle finestre, ecc. Significa che la larghezza reale di uno schermo 1024x768 è di circa 960 pixel . Alcuni strumenti si basano su una dimensione leggermente inferiore, circa 940 . Questa è la larghezza del contenitore predefinita nel bootstrap di Twitter .

Non progettare per una taglia . Le dimensioni delle finestre variano. Non dare per scontato che la dimensione dello schermo sia uguale alla dimensione di Windows. Progettare per un minimo ragionevole, ma presumere che si adatterà.

Usa un design reattivo e layout liquidi . Usa layout che si adatteranno quando la finestra viene ridimensionata. Le persone lo fanno molto, specialmente su monitor di grandi dimensioni. Questa è solo una buona pratica CSS. Esistono diversi framework front-end che lo supportano.

Considera il cellulare come un cittadino di prima classe . Ricevi sempre più traffico dai dispositivi mobili. Questi introducono ancora più dimensioni dello schermo. Puoi ancora ottimizzare per 960, ma l'utilizzo di tecniche di responsive web design significa che la tua pagina si adatterà in base alle dimensioni dello schermo.

Registra le informazioni di visualizzazione del browser . Puoi ottenere numeri reali su questo. Ho trovato alcuni numeri qui e qui e qui . Puoi anche modificare il tuo sito per raccogliere gli stessi dati.

L'utente scorrerà quindi non preoccuparti troppo dell'altezza . Il vecchio argomento era che gli utenti non facevano lo scroll e tutto ciò che era importante doveva essere "above the fold". Questo è stato ribaltato anni fa. Gli utenti scorrono molto .

Ulteriori informazioni sulle risoluzioni dello schermo:

• Risoluzione dello schermo e layout di pagina
• Migliore risoluzione dello schermo per progettare siti web
• Progettare per le dimensioni del browser, non per le dimensioni dello schermo

Ulteriori informazioni sul design reattivo:

• Web design reattivo (2010, 25 maggio), Ethan Marcotte, A List Apart.
• Web design reattivo su Wikipedia
• Modelli di layout multi-dispositivo (2012, 14 marzo) Luke Wroblewski. Cataloga i modelli più diffusi per layout di schermo multi-dispositivo adattabili.

Strumenti e framework front-end per responsive design e layout liquidi:

• Bootstrap di Twitter
• Fondazione Zurb
• 50 fantastici strumenti per il responsive web design (2012, 24 aprile) Denise Jacobs e Peter Gasston

Pessima idea, credo. L'intero punto nella separazione del contenuto dal layout era consentire la visualizzazione della tua pagina web su qualsiasi tipo di browser.

Mettere limiti artificiali come una dimensione minima dello schermo limiterà il tuo mercato.

Detto questo, credo che ogni desktop dovrebbe essere in grado di visualizzare 1024x768. Ma per quanto riguarda i browser in esecuzione su iPhone o altri dispositivi con problemi di schermo o anche quelli che non utilizzano l'intero desktop per il browser?

In risposta alla tua domanda specifica, no, non credo che esista uno standard per un'area di visualizzazione minima o comune nei browser.

Costringere l'utente a scorrere in orizzontale è una grave trasgressione dell'interfaccia utente. A meno che tu non stia costruendo specificamente un sito web per una popolazione con una dimensione dello schermo nota, sei più sicuro assicurandoti che il tuo design funzioni con schermi piccoli fino a 800 pixel di larghezza (circa l'8% della popolazione che naviga sul web se la memoria mi funziona bene). È saggio adattarlo bene a schermi più grandi, ma non a scapito delle persone che navigano ancora a 800x600.

Ecco un'altra cosa da considerare: non tutti eseguono il browser a schermo intero (io no). Quindi l'idea che se va bene progettare per una specifica (e grande) "dimensione dello schermo" in realtà non funziona per una serie di ragioni.

Aggiornamento del 15/12/2010: quando ho risposto per la prima volta a questa domanda, 800 pixel erano una risposta appropriata. Tuttavia, a questo punto, consiglierei 1024 pixel di larghezza (o 960 come fa notare qualcun altro). La tecnologia marcia su ...

Ecco le statistiche della visualizzazione del browser nel 2008: http://www.w3schools.com/browsers/browsers_display.asp

Circa il 50% degli utenti utilizza ancora 1024x768. Se vuoi che il tuo sito abbia un bell'aspetto ad alta risoluzione usa un layout flessibile.

in realtà ci sono standard del settore per le larghezze (beh, almeno secondo yahoo). Le loro larghezze supportate sono 750, 950, 974, 100%

Ci sono vantaggi di queste larghezze per le loro griglie predefinite (layout di colonne) che funzionano bene con le dimensioni standard per gli annunci, se si dovesse includerne qualcuno.

Anche un discorso interessante vale la pena guardare.

vedi Base YUI

Ecco uno strumento fantastico: le dimensioni del browser di Google Labs

Direi che dovresti aspettarti solo che gli utenti abbiano un monitor con risoluzione 800x600. Il governo canadese ha standard che elencano questo come uno dei requisiti. Sebbene possa sembrare basso a qualcuno con un monitor widescreen di fantasia, ricorda che non tutti hanno un bel monitor. Conosco ancora molte persone che girano a 1024x768. E non è affatto raro imbattersi in qualcuno che gira in 800x600, specialmente nei caffè web economici mentre si viaggia. Inoltre, è bello dover rendere la finestra del browser a schermo intero se non lo desideri. Puoi allargare il sito su monitor più larghi, ma non costringere l'utente a scorrere in orizzontale. Mai. Un altro vantaggio del supporto di risoluzioni inferiori è che il tuo sito funzionerà su telefoni cellulari e Nintendo Wii molto più facilmente.

Una nota sul tuo almeno 1280 di larghezza, dovrei dire che è molto esagerato. La maggior parte dei monitor da 17 e persino da 19 pollici non widescreen supportano solo una risoluzione massima di 1280x1024. E il laptop widescreen da 14 pollici su cui sto scrivendo in questo momento ha un diametro di soli 1280 pixel. Direi che la massima risoluzione minima che dovresti raggiungere è 1024x768, ma 800x600 sarebbe l'ideale.

Tutte le risposte finora parlano di monitor desktop, ma sto usando lo stack overflow sul mio iPhone e non penso che dovresti escludere qualsiasi piattaforma mobile scegliendo come target 1024 o 1280 pixel orizzontali. Contrassegna la tua pagina in modo che il browser sappia cosa significa tutto ciò e renderlo utilizzabile sarà gratuito, anche su lettori di schermo e altri kit a cui non hai pensato.

È meglio non indirizzare alcuna risoluzione specifica, ma adattarsi facilmente a molte risoluzioni diverse.

Le linee guida che utilizziamo, che sembrano essere abbastanza ampiamente utilizzate e sono supportate dai dati che otteniamo da Google Analytics, sono progettare il sito in modo che funzioni su uno schermo che è largo 1024 pixel e alto 768 pixel (1024x768 e 1280x800 sono le risoluzioni più comuni che vediamo, che rappresentano almeno il 70% di tutto il traffico).

Questo è il motivo per cui vedi molti siti (questo incluso) che utilizzano una colonna centrale larga circa 1000 pixel e con il contenuto più importante nei primi 500-600 pixel, quindi è above the fold quando viene visualizzato in schermi di queste dimensioni.

L'utilizzo di un layout di 1000 pixel di larghezza funziona abbastanza bene su schermi di dimensioni fino a circa 1680 pixel di larghezza (tipicamente alti come vedrai sui laptop, tranne quelli grandi da 17 ") ma inizia a sembrare un po 'sciocco su 1920 pixel quelli larghi (computer di fascia alta, tipicamente workstation), tuttavia queste risoluzioni molto elevate non rappresentano una grande percentuale di traffico su Internet generale - 2% o meno (d'altra parte, se hai un pubblico specializzato come questo sito , la cifra con risoluzioni elevate potrebbe essere leggermente superiore).

Sebbene la larghezza migliore possa essere 1024, dovrai regolare l'altezza per tenere conto delle varie impostazioni del browser (barra degli strumenti di navigazione, barra dei segnalibri, barra degli strumenti, ecc.) E dell'account per le impostazioni della barra delle applicazioni. Farà scendere rapidamente il 768 a circa 550.

Qualunque sia la dimensione del browser di destinazione, assicurati di includere lo spazio per le barre degli strumenti del browser, le barre di stato e le barre di scorrimento come sopra. Internet Explorer (IME) ha spesso più di 100 px di spazio verticale nelle barre degli strumenti e nelle barre di stato. In genere, se scatto a 1024 x 768, proverei a creare un design di circa 960-980 px di larghezza e 600 px di altezza per essere sicuro. In questo modo puoi adattare lo scorrimento se necessario e un bel po 'di spazio bianco (se il design lo richiede). Consiglio vivamente le griglie YUI per le istanze in cui è necessario scegliere come target dimensioni specifiche:

YUI Grid

Ricevo molte domande dai designer non solo sulla larghezza, ma anche sull'altezza da usare per "mantenere tutto sopra la piega". Ecco una risposta che ho dato di recente:

Per quanto riguarda la larghezza, non sono un designer ma ho letto che la larghezza di 960 px è la strada da percorrere in questi giorni, perché si presta ad essere divisa in colonne che sembrano belle e si adattano perfettamente alla maggior parte dei display. Se puoi, progetta un layout liquido, ma questo non è sempre pratico a seconda del tuo designer, delle tue abilità CSS, delle immagini e della quantità di testo.

(vuoi sempre che ci siano 65-80 caratteri per riga, con un'altezza di riga di circa 1,15). Questa è la larghezza ottimale della colonna per il testo ed è stato dimostrato che è molto più veloce e piacevole da leggere rispetto a colonne molto larghe o strette)

Per quanto riguarda l '"above the fold", devo solo mettere in guardia contro l'utilizzo di tali concetti sul web. Lo scorrimento orizzontale può e deve essere evitato, ma lo scorrimento verticale è qualcosa che non puoi evitare al 100%. Tutto quello che posso dirti è che su un display 1024x768 (almeno il 95% degli utenti lo possiede o superiore) dovresti stare bene con un blocco fisso di 600px alto. Ma ci sono molti formati di visualizzazione diversi là fuori, il Chrome del browser può occupare molto spazio e non tutti massimizzano la finestra del browser.

qui ci sono altri siti che dicono più o meno la stessa cosa, ma pianificare di ottenere assolutamente tutto "above the fold" per tutti è difficile perché in base alle statistiche effettive potresti avere solo 400 px circa.

E infine un buon articolo lungo che entra nei dettagli (ne pubblicherei di più ma SO dice che sono troppo noob) - Come progettare per dimensioni del browser - baekdal.com

Personalmente mi sono sempre attenuto alla larghezza massima di 1000px, centrata al centro della pagina (tramite il margine sinistro / destro: auto).

Se stai utilizzando qualcosa di meno di 1024x768, è il momento di eseguire l'aggiornamento. Sul serio. È quasi il 2010. È possibile acquistare monitor lcd a prezzi convenienti con una risoluzione nativa di 1280x1024.

Ti suggerisco di dare un'occhiata alle media-query. Questa è una nuova utile aggiunta al CSS che ha davvero molto senso, ti chiederai perché non è stata implementata molto prima. Fondamentalmente ti consente di indirizzare gli attributi del browser (come le larghezze massime e minime) direttamente tramite CSS e diramare il codice del layout da lì. Simile alla creazione di un foglio di stile di stampa, puoi creare i layout desktop e mobile in parallelo nello stesso file, il che è fondamentale per lo sviluppo.

I layout flessibili o liquidi limitano un po 'il design, ad esempio se si utilizzano immagini di sfondo che devono corrispondere all'immagine di sfondo del corpo.

Preferirei creare diversi layout CSS per il sito e farli applicare a seconda della risoluzione dell'utente, o se ciò non è possibile (non l'ho ancora approfondito), renderlo un'opzione selezionabile.

Va bene, vedo molta disinformazione qui. Per i principianti, la creazione di una pagina Web utilizzando una certa risoluzione, ad esempio 800x600, rende quella pagina visualizzata correttamente utilizzando solo quella risoluzione! Quando la stessa pagina viene visualizzata sul laptop o sul monitor del PC di casa di qualcun altro, la pagina verrà visualizzata utilizzando la risoluzione corrente dello schermo, NON la risoluzione utilizzata durante la progettazione della pagina. Non creare pagine web per una risoluzione specifica! Ci sono troppe proporzioni e risoluzioni dello schermo diverse per aspettarsi uno scenario "taglia unica", che con il web design non esiste. Ecco la soluzione: usa CSS3 Media Queries per creare codice adattabile alla risoluzione. Ecco un esempio:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Vedete, quello che abbiamo appena fatto è stato specificare 3 set di stili che renderizzano a risoluzioni differenti. Nel caso del nostro esempio, se la risoluzione di uno schermo è maggiore di 800px, verrà invece eseguito il CSS per 1024. Allo stesso modo, se lo schermo che visualizza il contenuto fosse 1224px, il 1280 verrebbe eseguito poiché 1224 è più grande di 1024. Il sito su cui sto lavorando ora funziona a tutte le risoluzioni da 800x600 a 1920x1080. Un'altra cosa da tenere a mente è che non tutti i monitor con la stessa risoluzione hanno schermi delle stesse dimensioni. Potresti mettere i laptop 15.4 fianco a fianco, mentre entrambi sembrano uguali, entrambi potrebbero avere risoluzioni drasticamente diverse, poiché non tutti i pixel hanno le stesse dimensioni su schermi LCD diversi. Quindi, utilizza le query multimediali e inizia a creare il tuo sito Web con uno schermo di laptop ad alta risoluzione, in particolare 1280+. Anche, creare ogni media query utilizzando una risoluzione diversa sul laptop. È possibile utilizzare le impostazioni di risoluzione in Windows per ridurre 800x600 e creare una media query a quella risoluzione, quindi passare a 1024x768 e creare un'altra media query a quella risoluzione. Potrei andare avanti e avanti, ma penso che voi ragazzi dovreste capire il punto.

AGGIORNAMENTO: ecco un collegamento all'utilizzo di media query che aiuterà a spiegare di più, Innovative Web Design per dispositivi mobili con media query

Questo tutorial ti mostrerà come progettare per tutti i dispositivi. Ci sono anche tutorial specifici per le media query. Ho sviluppato l'intero sito per renderizzare su tutti i dispositivi, tutti gli schermi e tutte le risoluzioni utilizzando nessun sottodominio e solo CSS! Sto ancora lavorando al supporto per tablet e smartphone. Il rendering del sito è perfetto su qualsiasi laptop o TV LCD da 50 pollici e molte pagine funzionano perfettamente su tutti i dispositivi mobili. Se metti tutto il tuo codice sulla pagina, le tue pagine si caricheranno velocemente! Inoltre, assicurati di prestare attenzione alla discussione in quell'articolo sul CSS "background-size: cover;" o "contengono" proprietà, renderanno la grafica di sfondo fluida e in grado di renderizzare perfettamente a tutte le risoluzioni.

Segui i tutorial dei siti e puoi creare un'unica pagina web che si renderizza su tutto e niente!

Prova a scegliere come target 1024 come larghezza minima. Prova come appare a 800, ma non preoccuparti troppo di farlo funzionare. A 800x600 quasi nessuno dei principali siti web funzionerà, quindi le persone che lavorano a quella risoluzione avranno comunque problemi in ogni momento.

Se scegli un layout liquido, assicurati che il testo non diventi troppo largo , perché quando le righe sono troppo lunghe, diventano difficili da leggere. Questo è il motivo principale per cui la maggior parte dei siti Web ha una larghezza fissa.

Scelgo come target i monitor da 1024 pixel (ma non utilizzo il 100% di quello spazio). Ho rinunciato a quelli con 800x600. Preferisco punire i pochi con hardware obsoleto facendoli scorrere se necessario, invece di punire tutti con nuove attrezzature sprecando spazio.

Suppongo che dipenda dal tuo pubblico e dalla natura della tua app.

In definitiva, non si tratta di standard o best practice per il markup, ma piuttosto di conoscere il tuo pubblico e assicurarti che il tuo sito web faccia quello che vuoi che faccia.

È più importante considerare la larghezza della finestra del browser piuttosto che la risoluzione dello schermo: non si può presumere che ogni pixel su un display venga assegnato al browser (e anche se lo è, è necessario sottrarre il chrome del browser). Se hai accesso ad analisi che riportano la larghezza del browser ( nb larghezza del browser, non risoluzione dello schermo), presta molta attenzione.

È bello cercare di accogliere la più ampia gamma possibile di viewport, ma ci sono alcune limitazioni. Alcune sfide possono essere gestite con i tipi di media CSS , altre no. Alcuni possono essere gestiti con layout fluidi. Tuttavia, i layout fluidi non possono funzionare in tutte le situazioni, a seconda del tipo di informazioni da visualizzare, della lunghezza della linea, del comfort di lettura, ecc. Alcuni layout fluidi non funzionano su display ampi. La maggior parte si rompe quando viene ridimensionata sotto una certa larghezza, ecc

Per quanto personalmente mi piacerebbe progettare per viewport da ~ 960 pixel in su, non puoi sempre farlo. Quindi, in alcuni casi, è ancora più sicuro progettare per viewport <= 760 pixel o giù di lì (display largo 800 pixel, ingrandito) - anche se il tempo in cui possiamo finalmente eliminare questa limitazione una volta per tutte - almeno per il desktop - si sta avvicinando molto velocemente.

Dove le conversioni sono un problema - e hai un layout a larghezza fissa - è meglio che tu abbia una dannata buona ragione per mettere tutto ciò che l'utente deve fare clic in modo che il registratore di cassa vada "ka-ching" ovunque a est del 760 ° pixel.

Idem per la navigazione primaria.

Infine, prova il tuo layout in tutto ciò su cui puoi mettere le mani. Grande. Piccolo. Desktop. Handheld. I lavori. Non ci sono sostituti.

Ho appena preso un campione delle risoluzioni dello schermo da tutti i siti client a cui ho accesso, questo include più di 20 siti in più di 8 settori, ecco i risultati:
testo alternativo http://unkwndesign.com/so/percentScreenResolutions.png
Sulla base di questo, direi che si assicura che abbia un bell'aspetto su 1024x768 poiché è la maggior parte qui di gran lunga. Inoltre, non preoccuparti troppo dell'altezza, tuttavia cerca di evitare di rendere la maggior parte delle pagine più di 1-2 pagine stampate con la dimensione del carattere predefinita, la maggior parte delle persone non leggerà una pagina così a lungo e se un utente installa una barra degli strumenti che occupa spazio verticale, la mia preferenza personale è che sia un loro problema, ma non credo che sia un grosso problema.

* notare che la percentuale arriva fino al 100,05% a causa dell'arrotondamento.

Tieni presente che maggiore è la risoluzione, minore è la probabilità che il browser Internet venga massimizzato.

E alcuni browser hanno anche barre laterali.

Dipende da cosa si desidera eseguire il rendering, ma sceglierei un layout a larghezza variabile che non si interrompa a circa 800-900 di larghezza.

L'altezza non è davvero un problema.

sbeam ha detto che "vuoi sempre che ci siano 65-80 caratteri per riga". Quello non è vero. Wikipedia, ad esempio, può contenere 180 caratteri per riga. O doveva essere un particolare sito web?