ഒരു ലോ ഫേം വെബ്‌സൈറ്റിനായി സ്റ്റിക്കി മൊബൈൽ കോൾ ബാർ നിർമ്മിക്കുന്നത്

ഒരു ക്രിമിനൽ ഡിഫൻസ് വെബ്‌സൈറ്റ് സന്ദർശിക്കുന്നവരിൽ ഭൂരിഭാഗവും ഫോണിലൂടെയാണ് എത്തുന്നത്, അവരിൽ പലരും വായിക്കുന്നതിനേക്കാൾ വിളിക്കാൻ ആഗ്രഹിക്കുന്നു. ആ കാരണത്താൽ തന്നെ ടാപ്പ്-ടു-കോൾ ബട്ടണോടുകൂടി സ്‌ക്രീനിന്റെ അടിയിൽ ഉറപ്പിച്ചുനിർത്തുന്ന ഒരു സ്ട്രിപ്പായ സ്റ്റിക്കി കോൾ ബാർ, ലോ ഫേം സൈറ്റുകളിലെ ഏറ്റവും സാധാരണമായ പാറ്റേണുകളിൽ ഒന്നാണ്. ഒപ്പം ഏറ്റവും സാധാരണയായി തകരാറിലാകുന്ന ഒന്നുകൂടിയാണിത്. ബാറുകൾക്ക് ഫൂട്ടർ ലിങ്കുകളെ മറയ്ക്കാനോ, ചാറ്റ് വിജറ്റുകളുമായി ഇടയാനോ, iPhone-ന്റെ ഹോം ഇൻഡിക്കേറ്ററിന് താഴെ വരാനോ, അല്ലെങ്കിൽ ഓരോ പേജിന്റെയും അവസാന വരി മറയ്ക്കാനോ കഴിയും. നോച്ച് ഉള്ള ഫോണുകളിൽ ശരിയായി പ്രവർത്തിക്കുന്നതും, ആക്സസ് ചെയ്യാവുന്നതും, അളക്കാൻ എളുപ്പമുള്ളതും, ഉള്ളടക്കത്തിന് തടസ്സമാകാത്തതുമായ മികച്ച ഒരു ബാർ നിർമ്മിക്കുന്നതിലൂടെയാണ് ഈ പോസ്റ്റ് കടന്നുപോകുന്നത്.

സ്റ്റിക്കി കോൾ ബാറിന്റെ ഉദ്ദേശ്യം

ഉടൻ ബന്ധപ്പെടുന്നതിനായി എപ്പോഴും ലഭ്യമാകുന്നതും എളുപ്പത്തിൽ ആക്‌സസ് ചെയ്യാവുന്നതുമായ ഒരു കോൾ-ടു-ആക്ഷൻ നൽകിക്കൊണ്ട് സ്റ്റിക്കി കോൾ ബാർ മൊബൈൽ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു. സാധ്യതയുള്ള ക്ലയന്റുകൾ അടിയന്തര സാഹചര്യങ്ങളിലായിരിക്കാൻ ഇടയുള്ളതിനാൽ ഇത് ലോ ഫേമുകൾക്ക് പ്രത്യേകിച്ചും പ്രധാനമാണ്.

രൂപകൽപ്പനയിലെ പരിഗണനകൾ

മാർക്ക്അപ്പ്

ബാർ ലളിതമായി സൂക്ഷിക്കുക. ഒരു പ്രാഥമിക പ്രവർത്തനവും (ഫോൺ കോൾ), ആവശ്യമെങ്കിൽ ഒരു ദ്വിതീയ പ്രവർത്തനവും (കോൺടാക്റ്റ് ഫോമിലേക്കുള്ള ലിങ്ക് പോലെ) ഉൾപ്പെടുത്തുക. ചെറിയ സ്‌ക്രീനുകളിൽ രണ്ട് ബട്ടണുകൾ സൗകര്യപ്രദമായി ഒതുങ്ങും, എന്നാൽ മൂന്നെണ്ണം സാധാരണയായി ഒതുങ്ങില്ല. ഒരു യഥാർത്ഥ tel: ലിങ്ക് അന്താരാഷ്ട്ര ഫോർമാറ്റിലുള്ള നമ്പറോടെ ഉപയോഗിക്കുക, വ്യക്തതയ്ക്കായി ആളുകൾക്ക് വായിക്കാൻ കഴിയുന്ന രൂപത്തിലുള്ള നമ്പർ പ്രദർശിപ്പിക്കുക.

