Wat is die optimale webbladbreedte?

Dit is die moeite werd om 'n webwerf te ontwerp en die webbladbreedte op 'n optimale breedte te stel. Baie van u het opgemerk dat ek onlangs die breedte van die ontwerp van my blog verander het. Ek het die bladsybreedte na 1048 pixels geskuif. Sommige van u stem dalk nie saam met die stap nie - maar ek wou statistieke en redes deel oor waarom ek die temawydte so breed gedruk het.

1048 pixels was egter nie 'n ewekansige nommer nie.

Daar was twee belangrike invloede in die uitbreiding van my bladsybreedte:

  • Verander Youtube-breedteYoutube bied nou groter inbedgroottes. As u op die klein ratjie op die sybalk van die Youtube-videoblad klik, word opsies vir groter groottes sowel as die tema aangebied. Aangesien video's met 'n hoër definisie 'n algemene plek word op Youtube, wil ek die video's in my blog opneem en dit met soveel detail as moontlik kan vertoon (sonder om die hele bladsybreedte te verbruik).
  • Tipiese advertensies kom in breedtes van 125, 250 en 300 pixels. Dit lyk asof 300 pixels meer en meer op advertensie-inkomste webwerwe verskyn, en ek wou dit netjies in my sybalk opneem.

En natuurlik is daar 'n bietjie vulling links en regs van die bladsy, die inhoud en die sybalk ... so die magiese getal was 1048 pixels vir my tema:

Optimale webwerfwydte

Het ek my lesersstatistieke nagegaan?

Ja natuurlik! As 'n meerderheid van my besoekers skerms met 'n laer resolusie gehad het, sou ek beslis nadink oor die uitbreiding van my bladsy. Breedte en persentasieNadat ek die skermresolusies uit my Analytics-pakket (in Google, dit is besoekers> blaaierfunksies> skermresolusies), het ek 'n Excel-sigblad van die resultate opgebou en die breedte van die resolusieveld ontleed.

Google bied resolusie as 1600 × 1200, dus moet u alles van die linkerkant van die "x" neem, vermenigvuldig dit met 1 om dit 'n numeriese resultaat te maak, sodat u die dalende daarop kan sorteer, dan 'n SUMIF doen en kyk hoeveel besoeke groter of kleiner is as die ontwerpwydte waarna u kyk.

= LINKS (A2, VIND ("x", A2,1) -1) * 1

Het ek die 22% lesers wat 'n kleiner resolusie het, laat vaar? Natuurlik nie! Die lekkerte van 'n uitleg met u inhoud links en u sidebar regs, is dat u kan verseker dat u inhoud steeds binne die breedte van die meeste blaaiers is. In hierdie geval het 99% van my lesers meer as 640 pixels breed, so ek is goed! Ek wil nie hê dat hulle die sybalk heeltemal moet mis nie, maar dit is ondergeskik aan die inhoud.

9 Comments

  1. 1

    Ek stel voor 'n hibriede uitleg en 'n CSS-houerwydte van 100%. Solank as wat u 'n vaste breedte vir die sybalk het, sal die kop-, onder- en hoofinhoudareas aanpas om by die oorblywende breedte van die skerm te pas. Vul 100% van almal se blaaiervenster in, ongeag die gebruiker se monitorresolusie. Dan hoef u nie meer pixels te tel of gebruikersstatistieke oor monitoroplossings by te hou nie.

    • 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.

      Ek dink net 'n persoonlike voorkeur!

  2. 3

    In wese stem ek saam met u gevolgtrekking, maar as ek 'n vaste breedte-opstelling gebruik, beperk ek die breedte tot 960 pixels.

    'N Mens moet rekening hou met vertikale skuifbalkies en ander blaaier-sneltoere wat ekstra breedte inneem. Deur binne 960 pixels te bly, kan u verseker dat daar nie van links na regs geskuif kan word op 'n skermresolusie van 1024 pixels nie.

    Andy Ebon

  3. 4
  4. 5
  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.

    Die enigste saak hierteen sou wees as die ontledingsgetalle dit ondersteun ... maar omdat u nie die gegewens in u artikel verstrek het nie, sou ek sê dat u bladsyontwerp gebrekkig is.

  6. 7
  7. 8

    Dom man
    Nie almal gebruik elke venster op die volle skerm nie. 

    Ek het u blog 80% windo ... en daar is dit, 'n horisontale skuifbalk

    En wat van die skerm af is ... laat ons sien ... niks.

    Jou skuifbalk is dus sinneloos.

    Een maklike manier om lesers te verloor !!

    • 9

      Die inhoud is gesentreer op die bladsy @ heenan73: disqus, wat die leser presies bied wat hulle benodig. As ek lesers verloor omdat hulle albei die inhoud kan sien EN 'n horisontale skuifbalk kan sien ... nie seker dat dit die lesers was wat ek gesoek het nie. Daar is beslis iets unieks in ons inhoud wat dit na 1217px uitstoot, so ek gaan dit opspoor en regmaak. Hierdie pos is eintlik oor 'n vorige tema geskryf. Dankie dat u dit onder my aandag gebring het!

Wat dink jy?

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.