ഒപ്റ്റിമൽ വെബ് പേജ് വീതി എന്താണ്?

ഒരു വെബ്‌സൈറ്റ് രൂപകൽപ്പന ചെയ്യുന്നതും വെബ് പേജിന്റെ വീതി ഒപ്റ്റിമൽ വീതിയായി ക്രമീകരിക്കുന്നതും ഒരു സംഭാഷണമാണ്. എന്റെ ബ്ലോഗിന്റെ രൂപകൽപ്പനയുടെ വീതി ഞാൻ അടുത്തിടെ മാറ്റിയത് നിങ്ങളിൽ പലരും ശ്രദ്ധിച്ചു. ഞാൻ പേജ് വീതി 1048 പിക്സലിലേക്ക് നീക്കി. നിങ്ങളിൽ ചിലർ ഈ നീക്കത്തോട് വിയോജിച്ചേക്കാം - പക്ഷേ തീം വീതി ഇത്രയും വിശാലമായി ഞാൻ തള്ളിയതിന്റെ ചില സ്ഥിതിവിവരക്കണക്കുകളും കാരണങ്ങളും പങ്കിടാൻ ഞാൻ ആഗ്രഹിച്ചു.

1048 പിക്സലുകൾ ഒരു റാൻഡം നമ്പറായിരുന്നില്ല.

എന്റെ പേജ് വീതി വിപുലീകരിക്കുന്നതിൽ രണ്ട് പ്രധാന സ്വാധീനങ്ങളുണ്ടായിരുന്നു:

  • Youtube വീതി മാറ്റുകYoutube ഇപ്പോൾ വലിയ ഉൾച്ചേർക്കൽ വലുപ്പങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു. യുട്യൂബ് വീഡിയോ പേജിന്റെ സൈഡ്‌ബാറിലെ ചെറിയ ഗിയറിൽ നിങ്ങൾ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, വലിയ വലുപ്പങ്ങൾക്കും തീമിനുമുള്ള ഓപ്ഷനുകൾ നിങ്ങൾക്ക് വാഗ്ദാനം ചെയ്യുന്നു. ഉയർന്ന ഡെഫനിഷൻ വീഡിയോകൾ യുട്യൂബിൽ സാധാരണ സ്ഥലമായതിനാൽ, ആ വീഡിയോകൾ എന്റെ ബ്ലോഗിൽ സംയോജിപ്പിച്ച് എനിക്ക് കഴിയുന്നത്ര വിശദമായി പ്രദർശിപ്പിക്കാൻ ഞാൻ ആഗ്രഹിച്ചു (മുഴുവൻ പേജ് വീതിയും ഉപയോഗിക്കാതെ).
  • സാധാരണ പരസ്യം 125, 250, 300 പിക്സൽ വീതിയിൽ വരുന്നു. പരസ്യ വരുമാന സൈറ്റുകളിൽ 300 പിക്സലുകൾ കൂടുതൽ കൂടുതൽ പോപ്പ് ചെയ്യുന്നതായി തോന്നുന്നു, അവ എന്റെ സൈഡ്‌ബാറിൽ ഭംഗിയായി ഉൾപ്പെടുത്താൻ ഞാൻ ആഗ്രഹിച്ചു.

തീർച്ചയായും, പേജിന്റെ ഇടത്തും വലത്തും കുറച്ച് പാഡിംഗ് ഉണ്ട്, ഉള്ളടക്കം, സൈഡ്‌ബാർ… അതിനാൽ മാജിക് നമ്പർ എന്റെ തീമിനായി 1048 പിക്‌സലായിരുന്നു:

ഒപ്റ്റിമൽ വെബ് സൈറ്റ് വീതി

ഞാൻ എന്റെ വായനക്കാരന്റെ സ്ഥിതിവിവരക്കണക്കുകൾ പരിശോധിച്ചോ?

