ஒரு சட்ட நிறுவன வலைத்தளத்திற்கான ஸ்டிக்கி மொபைல் கால் பாரை உருவாக்குதல்

குற்றவியல் பாதுகாப்பு வலைத்தளத்திற்கு வரும் பெரும்பாலான பார்வையாளர்கள் மொபைல் போன் மூலமே வருகிறார்கள், மேலும் அவர்களில் பலர் வாசிப்பதை விட அழைக்கவே விரும்புகிறார்கள். திரையின் அடிப்பகுதியில் tap-to-call பொத்தானுடன் பொருத்தப்பட்ட ஒரு பட்டையான ஸ்டிக்கி கால் பார் (sticky call bar), அந்த காரணத்திற்காகவே சட்ட நிறுவன தளங்களில் மிகவும் பொதுவான வடிவங்களில் ஒன்றாக உள்ளது. அதே சமயம் இது மிகவும் பொதுவாகக் கோளாறுகளை ஏற்படுத்தும் கூறுகளில் ஒன்றாகவும் உள்ளது. இந்த பார்கள் footer இணைப்புகளை மறைக்கலாம், chat widgets உடன் மோதலாம், iPhone home indicator-க்கு அடியில் அமரலாம் அல்லது ஒவ்வொரு பக்கத்தின் கடைசி வரியையும் மறைக்கலாம். நாட்ச் (notch) உள்ள போன்களில் சரியாகச் செயல்படுதல், அணுகக்கூடியதாக (accessible) இருத்தல், அளவிட எளிதாக இருத்தல் மற்றும் உள்ளடக்கத்திற்கு இடையூறாக இல்லாமல் இருத்தல் என சிறப்பாகச் செயல்படும் ஒன்றை உருவாக்குவதை இந்தப் பதிவு விளக்குகிறது.

ஸ்டிக்கி கால் பாரின் நோக்கம்

உடனடித் தொடர்புக்கு நிலையான, எளிதில் அணுகக்கூடிய call-to-action-ஐ வழங்குவதன் மூலம் ஸ்டிக்கி கால் பார் மொபைல் பயனர் அனுபவத்தை மேம்படுத்துகிறது. சாத்தியமான வாடிக்கையாளர்கள் அவசர சூழ்நிலைகளில் இருக்கக்கூடும் என்பதால், சட்ட நிறுவனங்களுக்கு இது மிகவும் முக்கியமானது.

வடிவமைப்பு பரிசீலனைகள்

மார்க்அப் (Markup)

பாரை எளிமையாக வைத்திருங்கள். ஒரு முதன்மைச் செயலையும் (தொலைபேசி அழைப்பு), விருப்பப்பட்டால் ஒரு இரண்டாம் நிலைச் செயலையும் (தொடர்பு படிவத்திற்கான இணைப்பு போன்றது) சேர்க்கவும். சிறிய திரைகளில் இரண்டு பொத்தான்கள் வசதியாகப் பொருந்தும், ஆனால் மூன்று பொத்தான்கள் பொதுவாகப் பொருந்தாது. ஒரு உண்மையான tel: சர்வதேச வடிவத்தில் எண்ணைக் கொண்ட இணைப்பைப் பயன்படுத்தவும், மேலும் தெளிவுக்காக மனிதர்கள் படிக்கக்கூடிய எண்ணைக் காட்டவும்.

அணுகல்தன்மை (Accessibility)

உதவித் தொழில்நுட்பங்கள் (assistive technology) அடையாளம் காணும் வகையில், பாரை ஒரு லேபிளுடன் கூடிய landmark கூறில் (landmark element) வைக்கவும். திரை வாசிப்பான்களைப் (screen readers) பயன்படுத்தும் பயனர்களுக்கு இது மிகவும் முக்கியமானது.

Safe Area கையாளுதல்

Home indicator உள்ள போன்களில், viewport-இன் மிகக் கீழே உள்ள உள்ளடக்கம் அதற்கு அடியில் சென்றுவிடக்கூடும். இந்தப் பிரச்சினையைத் தீர்க்க CSS environment variables-ஐப் பயன்படுத்தவும். இதனுடன் viewport meta tag-ஐச் சேர்க்க மறக்காதீர்கள்: 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;
  }
}

Content Padding (உள்ளடக்க பேடிங்)

பாரின் உயரத்திற்கு ஏற்ப body padding-ஐ சரிசெய்யவும். பொறுப்புத் துறப்புகள் (disclaimers) மற்றும் முகவரிகளைக் கொண்ட footers போன்ற முக்கியமான உள்ளடக்கத்தை பார் மறைப்பதைத் இது தடுக்கிறது. பயனர்கள் எழுத்துரு அளவை அதிகரிக்கும் போது பாரின் அளவு பெரிதாகக்கூடும் என்பதால், பெரிய உரை அமைப்புகளுடன் (large text settings) சோதனை செய்யவும்.