ആക്സസിബിലിറ്റി

സഹായക സാങ്കേതികവിദ്യകൾക്ക് (assistive technology) തിരിച്ചറിയാൻ കഴിയുന്നതിനായി ബാറിനെ ഒരു ലേബൽ സഹിതം ലാൻഡ്‌മാർക്ക് എലമെന്റിൽ ഉൾപ്പെടുത്തുക. സ്‌ക്രീൻ റീഡറുകളെ ആശ്രയിക്കുന്ന ഉപയോക്താക്കൾക്ക് ഇത് വളരെ പ്രധാനമാണ്.

സേഫ് ഏരിയ ഹാൻഡ്‌ലിംഗ്

ഹോം ഇൻഡിക്കേറ്റർ ഉള്ള ഫോണുകളിൽ, വ്യൂപോർട്ടിന്റെ ഏറ്റവും താഴെയുള്ള ഉള്ളടക്കം അതിനടിയിൽ പെട്ടുപോകാൻ സാധ്യതയുണ്ട്. ഈ പ്രശ്നം പരിഹരിക്കാൻ CSS എൻവയോൺമെന്റ് വേരിയബിളുകൾ ഉപയോഗിക്കുക. വ്യൂപോർട്ട് മെറ്റാ ടാഗിൽ viewport-fit=cover ഉൾപ്പെടുത്തിയിട്ടുണ്ടെന്ന് ഉറപ്പുവരുത്തുക, ബാർ മറഞ്ഞുപോകാതിരിക്കാൻ ഇത് സഹായിക്കും.

.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #0c1a33;
  z-index: 50;
}

.call-bar a {
  flex: 1;
  min-height: 48px;
  display: grid;
  place-items: center;
}

body.has-call-bar {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .call-bar {
    display: none;
  }
  body.has-call-bar {
    padding-bottom: 0;
  }
}

കണ്ടന്റ് പാഡിംഗ്

ബാറിന്റെ ഉയരത്തിന് അനുസൃതമായി ബോഡി പാഡിംഗ് ക്രമീകരിക്കുക. നിരാകരണങ്ങളും വിലാസങ്ങളും അടങ്ങിയ ഫൂട്ടറുകൾ പോലുള്ള പ്രധാനപ്പെട്ട ഉള്ളടക്കങ്ങൾ ബാർ മറയ്ക്കുന്നത് തടയാൻ ഇത് സഹായിക്കും. ഉപയോക്താക്കൾ ഫോണ്ട് വലുപ്പം വർദ്ധിപ്പിക്കുമ്പോൾ ബാറിന്റെ വലുപ്പവും കൂടിയേക്കാം എന്നതിനാൽ വലിയ ടെക്സ്റ്റ് ക്രമീകരണങ്ങൾ ഉപയോഗിച്ച് ഇത് പരിശോധിച്ച് ഉറപ്പാക്കുക.

ടാപ്പ് ടാർഗെറ്റുകൾ

മിക്ക ടാർഗെറ്റുകൾക്കും കുറഞ്ഞത് 24 x 24 CSS പിക്സൽ വലുപ്പം നിഷ്കർഷിക്കുന്ന WCAG 2.2 മാർഗ്ഗനിർദ്ദേശങ്ങൾ ടാപ്പ് ടാർഗെറ്റുകൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. പ്രധാന കോൾ ബട്ടണിനായി, ഏകദേശം 44 മുതൽ 48 പിക്സൽ വരെ ഉയരം നൽകാൻ ശ്രദ്ധിക്കുക. ഉപയോക്താക്കൾ സമ്മർദ്ദത്തിലായിരിക്കുമ്പോഴോ ഒരു കൈ മാത്രം ഉപയോഗിച്ച് ടാപ്പ് ചെയ്യുമ്പോഴോ ഇത് വളരെ പ്രധാനമാണ്.