അതെ, തീർച്ചയായും! എന്റെ ഭൂരിഭാഗം സന്ദർശകരും കുറഞ്ഞ മിഴിവുള്ള സ്‌ക്രീനുകൾ പ്രവർത്തിപ്പിക്കുകയാണെങ്കിൽ, എന്റെ പേജ് വിപുലീകരിക്കുന്നതിനെക്കുറിച്ച് എനിക്ക് തീർച്ചയായും രണ്ടാമത്തെ ചിന്തകൾ ഉണ്ടാകുമായിരുന്നു. വീതിയും ശതമാനവുംഎന്റെ അനലിറ്റിക്‌സ് പാക്കേജിൽ നിന്ന് സ്‌ക്രീൻ മിഴിവുകൾ output ട്ട്‌പുട്ട് ചെയ്‌ത ശേഷം (Google- ൽ ഇത് സന്ദർശകർ> ബ്രൗസർ ശേഷികൾ> സ്‌ക്രീൻ മിഴിവുകൾ), ഫലങ്ങളുടെ ഒരു Excel സ്‌പ്രെഡ്‌ഷീറ്റ് ഞാൻ നിർമ്മിക്കുകയും റെസല്യൂഷൻ ഫീൽഡിൽ നിന്ന് വീതി പാഴ്‌സുചെയ്യുകയും ചെയ്‌തു.

Google റെസലൂഷൻ 1600 × 1200 ആയി നൽകുന്നു, അതിനാൽ നിങ്ങൾ “x” ന്റെ ഇടതുഭാഗത്ത് നിന്ന് എല്ലാം എടുക്കേണ്ടതുണ്ട്, ഇത് ഒരു സംഖ്യാ ഫലമാക്കുന്നതിന് 1 കൊണ്ട് ഗുണിച്ചാൽ നിങ്ങൾക്ക് അതിൽ ഇറങ്ങുന്നത് അടുക്കാൻ കഴിയും, തുടർന്ന് ഒരു SUMIF ചെയ്ത് എത്ര സന്ദർശനങ്ങൾ കാണുക നിങ്ങൾ നോക്കുന്ന ഡിസൈൻ വീതിയെക്കാൾ വലുതോ അതിൽ കുറവോ ആണ്.

= LEFT (A2, FIND ("x", A2,1) -1) * 1

ചെറിയ റെസല്യൂഷൻ പ്രവർത്തിക്കുന്ന 22% വായനക്കാരെ ഞാൻ ഉപേക്ഷിച്ചോ? തീർച്ചയായും ഇല്ല! നിങ്ങളുടെ ഉള്ളടക്കം ഇടതും സൈഡ്‌ബാർ വലതും ഉള്ള ഒരു ലേ layout ട്ടിനെക്കുറിച്ചുള്ള മികച്ച കാര്യം, നിങ്ങളുടെ ഉള്ളടക്കം ഇപ്പോഴും ഭൂരിഭാഗം ബ്രൗസറുകളുടെയും വീതിയിലാണെന്ന് ഉറപ്പാക്കാൻ കഴിയും എന്നതാണ്. ഈ സാഹചര്യത്തിൽ, എന്റെ വായനക്കാരിൽ 99% 640 പിക്‌സലിലധികം വീതിയിൽ പ്രവർത്തിക്കുന്നു, അതിനാൽ ഞാൻ നല്ലവനാണ്! അവർ സൈഡ്‌ബാർ പൂർണ്ണമായും നഷ്‌ടപ്പെടുത്തണമെന്ന് ഞാൻ ആഗ്രഹിക്കുന്നില്ല, പക്ഷേ അത് ഉള്ളടക്കത്തിന്റെ ദ്വിതീയമാണ്.

