Quale larghezza del browser dovrei usare per progettare un sito Web?

9

Sto lavorando sulla parte grafica del sito Web e mi è stato chiesto di progettare un sito Web in Photoshop. Mi chiedo quali sono le dimensioni medie e le larghezze del browser per un sito Web in modo da poter creare il mio modello con quelle dimensioni.

website-design

— Hugh G. Wreckshin
fonte

questa è una domanda completamente diversa dall'altra. Questo chiede quale risoluzione predefinita di un'immagine di mockup di un intero sito Web dovrebbe essere l'altra chiede grafica all'interno di quel sito Web.

— Xitcod13,

2

Non sono sicuro del perché sia stato chiuso, non è un duplicato dell'altro thread. (Ho votato per riaprire) Anche cambiato il titolo per essere un po 'più preciso. - La maggior parte degli utenti ora naviga con un browser impostato su 1024 x 768 o superiore. È generalmente accettabile utilizzare 1000 pixel come larghezza massima. Ecco perché le formule come la griglia 960, il bootstrap e altri stanno guadagnando popolarità.

— Scott,

Scusate ragazzi, mi sono appeso a titoli quasi identici. Riaperto ...

— Farray

Questo presuppone un layout a larghezza fissa per il sito? O varrebbe la pena includere un fotogramma nel mockup per "E se un utente utilizza una risoluzione di 640x480 perché ha problemi di vista, il sito sarà simile a questo ..." e mostrerà come il layout viene ridisposto? (OK, potresti usare 800x600 invece)

— Andrew Leach,

7

Nell'era moderna del web design, la larghezza del browser è irrilevante. Ci sono così tanti dispositivi diversi là fuori che DEVI rendere reattivi i tuoi progetti , in quanto funzionano per schermi di qualsiasi dimensione.

Per fare ciò dovresti usare una sorta di sistema di griglia a larghezza di fluido e indirizzare dispositivi specifici usando le query @media .

Le query multimediali sono semplicemente diversi insiemi di regole CSS per dimensioni di porte di visualizzazione diverse. Le query multimediali rispondono anche alla modifica dinamica della larghezza del browser. Quando si riduce il browser, la pagina risponde facendo cadere i float o passando da 12 colonne a 1 o 2. La reattività reagisce anche agli utenti su dispositivi mobili e tabelle quando cambiano l'orientamento da verticale a orizzontale o viceversa.

Taglie mirate:

Dispositivo mobile 320 x 480 in modalità verticale
480 x 640 piccoli tablet o un iPhone in modalità orizzontale
Tablet 768 x 1024 in modalità verticale
Tablet 1024 x 768 in modalità orizzontale
1200 + browser desktop
2900 ++ display multimediali di grandi dimensioni o conferenze (questo non è un must ma cosa succede se qualcuno stesse guardando il tuo sito su un display molto grande.

Per vederlo in azione, dai un'occhiata alla griglia senza cornice . In realtà non è fluido ma man mano che regoli il tuo browser passa da 14 colonne fino a 1

Twitter Bootstrap , un semplice framework CSS, HTML e JS costruito con componenti dell'interfaccia utente popolari, è anche un buon esempio delle moderne pratiche di progettazione reattiva.

Un'altra cosa di cui potresti voler tenere conto è la densità dei pixel . L'iPhone 4 e il nuovo iPad hanno display retina nitidissimi rispetto agli schermi normali. Ciò rende la pratica di servire sprite e immagini invece del testo quasi obsoleta. Su un iPad le immagini con testo sembrano orribili.

Quindi la risposta alla domanda è che non esiste una larghezza del browser standard per cui dovresti progettare. Dovresti prendere le tue decisioni di progettazione in base ai tuoi utenti e farlo dove è il più accessibile al maggior numero di persone.

— Chris_O
fonte

Il tuo collegamento alla griglia senza cornice è ora morto.

— Ruslan,

6

Molti modelli di layout utilizzano una larghezza di 960 px poiché si adatta alla risoluzione dello schermo ampio da 1024 px, offre spazio per la barra di scorrimento ed è facilmente divisibile per 2, 3, 4, 5, 6, 8, 10, 12 e 16, ideale per la suddivisione in colonne lo schema.

Vedi http://960.gs per un esempio.

Altri framework come bootstrap usano 940px per tenere conto di alcuni margini tra le colonne.

— cweiske
fonte

Fantastico riferimento al sito 960gs. @Hugh dovresti usare i loro template psd per aiutarti.

— skids89,

6

Se scegli come target i browser desktop, puoi facilmente passare a circa 1000 pixel di larghezza, se necessario.

Risoluzione dello schermo StatCounter

Perché circa 1000 pixel quando i display più tipici sono 1024 pixel o più grandi? Perché devi consentire le barre di scorrimento e la finestra cromata.

Se hai come target specifico i browser per dispositivi mobili, una larghezza di 320 pixel potrebbe essere una buona scelta, sebbene i browser per dispositivi mobili in genere ridimensionino i contenuti per adattarli alla larghezza della vista, quindi la larghezza di 950 o 960 pixel può essere eccezionale. Si noti che 320 pixel CSS / HTML equivalgono a 640 pixel del dispositivo su dispositivi DPI alti come l'iPhone.

Risoluzione dello schermo mobile StatCounter

Anche il tuo mercato di riferimento potrebbe cambiare le cose. Se ti rivolgi a un pubblico esperto di tecnologia, puoi aspettarti che le cose siano inclinate su dispositivi più moderni. Se stai costruendo un sito governativo, dovrai soddisfare una gamma più ampia.

Inoltre, come stai costruendo il sito? Se stai usando un sistema a griglia, come Blueprint CSS o 960 Grid System, anche questo può dettare le dimensioni (la maggior parte dei sistemi di griglia può anche essere cambiata in altre dimensioni).

Potresti anche voler esaminare il design reattivo se stai cercando di lavorare bene su dispositivi mobili e desktop.

— Marc Edwards
fonte

4

Secondo il sistema a griglia 960. Molto flessibile e funzionerà per la maggior parte dei tuoi spettatori.

— Lauren-Clear-Monica-Ipsum,

"... puoi facilmente andare a 1024 pixel di larghezza, se necessario ..." questo sembra mancare di un avvertimento importante in quanto parte della larghezza dello schermo sarà occupata dai bordi della finestra del browser.

— e100,

+1 per un design reattivo. Considerando che entro il 2014 più persone visualizzeranno il Web su dispositivi mobili che su computer, penso che rispondere sia un buon percorso da esaminare almeno - anche se non lo si utilizza per questo progetto.

— DBUK,

Questa è una risposta molto obsoleta. Gli schermi hanno ancora più varietà, specialmente nella parte superiore dove vengono utilizzati televisori e schermi 4K

— Zach Saucier,

-3

in questo momento la dimensione del desktop calunniato in tutto il mondo è 1024x768 è bene creare un sito Web in dimensioni 1003px ...

— Ragazzo di graphic design
fonte

3

Perché 1003px ....?

— e100,

perché la dimensione incagliata è larghezza 1024 e altezza 768 in tutto il mondo con larghezza 1024px 11px necessità di barra di scorrimento e 5px per margine laterale destro e sinistro

— Graphic Design Guy

2

Vorrei poter sottovalutare un commento ... :( Ma solo FYI @Rizwanabbasi: le barre di scorrimento hanno larghezze diverse su sistemi diversi (i dispositivi touch non le hanno nemmeno) e anche su questi sistemi le barre di scorrimento possono essere cambiate (Google sta facendo quello per esempio nelle sue app da GMail in poi.

— Robert Koritnik,

Deve essere un refuso lol

— shash7,