Qual è la larghezza ottimale della pagina Web?

Progettare un sito web e impostare la larghezza della pagina web su una larghezza ottimale è una conversazione che vale la pena avere. Molti di voi hanno notato che recentemente ho cambiato la larghezza del design del mio blog. Ho spinto la larghezza della pagina a 1048 pixel. Alcuni di voi potrebbero non essere d'accordo con la mossa, ma volevo condividere alcune statistiche e ragioni sul perché ho spinto la larghezza del tema così ampia.

Tuttavia, 1048 pixel non erano un numero casuale.

Ci sono state due influenze chiave nell'espansione della larghezza della mia pagina:

  • Modifica la larghezza di YouTubeYoutube offre ora dimensioni di incorporamento più grandi. Se fai clic sul piccolo ingranaggio sulla barra laterale della pagina del video di Youtube, ti vengono offerte le opzioni per le dimensioni più grandi e il tema. Poiché i video ad alta definizione stanno diventando un luogo comune su Youtube, volevo incorporare quei video nel mio blog e visualizzarli con il maggior numero di dettagli possibile (senza consumare l'intera larghezza della pagina).
  • La pubblicità tipica è disponibile in larghezze di 125, 250 e 300 pixel. 300 pixel sembrano spuntare sempre di più sui siti di entrate pubblicitarie e volevo incorporarli ordinatamente nella mia barra laterale.

E, naturalmente, c'è un po 'di spaziatura a sinistra ea destra della pagina, il contenuto e la barra laterale ... quindi il numero magico era 1048 pixel per il mio tema:

Larghezza ottimale del sito web

Ho controllato le statistiche del mio lettore?

Sì, naturalmente! Se la maggior parte dei miei visitatori utilizzava schermi a risoluzione inferiore, avrei sicuramente avuto dei ripensamenti sull'espansione della mia pagina. Larghezza e percentualeDopo aver emesso le risoluzioni dello schermo dal mio pacchetto Analytics (in Google è Visitatori> Funzionalità del browser> Risoluzioni dello schermo), ho creato un foglio di calcolo Excel dei risultati e ho analizzato la larghezza dal campo della risoluzione.

Google fornisce una risoluzione di 1600 × 1200, quindi devi prendere tutto da sinistra della "x", moltiplicarlo per 1 per renderlo un risultato numerico in modo da poterlo ordinare in modo discendente, quindi fare una SUMIF e vedere quante visite sono maggiori o minori della larghezza del disegno che stai guardando.

= SINISTRA (A2, TROVA ("x", A2,1) -1) * 1

Ho abbandonato il 22% dei lettori che utilizzano una risoluzione inferiore? Ovviamente no! La cosa bella di un layout con i tuoi contenuti a sinistra e la barra laterale a destra è che puoi assicurarti che i tuoi contenuti siano ancora all'interno della larghezza della maggior parte dei browser. In questo caso, il 99% dei miei lettori ha una larghezza superiore a 640 pixel, quindi sto bene! Non voglio che perdano completamente la barra laterale, ma questo è secondario rispetto al contenuto.

Commenti

  1. 1

    Suggerisco un layout ibrido e una larghezza del contenitore CSS del 100%. Finché hai una larghezza fissa per la barra laterale, l'intestazione, il piè di pagina e le aree del contenuto principale si regoleranno per adattarsi alla larghezza rimanente dello schermo. Riempie il 100% della finestra del browser di tutti, indipendentemente dalla risoluzione del monitor dell'utente. Quindi non è più necessario contare i pixel o tenere traccia delle statistiche degli utenti relative alle risoluzioni del monitor.

    • 2

      I really like hybrid layouts, Bob – but unfortunately they don’t play well sometimes with the actual content. Maybe I’m lazy, but it’s easier for me to know that max and min are 640px in my site. Stretching is difficult to conceive when I’m writing the posts.

      Solo una preferenza personale immagino!

  2. 3

    In sostanza, sono d'accordo con la tua conclusione, ma se utilizzo una configurazione a larghezza fissa, limito la larghezza a 960 pixel.

    Si devono tenere conto delle barre di scorrimento verticali e di altre barre di collegamento del browser che occupano una larghezza aggiuntiva. Rimanendo entro 960 pixel, si è certi che non vi è alcuno scorrimento da sinistra a destra su una risoluzione dello schermo di 1024 pixel di larghezza.

    Andy Ebon

  3. 4
  4. 5

    molto strano. In Firefox, il tuo sito ha una barra di scorrimento orizzontale a 1048 e non ha un aspetto pulito finché non arrivi a 1090.

    Grazie per le ottime statistiche delle risoluzioni di Google

  5. 6

    Since you've got your <div id="page"> set to 1048px, your site causes horizontal scroll bars on a 1024 screen. I think it would have been better to skim a 100px off the width (and padding) of your sidebar and content area so it fits on a 728×1024. That's what is best practice today.

    L'unico caso contrario sarebbe se i numeri di analisi lo supportassero ... ma dal momento che non hai fornito quei dati nel tuo articolo, direi che il design della tua pagina è difettoso.

  6. 7
  7. 8

    Uomo sciocco
    Non tutti usano tutte le finestre a schermo intero, infatti, scommetto che pochi lo fanno. 

    Ho il tuo blog in una finestra dell'80% ... ed eccolo lì, una barra di scorrimento orizzontale

    E cosa c'è fuori dallo schermo ... vediamo ... niente.

    Quindi la tua barra di scorrimento è inutile.

    Un modo semplice per perdere lettori !!

    • 9

      Il contenuto è centrato all'interno della pagina @ heenan73: disqus, fornendo al lettore esattamente ciò di cui ha bisogno. Se sto perdendo lettori perché entrambi possono vedere il contenuto E vedere una barra di scorrimento orizzontale ... non sono sicuro che fossero i lettori che sto cercando. C'è sicuramente qualcosa di unico nel nostro contenuto che lo spinge a 1217px, quindi lo rintraccerò e lo risolverò. Questo post è stato effettivamente scritto su un tema precedente. Grazie per averlo portato alla mia attenzione!

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.