9 അഭിപ്രായങ്ങള്

  1. 1

    ഒരു ഹൈബ്രിഡ് ലേ layout ട്ടും ഒരു CSS കണ്ടെയ്നർ വീതിയും 100% ഞാൻ നിർദ്ദേശിക്കുന്നു. സൈഡ്‌ബാറിനായി നിങ്ങൾക്ക് ഒരു നിശ്ചിത വീതി ലഭിക്കുന്നിടത്തോളം, തലക്കെട്ട്, അടിക്കുറിപ്പ്, പ്രധാന ഉള്ളടക്ക ഏരിയകൾ എന്നിവ സ്‌ക്രീനിന്റെ ശേഷിക്കുന്ന വീതിക്ക് അനുയോജ്യമായ രീതിയിൽ ക്രമീകരിക്കും. ഉപയോക്താവിന്റെ മോണിറ്റർ മിഴിവ് പരിഗണിക്കാതെ തന്നെ എല്ലാവരുടെയും ബ്ര browser സർ വിൻഡോയുടെ 100% പൂരിപ്പിക്കുന്നു. അതിനുശേഷം നിങ്ങൾ പിക്സലുകൾ എണ്ണേണ്ടതില്ല അല്ലെങ്കിൽ മോണിറ്റർ മിഴിവുകൾ സംബന്ധിച്ച ഉപയോക്തൃ സ്ഥിതിവിവരക്കണക്കുകൾ ട്രാക്കുചെയ്യേണ്ടതില്ല.

    • 2

      എനിക്ക് ഹൈബ്രിഡ് ലേ outs ട്ടുകൾ ശരിക്കും ഇഷ്ടമാണ്, ബോബ് - പക്ഷേ നിർഭാഗ്യവശാൽ അവ യഥാർത്ഥ ഉള്ളടക്കത്തിൽ ചിലപ്പോൾ നന്നായി കളിക്കുന്നില്ല. ഞാൻ മടിയനായിരിക്കാം, പക്ഷേ എന്റെ സൈറ്റിൽ പരമാവധി 640 മിനിറ്റും മിനിറ്റും XNUMXpx ആണെന്ന് അറിയാൻ എനിക്ക് എളുപ്പമാണ്. ഞാൻ പോസ്റ്റുകൾ എഴുതുമ്പോൾ വലിച്ചുനീട്ടുന്നത് സങ്കൽപ്പിക്കാൻ പ്രയാസമാണ്.

      ഞാൻ ess ഹിക്കുന്ന ഒരു വ്യക്തിപരമായ മുൻഗണന!

  2. 3

    അടിസ്ഥാനപരമായി, നിങ്ങളുടെ നിഗമനത്തോട് ഞാൻ യോജിക്കുന്നു, പക്ഷേ ഞാൻ ഒരു നിശ്ചിത വീതി സജ്ജീകരണം ഉപയോഗിക്കുകയാണെങ്കിൽ, ഞാൻ വീതി 960 പിക്സലായി പരിമിതപ്പെടുത്തുന്നു.

    ലംബമായ സ്ക്രോൾ ബാറുകൾക്കും അധിക വീതി എടുക്കുന്ന മറ്റ് ബ്ര browser സർ കുറുക്കുവഴി ബാറുകൾക്കും ഒരാൾ അക്കൗണ്ടുചെയ്യേണ്ടതുണ്ട്. 960 പിക്‌സലിനുള്ളിൽ തുടരുന്നതിലൂടെ, 1024 പിക്‌സൽ വീതിയുള്ള സ്‌ക്രീൻ റെസല്യൂഷനിൽ ഇടത്തുനിന്ന് വലത്തോട്ട് സ്‌ക്രോളിംഗ് ഇല്ലെന്ന് ഒരാൾക്ക് ഉറപ്പുണ്ട്.

    ആൻഡി എബോൺ

  3. 4

    ഈ പോസ്റ്റിന് നന്ദി ഡഗ്. ഞാൻ ഒരു പുതിയ (വിശാലമായ) ലേ layout ട്ടിൽ‌ പ്രവർ‌ത്തിക്കുന്നു ഇന്ത്യാന ഇൻ‌സൈഡർ ബ്ലോഗ് ഈ കുറിപ്പ് എനിക്ക് ആവശ്യമുള്ളത് തന്നെയാണ്!

    - ജെറമി

  4. 5

    വളരെ വിചിത്രമായത്. ഫയർ‌ഫോക്സിൽ‌, നിങ്ങളുടെ സൈറ്റിന് 1048 ൽ ഒരു തിരശ്ചീന സ്ക്രോൾ‌ബാർ‌ ഉണ്ട്, മാത്രമല്ല നിങ്ങൾ‌ 1090 ലേക്ക് പുറപ്പെടുന്നതുവരെ വൃത്തിയുള്ള രൂപമില്ല.

    Google മിഴിവുകളിൽ നിന്നാണെങ്കിലും മികച്ച സ്ഥിതിവിവരക്കണക്കുകൾക്ക് നന്ദി

  5. 6

    നിങ്ങൾക്ക് ലഭിച്ചതിനാൽ 1048px ആയി സജ്ജമാക്കി, നിങ്ങളുടെ സൈറ്റ് 1024 സ്ക്രീനിൽ തിരശ്ചീന സ്ക്രോൾ ബാറുകൾക്ക് കാരണമാകുന്നു. നിങ്ങളുടെ സൈഡ്‌ബാറിന്റെയും ഉള്ളടക്ക ഏരിയയുടെയും വീതിയിൽ (പാഡിംഗ്) 100 പി‌എക്സ് ഒഴിവാക്കുന്നതാണ് നല്ലതെന്ന് ഞാൻ കരുതുന്നു, അതിനാൽ ഇത് 728 × 1024 ന് യോജിക്കുന്നു. അതാണ് ഇന്നത്തെ മികച്ച പരിശീലനം.

    അനലിറ്റിക്സ് നമ്പറുകൾ ഇതിനെ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിൽ മാത്രമേ ഇതിനെതിരായുള്ള ഒരേയൊരു കേസ് ഉണ്ടാവുകയുള്ളൂ… എന്നാൽ നിങ്ങളുടെ ലേഖനത്തിൽ നിങ്ങൾ ആ ഡാറ്റ നൽകാത്തതിനാൽ, നിങ്ങൾ പേജ് ഡിസൈൻ തെറ്റാണെന്ന് ഞാൻ പറയും.

  6. 7

    ഞാൻ ഇപ്പോൾ 15 × 1024 റെസല്യൂഷനുള്ള 768 'മോണിറ്ററിലാണ്, ഞാൻ തിരശ്ചീന ബാർ കാണുന്നു, ഞാൻ വെറുക്കുന്നു.

  7. 8

    നിസാര മനുഷ്യൻ
    എല്ലാവരും എല്ലാ വിൻഡോകളും പൂർണ്ണ സ്‌ക്രീനിൽ ഉപയോഗിക്കുന്നില്ല - വാസ്തവത്തിൽ, കുറച്ച് പേർ മാത്രമേ ഞാൻ അത് ചെയ്യൂ. 

    എനിക്ക് നിങ്ങളുടെ ബ്ലോഗ് 80% വിൻഡോയിൽ ഉണ്ട്… അവിടെ ഒരു തിരശ്ചീന സ്ക്രോൾ ബാർ ഉണ്ട്

    സ്‌ക്രീനിൽ നിന്ന് എന്താണുള്ളത്… കാണാൻ അനുവദിക്കുന്നു… ഒന്നുമില്ല.

    അതിനാൽ നിങ്ങളുടെ സ്ക്രോൾ ബാർ അർത്ഥശൂന്യമാണ്.

    വായനക്കാരെ നഷ്‌ടപ്പെടുത്താനുള്ള ഒരു എളുപ്പ മാർഗം !!

    • 9

      ഉള്ളടക്കം @ heenan73: disqus എന്ന പേജിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു, ഇത് വായനക്കാരന് ആവശ്യമുള്ളത് നൽകുന്നു. എനിക്ക് വായനക്കാരെ നഷ്‌ടപ്പെടുകയാണെങ്കിൽ‌, കാരണം അവ രണ്ടും ഉള്ളടക്കം കാണാനും തിരശ്ചീനമായ ഒരു സ്ക്രോൾ‌ബാർ‌ കാണാനും കഴിയും… ഞാൻ‌ അന്വേഷിക്കുന്ന വായനക്കാർ‌ അവരാണെന്ന് ഉറപ്പില്ല. ഞങ്ങളുടെ ഉള്ളടക്കത്തിൽ തീർച്ചയായും അദ്വിതീയമായ എന്തെങ്കിലും ഉണ്ട്, അത് 1217px ലേക്ക് പുറന്തള്ളുന്നു, അതിനാൽ ഞാൻ അത് ട്രാക്കുചെയ്ത് പരിഹരിക്കാൻ പോകുന്നു. ഈ കുറിപ്പ് യഥാർത്ഥത്തിൽ ഒരു മുൻ തീമിനെക്കുറിച്ചാണ് എഴുതിയത്. ഇത് എന്റെ ശ്രദ്ധയിൽപ്പെടുത്തിയതിന് നന്ദി!

നീ എന്ത് ചിന്തിക്കുന്നു?

സ്പാം കുറയ്ക്കുന്നതിന് ഈ സൈറ്റ് Akismet ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ അഭിപ്രായ ഡാറ്റ പ്രോസസ്സുചെയ്യുന്നത് എങ്ങനെയെന്നറിയുക.