Tap Targets (தட்டல் இலக்குகள்)

பெரும்பாலான இலக்குகளுக்கு குறைந்தபட்ச அளவாக 24 x 24 CSS பிக்சல்களை நிர்ணயிக்கும் WCAG 2.2 வழிகாட்டுதல்களை tap targets பூர்த்தி செய்வதை உறுதிசெய்யவும். முதன்மை அழைப்பு பொத்தானுக்கு, சுமார் 44 முதல் 48 பிக்சல்கள் உயரத்தை இலக்காகக் கொள்ளுங்கள். பயனர்கள் மன அழுத்தத்தில் இருக்கும்போதோ அல்லது தட்டும்போது ஒரு கையைப் பயன்படுத்தும்போதோ இது மிகவும் முக்கியமானது.

கூறுகள் மோதுவதைத் தவிர்த்தல் (Collision Avoidance)

சட்ட நிறுவன தளங்களில் பெரும்பாலும் chat widgets, cookie banners மற்றும் பிற நிலையான கூறுகள் (fixed elements) இருக்கும், அவை கால் பாருடன் ஒன்றன் மேல் ஒன்றாகப் படியக்கூடும். குழப்பத்தைத் தவிர்க்க ஒரு சீரான அடுக்கு வரிசையை (stacking order) உருவாக்கவும். chat launcher-ஐ பாருக்கு மேலே நகர்த்தவோ அல்லது இரண்டாம் நிலைச் செயலாக அதை கால் பாருக்குள்ளேயே ஒருங்கிணைக்கவோ நீங்கள் தேர்வு செய்யலாம்.

நிபந்தனை அடிப்படையிலான காட்சிப்படுத்தல் (Conditional Display)

ஒவ்வொரு பக்கத்திலும் கால் பார் காட்டப்பட வேண்டுமா என்பதைப் பரிசீலிக்கவும். உதாரணமாக, குற்றச்சாட்டுகள் விவரிக்கப்படும் ஒரு நீண்ட பக்கத்தில் (charge page), பார் எண்ணை எளிதில் அணுகக்கூடிய தூரத்தில் வைத்திருக்கும். இருப்பினும், தொடர்புப் பக்கத்தில் (contact page), இது தேவையற்ற நெரிசலைச் சேர்க்கலாம். சில தளங்கள் பார்வையாளர் முதல் திரையைத் தாண்டி ஸ்க்ரோல் செய்த பின்னரே பாரைக் காண்பிக்கின்றன, ஆனால் இது உடனடி அழைப்பு அணுகலுக்குத் தடையாக இருக்காது என்பதை உறுதிப்படுத்த சோதனை செய்யப்பட வேண்டும்.

உள்ளடக்கம் முக்கியமானது

பொத்தானில் உள்ள வார்த்தைகள் மக்கள் அதைத் தட்டுவார்களா என்பதைத் தீர்மானிக்கக்கூடும். தெளிவற்ற வாக்குறுதிகளை விட, உண்மையான எண்ணுக்கு அருகில் "Call now" போன்ற லேபிள்கள் இருப்பது மிகவும் தெளிவானது.

செயல்திறனை அளவிடுதல்

அழைப்பு இணைப்பின் மீதான தட்டல்களை உங்கள் analytics கருவியில் ஒரு நிகழ்வாகக் (event) கண்காணிக்கவும். இயல்புநிலைச் செயலைத் (default action) தடுக்காமல் listener-ஐ இணைப்பில் இணைக்கவும், இதன் மூலம் analytics ஸ்கிரிப்ட் மெதுவாக இருந்தாலோ அல்லது தடுக்கப்பட்டாலோ டயலர் (dialer) தொடர்ந்து திறக்கும். தட்டல் எந்தப் பக்கத்திலிருந்து வந்தது என்பதைப் பதிவுசெய்யவும், ஏனெனில் இது சந்தைப்படுத்தல் குழுக்களுக்கு மதிப்புமிக்க தரவாகும்.

சோதனை செய்தல்

எமுலேட்டர்கள் (Emulators) தளவமைப்புச் சிக்கல்களைக் கண்டறியலாம், ஆனால் அவை முக்கியமான விவரங்களைத் தவறவிடுகின்றன. சமீபத்திய ஒரு iPhone மற்றும் ஒரு Android போன் உட்பட உண்மையான சாதனங்களில், செங்குத்தாகவும் கிடைமட்டமாகவும் வைத்துப் பரிசோதிக்கவும். மேலும், விசைப்பலகை (keyboard) திறக்கும் போது பார் எவ்வாறு செயல்படுகிறது என்பதையும் சரிபார்க்கவும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

