Ո՞րն է վեբ էջի օպտիմալ լայնությունը:

Վեբ կայք նախագծելը և վեբ էջի լայնությունը օպտիմալ լայնությամբ սահմանելը խոսակցություն է, որն արժե ունենալ: Ձեզանից շատերը նկատեցին, որ վերջերս ես փոխեցի իմ բլոգի ձևավորման լայնությունը: Ես էջի լայնությունը հասցրեցի 1048 պիքսել: Ձեզանից ոմանք կարող են համաձայն չլինել այդ քայլին, բայց ես ուզում էի կիսել որոշ վիճակագրություններ և պատճառներ, թե ինչու եմ այդքան լայն հրել թեմայի լայնությունը:

1048 պիքսելն, այնուամենայնիվ, պատահական թիվ չէր:

Իմ էջի լայնությունն ընդլայնելու վրա կար երկու հիմնական ազդեցություն.

  • Փոխեք Youtube- ի լայնությունըYoutube- ն այժմ առաջարկում է ներմուծման ավելի մեծ չափեր: Եթե ​​կտտացնում եք Youtube տեսանյութի էջի կողային սանդղակի փոքր հանդերձանքին, ձեզ առաջարկվում են ավելի մեծ չափերի, ինչպես նաև թեմայի ընտրանքներ: Քանի որ ավելի բարձր հստակության տեսանյութերը դառնում են սովորական տեղ Youtube- ում, ես ուզում էի այդ տեսանյութերը ներառել իմ բլոգում և ցուցադրել դրանք այնքան մանրամասն, որքան կարող էի (առանց ամբողջ էջի լայնությունը սպառելու):
  • Սովորական գովազդը գալիս է 125, 250 և 300 պիքսել լայնությունների լայնություններով: 300 պիքսել կարծես ավելի ու ավելի շատ է հայտնվում գովազդի եկամուտների կայքերում, և ես ուզում էի դրանք կոկիկորեն ներառել իմ կողային շարքում:

Իհարկե, էջի, բովանդակության և կողային տողի ձախ և աջ կողմում կա մի լցոնում ... այնպես որ կախարդական համարը 1048 պիքսել էր իմ թեմայի համար.

Վեբ կայքի օպտիմալ լայնություն

Ստուգե՞լ եմ ընթերցողի վիճակագրությունը:

Այո, իհարկե! Եթե ​​իմ այցելուների մեծամասնությունը ավելի ցածր թույլատրելի էկրաններ աշխատեր, ես հաստատ երկրորդ մտքեր կունենայի էջս ընդլայնելու մասին: Լայնությունը և տոկոսըԷկրանի բանաձևերը իմ Analytics փաթեթից (Google- ում դա Այցելուներ> owsննարկչի հնարավորություններ> Էկրանի լուծումներ) արտածելուց հետո ես կառուցեցի արդյունքների Excel աղյուսակ և վերլուծեցի լայնությունը բանաձևի դաշտից:

Google- ը տալիս է 1600 × 1200 բանաձև, այնպես որ դուք պետք է ամեն ինչ վերցնեք «x» - ի ձախ մասից, բազմապատկեք այն 1-ով `թվային արդյունք դարձնելով, որպեսզի կարողանաք տեսակավորել դրա վրա իջնողը, ապա կատարել SUMIF և տեսնել, թե քանի այցելություն ավելի մեծ են կամ պակաս, քան ձեր դիտած դիզայնի լայնությունը:

= ՁԵՐ (A2, FIND («x», A2,1) -1) * 1

Արդյո՞ք ես հրաժարվեցի այն ընթերցողների 22% -ից, ովքեր ավելի փոքր բանաձև ունեն: Իհարկե ոչ! Ձախ և կողային աջ կողմում տեղադրված դասավորության հետ կապված հաճելի բանն այն է, որ կարողանաք ապահովել, որ ձեր բովանդակությունը դեռ գտնվում է զննարկիչների մեծամասնության լայնության մեջ: Այս դեպքում, իմ ընթերցողների 99% -ը վազում է ավելի քան 640 պիքսել լայնություն, այնպես որ ես լավ եմ: Ես չեմ ուզում, որ նրանք բացարձակ բաց թողնեն կողային տողը, բայց դա երկրորդական է բովանդակությունից:

9 Comments

  1. 1

    Ես առաջարկում եմ հիբրիդային դասավորություն և CSS կոնտեյների լայնություն 100%: Քանի դեռ կողային գծի համար ունեք հաստատուն լայնություն, վերնագիր, տողատակ և հիմնական բովանդակության տարածքները կկարգավորվեն ՝ էկրանի մնացած լայնությանը համապատասխանելու համար: Լրացնում է յուրաքանչյուրի զննարկչի պատուհանի 100% -ը, անկախ օգտագործողի մոնիտորի բանաձևից: Դրանից հետո այլևս անհրաժեշտ չէ հաշվել պիքսելները կամ հետևել օգտագործողի վիճակագրությանը ՝ մոնիտորի լուծումների վերաբերյալ:

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

      Կարծում եմ ՝ պարզապես անձնական նախապատվություն:

  2. 3

    Ըստ էության, ես համաձայն եմ ձեր եզրակացության հետ, բայց եթե ես օգտագործում եմ ֆիքսված լայնության տեղադրում, ես սահմանափակում եմ լայնությունը մինչև 960 պիքսել:

    Մեկը պետք է հաշվի առնի ուղղահայաց ոլորման ձևերը և զննարկչի այլ դյուրանցումների գծերը, որոնք լրացուցիչ լայնություն են զբաղեցնում: Մնալով 960 պիքսել սահմաններում ՝ վստահեցնում ենք, որ 1024 պիքսել լայնությամբ էկրանի բանաձևի վրա ձախից աջ ոլորում չկա:

    Էնդի Էբոն

  3. 4
  4. 5

    շատ տարօրինակ Firefox- ում ձեր կայքը ունի 1048 հորիզոնական ոլորման տող, և մաքուր տեսք չունի, մինչև դուրս գաք 1090:

    Շնորհակալություն 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.

    Սրա դեմ միակ դեպքը կլինի, եթե վերլուծական համարներն աջակցեն դրան… բայց քանի որ այդ տվյալները չէիք տրամադրել ձեր հոդվածում, ես կասեի, որ ձեր էջի ձևավորումը թերի է:

  6. 7
  7. 8

    Հիմար մարդ
    Ոչ բոլորն են օգտագործում բոլոր պատուհանները ամբողջ էկրանով. Իրականում ես կցանկանայի, որ քչերն են դա անում: 

    Ես ունեմ քո բլոգը 80% windo in և ահա այն, հորիզոնական ոլորման տող

    Եվ այն, ինչ էկրանին չէ, թույլ է տալիս ոչինչ տեսնել:

    Այսպիսով, ձեր ոլորման տողն անիմաստ է:

    Ընթերցողներին կորցնելու մեկ հեշտ միջոց !!

    • 9

      Բովանդակությունը կենտրոնացած է @ heenan73: disqus էջի ներսում ՝ ընթերցողին տրամադրելով հենց իրենց անհրաժեշտը: Եթե ​​ես կորցնում եմ ընթերցողներ, քանի որ նրանք և՛ կարող են տեսնել բովանդակությունը, և՛ տեսնել հորիզոնական ոլորման գոտի համոզված չեն, որ նրանք են իմ որոնած ընթերցողները: Մեր բովանդակության մեջ հաստատ մի եզակի բան կա, որը դրդում է այն 1217px, այնպես որ ես պատրաստվում եմ հետևել դրան և շտկել այն: Այս հաղորդագրությունն իրականում գրվել է նախորդ թեմայի շուրջ: Շնորհակալություն այն իմ ուշադրությանը բերելու համար:

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.