Esiste una dimensione standard per la larghezza di un sito Web in un modello? Che cos'è quella taglia? Perché?

Comincio la maggior parte dei miei modelli con una larghezza di 1200 px anche se sto progettando una risoluzione di 1024 px. Ho impostato le guide all'interno del mockup per 1000 px. L'altezza può variare. La ragione per cui allargo il mio file di mockup è vedere come si sente il design con un respiro attorno. La maggior parte delle persone usa più di 1024 px in questi giorni.

Esiste una larghezza standard per la progettazione di modelli di pagine Web?

Sì no forse?

C'era una volta (vedi sotto) il web design in gran parte tentato di creare una vista unica che si adattasse ragionevolmente bene alla maggior parte degli schermi. Negli ultimi cinque anni, questo è cambiato drasticamente con l'adozione del Responsive Web Design (RWD).

RWD è un principio di progettazione che consente di progettare in modo da adattarsi ragionevolmente bene a qualsiasi dispositivo, indipendentemente dalle dimensioni del dispositivo.

Nello sviluppo Web, le query multimediali vengono spesso utilizzate per applicare diversi set di stili alle pagine Web in base a una serie di fattori. Alcuni fattori comuni includono:

• larghezza attuale dello schermo
• altezza attuale dello schermo
• larghezza del dispositivo
• altezza del dispositivo
• orientamento del dispositivo

Poiché gli stili possono essere mirati a dimensioni dello schermo specifiche, non è insolito creare più set di disegni destinati a intervalli specifici.

Per essere chiari, non ci sono "standard" fissi. Non esiste un ente o organizzazione governativa che affermi che "i progettisti dovrebbero realizzare progetti seguendo queste linee guida sulle dimensioni", perché alla fine si tratta di una richiesta di giudizio.

Detto questo, l'industria dello sviluppo web ha organizzato organicamente una serie di punti di interruzione comuni che si verificano ancora e ancora.

I punti di interruzione tipici sono per la larghezza dello schermo corrente e sono comunemente:

_{unità in px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

La ragione di questi numeri specifici è piuttosto banale. L'iPhone originale aveva uno schermo con dimensioni di 320 × 480; l'iPad originale aveva uno schermo con dimensioni di 768 × 1024; 1600 × 1200 sono comuni per risoluzioni dello schermo più grandi.

Mentre è comune vedere i modelli in alcuni o tutti quei punti di interruzione, è anche comune fornire i rendering multipli di una determinata pagina che mostra i punti di flesso del disegno intermedi.

Una composizione a larghezza fluida che mostra elementi impilati con una larghezza di 768 px potrebbe dover includere un design per 900 px in cui gli articoli sono passati a due colonne. Se ritieni di dover fornire molti set di progetti per questi punti di interruzione intermedi, ti consiglio vivamente di progettare singoli componenti e di mostrare i punti di interruzione in cui un componente cambia su una base per componente, senza includere il resto della pagina nel mockup.

Ciò aiuta anche a evitare insidie ​​comuni di progettazione in cui componenti specifici dell'interfaccia utente mancano o non sono congruenti tra i punti di interruzione.

Quella che segue è la versione precedente di questa risposta che sto conservando per il bene dei posteri, ma non è rilevante da qualche tempo

Sono sorpreso che nessuno lo abbia ancora menzionato:

Google ha un simpatico strumento di sviluppo chiamato

Dimensione del browser

Dovrebbe praticamente rispondere alla tua domanda da solo.

Ho alcune note sulle tendenze attuali:

Attualmente la stragrande maggioranza degli utenti ha risoluzioni di 1024x600 (tablet / netbook) o più grandi. Devi ricordare di rimuovere circa 24pxper le barre di scorrimento, che lasciano una buona larghezza anche di 1000 px. Per quanto riguarda l'altezza: gli utenti Web sono molto bravi a scorrere in verticale, poiché si sono abituati alle ruote di scorrimento sui topi. L'altezza iniziale è importante soprattutto per le prime impressioni.

Gli utenti non sono altrettanto bravi a scorrere in orizzontale, quindi non è consigliabile creare layout più larghi di 1000 px.

Inoltre, molti utenti con schermi più grandi non usano l'intero schermo per il proprio browser web. Soprattutto ora che Windows 7 include la semplice funzionalità drag-n-dock per rilasciare una finestra su metà schermo.

In sintesi:

• evitare larghezze statiche superiori a 1000 px
• assicurati che la tua prima impressione sia gradevole a 1024x600
• non abbiate paura di rilasciare il contenuto sotto l'ovile.

Risposta breve: 775x400 per 800x600 e per 1024x768 utilizzare 1000x500.

Risposta lunga: non puoi mai essere sicuro che la tua presentazione sembrerà giusta sul tuo computer client (potrebbe avere un sistema operativo, browser, un monitor calibrato diverso o una risoluzione inferiore con caratteri grandi impostati per leggere meglio). Per questo motivo tendo a mostrare sempre una presentazione sul mio computer, se posso.

Se non riesco a mostrarlo sul mio PC per quanto riguarda le dimensioni, utilizzo quelle mie regole personali (non prendere le mie misure come sante, ognuno ha le sue):

Per sicurezza, ottimizza per 800x600 (rimuovendo la scrollbard e la barra superiore utilizzo 775x400 come "above the line"). Ma oggi con uno schermo più economico con uno standard più ampio ho iniziato a progettare per 1024x768 (1000x500)

L'importante è ottimizzare non per l'altezza ma per la larghezza. L'altezza è risolvibile con un semplice scorrimento del mouse, con la larghezza se non si dispone di un mouse mac non è possibile scorrere in orizzontale per visualizzare ulteriori informazioni. È bene sapere tuttavia dove è possibile posizionare più o meno la riga inferiore dello schermo, anche se è impossibile determinare con precisione.

NOTA: utilizzo un'altezza così bassa anche su 1000px perché le persone tendono ad avere molte barre di scorrimento aggiuntive sul browser di base (come GoogleRank per esempio o segnalibri e molti altri), quindi mi piace sempre progettare per la situazione peggiore possibile.

Ps mi dispiace per il mio cattivo inglese :)

