Care este lățimea optimă a paginii web?

Proiectarea unui site web și setarea lățimii paginii web la o lățime optimă este o conversație care merită purtată. Mulți dintre voi ați observat că am schimbat recent lățimea designului blogului meu. Am împins lățimea paginii la 1048 pixeli. Este posibil ca unii dintre voi să nu fie de acord cu această mișcare - dar am vrut să împărtășesc câteva statistici și motive pentru care am împins lățimea temei atât de larg.

1048 pixeli nu era însă un număr aleatoriu.

Au existat două influențe cheie în extinderea lățimii paginii mele:

  • Schimbați lățimea YoutubeYoutube oferă acum dimensiuni de încorporare mai mari. Dacă faceți clic pe roata mică din bara laterală a paginii video Youtube, vi se oferă opțiuni pentru dimensiuni mai mari, precum și pentru temă. Întrucât videoclipurile cu definiție mai înaltă devin un loc obișnuit pe Youtube, am vrut să încorporez acele videoclipuri în blogul meu și să le afișez cu cât mai multe detalii (fără a consuma întreaga lățime a paginii).
  • Publicitatea tipică are lățimi de 125, 250 și 300 de lățimi de pixeli. 300 de pixeli par să apară din ce în ce mai mult pe site-urile cu venituri din publicitate și am vrut să le încorporez în bara laterală.

Și, desigur, există unele umpluturi în stânga și în dreapta paginii, conținutul și bara laterală ... astfel încât numărul magic a fost de 1048 pixeli pentru tema mea:

Lățimea optimă a site-ului web

Am verificat statisticile cititorului meu?

Da, desigur! Dacă majoritatea vizitatorilor mei ar fi rulat ecrane cu rezoluție mai mică, cu siguranță aș fi avut alte gânduri despre extinderea paginii mele. Lățime și procentajDupă ce am scos rezoluțiile ecranului din pachetul meu Google Analytics (în Google este Vizitatori> Capacități browser> Rezoluții ecran), am construit o foaie de calcul Excel a rezultatelor și am analizat lățimea din câmpul de rezoluție.

Google oferă rezoluție de 1600 × 1200, deci trebuie să luați totul din stânga „x”, înmulțiți-l cu 1 pentru a face din acesta un rezultat numeric, astfel încât să puteți sorta descendent pe el, apoi faceți un SUMIF și vedeți câte vizite sunt mai mari sau mai mici decât lățimea de proiectare la care vă uitați.

= STÂNGA (A2, FIND („x”, A2,1) -1) * 1

Am abandonat cei 22% dintre cititori care rulează o rezoluție mai mică? Desigur că nu! Interesantul unui aspect cu conținutul stânga și bara laterală dreaptă este că vă puteți asigura că conținutul dvs. se află încă în lățimea majorității browserelor. În acest caz, 99% dintre cititorii mei rulează cu o lățime mai mare de 640 pixeli, așa că sunt bun! Nu vreau să le lipsească total bara laterală, dar asta este secundar conținutului.

4 Comentarii

  1. 1

    Vă sugerez un aspect hibrid și o lățime de container CSS de 100%. Atâta timp cât aveți o lățime fixă ​​pentru bara laterală, antetul, subsolul și zonele principale de conținut se vor regla pentru a se potrivi lățimii rămase a ecranului. Umple 100% din fereastra browserului tuturor, indiferent de rezoluția monitorului utilizatorului. Atunci nu mai trebuie să numărați pixeli sau să țineți evidența statisticilor utilizatorilor cu privire la rezoluțiile monitorului.

    • 2

      Îmi plac foarte mult aspectele hibride, Bob - dar, din păcate, nu se joacă bine uneori cu conținutul real. Poate că sunt leneș, dar îmi este mai ușor să știu că max și min sunt 640 px pe site-ul meu. Întinderea este dificil de conceput atunci când scriu postările.

      Cred doar o preferință personală!

  2. 3

    În esență, sunt de acord cu concluzia dvs., dar dacă folosesc o configurație cu lățime fixă, limitez lățimea la 960 pixeli.

    Trebuie să țineți cont de barele de defilare verticale și alte bare de comenzi rapide ale browserului care ocupă lățime suplimentară. Dacă rămâneți la 960 pixeli, vă asigurăm că nu există o defilare de la stânga la dreapta pe o rezoluție a ecranului cu lățimea de 1024 pixeli.

    Andy Ebon

  3. 4
  4. 5

    foarte ciudat. În Firefox, site-ul dvs. are o bară de derulare horiz la 1048 și nu are un aspect curat până când nu ajungeți la 1090.

    Vă mulțumim pentru statisticile minunate, totuși, din rezoluțiile Google

  5. 6

    De când ai setat la 1048 px, site-ul dvs. provoacă bare de defilare orizontale pe un ecran 1024. Cred că ar fi fost mai bine să scăpați de 100 px de lățimea (și căptușeala) barei laterale și a zonei de conținut, astfel încât să se potrivească pe un 728 × 1024. Asta este cea mai bună practică astăzi.

    Singurul caz împotriva acestui lucru ar fi dacă numerele analitice îl susțin ... dar, din moment ce nu ați furnizat aceste date în articolul dvs., aș spune că proiectarea paginilor este defectuoasă.

  6. 7
  7. 8

    Om prostuț
    Nu toată lumea folosește fiecare fereastră pe ecran complet - de fapt, aș paria că puțini o fac. 

    Am blogul tău într-un vânt de 80% ... și iată-l, o bară de defilare orizontală

    Și ce este de pe ecran ... să vedem ... nimic.

    Deci, bara de defilare este inutilă.

    O modalitate ușoară de a pierde cititorii !!

    • 9

      Conținutul este centrat în pagina @ heenan73: disqus, oferind cititorului exact ceea ce are nevoie. Dacă pierd cititori pentru că pot vedea conținutul ȘI pot vedea o bară de derulare orizontală ... nu sunt sigur că erau cititorii pe care îi caut. Cu siguranță există ceva unic în conținutul nostru care îl împinge la 1217 px, așa că voi urmări acest lucru și îl voi remedia. Această postare a fost de fapt scrisă despre o temă anterioară. Mulțumesc că mi-ai adus-o în atenție!

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.