ഘടകങ്ങൾ തമ്മിൽ കൂട്ടിമുട്ടുന്നത് ഒഴിവാക്കൽ

ലോ ഫേം സൈറ്റുകളിൽ പലപ്പോഴും ചാറ്റ് വിജറ്റുകൾ, കുക്കി ബാനറുകൾ, കോൾ ബാറുമായി ഓവർലാപ്പ് ചെയ്യാൻ സാധ്യതയുള്ള മറ്റ് ഫിക്സഡ് ഘടകങ്ങൾ എന്നിവ ഉണ്ടാകാറുണ്ട്. ആശയക്കുഴപ്പം ഒഴിവാക്കാൻ കൃത്യമായ ഒരു സ്റ്റാക്കിംഗ് ക്രമം ഉണ്ടാക്കുക. നിങ്ങൾക്ക് ചാറ്റ് ലോഞ്ചർ ബാറിന് മുകളിലേക്ക് മാറ്റുകയോ അല്ലെങ്കിൽ രണ്ടാമത്തെ പ്രവർത്തനമായി കോൾ ബാറിലേക്ക് സംയോജിപ്പിക്കുകയോ ചെയ്യാം.

സാഹചര്യത്തിനനുസരിച്ചുള്ള പ്രദർശനം

എല്ലാ പേജിലും കോൾ ബാർ കാണിക്കേണ്ടതുണ്ടോ എന്ന് ആലോചിക്കുക. ഉദാഹരണത്തിന്, ഒരു വലിയ ചാർജ് പേജിൽ, ബാർ ഫോൺ നമ്പർ എപ്പോഴും ലഭ്യമാക്കുന്നു. എന്നാൽ, ഒരു കോൺടാക്റ്റ് പേജിൽ, ഇത് അനാവശ്യമായ തിരക്ക് ഉണ്ടാക്കിയേക്കാം. ചില സൈറ്റുകൾ സന്ദർശകൻ ആദ്യ സ്‌ക്രീൻ സ്ക്രോൾ ചെയ്ത ശേഷം മാത്രമേ ബാർ കാണിക്കാറുള്ളൂ, എന്നാൽ ഇത് ഉടനടി വിളിക്കുന്നതിന് തടസ്സമാകുന്നില്ലെന്ന് ഉറപ്പാക്കാൻ പരീക്ഷിക്കേണ്ടതുണ്ട്.

ഉള്ളടക്കം പ്രധാനമാണ്

ബട്ടണിലെ വാക്കുകൾ ആളുകൾ അത് ടാപ്പ് ചെയ്യുമോ ഇല്ലയോ എന്നതിനെ സ്വാധീനിക്കും. യഥാർത്ഥ നമ്പറിന് അടുത്തായി "Call now" പോലുള്ള ലേബലുകൾ നൽകുന്നത് അവ്യക്തമായ വാഗ്ദാനങ്ങളേക്കാൾ കൂടുതൽ വ്യക്തത നൽകുന്നു.

ഫലപ്രാപ്തി അളക്കൽ

നിങ്ങളുടെ അനലിറ്റിക്സ് ടൂളിൽ കോൾ ലിങ്കിലെ ടാപ്പുകൾ ഒരു ഇവന്റായി ട്രാക്ക് ചെയ്യുക. അനലിറ്റിക്സ് സ്ക്രിപ്റ്റ് സ്ലോ ആവുകയോ ബ്ലോക്ക് ചെയ്യപ്പെടുകയോ ചെയ്താലും ഡയലർ തുറക്കുന്നതിനായി, ഡിഫോൾട്ട് പ്രവർത്തനത്തെ തടസ്സപ്പെടുത്താതെ ലിങ്കിലേക്ക് ലിസണർ അറ്റാച്ചുചെയ്യുക. മാർക്കറ്റിംഗ് ടീമുകൾക്ക് വിലപ്പെട്ട ഡാറ്റയായതിനാൽ, ഏത് പേജിൽ നിന്നാണ് ടാപ്പ് വന്നതെന്ന് രേഖപ്പെടുത്തുക.

