Qual è la larghezza standard di un sito Web in pixel o dove sono le statistiche?
Risposte:
Non esiste uno standard, nonostante la maggior parte degli sviluppatori consideri lo standard 1024x768.
Esiste un sistema a griglia CSS chiamato 960grid che assume la larghezza del corpo come 960px, quindi rompe le colonne in 96 colonne con 10px o 80 con 12px.
Il problema è: gli schermi dei PC stanno diventando sempre più grandi, sempre lentamente, in alcune regioni ma lo sono.
D'altra parte, su tech-top, hai schermi più piccoli nei dispositivi mobili e nei netbook.
Affrontare questa realtà può essere doloroso. Ci sono query multimediali CSS per il salvataggio. In alternativa, è possibile utilizzare il collegamento tag (con il palmare rel) per fornire una versione alternativa ai dispositivi mobili.
Segui alcuni link di riferimento per te
Qual è la larghezza standard per un sito Web in pixel?
Qualsiasi numero maggiore di 0 e minore di infinito.
Le migliori pratiche attuali per Responsive Web Design (RWD) consistono nel supportare ogni dispositivo indipendentemente dalla sua larghezza in pixel. In genere ciò implica l'utilizzo di media query per fornire stili diversi per intervalli di dimensioni dello schermo diversi. Le gamme effettive utilizzate contano meno che il design sia coerente tra le dimensioni e il sito mantenga la funzionalità tra le dimensioni.
È molto probabile che gli utenti vedano schermi di dimensioni diverse senza pensarci troppo, quindi vuoi ridurre al minimo la sorpresa quando trascinano una finestra per agganciarsi su metà dello schermo o inclinano il telefono.
Alcuni intervalli di larghezza comuni utilizzati sono:
Queste gamme sono così comuni che direi che sono praticamente uno standard. Non è necessario utilizzare tutti gli intervalli, ad esempio un sito potrebbe avere una larghezza del fluido per qualsiasi valore inferiore a 768 e quindi larghezza fissa e centrata per 768+.
Detto questo, tieni presente che i numeri che utilizzi non contano particolarmente, purché il sito sia funzionale su qualsiasi dispositivo l'utente scelga di visualizzarlo.
dove sono le statistiche?
Ora per la parte difficile, i dati reali. Se stai ridisegnando un sito, gli unici dati che contano sono i tuoi. Ciò che dicono Wikipedia o StackTranslate.it, o Google o qualsiasi altro sito Web di grandi dimensioni che potrebbe elencare dati analitici è irrilevante per i tuoi dati per il tuo sito.
Se le tue statistiche mostrano che la maggior parte degli utenti utilizza principalmente una particolare gamma di larghezze del dispositivo, dovresti probabilmente concentrarti prima sul servire quegli utenti. Detto questo, se il tuo design è adeguatamente reattivo non dovrai concentrarti su una dimensione particolare.
Per i nuovi siti Web o siti che in precedenza non disponevano di analisi, considera fortemente l'utilizzo di un approccio mobile-first e assicurati di utilizzare l'analisi in modo da poterti adattare correttamente alla tua base di utenti.
Sono sorpreso che nessun altro abbia pensato di menzionare le dimensioni del browser di Google .
Per quanto riguarda gli standard:
L'80% degli spettatori può gestire una larghezza fino a 1000 px, ma quelli che possono gestire una larghezza superiore a 1000 px spesso non lo fanno. Con i monitor a schermo largo molte persone allineano le finestre a metà schermo. Ora che Win7 supporta il drag-n-dock, è probabile che diventerà ancora più popolare.
Per quanto riguarda l'altezza: la tua prima impressione per l'utente è nella parte superiore della pagina fino a circa ~ 600px. Tuttavia, la maggior parte degli utenti sa e si aspetta che il contenuto cada "sotto l'ovile" e è disposto e in grado di scorrere.
Se vuoi andare oltre 1000px, ti consiglio vivamente un layout fluido in modo che gli utenti su netbook e schermi più piccoli possano ancora vedere correttamente il contenuto.
~ 960px tende ad essere una larghezza standardizzata, ma in realtà dipende dal contenuto e dallo stile.
L'anno scorso ho fatto un piccolo test utilizzando Google Analytics per scoprire quali sono le larghezze e l'altezza interne medie del browser (ciò che gli utenti vedono effettivamente).
Come altri hanno già detto, non esiste uno standard per questo tipo di cose. Tuttavia, ecco alcuni suggerimenti che possono rendere o frenare il tuo sito Web:
Ho sempre usato le percentuali o una build dello scenario peggiore: la risoluzione dello schermo più piccola che incontrerai comunemente è 800x600, e anche questo è raro. Qualsiasi cosa al di sotto che probabilmente è su un dispositivo mobile. La larghezza di 775 px è un buon mezzo da usare, o semplicemente l'80% se sai per certo che il tuo sito Web avrà ancora un fascino quando viene ridimensionato su uno schermo più grande. I problemi più comuni sono che il contenuto del testo (se ridimensionato a larghezze di 1600 px) sembra vuoto e breve. Avere il tuo sito Web a una larghezza di 775 px risolverà ciò, tuttavia potrebbe non apparire bene con un enorme spazio aperto su entrambi i lati.
MAI far scorrere gli utenti verso sinistra o destra. Tagliare il contenuto dei lati è il modo più veloce per perdere potenziali clienti o lettori.
Porta la tua navigazione da qualche parte vicino alla cima o in un luogo in cui gli utenti non devono scorrere per trovarla.
E solo un suggerimento sul contenuto; avere una grafica alta / bassa informazione o alta informazione / bassa grafica. Cercare di combinare entrambi sembra sempre terribile.
Lo standard sarebbe "larghezza / altezza il più possibile". Dipende dalla schermata degli utenti:
È utile sapere quanto sono popolari le risoluzioni dello schermo e quindi basare il modello in base all'uso generale da parte della maggioranza ... Personalmente raccomando di utilizzare Responsive Design, in questo modo il tuo sito funziona per tutti i dispositivi e tutte le risoluzioni.
A partire da gennaio 2013.
1366x768 25,4%
1920x1080 11,0%
1280x1024 9,7%
1440x900 7,3%
1280x800 8,2%
1680x1050 5,7%
1600x900 5,0%
1920x1200 2,9%
1360x768 2,1%
2560x1440 1,1%
Altro 11,6%
Google Analytics registra le risoluzioni dello schermo del visitatore. Puoi facilmente creare un rapporto personalizzato per verificare quali sono le dimensioni dello schermo comuni dei tuoi visitatori. Ecco le statistiche (top 15) per il mio sito Web a maggio 2013:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Le statistiche variano da sito a sito a seconda del tipo di traffico che riceve, quindi progettare di conseguenza. Io stesso preferisco design fluidi con larghezza percentuale, 1000 px min-widthe un ragionevole max-width.
Non esiste una cosa standard, e le statistiche dipendono interamente dai dati demografici target. Puntare su personale tecnico si tradurrà generalmente in un hardware migliore e risoluzioni più elevate, meno tecniche al contrario. Ma poi ci sono telefoni, netbook ecc. Che hanno risoluzioni significativamente più basse rispetto alla norma nella maggior parte dei casi.
Per riferimento, di solito presumo un minimo di 1024x768 ora.
In ogni caso eccone alcuni: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
960 pixel è il massimo che è sicuro, poiché funziona su uno schermo 1024x768 e lascia spazio alla barra di scorrimento e funziona anche su un iPhone in modalità orizzontale (perché pixel raddoppia il suo schermo 480x320 a un efficace 960x640 e non ha un barra di scorrimento).
Dato che la maggior parte dei monitor widescreen di oggi hanno una risoluzione di "1440x900" o più ampia, penso che un 1280 pixel di larghezza stia diventando più "standard" soprattutto quando si tratta di visualizzare immagini.
NOTA: la larghezza di 1280 pixel era la larghezza di molti vecchi schermi da 17 pollici e 19 pollici con rapporto 4: 3.