ஸ்டிக்கி கால் பார் SEO-வைப் பாதிக்குமா? — முக்கிய உள்ளடக்கத்தை மறைக்காத ஒரு சிறிய பார் பொதுவாகப் பரவாயில்லை. பக்கம் ஏற்றப்படும்போது திரையின் பெரும்பகுதியை மறைக்கும் எதையும் தவிர்க்கவும், ஏனெனில் இது மோசமான பயனர் அனுபவத்தை உருவாக்கக்கூடும்.

டெஸ்க்டாப்பில் (desktop) பார் காட்டப்பட வேண்டுமா? — பொதுவாகத் தேவையில்லை. டெஸ்க்டாப் பார்வையாளர்கள் உலாவி வழியாக அழைப்புகளை மேற்கொள்வது அரிது, எனவே தொலைபேசி எண்ணுடன் கூடிய ஒரு header மிகவும் பயனுள்ளதாக இருக்கும்.

பாரில் குறுஞ்செய்தி (text message) அனுப்பும் விருப்பத்தைச் சேர்க்க முடியுமா? — ஆம், ஒரு sms: இணைப்பைப் பயன்படுத்தலாம், ஆனால் நிறுவனம் அந்த எண்ணைக் கண்காணித்து விரைவாகப் பதிலளிக்கும் வரையில் மட்டுமே.

முடிவுரை

ஸ்டிக்கி மொபைல் கால் பாரை உருவாக்குவது ஒரு சட்ட நிறுவனத்தின் வலைத்தளத்திற்கு மதிப்புமிக்க கூடுதலாகும். சாத்தியமான வாடிக்கையாளர்கள் விரைவாகத் தொடர்புகொள்வதை எளிதாக்குவதன் மூலம் இது பயனர் அனுபவத்தை மேம்படுத்துகிறது.

நன்மைகள்

• தொடர்புத் தகவலுக்கான உடனடி அணுகலை வழங்குகிறது.
• மொபைல் சாதனங்களில் பயனர் ஈடுபாட்டை மேம்படுத்துகிறது.
• அனைத்து பயனர்களுக்கான அணுகல்தன்மையை மேம்படுத்துகிறது.

குறைபாடுகள்

• கவனமாக வடிவமைக்கப்படாவிட்டால் இடைமுகத்தில் நெரிசலை ஏற்படுத்தக்கூடும்.
• பக்கத்தில் உள்ள பிற நிலையான கூறுகளுக்கு இடையூறாக இருக்கலாம்.

எச்சரிக்கை

இந்தக் கட்டுரை கல்வி நோக்கத்திற்கானது. ஒதுக்கீட்டு மதிப்புகள் (placeholder values) ஏதேனும் இருந்தால் அவை உண்மையான தரவுகளுடன் மாற்றப்பட வேண்டும், மேலும் வாசகர்கள் கூற்றுகளை நம்புவதற்கு முன் அசல் மூலத்துடன் சரிபார்க்க வேண்டும்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

• ஸ்டிக்கி கால் பார் என்றால் என்ன? — ஸ்டிக்கி கால் பார் என்பது மொபைல் திரையின் அடிப்பகுதியில் உள்ள ஒரு நிலையான உறுப்பாகும், இது பயனர்களை எளிதாகத் தட்டி அழைக்க அனுமதிக்கிறது.
• ஸ்டிக்கி கால் பாரை எவ்வாறு அணுகக்கூடியதாக (accessible) மாற்றுவது? — தெளிவான லேபிள்கள், முறையான markup ஆகியவற்றைப் பயன்படுத்தவும், மேலும் இது முக்கியமான உள்ளடக்கத்தை மறைக்காமல் இருப்பதை உறுதிசெய்யவும்.
• நான் என்னென்ன வடிவமைப்பு பரிசீலனைகளை மனதில் கொள்ள வேண்டும்? — எளிமை, tap target அளவு மற்றும் பிற கூறுகளுடனான மோதலைத் தவிர்ப்பதில் கவனம் செலுத்துங்கள்.
• ஸ்டிக்கி பாரில் இருந்து வரும் அழைப்புகளை என்னால் கண்காணிக்க முடியுமா? — ஆம், அழைப்பு இணைப்பின் மீதான தட்டல்களை அளவிட analytics கருவிகளைப் பயன்படுத்துவதன் மூலம் கண்காணிக்கலாம்.
• ஒவ்வொரு பக்கத்திலும் கால் பாரைக் காண்பிக்க வேண்டியது அவசியமா? — அவசியமில்லை; ஒவ்வொரு பக்கத்தின் சூழலையும் கருத்தில் கொள்ளுங்கள்.
• கால் பார் பிற கூறுகளுடன் ஒன்றன் மேல் ஒன்றாகப் படிந்தால் என்ன நடக்கும்? — குழப்பத்தைத் தடுக்கவும் பயன்பாட்டினை உறுதிப்படுத்தவும் ஒரு அடுக்கு வரிசையை (stacking order) உருவாக்கவும்.

குறிச்சொற்கள்

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