ടെസ്റ്റിംഗ്

എമുലേറ്ററുകൾക്ക് ലേഔട്ട് പ്രശ്നങ്ങൾ കണ്ടെത്താനാകും, എന്നാൽ അവ പ്രധാനപ്പെട്ട പല വിശദാംശങ്ങളും വിട്ടുപോയേക്കാം. ഒരു പുതിയ iPhone, ഒരു Android ഫോൺ എന്നിവയുൾപ്പെടെയുള്ള യഥാർത്ഥ ഉപകരണങ്ങളിൽ നേരെയോ ചരിഞ്ഞോ വെച്ച് പരിശോധിച്ച് ഉറപ്പാക്കുക. കൂടാതെ, കീബോർഡ് തുറക്കുമ്പോൾ ബാർ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും പരിശോധിക്കുക.

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ

ഒരു സ്റ്റിക്കി കോൾ ബാർ SEO-യെ ബാധിക്കുമോ? — പ്രധാന ഉള്ളടക്കത്തെ മറയ്ക്കാത്ത ഒരു ചെറിയ ബാർ പൊതുവെ കുഴപ്പമില്ലാത്തതാണ്. പേജ് ലോഡ് ചെയ്യുമ്പോൾ സ്ക്രീനിന്റെ ഭൂരിഭാഗവും മറയ്ക്കുന്ന ഒന്നും തന്നെ ഉപയോഗിക്കാതിരിക്കുക, കാരണം ഇത് മോശം ഉപയോക്തൃ അനുഭവം ഉണ്ടാക്കും.

ഡെസ്ക്ടോപ്പിൽ ബാർ കാണിക്കേണ്ടതുണ്ടോ? — സാധാരണയായി ആവശ്യമില്ല. ഡെസ്ക്ടോപ്പ് സന്ദർശകർ ബ്രൗസറിൽ നിന്ന് വിളിക്കുന്നത് അപൂർവ്വമാണ്, അതിനാൽ ഫോൺ നമ്പറുള്ള ഒരു ഹെഡറാണ് കൂടുതൽ ഫലപ്രദം.

ബാറിൽ ഒരു ടെക്സ്റ്റ് മെസ്സേജ് ഓപ്ഷൻ ഉൾപ്പെടുത്താൻ കഴിയുമോ? — അതെ, ഒരു sms: ലിങ്ക് ഉപയോഗിച്ച് സാധിക്കും, എന്നാൽ സ്ഥാപനം ആ നമ്പർ നിരീക്ഷിക്കുകയും വേഗത്തിൽ മറുപടി നൽകുകയും വേണം.

ഉപസംഹാരം

ഒരു സ്റ്റിക്കി മൊബൈൽ കോൾ ബാർ നിർമ്മിക്കുന്നത് ഒരു ലോ ഫേമിന്റെ വെബ്‌സൈറ്റിന് വളരെ മൂല്യവത്തായ ഒന്നാണ്. സാധ്യതയുള്ള ക്ലയന്റുകൾക്ക് വേഗത്തിൽ ബന്ധപ്പെടുന്നത് എളുപ്പമാക്കിക്കൊണ്ട് ഇത് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു.

മേന്മകൾ

• ബന്ധപ്പെടാനുള്ള വിവരങ്ങളിലേക്ക് ഉടനടി ആക്സസ് നൽകുന്നു.
• മൊബൈൽ ഉപകരണങ്ങളിൽ ഉപയോക്തൃ ഇടപഴകൽ മെച്ചപ്പെടുത്തുന്നു.
• എല്ലാ ഉപയോക്താക്കൾക്കുമുള്ള ആക്സസിബിലിറ്റി മെച്ചപ്പെടുത്തുന്നു.