Abbiamo un programma di monitoraggio che ci fornisce informazioni sui nostri utenti. Più della metà sono a 1024x768. Quindi lo uso come dimensione del monitor "standard".

Tuttavia, questa non è la tua area live per il tuo sito: le persone hanno barre laterali, non aprono sempre la finestra del browser a tutta larghezza, ecc.

Mi piace il sistema a griglia 960 . I numeri sono flessibili e il sito Web offre molti modelli da scaricare. Lo uso per i miei modelli e finora tutti sono stati abbastanza felici.

Dovrei cercare le statistiche per supportarmi (come questo post sul blog SO ), ma 1024x768 ha preso o sta prendendo il posto di comune denominatore standard per la risoluzione dello schermo. Progetto modelli web per un pubblico generale con una larghezza di 1000 px per tenere conto delle barre di scorrimento e dei bordi delle finestre con una risoluzione con una larghezza di 1024 px. Per un pubblico più specifico, Pekka ha ragione nel suo commento. Scopri qual è la norma per il pubblico target.

La dimensione del browser oggi è una domanda complicata perché le persone utilizzano due tipi di dispositivi, computer con risoluzioni sempre più alte e telefoni con risoluzioni relativamente basse.

Se stai trasformando un sito in un sito rispetto alla maggior parte dei computer di oggi (il 90% o più) ha una risoluzione minima di 1024. Se vuoi un numero leggermente inferiore di computer ma una buona percentuale di 1200 è anche in quell'intervallo.

Se stai creando un sito mobile, la maggior parte dei telefoni raggiunge il massimo a 480 px per la navigazione orizzontale, ma la maggior parte di essi ha anche una sorta di sistema di rendering per siti più grandi.

La domanda per le dimensioni riguarda il tuo pubblico, se il tuo target è un gruppo di designer, puoi avere un sito più grande, se è gente di mezza età che cerca un'assicurazione auto nuova di quanto dovresti lavorare un po 'più piccolo, e se è per telefono gli utenti a guardare mentre sui loro telefoni, ancora più piccoli ancora.

Dipende totalmente dal tuo sito Web, di norma, tenderei a non superare i 1000 per quei clienti su macchine vecchie. Tuttavia, gli studi stanno ora dimostrando che la progettazione per 1200 è ora accettabile nel mondo del design, quindi è sicuramente uno spunto di riflessione.

Il tuo piano dovrebbe essere quello di colpire il minimo comune denominatore e se questo accade a Joe Dinosaur su una macchina Windows 95 800x600, allora è quello che dovresti soddisfare.

Inoltre dipende totalmente dal design del tuo sito web. Attualmente sto progettando un sito Web per la mia agenzia e sarà largo 800, cioè per preferenza, per non soddisfare nessuno specifico.

Sfortunatamente non ci sono dimensioni standard in quanto le pagine Web sono ora accessibili in diversi schermi. Anche se per essere più sicuri, si prega di cercare le risoluzioni più popolari (ad esempio, 1024x768) e progettare sulla base della popolarità.

La risposta è: no, non esiste uno "standard".

Consiglio di usare 960 px per la larghezza del modello, poiché la maggior parte della risoluzione dello schermo è 1028 px, quindi la barra di scorrimento non verrà visualizzata e vedrai anche lo sfondo che hai usato.

Ti suggerirò di utilizzare 1024 px per la larghezza standard. Perché, il numero massimo di PC costruito con monitor crt e la risoluzione di questo monitor è 1024 * 768px.