Mikä on optimaalinen verkkosivun leveys?

Verkkosivuston suunnittelu ja verkkosivun leveyden asettaminen optimaaliselle leveydelle on keskustelun arvoinen. Monet teistä huomasivat, että muutin äskettäin blogini suunnittelun leveyttä. Työnsin sivun leveyden 1048 pikseliin. Jotkut teistä saattavat olla eri mieltä siirron kanssa - mutta halusin jakaa joitain tilastoja ja syitä siihen, miksi työnsin teeman leveyttä niin leveälle.

1048 pikseliä ei kuitenkaan ollut satunnaisluku.

Sivuleveyden laajentamisessa oli kaksi keskeistä vaikutusta:

  • Muuta Youtube-levyäYoutube tarjoaa nyt suurempia upotuskokoja. Jos napsautat Youtube-videosivun sivupalkissa olevaa pientä rataskiekkoa, sinulle tarjotaan vaihtoehtoja suuremmille koille ja teemalle. Koska teräväpiirtovideoista on tulossa yleinen paikka Youtubessa, halusin sisällyttää nuo videot blogiini ja näyttää ne mahdollisimman yksityiskohtaisesti (kuluttamatta koko sivuleveyttä).
  • Tyypillinen mainonta on 125, 250 ja 300 pikselin leveyttä. 300 pikseliä näyttää olevan nousemassa yhä enemmän mainostulosivustoille ja halusin sisällyttää ne siististi sivupalkkiini.

Ja tietysti sivun, sisällön ja sivupalkin vasemmalla ja oikealla puolella on joitain täytteitä ... joten maaginen numero oli 1048 pikseliä teemalla:

Optimaalinen verkkosivuston leveys

Tarkistin lukijatilastoni?

Tottakai! Jos suurin osa kävijöistäni olisi käyttänyt pienemmän resoluution näyttöjä, minulla olisi ehdottomasti ollut toinen ajatus sivuni laajentamisesta. Leveys ja prosenttiosuusKun olen antanut näytön tarkkuudet Analytics-paketistani (Google's Visitors> Selainominaisuudet> Näytön resoluutiot), rakensin Excel-laskentataulukon tuloksista ja jäsensin leveyden resoluutiokentästä.

Google tarjoaa tarkkuuden 1600 × 1200, joten sinun on otettava kaikki x-kirjaimen vasemmalta puolelta, kerrottamalla se yhdellä saadaksesi siitä numeerisen tuloksen, jotta voit lajitella sen laskevasti, tehdä sitten SUMIF ja nähdä kuinka monta käyntiä ovat suurempia tai pienempiä kuin katsomasi suunnitteluleveys.

= VASEN (A2, ETSI ("x", A2,1) -1) * 1

Hylkäsinkö 22 prosenttia lukijoista, joiden resoluutio on pienempi? Ei tietenkään! Asettelussa, jossa sisältösi on vasemmalla ja sivupalkki oikealla, on hienoa, että voit varmistaa, että sisältösi on edelleen suurimman osan selaimista. Tässä tapauksessa 99% lukijoistani on yli 640 pikseliä leveä, joten olen hyvä! En halua heidän kaipaavan sivupalkkia kokonaan, mutta se on toissijaista sisältöön nähden.

9 Kommentit

  1. 1

    Ehdotan hybridi-asettelua ja CSS-säilön leveyttä 100%. Niin kauan kuin sinulla on kiinteä sivupalkin leveys, otsikko, alatunniste ja pääsisältöalueet säätyvät vastaamaan näytön jäljellä olevaa leveyttä. Täyttää 100% kaikkien selainikkunoista käyttäjän näytön tarkkuudesta riippumatta. Tällöin sinun ei tarvitse enää laskea pikseleitä tai seurata monitorien tarkkuuksia koskevia käyttäjän tilastoja.

    • 2

      Pidän todella hybridi-asetteluista, Bob - mutta valitettavasti ne eivät toistu joskus varsinaisen sisällön kanssa. Ehkä olen laiska, mutta minun on helpompi tietää, että maksimi ja min ovat 640 kuvapistettä sivustollani. Venyttämistä on vaikea ajatella kirjoittaessani viestejä.

      Vain henkilökohtainen mieltymys luulisin!

  2. 3

    Pohjimmiltaan olen samaa mieltä johtopäätöksesi kanssa, mutta jos käytän kiinteän leveyden kokoonpanoa, rajoitan leveyden 960 pikseliin.

    On otettava huomioon pystysuuntaiset vierityspalkit ja muut selaimen pikavalintapalkit, jotka vievät ylimääräisen leveyden. Pysymällä 960 pikselin sisällä voidaan varmistaa, että 1024 pikselin levyisen näytön tarkkuudella ei vieritä vasemmalta oikealle.

    Andy Ebon

  3. 4
  4. 5

    hyvin outoa. Firefoxissa sivustollasi on horisontin vierityspalkki 1048, eikä sillä ole siistiä ilmeä, ennen kuin pääset numeroon 1090.

    Kiitos hyvistä tilastoista Google-päätöslauselmista

  5. 6

    Koska sinulla on oma asetettu arvoon 1048 kuvapistettä, sivustosi aiheuttaa vaakasuuntaisia ​​vierityspalkkeja 1024-näytöllä. Mielestäni olisi ollut parempi nollata 100 kuvapistettä sivupalkin ja sisältöalueen leveydeltä (ja pehmusteelta), jotta se mahtuu 728 × 1024: lle. Se on paras käytäntö tänään.

    Ainoa asia tätä vastaan ​​olisi, jos analyysinumerot tukisivat sitä ... mutta koska et toimittanut kyseisiä tietoja artikkelissasi, sanoisin, että sivusi suunnittelu on virheellinen.

  6. 7

    Minulla on nyt 15-tuumainen näyttö, jonka resoluutio on 1024 × 768, näen vaakasuoran palkin ja vihaan sitä.

  7. 8

    Hölmö mies
    Kaikki eivät käytä kaikkia ikkunoita koko näytöllä - itse asiassa panostaisin vain harvoille. 

    Minulla on blogisi 80% windossa ... ja siinä se on, vaakasuuntainen vierityspalkki

    Ja mikä on ruudun ulkopuolella ... antaa nähdä ... mitään.

    Joten vierityspalkki on turha.

    Yksi helppo tapa menettää lukijoita!

    • 9

      Sisältö on keskitetty @ heenan73: disqus -sivulle ja tarjoaa lukijalle juuri sen, mitä he tarvitsevat. Jos menetän lukijoita, koska he molemmat näkevät sisällön JA näkevät vaakasuoran vierityspalkin ... eivät ole varmoja siitä, että he olivat lukijoita, joita etsin. Sisältömme sisältää varmasti jotain ainutlaatuista, joka työntää sen 1217 kuvapisteeseen, joten aion jäljittää sen ja korjata sen. Tämä viesti on itse asiassa kirjoitettu edellisestä teemasta. Kiitos, että sait sen huomioni!

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.