പോരായ്മകൾ

• ശ്രദ്ധാപൂർവ്വം രൂപകൽപ്പന ചെയ്തില്ലെങ്കിൽ ഇന്റർഫേസിൽ അനാവശ്യമായ തിരക്ക് ഉണ്ടാക്കിയേക്കാം.
• പേജിലെ മറ്റ് ഫിക്സഡ് ഘടകങ്ങൾക്ക് തടസ്സമുണ്ടാക്കാൻ സാധ്യതയുണ്ട്.

മുന്നറിയിപ്പ്

ഈ ലേഖനം വിദ്യാഭ്യാസപരമായ ആവശ്യങ്ങൾക്കുള്ളതാണ്. പ്ലേസ്‌ഹോൾഡർ മൂല്യങ്ങൾക്ക് പകരം യഥാർത്ഥ വിവരങ്ങൾ നൽകണം, കൂടാതെ വായനക്കാർ ഈ വിവരങ്ങളെ ആശ്രയിക്കുന്നതിന് മുമ്പ് യഥാർത്ഥ ഉറവിടവുമായി ഒത്തുനോക്കി അവ ശരിയാണെന്ന് ഉറപ്പുവരുത്തണം.

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ

• എന്താണ് സ്റ്റിക്കി കോൾ ബാർ? — ഉപയോക്താക്കൾക്ക് എളുപ്പത്തിൽ ടാപ്പ് ചെയ്ത് വിളിക്കാൻ അനുവദിക്കുന്ന, ഒരു മൊബൈൽ സ്ക്രീനിന്റെ താഴെയുള്ള ഒരു ഫിക്സഡ് ഘടകമാണ് സ്റ്റിക്കി കോൾ ബാർ.
• എനിക്ക് എങ്ങനെ ഒരു സ്റ്റിക്കി കോൾ ബാർ ആക്‌സസിബിൾ ആക്കാം? — വ്യക്തമായ ലേബലുകളും ശരിയായ മാർക്ക്അപ്പും ഉപയോഗിക്കുക, ഒപ്പം അത് പ്രധാനപ്പെട്ട ഉള്ളടക്കങ്ങളെ മറയ്ക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുക.
• ഞാൻ എന്തെല്ലാം ഡിസൈൻ പരിഗണനകളാണ് മനസ്സിൽ സൂക്ഷിക്കേണ്ടത്? — ലാളിത്യം, ടാപ്പ് ടാർഗെറ്റിന്റെ വലുപ്പം, മറ്റ് ഘടകങ്ങളുമായി കൂട്ടിമുട്ടുന്നത് ഒഴിവാക്കൽ എന്നിവയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക.
• സ്റ്റിക്കി ബാറിൽ നിന്നുള്ള കോളുകൾ എനിക്ക് ട്രാക്ക് ചെയ്യാൻ കഴിയുമോ? — അതെ, കോൾ ലിങ്കിലെ ടാപ്പുകൾ അളക്കാൻ അനലിറ്റിക്സ് ടൂളുകൾ ഉപയോഗിച്ച് സാധിക്കും.
• എല്ലാ പേജിലും കോൾ ബാർ കാണിക്കേണ്ടതുണ്ടോ? — ആവശ്യമില്ല; ഓരോ പേജിന്റെയും സന്ദർഭം പരിഗണിക്കുക.
• കോൾ ബാർ മറ്റ് ഘടകങ്ങളുമായി ഓവർലാപ്പ് ചെയ്താൽ എന്ത് സംഭവിക്കും? — ആശയക്കുഴപ്പം ഒഴിവാക്കുന്നതിനും ഉപയോഗക്ഷമത ഉറപ്പാക്കുന്നതിനും ഒരു സ്റ്റാക്കിംഗ് ക്രമം ഉണ്ടാക്കുക.

ടാഗുകൾ

#webdev #css #mobile #lawfirm #userexperience #accessibility #stickybar #calltoaction